# kukuro-dev/aaron-portfolio architecture

> Architecture diagram of the GitHub repository kukuro-dev/aaron-portfolio, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/kukuro-dev/aaron-portfolio
- Repository: https://github.com/kukuro-dev/aaron-portfolio

## Overview

This is a Supabase-backed personal portfolio with a public-facing profile and project showcase, plus an admin area for maintaining portfolio content and reviewing contact messages. The public page loads portfolio data and presents it alongside a contact form; administrators authenticate, manage the content categories, and process submitted messages. The contact form writes directly to Supabase, while a separate contact API route also supports message submission. The tree and excerpts establish these paths, but do not expose every admin form’s data operations.

Main entry points: [`lib/supabase.ts`](https://github.com/kukuro-dev/aaron-portfolio/blob/main/lib/supabase.ts) (Supabase client), [`app/page.tsx`](https://github.com/kukuro-dev/aaron-portfolio/blob/main/app/page.tsx) (Portfolio page), [`app/admin`](https://github.com/kukuro-dev/aaron-portfolio/tree/main/app/admin) (Admin pages), [`components/ContactForm.tsx`](https://github.com/kukuro-dev/aaron-portfolio/blob/main/components/ContactForm.tsx) (Contact form)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_public["Public portfolio"]
  node_home["Portfolio page<br/>[page.tsx]"]
  node_contactform["Contact form<br/>[ContactForm.tsx]"]
end

subgraph group_admin["Admin management"]
  node_adminroutes["Admin pages"]
  node_dashboard["Admin dashboard<br/>[page.tsx]"]
  node_profileadmin["Profile editor<br/>[page.tsx]"]
  node_projectadmin["Project management"]
  node_contentadmin["Content management"]
  node_messageadmin["Message inbox<br/>[page.tsx]"]
end

subgraph group_runtime["Application runtime"]
  node_contactapi["Contact API<br/>[route.ts]"]
  node_auth["Admin authentication<br/>[auth.ts]"]
  node_admincheck["Admin authorization<br/>[require-admin.ts]"]
  node_supabaseclient["Supabase client<br/>[supabase.ts]"]
  node_serverclient["Server client<br/>[supabase-server.ts]"]
end

subgraph group_services["Supabase services"]
  node_database[("Supabase database")]
  node_storage[("Supabase storage")]
end

node_visitor(("Portfolio visitor"))
node_adminuser(("Administrator"))

node_visitor -->|"opens"| node_home
node_home -->|"creates client"| node_serverclient
node_serverclient -->|"queries portfolio"| node_database
node_home -->|"renders"| node_contactform
node_contactform -->|"writes message"| node_supabaseclient
node_visitor -->|"submits"| node_contactform
node_visitor -.->|"posts message"| node_contactapi
node_contactapi -->|"inserts message"| node_supabaseclient
node_adminuser -->|"uses"| node_adminroutes
node_adminroutes -->|"authenticates"| node_auth
node_adminroutes -->|"checks access"| node_admincheck
node_dashboard -->|"loads stats"| node_supabaseclient
node_profileadmin -->|"updates profile"| node_supabaseclient
node_profileadmin -->|"uploads files"| node_storage
node_projectadmin -->|"manages projects"| node_supabaseclient
node_contentadmin -->|"manages content"| node_supabaseclient
node_messageadmin -->|"manages messages"| node_supabaseclient
node_supabaseclient -->|"queries and writes"| node_database

click node_home "https://github.com/kukuro-dev/aaron-portfolio/blob/main/app/page.tsx"
click node_contactform "https://github.com/kukuro-dev/aaron-portfolio/blob/main/components/ContactForm.tsx"
click node_contactapi "https://github.com/kukuro-dev/aaron-portfolio/blob/main/app/api/contact/route.ts"
click node_adminroutes "https://github.com/kukuro-dev/aaron-portfolio/tree/main/app/admin"
click node_dashboard "https://github.com/kukuro-dev/aaron-portfolio/blob/main/app/admin/page.tsx"
click node_profileadmin "https://github.com/kukuro-dev/aaron-portfolio/blob/main/app/admin/profile/page.tsx"
click node_projectadmin "https://github.com/kukuro-dev/aaron-portfolio/tree/main/app/admin/projects"
click node_contentadmin "https://github.com/kukuro-dev/aaron-portfolio/tree/main/app/admin"
click node_messageadmin "https://github.com/kukuro-dev/aaron-portfolio/blob/main/app/admin/messages/page.tsx"
click node_auth "https://github.com/kukuro-dev/aaron-portfolio/blob/main/lib/auth.ts"
click node_admincheck "https://github.com/kukuro-dev/aaron-portfolio/blob/main/lib/require-admin.ts"
click node_supabaseclient "https://github.com/kukuro-dev/aaron-portfolio/blob/main/lib/supabase.ts"
click node_serverclient "https://github.com/kukuro-dev/aaron-portfolio/blob/main/lib/supabase-server.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_home,node_contactform toneBlue
class node_adminroutes,node_dashboard,node_profileadmin,node_projectadmin,node_contentadmin,node_messageadmin toneAmber
class node_contactapi,node_auth,node_admincheck,node_supabaseclient,node_serverclient toneMint
class node_database,node_storage toneRose
class node_visitor,node_adminuser toneIndigo
```

## Components

### Public portfolio

- [Portfolio page](https://github.com/kukuro-dev/aaron-portfolio/blob/main/app/page.tsx): `app/page.tsx`
- [Contact form](https://github.com/kukuro-dev/aaron-portfolio/blob/main/components/ContactForm.tsx): `components/ContactForm.tsx`

### Admin management

- [Admin pages](https://github.com/kukuro-dev/aaron-portfolio/tree/main/app/admin): `app/admin`
- [Admin dashboard](https://github.com/kukuro-dev/aaron-portfolio/blob/main/app/admin/page.tsx): `app/admin/page.tsx`
- [Profile editor](https://github.com/kukuro-dev/aaron-portfolio/blob/main/app/admin/profile/page.tsx): `app/admin/profile/page.tsx`
- [Project management](https://github.com/kukuro-dev/aaron-portfolio/tree/main/app/admin/projects): `app/admin/projects`
- [Content management](https://github.com/kukuro-dev/aaron-portfolio/tree/main/app/admin): `app/admin`
- [Message inbox](https://github.com/kukuro-dev/aaron-portfolio/blob/main/app/admin/messages/page.tsx): `app/admin/messages/page.tsx`

### Application runtime

- [Contact API](https://github.com/kukuro-dev/aaron-portfolio/blob/main/app/api/contact/route.ts): `app/api/contact/route.ts`
- [Admin authentication](https://github.com/kukuro-dev/aaron-portfolio/blob/main/lib/auth.ts): `lib/auth.ts`
- [Admin authorization](https://github.com/kukuro-dev/aaron-portfolio/blob/main/lib/require-admin.ts): `lib/require-admin.ts`
- [Supabase client](https://github.com/kukuro-dev/aaron-portfolio/blob/main/lib/supabase.ts): `lib/supabase.ts`
- [Server client](https://github.com/kukuro-dev/aaron-portfolio/blob/main/lib/supabase-server.ts): `lib/supabase-server.ts`

### Supabase services

- **Supabase database**
- **Supabase storage**

### Other components

- **Portfolio visitor**
- **Administrator**

## Connections

- Portfolio visitor → Portfolio page: opens
- Portfolio page → Server client: creates client
- Server client → Supabase database: queries portfolio
- Portfolio page → Contact form: renders
- Contact form → Supabase client: writes message
- Portfolio visitor → Contact form: submits
- Portfolio visitor → Contact API: posts message
- Contact API → Supabase client: inserts message
- Administrator → Admin pages: uses
- Admin pages → Admin authentication: authenticates
- Admin pages → Admin authorization: checks access
- Admin dashboard → Supabase client: loads stats
- Profile editor → Supabase client: updates profile
- Profile editor → Supabase storage: uploads files
- Project management → Supabase client: manages projects
- Content management → Supabase client: manages content
- Message inbox → Supabase client: manages messages
- Supabase client → Supabase database: queries and writes