# dev-sahad/portfolio-v1 architecture

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

- Interactive diagram: https://gitdiagram.com/dev-sahad/portfolio-v1
- Repository: https://github.com/dev-sahad/portfolio-v1

## Overview

1. **Overall shape**
   - This is a **Next.js App Router** application with two major surfaces: a **public portfolio site** and a **protected admin console**.
   - The repo is structured as a single deployable web app, not a separate frontend/backend split.

2. **Public site**
   - `src/app/page.tsx` is the main landing page, composed from reusable sections in `src/components/sections`.
   - The public experience is built from `Hero`, `About`, `PortfolioShowcase`, and contact-related sections, so the site is primarily content-driven and presentation-focused.

3. **Portfolio content flow**
   - Portfolio data appears to be fetched through `src/hooks/usePortfolio.ts` and `src/lib/portfolioService.ts`.
   - Public listing/detail views live under `src/app/portfolio/[id]/page.tsx`, indicating dynamic routes for individual projects.
   - `PortfolioCard` and `PortfolioShowcase` are the presentation layer for this data.

4. **Comments/contact flow**
   - Contact interaction is split into a form and comments area under `src/components/sections/contact`.
   - `src/hooks/useComments.ts` and `src/lib/commentService.ts` suggest comments are persisted in the backend and read back into the UI.
   - This same data source is also visible in the admin side, which implies a shared moderation/content workflow.

5. **Admin subsystem**
   - The entire admin area is isolated under `src/app/admin`.
   - It includes dedicated pages for **dashboard, login, projects, tech, comments, and certificates**.
   - `src/app/admin/Sidebar.tsx` indicates a persistent admin navigation shell around those management views.

6. **Admin CRUD boundaries**
   - `src/app/admin/projects/[id]/page.tsx` and `src/app/admin/projects/AddProjectModal.tsx` show project management supports both creation and item-level editing.
   - Separate admin pages for tech, certificates, and comments imply each content type is managed independently rather than through one generic CMS screen.

7. **Backend/data layer**
   - `src/lib/supabase.ts` and `src/lib/supabaseServer.ts` show the app uses **Supabase** as its data/auth backend, with both client and server access paths.
   - `backup.sql` suggests the underlying data model is backed by a relational schema, likely for Supabase/Postgres.
   - The architecture therefore centers on the browser and Next.js server components talking directly to Supabase rather than a custom API server.

8. **Authentication and route protection**
   - `src/app/admin/login/page.tsx` is the admin entry point for authentication.
   - `middleware.ts` likely enforces access control for protected admin routes and handles redirects for unauthenticated users.
   - `src/components/RefreshRedirect.tsx` suggests there is additional session/redirect handling after auth state changes.

9. **Shared UI and layout**
   - `src/app/layout.tsx`, `src/components/LayoutWrapper.tsx`, and `src/components/ui/Navbar.tsx` provide the common shell for the public-facing app.
   - `src/app/globals.css` plus Tailwind/PostCSS config imply the UI is styled through utility-first CSS with global overrides where needed.

10. **Experience/animation layer**
   - `AnimatedBackground`, `WelcomeScreen`, and the `band` components indicate a strong visual/interactive layer on top of the content site.
   - `public/assets/kartu.glb` is a 3D asset, so the public experience includes nontrivial graphics/animation content, not just static pages.

11. **Deployment/runtime**
   - `netlify.toml` shows the app is configured for **Netlify deployment**.
   - `next.config.ts` and the presence of `middleware.ts` indicate the app relies on Next.js runtime features such as routing, server-side rendering, and edge-aware request handling.

12. **Architecture summary for diagramming**
   - Think of this repo as a **Next.js presentation app** backed by **Supabase**:
     - Public visitors consume portfolio/content pages and submit contact/comments.
     - Admin users authenticate, then manage projects, tech stack entries, certificates, and comments.
     - Next.js provides routing/layout/protection; Supabase stores content and auth state; static assets and animated components handle the visual experience.

Main entry points: [`src/app/page.tsx`](https://github.com/dev-sahad/portfolio-v1/blob/main/src/app/page.tsx) (Home page), [`src/lib/supabaseServer.ts`](https://github.com/dev-sahad/portfolio-v1/blob/main/src/lib/supabaseServer.ts) (Supabase server), [`src/app/admin/Sidebar.tsx`](https://github.com/dev-sahad/portfolio-v1/blob/main/src/app/admin/Sidebar.tsx) (Admin shell), [`src/components/sections/PortfolioShowcase.tsx`](https://github.com/dev-sahad/portfolio-v1/blob/main/src/components/sections/PortfolioShowcase.tsx) (Portfolio showcase)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_public["Public site"]
  node_home_page["Home page<br/>landing page<br/>[page.tsx]"]
  node_hero_section["Hero<br/>section<br/>[Hero.tsx]"]
  node_about_section["About<br/>section<br/>[About.tsx]"]
  node_portfolio_showcase["Portfolio showcase<br/>section"]
  node_portfolio_card["Portfolio card<br/>card component<br/>[PortfolioCard.tsx]"]
  node_contact_section["Contact area<br/>section<br/>[ContactSection.tsx]"]
  node_contact_form["Contact form<br/>form component<br/>[ContactForm.tsx]"]
  node_comments_section["Comments panel<br/>comments component"]
  node_portfolio_detail["Project page<br/>dynamic route<br/>[page.tsx]"]
  node_animated_background(("Animated background<br/>visual component"))
  node_welcome_screen["Welcome screen<br/>intro component<br/>[WelcomeScreen.tsx]"]
  node_band_ui["Band visuals<br/>ui module<br/>[App.js]"]
  node_portfolio_route["Portfolio route<br/>next route<br/>[page.tsx]"]
end

subgraph group_admin["Admin console"]
  node_admin_shell["Admin shell<br/>navigation shell<br/>[Sidebar.tsx]"]
  node_admin_login["Admin login<br/>auth page<br/>[page.tsx]"]
  node_admin_dashboard["Dashboard<br/>admin page<br/>[page.tsx]"]
  node_admin_projects["Projects<br/>admin page<br/>[page.tsx]"]
  node_admin_project_detail["Project editor<br/>admin page<br/>[page.tsx]"]
  node_add_project_modal["Add project<br/>modal"]
  node_admin_tech["Tech<br/>admin page<br/>[page.tsx]"]
  node_admin_certificates["Certificates<br/>admin page<br/>[page.tsx]"]
  node_admin_comments["Comments<br/>admin page<br/>[page.tsx]"]
end

subgraph group_shared["Shared app"]
  node_app_layout["App layout<br/>next layout<br/>[layout.tsx]"]
  node_use_portfolio(("Portfolio hook<br/>react hook<br/>[usePortfolio.ts]"))
  node_portfolio_service["Portfolio service<br/>data service"]
  node_use_comments(("Comments hook<br/>react hook<br/>[useComments.ts]"))
  node_comment_service["Comment service<br/>data service<br/>[commentService.ts]"]
  node_globals_css["Global styles<br/>[globals.css]"]
end

subgraph group_backend["Backend/runtime"]
  node_supabase_client["Supabase client<br/>backend client<br/>[supabase.ts]"]
  node_supabase_server["Supabase server<br/>backend client<br/>[supabaseServer.ts]"]
  node_middleware{{"Route middleware<br/>auth guard<br/>[middleware.ts]"}}
  node_refresh_redirect(("Redirect helper<br/>auth helper"))
  node_netlify["Netlify deploy<br/>deployment<br/>[netlify.toml]"]
end

node_app_layout -->|"wraps"| node_home_page
node_home_page -->|"composes"| node_hero_section
node_home_page -->|"composes"| node_about_section
node_home_page -->|"composes"| node_portfolio_showcase
node_home_page -->|"composes"| node_contact_section
node_portfolio_showcase -->|"renders"| node_portfolio_card
node_portfolio_showcase -->|"loads"| node_use_portfolio
node_use_portfolio -->|"delegates"| node_portfolio_service
node_portfolio_service -->|"queries"| node_supabase_client
node_portfolio_detail -->|"fetches"| node_portfolio_service
node_contact_section -->|"contains"| node_contact_form
node_contact_section -->|"contains"| node_comments_section
node_comments_section -->|"loads"| node_use_comments
node_contact_form -->|"submits"| node_use_comments
node_use_comments -->|"delegates"| node_comment_service
node_comment_service -->|"writes"| node_supabase_client
node_admin_shell -->|"navigates"| node_admin_dashboard
node_admin_shell -->|"navigates"| node_admin_projects
node_admin_shell -->|"navigates"| node_admin_tech
node_admin_shell -->|"navigates"| node_admin_certificates
node_admin_shell -->|"navigates"| node_admin_comments
node_admin_login -->|"protected by"| node_middleware
node_admin_dashboard -->|"reads"| node_supabase_server
node_admin_projects -->|"reads"| node_supabase_server
node_admin_project_detail -->|"updates"| node_supabase_server
node_add_project_modal -->|"creates"| node_admin_projects
node_admin_tech -->|"updates"| node_supabase_server
node_admin_certificates -->|"updates"| node_supabase_server
node_admin_comments -->|"moderates"| node_supabase_server
node_refresh_redirect -.->|"redirects"| node_admin_login
node_app_layout -->|"styles"| node_globals_css
node_home_page -->|"decorates"| node_animated_background
node_home_page -->|"introduces"| node_welcome_screen
node_home_page -->|"animates"| node_band_ui
node_middleware -->|"authenticates"| node_supabase_server
node_netlify -->|"hosts"| node_middleware

click node_app_layout "https://github.com/dev-sahad/portfolio-v1/blob/main/src/app/layout.tsx"
click node_home_page "https://github.com/dev-sahad/portfolio-v1/blob/main/src/app/page.tsx"
click node_hero_section "https://github.com/dev-sahad/portfolio-v1/blob/main/src/components/sections/Hero.tsx"
click node_about_section "https://github.com/dev-sahad/portfolio-v1/blob/main/src/components/sections/About.tsx"
click node_portfolio_showcase "https://github.com/dev-sahad/portfolio-v1/blob/main/src/components/sections/PortfolioShowcase.tsx"
click node_portfolio_card "https://github.com/dev-sahad/portfolio-v1/blob/main/src/components/sections/PortfolioCard.tsx"
click node_contact_section "https://github.com/dev-sahad/portfolio-v1/blob/main/src/components/sections/contact/ContactSection.tsx"
click node_contact_form "https://github.com/dev-sahad/portfolio-v1/blob/main/src/components/sections/contact/ContactForm.tsx"
click node_comments_section "https://github.com/dev-sahad/portfolio-v1/blob/main/src/components/sections/contact/CommentsSection.tsx"
click node_portfolio_detail "https://github.com/dev-sahad/portfolio-v1/blob/main/src/app/portfolio/[id]/page.tsx"
click node_admin_shell "https://github.com/dev-sahad/portfolio-v1/blob/main/src/app/admin/Sidebar.tsx"
click node_admin_login "https://github.com/dev-sahad/portfolio-v1/blob/main/src/app/admin/login/page.tsx"
click node_admin_dashboard "https://github.com/dev-sahad/portfolio-v1/blob/main/src/app/admin/dashboard/page.tsx"
click node_admin_projects "https://github.com/dev-sahad/portfolio-v1/blob/main/src/app/admin/projects/page.tsx"
click node_admin_project_detail "https://github.com/dev-sahad/portfolio-v1/blob/main/src/app/admin/projects/[id]/page.tsx"
click node_add_project_modal "https://github.com/dev-sahad/portfolio-v1/blob/main/src/app/admin/projects/AddProjectModal.tsx"
click node_admin_tech "https://github.com/dev-sahad/portfolio-v1/blob/main/src/app/admin/tech/page.tsx"
click node_admin_certificates "https://github.com/dev-sahad/portfolio-v1/blob/main/src/app/admin/certificates/page.tsx"
click node_admin_comments "https://github.com/dev-sahad/portfolio-v1/blob/main/src/app/admin/comments/page.tsx"
click node_use_portfolio "https://github.com/dev-sahad/portfolio-v1/blob/main/src/hooks/usePortfolio.ts"
click node_portfolio_service "https://github.com/dev-sahad/portfolio-v1/blob/main/src/lib/portfolioService.ts"
click node_use_comments "https://github.com/dev-sahad/portfolio-v1/blob/main/src/hooks/useComments.ts"
click node_comment_service "https://github.com/dev-sahad/portfolio-v1/blob/main/src/lib/commentService.ts"
click node_supabase_client "https://github.com/dev-sahad/portfolio-v1/blob/main/src/lib/supabase.ts"
click node_supabase_server "https://github.com/dev-sahad/portfolio-v1/blob/main/src/lib/supabaseServer.ts"
click node_middleware "https://github.com/dev-sahad/portfolio-v1/blob/main/middleware.ts"
click node_refresh_redirect "https://github.com/dev-sahad/portfolio-v1/blob/main/src/components/RefreshRedirect.tsx"
click node_globals_css "https://github.com/dev-sahad/portfolio-v1/blob/main/src/app/globals.css"
click node_animated_background "https://github.com/dev-sahad/portfolio-v1/blob/main/src/components/AnimatedBackground.tsx"
click node_welcome_screen "https://github.com/dev-sahad/portfolio-v1/blob/main/src/components/WelcomeScreen.tsx"
click node_band_ui "https://github.com/dev-sahad/portfolio-v1/blob/main/src/components/band/App.js"
click node_portfolio_route "https://github.com/dev-sahad/portfolio-v1/blob/main/src/app/portfolio/[id]/page.tsx"
click node_netlify "https://github.com/dev-sahad/portfolio-v1/blob/main/netlify.toml"

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_page,node_hero_section,node_about_section,node_portfolio_showcase,node_portfolio_card,node_contact_section,node_contact_form,node_comments_section,node_portfolio_detail,node_animated_background,node_welcome_screen,node_band_ui,node_portfolio_route toneBlue
class node_admin_shell,node_admin_login,node_admin_dashboard,node_admin_projects,node_admin_project_detail,node_add_project_modal,node_admin_tech,node_admin_certificates,node_admin_comments toneAmber
class node_app_layout,node_use_portfolio,node_portfolio_service,node_use_comments,node_comment_service,node_globals_css toneMint
class node_supabase_client,node_supabase_server,node_middleware,node_refresh_redirect,node_netlify toneRose
```

## Components

### Public site

Visitor-facing portfolio pages and content sections

- [Home page](https://github.com/dev-sahad/portfolio-v1/blob/main/src/app/page.tsx): landing page · Main public entry page composed from content sections · `src/app/page.tsx`
- [Hero](https://github.com/dev-sahad/portfolio-v1/blob/main/src/components/sections/Hero.tsx): section · Top-of-page introduction and call to action · `src/components/sections/Hero.tsx`
- [About](https://github.com/dev-sahad/portfolio-v1/blob/main/src/components/sections/About.tsx): section · Profile and background content · `src/components/sections/About.tsx`
- [Portfolio showcase](https://github.com/dev-sahad/portfolio-v1/blob/main/src/components/sections/PortfolioShowcase.tsx): section · Featured portfolio listing and entry point to projects · `src/components/sections/PortfolioShowcase.tsx`
- [Portfolio card](https://github.com/dev-sahad/portfolio-v1/blob/main/src/components/sections/PortfolioCard.tsx): card component · Presentation unit for an individual portfolio item · `src/components/sections/PortfolioCard.tsx`
- [Contact area](https://github.com/dev-sahad/portfolio-v1/blob/main/src/components/sections/contact/ContactSection.tsx): section · Public contact and comments entry area · `src/components/sections/contact/ContactSection.tsx`
- [Contact form](https://github.com/dev-sahad/portfolio-v1/blob/main/src/components/sections/contact/ContactForm.tsx): form component · Collects visitor messages and submissions · `src/components/sections/contact/ContactForm.tsx`
- [Comments panel](https://github.com/dev-sahad/portfolio-v1/blob/main/src/components/sections/contact/CommentsSection.tsx): comments component · Displays and manages public comments · `src/components/sections/contact/CommentsSection.tsx`
- [Project page](https://github.com/dev-sahad/portfolio-v1/blob/main/src/app/portfolio/[id]/page.tsx): dynamic route · Dynamic portfolio detail view for a single project · `src/app/portfolio/[id]/page.tsx`
- [Animated background](https://github.com/dev-sahad/portfolio-v1/blob/main/src/components/AnimatedBackground.tsx): visual component · Interactive visual layer for the public site · `src/components/AnimatedBackground.tsx`
- [Welcome screen](https://github.com/dev-sahad/portfolio-v1/blob/main/src/components/WelcomeScreen.tsx): intro component · Intro/overlay experience for the portfolio site · `src/components/WelcomeScreen.tsx`
- [Band visuals](https://github.com/dev-sahad/portfolio-v1/blob/main/src/components/band/App.js): ui module · Animated text and band-style presentation layer · `src/components/band/App.js`
- [Portfolio route](https://github.com/dev-sahad/portfolio-v1/blob/main/src/app/portfolio/[id]/page.tsx): next route · Public dynamic project route set · `src/app/portfolio/[id]/page.tsx`

### Admin console

Protected content management area

- [Admin shell](https://github.com/dev-sahad/portfolio-v1/blob/main/src/app/admin/Sidebar.tsx): navigation shell · Persistent sidebar and layout for admin screens · `src/app/admin/Sidebar.tsx`
- [Admin login](https://github.com/dev-sahad/portfolio-v1/blob/main/src/app/admin/login/page.tsx): auth page · Entry point for administrator sign-in · `src/app/admin/login/page.tsx`
- [Dashboard](https://github.com/dev-sahad/portfolio-v1/blob/main/src/app/admin/dashboard/page.tsx): admin page · Overview landing page for the admin area · `src/app/admin/dashboard/page.tsx`
- [Projects](https://github.com/dev-sahad/portfolio-v1/blob/main/src/app/admin/projects/page.tsx): admin page · Project management list and CRUD surface · `src/app/admin/projects/page.tsx`
- [Project editor](https://github.com/dev-sahad/portfolio-v1/blob/main/src/app/admin/projects/[id]/page.tsx): admin page · Item-level project editing and update view · `src/app/admin/projects/[id]/page.tsx`
- [Add project](https://github.com/dev-sahad/portfolio-v1/blob/main/src/app/admin/projects/AddProjectModal.tsx): modal · Creation flow for new projects · `src/app/admin/projects/AddProjectModal.tsx`
- [Tech](https://github.com/dev-sahad/portfolio-v1/blob/main/src/app/admin/tech/page.tsx): admin page · Management view for technology entries · `src/app/admin/tech/page.tsx`
- [Certificates](https://github.com/dev-sahad/portfolio-v1/blob/main/src/app/admin/certificates/page.tsx): admin page · Management view for certificate entries · `src/app/admin/certificates/page.tsx`
- [Comments](https://github.com/dev-sahad/portfolio-v1/blob/main/src/app/admin/comments/page.tsx): admin page · Moderation and review surface for comments · `src/app/admin/comments/page.tsx`

### Shared app

Layouts, reusable UI, hooks, and services

- [App layout](https://github.com/dev-sahad/portfolio-v1/blob/main/src/app/layout.tsx): next layout · Root application shell and global providers · `src/app/layout.tsx`
- [Portfolio hook](https://github.com/dev-sahad/portfolio-v1/blob/main/src/hooks/usePortfolio.ts): react hook · Client-side portfolio data loading and state · `src/hooks/usePortfolio.ts`
- [Portfolio service](https://github.com/dev-sahad/portfolio-v1/blob/main/src/lib/portfolioService.ts): data service · Portfolio data access layer backed by Supabase · `src/lib/portfolioService.ts`
- [Comments hook](https://github.com/dev-sahad/portfolio-v1/blob/main/src/hooks/useComments.ts): react hook · Client-side comments loading and mutation state · `src/hooks/useComments.ts`
- [Comment service](https://github.com/dev-sahad/portfolio-v1/blob/main/src/lib/commentService.ts): data service · Comments persistence and retrieval layer · `src/lib/commentService.ts`
- [Global styles](https://github.com/dev-sahad/portfolio-v1/blob/main/src/app/globals.css): styles · App-wide styling foundation · `src/app/globals.css`

### Backend/runtime

Auth, data access, routing protection, and deployment runtime

- [Supabase client](https://github.com/dev-sahad/portfolio-v1/blob/main/src/lib/supabase.ts): backend client · Browser-side Supabase access · `src/lib/supabase.ts`
- [Supabase server](https://github.com/dev-sahad/portfolio-v1/blob/main/src/lib/supabaseServer.ts): backend client · Server-side Supabase access for Next.js runtime · `src/lib/supabaseServer.ts`
- [Route middleware](https://github.com/dev-sahad/portfolio-v1/blob/main/middleware.ts): auth guard · Protects admin routes and handles redirects · `middleware.ts`
- [Redirect helper](https://github.com/dev-sahad/portfolio-v1/blob/main/src/components/RefreshRedirect.tsx): auth helper · Session refresh and navigation helper after auth changes · `src/components/RefreshRedirect.tsx`
- [Netlify deploy](https://github.com/dev-sahad/portfolio-v1/blob/main/netlify.toml): deployment · Target hosting and runtime configuration · `netlify.toml`

## Connections

- App layout → Home page: wraps · Root layout renders the main public application surface
- Home page → Hero: composes · Landing page includes the hero section
- Home page → About: composes · Landing page includes the about section
- Home page → Portfolio showcase: composes · Landing page includes portfolio highlights
- Home page → Contact area: composes · Landing page includes the contact area
- Portfolio showcase → Portfolio card: renders · Showcase uses cards to present individual projects
- Portfolio showcase → Portfolio hook: loads · Showcase gets portfolio data through the hook
- Portfolio hook → Portfolio service: delegates · Hook delegates portfolio reads to the service layer
- Portfolio service → Supabase client: queries · Client-side portfolio access uses Supabase
- Project page → Portfolio service: fetches · Dynamic project page reads portfolio content
- Contact area → Contact form: contains · Contact area includes the submission form
- Contact area → Comments panel: contains · Contact area includes the public comments view
- Comments panel → Comments hook: loads · Comments UI relies on the comments hook
- Contact form → Comments hook: submits · Form flow shares the comments data path
- Comments hook → Comment service: delegates · Hook delegates comment persistence to the service layer
- Comment service → Supabase client: writes · Client-side comments access uses Supabase
- Admin shell → Dashboard: navigates · Sidebar organizes access to admin screens
- Admin shell → Projects: navigates · Sidebar links to project management
- Admin shell → Tech: navigates · Sidebar links to tech management
- Admin shell → Certificates: navigates · Sidebar links to certificate management
- Admin shell → Comments: navigates · Sidebar links to comment moderation
- Admin login → Route middleware: protected by · Middleware guards access to admin routes
- Dashboard → Supabase server: reads · Admin views use server-side Supabase access
- Projects → Supabase server: reads · Project management uses server-side data access
- Project editor → Supabase server: updates · Project editor persists changes through server access
- Add project → Projects: creates · Creation modal feeds the projects management flow
- Tech → Supabase server: updates · Tech management uses server-side data access
- Certificates → Supabase server: updates · Certificates management uses server-side data access
- Comments → Supabase server: moderates · Comment moderation uses server-side data access
- Redirect helper → Admin login: redirects · Auth state changes can send users through login flow
- App layout → Global styles: styles · Root layout applies global styles
- Home page → Animated background: decorates · Public experience includes animated visuals
- Home page → Welcome screen: introduces · Public experience includes an intro layer
- Home page → Band visuals: animates · Public experience includes band-style motion/text
- Route middleware → Supabase server: authenticates · Route protection depends on server-side session handling
- Netlify deploy → Route middleware: hosts · Deployment runs the Next.js middleware/runtime