# marcusteoqiyang/marcus-portfolio architecture

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

- Interactive diagram: https://gitdiagram.com/marcusteoqiyang/marcus-portfolio
- Repository: https://github.com/marcusteoqiyang/marcus-portfolio

## Overview

This is a portfolio website with a separate admin CMS. Visitors open the portfolio, which loads profile, experience, and project content and presents featured projects, project details, and contact links. Administrators manage portfolio content and themes through authenticated API operations; the server persists changes locally and synchronizes supported data with Supabase. The supplied excerpts confirm these paths and the theme-management and auth flows, but omit much of the admin page and server routing, so uncertain component wiring is not shown.

Main entry points: [`src/pages/Portfolio.tsx`](https://github.com/marcusteoqiyang/marcus-portfolio/blob/main/src/pages/Portfolio.tsx) (Portfolio page), [`src/pages/Admin.tsx`](https://github.com/marcusteoqiyang/marcus-portfolio/blob/main/src/pages/Admin.tsx) (Admin page), [`server/server.ts`](https://github.com/marcusteoqiyang/marcus-portfolio/blob/main/server/server.ts) (Portfolio API), [`src/App.tsx`](https://github.com/marcusteoqiyang/marcus-portfolio/blob/main/src/App.tsx) (App routing)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["Portfolio experience"]
  node_app["App routing<br/>[App.tsx]"]
  node_portfolio["Portfolio page<br/>[Portfolio.tsx]"]
  node_project_details["Project details"]
  node_navigation["Floating navigation<br/>[FloatingNav.tsx]"]
  node_scroll_reveal["Scroll effects<br/>[ScrollReveal.tsx]"]
end

subgraph group_admin["Admin CMS"]
  node_admin_page["Admin page<br/>[Admin.tsx]"]
  node_admin_auth["Admin authentication<br/>[useAdminAuth.ts]"]
  node_portfolio_data["Portfolio editing"]
  node_theme_management["Theme management"]
  node_admin_tabs["CMS tabs"]
  node_admin_modals["Editing dialogs"]
end

subgraph group_backend["API and persistence"]
  node_api["Portfolio API<br/>[server.ts]"]
  node_local_data[("Local JSON data<br/>[db.json]")]
end

subgraph group_cloud["Supabase integration"]
  node_supabase_client["Supabase client<br/>[supabase.ts]"]
  node_supabase_server["Supabase server adapter<br/>[supabase.ts]"]
  node_supabase_store[("Supabase data<br/>[schema.sql]")]
end

node_visitor(("Visitor"))
node_administrator(("Administrator"))

node_visitor -->|"opens site"| node_app
node_administrator -->|"opens admin"| node_app
node_app -->|"routes to"| node_portfolio
node_app -->|"routes to"| node_admin_page
node_portfolio -->|"loads portfolio"| node_supabase_client
node_portfolio -.->|"fallback fetch"| node_api
node_portfolio -->|"renders navigation"| node_navigation
node_portfolio -->|"reveals sections"| node_scroll_reveal
node_portfolio -->|"shows project"| node_project_details
node_admin_auth -->|"auth requests"| node_api
node_portfolio_data -->|"fetches and edits"| node_api
node_theme_management -->|"manages themes"| node_api
node_admin_page -->|"uses auth"| node_admin_auth
node_admin_page -->|"loads CMS data"| node_portfolio_data
node_admin_page -->|"manages appearance"| node_theme_management
node_admin_page -->|"renders tabs"| node_admin_tabs
node_admin_page -->|"opens editors"| node_admin_modals
node_api -->|"reads and writes"| node_local_data
node_api -->|"fetches and syncs"| node_supabase_server
node_supabase_server -->|"reads and writes"| node_supabase_store
node_supabase_client -->|"loads portfolio"| node_supabase_store

click node_app "https://github.com/marcusteoqiyang/marcus-portfolio/blob/main/src/App.tsx"
click node_portfolio "https://github.com/marcusteoqiyang/marcus-portfolio/blob/main/src/pages/Portfolio.tsx"
click node_project_details "https://github.com/marcusteoqiyang/marcus-portfolio/blob/main/src/components/ProjectDetailsModal.tsx"
click node_navigation "https://github.com/marcusteoqiyang/marcus-portfolio/blob/main/src/components/FloatingNav.tsx"
click node_scroll_reveal "https://github.com/marcusteoqiyang/marcus-portfolio/blob/main/src/components/ScrollReveal.tsx"
click node_admin_page "https://github.com/marcusteoqiyang/marcus-portfolio/blob/main/src/pages/Admin.tsx"
click node_admin_auth "https://github.com/marcusteoqiyang/marcus-portfolio/blob/main/src/hooks/admin/useAdminAuth.ts"
click node_portfolio_data "https://github.com/marcusteoqiyang/marcus-portfolio/blob/main/src/hooks/admin/usePortfolioData.ts"
click node_theme_management "https://github.com/marcusteoqiyang/marcus-portfolio/blob/main/src/hooks/admin/useThemeManagement.ts"
click node_admin_tabs "https://github.com/marcusteoqiyang/marcus-portfolio/tree/main/src/components/admin/tabs"
click node_admin_modals "https://github.com/marcusteoqiyang/marcus-portfolio/tree/main/src/components/admin/modals"
click node_api "https://github.com/marcusteoqiyang/marcus-portfolio/blob/main/server/server.ts"
click node_local_data "https://github.com/marcusteoqiyang/marcus-portfolio/blob/main/server/db.json"
click node_supabase_client "https://github.com/marcusteoqiyang/marcus-portfolio/blob/main/src/lib/supabase.ts"
click node_supabase_server "https://github.com/marcusteoqiyang/marcus-portfolio/blob/main/server/supabase.ts"
click node_supabase_store "https://github.com/marcusteoqiyang/marcus-portfolio/blob/main/supabase/schema.sql"

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_app,node_portfolio,node_project_details,node_navigation,node_scroll_reveal toneBlue
class node_admin_page,node_admin_auth,node_portfolio_data,node_theme_management,node_admin_tabs,node_admin_modals toneAmber
class node_api,node_local_data toneMint
class node_supabase_client,node_supabase_server,node_supabase_store toneRose
class node_visitor,node_administrator toneIndigo
```

## Components

### Portfolio experience

- [App routing](https://github.com/marcusteoqiyang/marcus-portfolio/blob/main/src/App.tsx): `src/App.tsx`
- [Portfolio page](https://github.com/marcusteoqiyang/marcus-portfolio/blob/main/src/pages/Portfolio.tsx): `src/pages/Portfolio.tsx`
- [Project details](https://github.com/marcusteoqiyang/marcus-portfolio/blob/main/src/components/ProjectDetailsModal.tsx): `src/components/ProjectDetailsModal.tsx`
- [Floating navigation](https://github.com/marcusteoqiyang/marcus-portfolio/blob/main/src/components/FloatingNav.tsx): `src/components/FloatingNav.tsx`
- [Scroll effects](https://github.com/marcusteoqiyang/marcus-portfolio/blob/main/src/components/ScrollReveal.tsx): `src/components/ScrollReveal.tsx`

### Admin CMS

- [Admin page](https://github.com/marcusteoqiyang/marcus-portfolio/blob/main/src/pages/Admin.tsx): `src/pages/Admin.tsx`
- [Admin authentication](https://github.com/marcusteoqiyang/marcus-portfolio/blob/main/src/hooks/admin/useAdminAuth.ts): `src/hooks/admin/useAdminAuth.ts`
- [Portfolio editing](https://github.com/marcusteoqiyang/marcus-portfolio/blob/main/src/hooks/admin/usePortfolioData.ts): `src/hooks/admin/usePortfolioData.ts`
- [Theme management](https://github.com/marcusteoqiyang/marcus-portfolio/blob/main/src/hooks/admin/useThemeManagement.ts): `src/hooks/admin/useThemeManagement.ts`
- [CMS tabs](https://github.com/marcusteoqiyang/marcus-portfolio/tree/main/src/components/admin/tabs): `src/components/admin/tabs`
- [Editing dialogs](https://github.com/marcusteoqiyang/marcus-portfolio/tree/main/src/components/admin/modals): `src/components/admin/modals`

### API and persistence

- [Portfolio API](https://github.com/marcusteoqiyang/marcus-portfolio/blob/main/server/server.ts): `server/server.ts`
- [Local JSON data](https://github.com/marcusteoqiyang/marcus-portfolio/blob/main/server/db.json): `server/db.json`

### Supabase integration

- [Supabase client](https://github.com/marcusteoqiyang/marcus-portfolio/blob/main/src/lib/supabase.ts): `src/lib/supabase.ts`
- [Supabase server adapter](https://github.com/marcusteoqiyang/marcus-portfolio/blob/main/server/supabase.ts): `server/supabase.ts`
- [Supabase data](https://github.com/marcusteoqiyang/marcus-portfolio/blob/main/supabase/schema.sql): `supabase/schema.sql`

### Other components

- **Visitor**
- **Administrator**

## Connections

- Visitor → App routing: opens site
- Administrator → App routing: opens admin
- App routing → Portfolio page: routes to
- App routing → Admin page: routes to
- Portfolio page → Supabase client: loads portfolio
- Portfolio page → Portfolio API: fallback fetch
- Portfolio page → Floating navigation: renders navigation
- Portfolio page → Scroll effects: reveals sections
- Portfolio page → Project details: shows project
- Admin authentication → Portfolio API: auth requests
- Portfolio editing → Portfolio API: fetches and edits
- Theme management → Portfolio API: manages themes
- Admin page → Admin authentication: uses auth
- Admin page → Portfolio editing: loads CMS data
- Admin page → Theme management: manages appearance
- Admin page → CMS tabs: renders tabs
- Admin page → Editing dialogs: opens editors
- Portfolio API → Local JSON data: reads and writes
- Portfolio API → Supabase server adapter: fetches and syncs
- Supabase server adapter → Supabase data: reads and writes
- Supabase client → Supabase data: loads portfolio