# tandah-marcelle/portfolio architecture

> Architecture diagram of the GitHub repository tandah-marcelle/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/tandah-marcelle/portfolio
- Repository: https://github.com/tandah-marcelle/portfolio

## Overview

This repository contains a portfolio site with a public portfolio view and a Next.js-backed admin/CMS for maintaining its content. The principal workflow is an administrator authenticating, editing portfolio records and uploading media; public visitors view portfolio content assembled from stored records. The tree also contains a separate Vite/React portfolio implementation. Source excerpts confirm selected API-to-database and upload operations, but not frontend fetching or the wiring of unsampled routes, so those links are omitted. The README is empty.

Main entry points: [`nextjs/app/api/admin`](https://github.com/tandah-marcelle/portfolio/tree/main/nextjs/app/api/admin) (Content API Routes), [`nextjs/app/api/auth`](https://github.com/tandah-marcelle/portfolio/tree/main/nextjs/app/api/auth) (Auth Routes), [`nextjs/lib/db.ts`](https://github.com/tandah-marcelle/portfolio/blob/main/nextjs/lib/db.ts) (Portfolio Database), [`nextjs/app/page.tsx`](https://github.com/tandah-marcelle/portfolio/blob/main/nextjs/app/page.tsx) (Next Home)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_public["Public Portfolio"]
  node_next_home["Next Home<br/>[page.tsx]"]
  node_next_sections["Portfolio Sections"]
  node_vite_app["Vite App<br/>[App.tsx]"]
  node_vite_home["Vite Home<br/>[HomePage.tsx]"]
  node_vite_sections["Vite Sections"]
end

subgraph group_admin["Admin CMS"]
  node_admin_page["Admin Dashboard<br/>[page.tsx]"]
  node_login_page["Login Page<br/>[page.tsx]"]
end

subgraph group_api["API and Auth"]
  node_portfolio_api["Portfolio API<br/>[route.ts]"]
  node_admin_routes["Content API Routes"]
  node_auth_routes["Auth Routes"]
  node_route_helpers["Route Helpers<br/>[route-helpers.ts]"]
  node_auth_lib["Session Auth<br/>[auth.ts]"]
end

subgraph group_storage["Data and Media"]
  node_db[("Portfolio Database<br/>[db.ts]")]
  node_cloudinary["Cloudinary Uploads<br/>[cloudinary.ts]"]
end

node_visitor(("Visitor"))
node_admin_user(("Administrator"))
node_cloudinary_service(("Cloudinary"))

node_visitor -->|"opens"| node_next_home
node_next_home -->|"renders"| node_next_sections
node_visitor -.->|"opens"| node_vite_app
node_vite_app -->|"renders"| node_vite_home
node_vite_home -->|"renders"| node_vite_sections
node_admin_user -->|"signs in"| node_login_page
node_admin_user -->|"manages content"| node_admin_page
node_admin_page -->|"submits edits"| node_admin_routes
node_login_page -->|"authenticates"| node_auth_routes
node_admin_routes -->|"checks access"| node_route_helpers
node_admin_routes -->|"writes records"| node_db
node_admin_routes -->|"uploads media"| node_cloudinary
node_cloudinary -->|"stores media"| node_cloudinary_service
node_auth_routes -->|"looks up admin"| node_db
node_auth_routes -->|"creates session"| node_auth_lib
node_portfolio_api -->|"reads records"| node_db

click node_next_home "https://github.com/tandah-marcelle/portfolio/blob/main/nextjs/app/page.tsx"
click node_next_sections "https://github.com/tandah-marcelle/portfolio/tree/main/nextjs/components/sections"
click node_vite_app "https://github.com/tandah-marcelle/portfolio/blob/main/src/App.tsx"
click node_vite_home "https://github.com/tandah-marcelle/portfolio/blob/main/src/views/HomePage.tsx"
click node_vite_sections "https://github.com/tandah-marcelle/portfolio/tree/main/src/components/sections"
click node_admin_page "https://github.com/tandah-marcelle/portfolio/blob/main/nextjs/app/admin/page.tsx"
click node_login_page "https://github.com/tandah-marcelle/portfolio/blob/main/nextjs/app/login/page.tsx"
click node_portfolio_api "https://github.com/tandah-marcelle/portfolio/blob/main/nextjs/app/api/portfolio/route.ts"
click node_admin_routes "https://github.com/tandah-marcelle/portfolio/tree/main/nextjs/app/api/admin"
click node_auth_routes "https://github.com/tandah-marcelle/portfolio/tree/main/nextjs/app/api/auth"
click node_route_helpers "https://github.com/tandah-marcelle/portfolio/blob/main/nextjs/lib/route-helpers.ts"
click node_auth_lib "https://github.com/tandah-marcelle/portfolio/blob/main/nextjs/lib/auth.ts"
click node_db "https://github.com/tandah-marcelle/portfolio/blob/main/nextjs/lib/db.ts"
click node_cloudinary "https://github.com/tandah-marcelle/portfolio/blob/main/nextjs/lib/cloudinary.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_next_home,node_next_sections,node_vite_app,node_vite_home,node_vite_sections toneBlue
class node_admin_page,node_login_page toneAmber
class node_portfolio_api,node_admin_routes,node_auth_routes,node_route_helpers,node_auth_lib toneMint
class node_db,node_cloudinary toneRose
class node_visitor,node_admin_user,node_cloudinary_service toneIndigo
```

## Components

### Public Portfolio

- [Next Home](https://github.com/tandah-marcelle/portfolio/blob/main/nextjs/app/page.tsx): `nextjs/app/page.tsx`
- [Portfolio Sections](https://github.com/tandah-marcelle/portfolio/tree/main/nextjs/components/sections): `nextjs/components/sections`
- [Vite App](https://github.com/tandah-marcelle/portfolio/blob/main/src/App.tsx): `src/App.tsx`
- [Vite Home](https://github.com/tandah-marcelle/portfolio/blob/main/src/views/HomePage.tsx): `src/views/HomePage.tsx`
- [Vite Sections](https://github.com/tandah-marcelle/portfolio/tree/main/src/components/sections): `src/components/sections`

### Admin CMS

- [Admin Dashboard](https://github.com/tandah-marcelle/portfolio/blob/main/nextjs/app/admin/page.tsx): `nextjs/app/admin/page.tsx`
- [Login Page](https://github.com/tandah-marcelle/portfolio/blob/main/nextjs/app/login/page.tsx): `nextjs/app/login/page.tsx`

### API and Auth

- [Portfolio API](https://github.com/tandah-marcelle/portfolio/blob/main/nextjs/app/api/portfolio/route.ts): `nextjs/app/api/portfolio/route.ts`
- [Content API Routes](https://github.com/tandah-marcelle/portfolio/tree/main/nextjs/app/api/admin): `nextjs/app/api/admin`
- [Auth Routes](https://github.com/tandah-marcelle/portfolio/tree/main/nextjs/app/api/auth): `nextjs/app/api/auth`
- [Route Helpers](https://github.com/tandah-marcelle/portfolio/blob/main/nextjs/lib/route-helpers.ts): `nextjs/lib/route-helpers.ts`
- [Session Auth](https://github.com/tandah-marcelle/portfolio/blob/main/nextjs/lib/auth.ts): `nextjs/lib/auth.ts`

### Data and Media

- [Portfolio Database](https://github.com/tandah-marcelle/portfolio/blob/main/nextjs/lib/db.ts): `nextjs/lib/db.ts`
- [Cloudinary Uploads](https://github.com/tandah-marcelle/portfolio/blob/main/nextjs/lib/cloudinary.ts): `nextjs/lib/cloudinary.ts`

### Other components

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

## Connections

- Visitor → Next Home: opens
- Next Home → Portfolio Sections: renders
- Visitor → Vite App: opens
- Vite App → Vite Home: renders
- Vite Home → Vite Sections: renders
- Administrator → Login Page: signs in
- Administrator → Admin Dashboard: manages content
- Admin Dashboard → Content API Routes: submits edits
- Login Page → Auth Routes: authenticates
- Content API Routes → Route Helpers: checks access
- Content API Routes → Portfolio Database: writes records
- Content API Routes → Cloudinary Uploads: uploads media
- Cloudinary Uploads → Cloudinary: stores media
- Auth Routes → Portfolio Database: looks up admin
- Auth Routes → Session Auth: creates session
- Portfolio API → Portfolio Database: reads records