# krishnatiwari005/myportfolio architecture

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

- Interactive diagram: https://gitdiagram.com/krishnatiwari005/myportfolio
- Repository: https://github.com/krishnatiwari005/myportfolio

## Overview

This is a portfolio website with a Supabase-backed content-management portal. Visitors browse portfolio sections and a resume; the admin workflow requests an email OTP, verifies it into a Supabase session, then manages portfolio content. Contact submissions are stored and may trigger an email notification. The README is only the default Next.js starter, so capabilities are inferred from the source tree and database types; unsampled page and manager implementations limit certainty about their exact data wiring.

Main entry points: [`components/auth/AdminPanel.tsx`](https://github.com/krishnatiwari005/myportfolio/blob/main/components/auth/AdminPanel.tsx) (Admin panel), [`components/admin`](https://github.com/krishnatiwari005/myportfolio/tree/main/components/admin) (Content managers), [`lib/supabase/client.ts`](https://github.com/krishnatiwari005/myportfolio/blob/main/lib/supabase/client.ts) (Supabase client), [`components/portfolio/PortfolioClient.tsx`](https://github.com/krishnatiwari005/myportfolio/blob/main/components/portfolio/PortfolioClient.tsx) (Portfolio client)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_public["Public portfolio"]
  node_portfolio_page["Portfolio page<br/>[page.tsx]"]
  node_portfolio_client["Portfolio client"]
  node_portfolio_sections["Portfolio sections"]
  node_resume_page["Resume page<br/>[page.tsx]"]
  node_resume_viewer["Resume viewer<br/>[ResumeViewer.tsx]"]
  node_contact_section["Contact form<br/>[Contact.tsx]"]
end

subgraph group_admin["Admin CMS"]
  node_admin_panel["Admin panel<br/>[AdminPanel.tsx]"]
  node_admin_managers["Content managers"]
  node_otp_ui["OTP flow UI<br/>[useOtpFlow.ts]"]
  node_admin_auth["Admin auth state<br/>[useAdminAuth.ts]"]
end

subgraph group_backend["Backend services"]
  node_otp_send["Send OTP<br/>[route.ts]"]
  node_otp_verify["Verify OTP<br/>[route.ts]"]
  node_contact_api["Contact endpoint<br/>[route.ts]"]
  node_revalidate_api["Revalidation endpoint<br/>[route.ts]"]
  node_email["Gmail SMTP"]
end

subgraph group_data["Content and storage"]
  node_supabase_client["Supabase client<br/>[client.ts]"]
  node_supabase_queries["Content queries<br/>[queries.ts]"]
  node_supabase_db[("Supabase database")]
  node_supabase_auth["Supabase Auth"]
  node_storage[("Supabase Storage")]
end

node_visitor(("Visitor"))
node_admin_user(("Admin"))

node_visitor -->|"opens"| node_portfolio_page
node_portfolio_page -->|"renders"| node_portfolio_client
node_portfolio_client -->|"loads content"| node_supabase_queries
node_supabase_queries -->|"queries through"| node_supabase_client
node_supabase_client -->|"reads"| node_supabase_db
node_portfolio_client -->|"renders"| node_portfolio_sections
node_visitor -->|"opens"| node_resume_page
node_resume_page -->|"renders"| node_resume_viewer
node_visitor -->|"submits message"| node_contact_section
node_contact_section -->|"posts message"| node_contact_api
node_contact_api -->|"stores message"| node_supabase_db
node_contact_api -.->|"sends notification"| node_email
node_admin_user -->|"opens"| node_admin_panel
node_admin_panel -->|"starts sign-in"| node_otp_ui
node_otp_ui -->|"requests code"| node_otp_send
node_otp_send -->|"manages codes"| node_supabase_db
node_otp_send -->|"emails code"| node_email
node_otp_ui -->|"submits code"| node_otp_verify
node_otp_verify -->|"checks code"| node_supabase_db
node_otp_verify -->|"generates link"| node_supabase_auth
node_admin_panel -->|"tracks session"| node_admin_auth
node_admin_auth -->|"uses auth"| node_supabase_client
node_admin_panel -->|"opens management"| node_admin_managers
node_admin_managers -->|"reads and writes"| node_supabase_client
node_admin_managers -.->|"uploads assets"| node_storage
node_admin_managers -->|"requests refresh"| node_revalidate_api
node_revalidate_api -->|"revalidates path"| node_portfolio_page

click node_portfolio_page "https://github.com/krishnatiwari005/myportfolio/blob/main/app/page.tsx"
click node_portfolio_client "https://github.com/krishnatiwari005/myportfolio/blob/main/components/portfolio/PortfolioClient.tsx"
click node_portfolio_sections "https://github.com/krishnatiwari005/myportfolio/tree/main/components/portfolio"
click node_resume_page "https://github.com/krishnatiwari005/myportfolio/blob/main/app/resume/page.tsx"
click node_resume_viewer "https://github.com/krishnatiwari005/myportfolio/blob/main/components/portfolio/ResumeViewer.tsx"
click node_contact_section "https://github.com/krishnatiwari005/myportfolio/blob/main/components/portfolio/Contact.tsx"
click node_admin_panel "https://github.com/krishnatiwari005/myportfolio/blob/main/components/auth/AdminPanel.tsx"
click node_admin_managers "https://github.com/krishnatiwari005/myportfolio/tree/main/components/admin"
click node_otp_ui "https://github.com/krishnatiwari005/myportfolio/blob/main/hooks/useOtpFlow.ts"
click node_admin_auth "https://github.com/krishnatiwari005/myportfolio/blob/main/hooks/useAdminAuth.ts"
click node_otp_send "https://github.com/krishnatiwari005/myportfolio/blob/main/app/api/auth/send-otp/route.ts"
click node_otp_verify "https://github.com/krishnatiwari005/myportfolio/blob/main/app/api/auth/verify-otp/route.ts"
click node_contact_api "https://github.com/krishnatiwari005/myportfolio/blob/main/app/api/contact/route.ts"
click node_revalidate_api "https://github.com/krishnatiwari005/myportfolio/blob/main/app/api/revalidate/route.ts"
click node_supabase_client "https://github.com/krishnatiwari005/myportfolio/blob/main/lib/supabase/client.ts"
click node_supabase_queries "https://github.com/krishnatiwari005/myportfolio/blob/main/lib/supabase/queries.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_portfolio_page,node_portfolio_client,node_portfolio_sections,node_resume_page,node_resume_viewer,node_contact_section toneBlue
class node_admin_panel,node_admin_managers,node_otp_ui,node_admin_auth toneAmber
class node_otp_send,node_otp_verify,node_contact_api,node_revalidate_api,node_email toneMint
class node_supabase_client,node_supabase_queries,node_supabase_db,node_supabase_auth,node_storage toneRose
class node_visitor,node_admin_user toneIndigo
```

## Components

### Public portfolio

- [Portfolio page](https://github.com/krishnatiwari005/myportfolio/blob/main/app/page.tsx): `app/page.tsx`
- [Portfolio client](https://github.com/krishnatiwari005/myportfolio/blob/main/components/portfolio/PortfolioClient.tsx): `components/portfolio/PortfolioClient.tsx`
- [Portfolio sections](https://github.com/krishnatiwari005/myportfolio/tree/main/components/portfolio): `components/portfolio`
- [Resume page](https://github.com/krishnatiwari005/myportfolio/blob/main/app/resume/page.tsx): `app/resume/page.tsx`
- [Resume viewer](https://github.com/krishnatiwari005/myportfolio/blob/main/components/portfolio/ResumeViewer.tsx): `components/portfolio/ResumeViewer.tsx`
- [Contact form](https://github.com/krishnatiwari005/myportfolio/blob/main/components/portfolio/Contact.tsx): `components/portfolio/Contact.tsx`

### Admin CMS

- [Admin panel](https://github.com/krishnatiwari005/myportfolio/blob/main/components/auth/AdminPanel.tsx): `components/auth/AdminPanel.tsx`
- [Content managers](https://github.com/krishnatiwari005/myportfolio/tree/main/components/admin): `components/admin`
- [OTP flow UI](https://github.com/krishnatiwari005/myportfolio/blob/main/hooks/useOtpFlow.ts): `hooks/useOtpFlow.ts`
- [Admin auth state](https://github.com/krishnatiwari005/myportfolio/blob/main/hooks/useAdminAuth.ts): `hooks/useAdminAuth.ts`

### Backend services

- [Send OTP](https://github.com/krishnatiwari005/myportfolio/blob/main/app/api/auth/send-otp/route.ts): `app/api/auth/send-otp/route.ts`
- [Verify OTP](https://github.com/krishnatiwari005/myportfolio/blob/main/app/api/auth/verify-otp/route.ts): `app/api/auth/verify-otp/route.ts`
- [Contact endpoint](https://github.com/krishnatiwari005/myportfolio/blob/main/app/api/contact/route.ts): `app/api/contact/route.ts`
- [Revalidation endpoint](https://github.com/krishnatiwari005/myportfolio/blob/main/app/api/revalidate/route.ts): `app/api/revalidate/route.ts`
- **Gmail SMTP**

### Content and storage

- [Supabase client](https://github.com/krishnatiwari005/myportfolio/blob/main/lib/supabase/client.ts): `lib/supabase/client.ts`
- [Content queries](https://github.com/krishnatiwari005/myportfolio/blob/main/lib/supabase/queries.ts): `lib/supabase/queries.ts`
- **Supabase database**
- **Supabase Auth**
- **Supabase Storage**

### Other components

- **Visitor**
- **Admin**

## Connections

- Visitor → Portfolio page: opens
- Portfolio page → Portfolio client: renders
- Portfolio client → Content queries: loads content
- Content queries → Supabase client: queries through
- Supabase client → Supabase database: reads
- Portfolio client → Portfolio sections: renders
- Visitor → Resume page: opens
- Resume page → Resume viewer: renders
- Visitor → Contact form: submits message
- Contact form → Contact endpoint: posts message
- Contact endpoint → Supabase database: stores message
- Contact endpoint → Gmail SMTP: sends notification
- Admin → Admin panel: opens
- Admin panel → OTP flow UI: starts sign-in
- OTP flow UI → Send OTP: requests code
- Send OTP → Supabase database: manages codes
- Send OTP → Gmail SMTP: emails code
- OTP flow UI → Verify OTP: submits code
- Verify OTP → Supabase database: checks code
- Verify OTP → Supabase Auth: generates link
- Admin panel → Admin auth state: tracks session
- Admin auth state → Supabase client: uses auth
- Admin panel → Content managers: opens management
- Content managers → Supabase client: reads and writes
- Content managers → Supabase Storage: uploads assets
- Content managers → Revalidation endpoint: requests refresh
- Revalidation endpoint → Portfolio page: revalidates path