# lokesh-81/lokesh.portfolio architecture

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

- Interactive diagram: https://gitdiagram.com/lokesh-81/lokesh.portfolio
- Repository: https://github.com/lokesh-81/lokesh.portfolio

## Overview

This is an interactive personal portfolio with a public-facing discovery path and an authenticated Studio CMS for maintaining its content. The public app routes visitors through profile, work, credentials, skills, experience, testimonials and contact; inquiry submission is a distinct action. Studio authentication leads to dashboard and content-editing tabs, backed by portfolio state with local caching and Supabase persistence. The graph follows documented capabilities where files are unsampled; their internal wiring is not inferred beyond documented ownership.

Main entry points: [`src/App.tsx`](https://github.com/lokesh-81/lokesh.portfolio/blob/main/src/App.tsx) (App Router), [`lib/portfolio-context.tsx`](https://github.com/lokesh-81/lokesh.portfolio/blob/main/lib/portfolio-context.tsx) (Portfolio State), [`src/studio/StudioApp.tsx`](https://github.com/lokesh-81/lokesh.portfolio/blob/main/src/studio/StudioApp.tsx) (Studio Entry), [`src/studio/StudioLayout.tsx`](https://github.com/lokesh-81/lokesh.portfolio/blob/main/src/studio/StudioLayout.tsx) (Studio Layout)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_public["Public Portfolio"]
  node_app["App Router<br/>[App.tsx]"]
  node_dock["Portfolio Dock<br/>[portfolio-dock.tsx]"]
  node_profile["Profile &amp; Hero<br/>[hero.tsx]"]
  node_about["About<br/>[about-section.tsx]"]
  node_works["Projects &amp; Works"]
  node_skills["Skills &amp; Stack<br/>[skills-section.tsx]"]
  node_credentials["Credentials"]
  node_experience["Experience"]
  node_testimonials["Testimonials"]
  node_contact["Contact Form"]
end

subgraph group_content["Portfolio Content"]
  node_content_state["Portfolio State"]
  node_project_data["Project Data<br/>[projects.ts]"]
  node_experience_data["Experience Data<br/>[experience.ts]"]
  node_cert_data["Certification Data<br/>[certifications.ts]"]
  node_tech_data["Technology Data<br/>[tech-stack.ts]"]
end

subgraph group_studio["Studio CMS"]
  node_studio_app["Studio Entry<br/>[StudioApp.tsx]"]
  node_login["Studio Login<br/>[StudioLogin.tsx]"]
  node_layout["Studio Layout<br/>[StudioLayout.tsx]"]
  node_tabs["Content Tabs"]
end

subgraph group_services["Data Services"]
  node_inquiries["Inquiry Handler<br/>[inquiries.ts]"]
  node_language["Localization<br/>[index.tsx]"]
  node_auth["Studio Auth<br/>[studio-auth.ts]"]
  node_supabase[("Supabase<br/>[supabase.ts]")]
  node_firebase["Firebase<br/>[firebase.ts]"]
  node_local_cache[("Local Cache<br/>[supabase.ts]")]
  node_media_store[("Media Storage<br/>[supabase.ts]")]
end

node_visitor(("Visitor"))
node_admin(("Administrator"))

node_visitor -->|"opens site"| node_app
node_app -->|"renders navigation"| node_dock
node_app -->|"renders section"| node_profile
node_app -->|"renders section"| node_about
node_app -->|"renders section"| node_works
node_app -->|"renders section"| node_skills
node_app -->|"renders section"| node_credentials
node_app -->|"renders section"| node_experience
node_app -->|"renders section"| node_testimonials
node_app -->|"renders section"| node_contact
node_dock -->|"selects section"| node_app
node_app -->|"provides portfolio state"| node_content_state
node_app -->|"provides translations"| node_language
node_contact -->|"submits inquiry"| node_inquiries
node_content_state -->|"loads and persists"| node_supabase
node_content_state -->|"caches content"| node_local_cache
node_works -->|"reads projects"| node_project_data
node_experience -->|"reads timeline"| node_experience_data
node_credentials -->|"reads credentials"| node_cert_data
node_skills -->|"reads technologies"| node_tech_data
node_app -->|"routes to studio"| node_studio_app
node_admin -->|"opens studio"| node_studio_app
node_studio_app -->|"renders login"| node_login
node_login -->|"authenticates"| node_auth
node_auth -->|"verifies session"| node_supabase
node_studio_app -->|"renders admin"| node_layout
node_layout -->|"uses portfolio state"| node_content_state
node_layout -->|"dispatches tab"| node_tabs
node_tabs -->|"edits portfolio data"| node_content_state
node_tabs -->|"uploads assets"| node_media_store
node_auth -->|"stores session"| node_local_cache
node_inquiries -.->|"stores inquiry"| node_supabase
node_content_state -.->|"optional integration"| node_firebase

click node_app "https://github.com/lokesh-81/lokesh.portfolio/blob/main/src/App.tsx"
click node_dock "https://github.com/lokesh-81/lokesh.portfolio/blob/main/components/portfolio/portfolio-dock.tsx"
click node_profile "https://github.com/lokesh-81/lokesh.portfolio/blob/main/components/portfolio/hero.tsx"
click node_about "https://github.com/lokesh-81/lokesh.portfolio/blob/main/components/portfolio/about-section.tsx"
click node_works "https://github.com/lokesh-81/lokesh.portfolio/blob/main/components/portfolio/projects-section.tsx"
click node_skills "https://github.com/lokesh-81/lokesh.portfolio/blob/main/components/portfolio/skills-section.tsx"
click node_credentials "https://github.com/lokesh-81/lokesh.portfolio/blob/main/components/portfolio/certifications-section.tsx"
click node_experience "https://github.com/lokesh-81/lokesh.portfolio/blob/main/components/portfolio/experience-section.tsx"
click node_testimonials "https://github.com/lokesh-81/lokesh.portfolio/blob/main/components/portfolio/testimonials-section.tsx"
click node_contact "https://github.com/lokesh-81/lokesh.portfolio/blob/main/components/portfolio/contact-section.tsx"
click node_inquiries "https://github.com/lokesh-81/lokesh.portfolio/blob/main/lib/inquiries.ts"
click node_content_state "https://github.com/lokesh-81/lokesh.portfolio/blob/main/lib/portfolio-context.tsx"
click node_project_data "https://github.com/lokesh-81/lokesh.portfolio/blob/main/lib/data/projects.ts"
click node_experience_data "https://github.com/lokesh-81/lokesh.portfolio/blob/main/lib/data/experience.ts"
click node_cert_data "https://github.com/lokesh-81/lokesh.portfolio/blob/main/lib/data/certifications.ts"
click node_tech_data "https://github.com/lokesh-81/lokesh.portfolio/blob/main/lib/data/tech-stack.ts"
click node_language "https://github.com/lokesh-81/lokesh.portfolio/blob/main/src/i18n/index.tsx"
click node_studio_app "https://github.com/lokesh-81/lokesh.portfolio/blob/main/src/studio/StudioApp.tsx"
click node_login "https://github.com/lokesh-81/lokesh.portfolio/blob/main/src/studio/auth/StudioLogin.tsx"
click node_layout "https://github.com/lokesh-81/lokesh.portfolio/blob/main/src/studio/StudioLayout.tsx"
click node_tabs "https://github.com/lokesh-81/lokesh.portfolio/tree/main/src/studio/tabs"
click node_auth "https://github.com/lokesh-81/lokesh.portfolio/blob/main/lib/studio-auth.ts"
click node_supabase "https://github.com/lokesh-81/lokesh.portfolio/blob/main/lib/supabase.ts"
click node_firebase "https://github.com/lokesh-81/lokesh.portfolio/blob/main/lib/firebase.ts"
click node_local_cache "https://github.com/lokesh-81/lokesh.portfolio/blob/main/lib/supabase.ts"
click node_media_store "https://github.com/lokesh-81/lokesh.portfolio/blob/main/lib/supabase.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_app,node_dock,node_profile,node_about,node_works,node_skills,node_credentials,node_experience,node_testimonials,node_contact toneBlue
class node_content_state,node_project_data,node_experience_data,node_cert_data,node_tech_data toneAmber
class node_studio_app,node_login,node_layout,node_tabs toneMint
class node_inquiries,node_language,node_auth,node_supabase,node_firebase,node_local_cache,node_media_store toneRose
class node_visitor,node_admin toneIndigo
```

## Components

### Public Portfolio

- [App Router](https://github.com/lokesh-81/lokesh.portfolio/blob/main/src/App.tsx): `src/App.tsx`
- [Portfolio Dock](https://github.com/lokesh-81/lokesh.portfolio/blob/main/components/portfolio/portfolio-dock.tsx): `components/portfolio/portfolio-dock.tsx`
- [Profile & Hero](https://github.com/lokesh-81/lokesh.portfolio/blob/main/components/portfolio/hero.tsx): `components/portfolio/hero.tsx`
- [About](https://github.com/lokesh-81/lokesh.portfolio/blob/main/components/portfolio/about-section.tsx): `components/portfolio/about-section.tsx`
- [Projects & Works](https://github.com/lokesh-81/lokesh.portfolio/blob/main/components/portfolio/projects-section.tsx): `components/portfolio/projects-section.tsx`
- [Skills & Stack](https://github.com/lokesh-81/lokesh.portfolio/blob/main/components/portfolio/skills-section.tsx): `components/portfolio/skills-section.tsx`
- [Credentials](https://github.com/lokesh-81/lokesh.portfolio/blob/main/components/portfolio/certifications-section.tsx): `components/portfolio/certifications-section.tsx`
- [Experience](https://github.com/lokesh-81/lokesh.portfolio/blob/main/components/portfolio/experience-section.tsx): `components/portfolio/experience-section.tsx`
- [Testimonials](https://github.com/lokesh-81/lokesh.portfolio/blob/main/components/portfolio/testimonials-section.tsx): `components/portfolio/testimonials-section.tsx`
- [Contact Form](https://github.com/lokesh-81/lokesh.portfolio/blob/main/components/portfolio/contact-section.tsx): `components/portfolio/contact-section.tsx`

### Portfolio Content

- [Portfolio State](https://github.com/lokesh-81/lokesh.portfolio/blob/main/lib/portfolio-context.tsx): `lib/portfolio-context.tsx`
- [Project Data](https://github.com/lokesh-81/lokesh.portfolio/blob/main/lib/data/projects.ts): `lib/data/projects.ts`
- [Experience Data](https://github.com/lokesh-81/lokesh.portfolio/blob/main/lib/data/experience.ts): `lib/data/experience.ts`
- [Certification Data](https://github.com/lokesh-81/lokesh.portfolio/blob/main/lib/data/certifications.ts): `lib/data/certifications.ts`
- [Technology Data](https://github.com/lokesh-81/lokesh.portfolio/blob/main/lib/data/tech-stack.ts): `lib/data/tech-stack.ts`

### Studio CMS

- [Studio Entry](https://github.com/lokesh-81/lokesh.portfolio/blob/main/src/studio/StudioApp.tsx): `src/studio/StudioApp.tsx`
- [Studio Login](https://github.com/lokesh-81/lokesh.portfolio/blob/main/src/studio/auth/StudioLogin.tsx): `src/studio/auth/StudioLogin.tsx`
- [Studio Layout](https://github.com/lokesh-81/lokesh.portfolio/blob/main/src/studio/StudioLayout.tsx): `src/studio/StudioLayout.tsx`
- [Content Tabs](https://github.com/lokesh-81/lokesh.portfolio/tree/main/src/studio/tabs): `src/studio/tabs`

### Data Services

- [Inquiry Handler](https://github.com/lokesh-81/lokesh.portfolio/blob/main/lib/inquiries.ts): `lib/inquiries.ts`
- [Localization](https://github.com/lokesh-81/lokesh.portfolio/blob/main/src/i18n/index.tsx): `src/i18n/index.tsx`
- [Studio Auth](https://github.com/lokesh-81/lokesh.portfolio/blob/main/lib/studio-auth.ts): `lib/studio-auth.ts`
- [Supabase](https://github.com/lokesh-81/lokesh.portfolio/blob/main/lib/supabase.ts): `lib/supabase.ts`
- [Firebase](https://github.com/lokesh-81/lokesh.portfolio/blob/main/lib/firebase.ts): `lib/firebase.ts`
- [Local Cache](https://github.com/lokesh-81/lokesh.portfolio/blob/main/lib/supabase.ts): `lib/supabase.ts`
- [Media Storage](https://github.com/lokesh-81/lokesh.portfolio/blob/main/lib/supabase.ts): `lib/supabase.ts`

### Other components

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

## Connections

- Visitor → App Router: opens site
- App Router → Portfolio Dock: renders navigation
- App Router → Profile & Hero: renders section
- App Router → About: renders section
- App Router → Projects & Works: renders section
- App Router → Skills & Stack: renders section
- App Router → Credentials: renders section
- App Router → Experience: renders section
- App Router → Testimonials: renders section
- App Router → Contact Form: renders section
- Portfolio Dock → App Router: selects section
- App Router → Portfolio State: provides portfolio state
- App Router → Localization: provides translations
- Contact Form → Inquiry Handler: submits inquiry
- Portfolio State → Supabase: loads and persists
- Portfolio State → Local Cache: caches content
- Projects & Works → Project Data: reads projects
- Experience → Experience Data: reads timeline
- Credentials → Certification Data: reads credentials
- Skills & Stack → Technology Data: reads technologies
- App Router → Studio Entry: routes to studio
- Administrator → Studio Entry: opens studio
- Studio Entry → Studio Login: renders login
- Studio Login → Studio Auth: authenticates
- Studio Auth → Supabase: verifies session
- Studio Entry → Studio Layout: renders admin
- Studio Layout → Portfolio State: uses portfolio state
- Studio Layout → Content Tabs: dispatches tab
- Content Tabs → Portfolio State: edits portfolio data
- Content Tabs → Media Storage: uploads assets
- Studio Auth → Local Cache: stores session
- Inquiry Handler → Supabase: stores inquiry
- Portfolio State → Firebase: optional integration