# abhee-adhee/portfolio architecture

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

- Interactive diagram: https://gitdiagram.com/abhee-adhee/portfolio
- Repository: https://github.com/abhee-adhee/portfolio

## Overview

This is a React portfolio site with a gated admin dashboard. A visitor enters the public app, navigates portfolio pages, and views project, experience, skills, and contact content; the shared portfolio context supplies default data and persists editable state. The admin branch provides authentication/session handling and dashboard editing, but the top-level route is currently disabled by a flag. The README is only the Vite template and documents no product capabilities. Edges reflect the shown routing, imports, and calls; several unsampled page and admin details are represented only at their existing directory paths.

Main entry points: [`src/App.jsx`](https://github.com/abhee-adhee/portfolio/blob/main/src/App.jsx) (Public app router), [`src/context/PortfolioDataContext.jsx`](https://github.com/abhee-adhee/portfolio/blob/main/src/context/PortfolioDataContext.jsx) (Portfolio data), [`src/components/PageTransition.jsx`](https://github.com/abhee-adhee/portfolio/blob/main/src/components/PageTransition.jsx) (Page transitions), [`src/main.jsx`](https://github.com/abhee-adhee/portfolio/blob/main/src/main.jsx) (Browser entry)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Application runtime"]
  node_main["Browser entry<br/>[main.jsx]"]
  node_publicapp["Public app router<br/>[App.jsx]"]
end

subgraph group_public["Public portfolio"]
  node_home["Home<br/>[Home.jsx]"]
  node_projects["Project listing<br/>[Projects.jsx]"]
  node_projectdetail["Project details<br/>[ProjectDetail.jsx]"]
  node_about["About<br/>[About.jsx]"]
  node_experience["Experience<br/>[Experience.jsx]"]
  node_contact["Contact<br/>[Contact.jsx]"]
end

subgraph group_content["Portfolio content"]
  node_portfoliocontext["Portfolio data"]
  node_projectsdata["Project records<br/>[projects.js]"]
  node_skillsdata["Skill records<br/>[skills.js]"]
  node_eventsdata["Event records<br/>[events.js]"]
  node_browserstorage[("Browser storage")]
end

subgraph group_admin["Admin dashboard"]
  node_adminapp["Admin router<br/>[AdminApp.jsx]"]
  node_authguard["Admin access guard<br/>[AdminAuthGuard.jsx]"]
  node_session["Session manager"]
  node_dashboard["Content dashboard<br/>[Dashboard.jsx]"]
  node_adminpages["Admin sections"]
end

subgraph group_shared["Shared interaction"]
  node_theme["Theme state<br/>[ThemeContext.jsx]"]
  node_sound["Sound controls<br/>[SoundContext.jsx]"]
  node_soundengine["Sound synthesizer<br/>[soundEngine.js]"]
  node_transitions["Page transitions<br/>[PageTransition.jsx]"]
end

node_visitor(("Visitor"))

node_visitor -.->|"opens site"| node_main
node_main -->|"routes to"| node_publicapp
node_main -->|"provides data"| node_portfoliocontext
node_main -->|"conditionally routes"| node_adminapp
node_publicapp -->|"routes to"| node_home
node_publicapp -->|"routes to"| node_projects
node_publicapp -->|"routes to"| node_projectdetail
node_publicapp -->|"routes to"| node_about
node_publicapp -->|"routes to"| node_experience
node_publicapp -->|"routes to"| node_contact
node_publicapp -->|"provides theme"| node_theme
node_publicapp -->|"provides sound"| node_sound
node_portfoliocontext -->|"loads defaults"| node_projectsdata
node_portfoliocontext -->|"loads defaults"| node_skillsdata
node_portfoliocontext -->|"loads defaults"| node_eventsdata
node_portfoliocontext -->|"reads and writes"| node_browserstorage
node_projects -->|"reads content"| node_portfoliocontext
node_contact -->|"reads content"| node_portfoliocontext
node_projectdetail -->|"reads project"| node_projectsdata
node_home -->|"renders"| node_transitions
node_projects -->|"renders"| node_transitions
node_about -->|"renders"| node_transitions
node_contact -->|"renders"| node_transitions
node_transitions -->|"plays navigation sound"| node_sound
node_sound -->|"dispatches effects"| node_soundengine
node_theme -->|"persists theme"| node_browserstorage
node_adminapp -->|"guards routes"| node_authguard
node_authguard -->|"uses session"| node_session
node_authguard -->|"protects dashboard"| node_dashboard
node_authguard -->|"checks session"| node_browserstorage
node_session -->|"clears auth state"| node_browserstorage
node_dashboard -->|"edits portfolio data"| node_portfoliocontext
node_adminapp -->|"loads sections"| node_adminpages

click node_main "https://github.com/abhee-adhee/portfolio/blob/main/src/main.jsx"
click node_publicapp "https://github.com/abhee-adhee/portfolio/blob/main/src/App.jsx"
click node_adminapp "https://github.com/abhee-adhee/portfolio/blob/main/src/admin/AdminApp.jsx"
click node_home "https://github.com/abhee-adhee/portfolio/blob/main/src/pages/Home.jsx"
click node_projects "https://github.com/abhee-adhee/portfolio/blob/main/src/pages/Projects.jsx"
click node_projectdetail "https://github.com/abhee-adhee/portfolio/blob/main/src/pages/ProjectDetail.jsx"
click node_about "https://github.com/abhee-adhee/portfolio/blob/main/src/pages/About.jsx"
click node_experience "https://github.com/abhee-adhee/portfolio/blob/main/src/pages/Experience.jsx"
click node_contact "https://github.com/abhee-adhee/portfolio/blob/main/src/pages/Contact.jsx"
click node_portfoliocontext "https://github.com/abhee-adhee/portfolio/blob/main/src/context/PortfolioDataContext.jsx"
click node_projectsdata "https://github.com/abhee-adhee/portfolio/blob/main/src/data/projects.js"
click node_skillsdata "https://github.com/abhee-adhee/portfolio/blob/main/src/data/skills.js"
click node_eventsdata "https://github.com/abhee-adhee/portfolio/blob/main/src/data/events.js"
click node_authguard "https://github.com/abhee-adhee/portfolio/blob/main/src/admin/components/auth/AdminAuthGuard.jsx"
click node_session "https://github.com/abhee-adhee/portfolio/blob/main/src/admin/hooks/useSessionManager.js"
click node_dashboard "https://github.com/abhee-adhee/portfolio/blob/main/src/admin/pages/Dashboard.jsx"
click node_adminpages "https://github.com/abhee-adhee/portfolio/tree/main/src/admin/pages"
click node_theme "https://github.com/abhee-adhee/portfolio/blob/main/src/context/ThemeContext.jsx"
click node_sound "https://github.com/abhee-adhee/portfolio/blob/main/src/context/SoundContext.jsx"
click node_soundengine "https://github.com/abhee-adhee/portfolio/blob/main/src/utils/soundEngine.js"
click node_transitions "https://github.com/abhee-adhee/portfolio/blob/main/src/components/PageTransition.jsx"

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_main,node_publicapp toneBlue
class node_home,node_projects,node_projectdetail,node_about,node_experience,node_contact toneAmber
class node_portfoliocontext,node_projectsdata,node_skillsdata,node_eventsdata,node_browserstorage toneMint
class node_adminapp,node_authguard,node_session,node_dashboard,node_adminpages toneRose
class node_theme,node_sound,node_soundengine,node_transitions,node_visitor toneIndigo
```

## Components

### Application runtime

- [Browser entry](https://github.com/abhee-adhee/portfolio/blob/main/src/main.jsx): `src/main.jsx`
- [Public app router](https://github.com/abhee-adhee/portfolio/blob/main/src/App.jsx): `src/App.jsx`

### Public portfolio

- [Home](https://github.com/abhee-adhee/portfolio/blob/main/src/pages/Home.jsx): `src/pages/Home.jsx`
- [Project listing](https://github.com/abhee-adhee/portfolio/blob/main/src/pages/Projects.jsx): `src/pages/Projects.jsx`
- [Project details](https://github.com/abhee-adhee/portfolio/blob/main/src/pages/ProjectDetail.jsx): `src/pages/ProjectDetail.jsx`
- [About](https://github.com/abhee-adhee/portfolio/blob/main/src/pages/About.jsx): `src/pages/About.jsx`
- [Experience](https://github.com/abhee-adhee/portfolio/blob/main/src/pages/Experience.jsx): `src/pages/Experience.jsx`
- [Contact](https://github.com/abhee-adhee/portfolio/blob/main/src/pages/Contact.jsx): `src/pages/Contact.jsx`

### Portfolio content

- [Portfolio data](https://github.com/abhee-adhee/portfolio/blob/main/src/context/PortfolioDataContext.jsx): `src/context/PortfolioDataContext.jsx`
- [Project records](https://github.com/abhee-adhee/portfolio/blob/main/src/data/projects.js): `src/data/projects.js`
- [Skill records](https://github.com/abhee-adhee/portfolio/blob/main/src/data/skills.js): `src/data/skills.js`
- [Event records](https://github.com/abhee-adhee/portfolio/blob/main/src/data/events.js): `src/data/events.js`
- **Browser storage**

### Admin dashboard

- [Admin router](https://github.com/abhee-adhee/portfolio/blob/main/src/admin/AdminApp.jsx): `src/admin/AdminApp.jsx`
- [Admin access guard](https://github.com/abhee-adhee/portfolio/blob/main/src/admin/components/auth/AdminAuthGuard.jsx): `src/admin/components/auth/AdminAuthGuard.jsx`
- [Session manager](https://github.com/abhee-adhee/portfolio/blob/main/src/admin/hooks/useSessionManager.js): `src/admin/hooks/useSessionManager.js`
- [Content dashboard](https://github.com/abhee-adhee/portfolio/blob/main/src/admin/pages/Dashboard.jsx): `src/admin/pages/Dashboard.jsx`
- [Admin sections](https://github.com/abhee-adhee/portfolio/tree/main/src/admin/pages): `src/admin/pages`

### Shared interaction

- [Theme state](https://github.com/abhee-adhee/portfolio/blob/main/src/context/ThemeContext.jsx): `src/context/ThemeContext.jsx`
- [Sound controls](https://github.com/abhee-adhee/portfolio/blob/main/src/context/SoundContext.jsx): `src/context/SoundContext.jsx`
- [Sound synthesizer](https://github.com/abhee-adhee/portfolio/blob/main/src/utils/soundEngine.js): `src/utils/soundEngine.js`
- [Page transitions](https://github.com/abhee-adhee/portfolio/blob/main/src/components/PageTransition.jsx): `src/components/PageTransition.jsx`

### Other components

- **Visitor**

## Connections

- Visitor → Browser entry: opens site
- Browser entry → Public app router: routes to (evidence: `src/main.jsx`)
- Browser entry → Portfolio data: provides data (evidence: `src/main.jsx`)
- Browser entry → Admin router: conditionally routes (evidence: `src/main.jsx`)
- Public app router → Home: routes to (evidence: `src/App.jsx`)
- Public app router → Project listing: routes to (evidence: `src/App.jsx`)
- Public app router → Project details: routes to (evidence: `src/App.jsx`)
- Public app router → About: routes to (evidence: `src/App.jsx`)
- Public app router → Experience: routes to (evidence: `src/App.jsx`)
- Public app router → Contact: routes to (evidence: `src/App.jsx`)
- Public app router → Theme state: provides theme (evidence: `src/App.jsx`)
- Public app router → Sound controls: provides sound (evidence: `src/App.jsx`)
- Portfolio data → Project records: loads defaults (evidence: `src/context/PortfolioDataContext.jsx`)
- Portfolio data → Skill records: loads defaults (evidence: `src/context/PortfolioDataContext.jsx`)
- Portfolio data → Event records: loads defaults (evidence: `src/context/PortfolioDataContext.jsx`)
- Portfolio data → Browser storage: reads and writes (evidence: `src/context/PortfolioDataContext.jsx`)
- Project listing → Portfolio data: reads content (evidence: `src/pages/Projects.jsx`)
- Contact → Portfolio data: reads content (evidence: `src/pages/Contact.jsx`)
- Project details → Project records: reads project (evidence: `src/pages/ProjectDetail.jsx`)
- Home → Page transitions: renders (evidence: `src/pages/Home.jsx`)
- Project listing → Page transitions: renders (evidence: `src/pages/Projects.jsx`)
- About → Page transitions: renders (evidence: `src/pages/About.jsx`)
- Contact → Page transitions: renders (evidence: `src/pages/Contact.jsx`)
- Page transitions → Sound controls: plays navigation sound (evidence: `src/components/PageTransition.jsx`)
- Sound controls → Sound synthesizer: dispatches effects (evidence: `src/context/SoundContext.jsx`)
- Theme state → Browser storage: persists theme (evidence: `src/context/ThemeContext.jsx`)
- Admin router → Admin access guard: guards routes (evidence: `src/admin/AdminApp.jsx`)
- Admin access guard → Session manager: uses session (evidence: `src/admin/components/auth/AdminAuthGuard.jsx`)
- Admin access guard → Content dashboard: protects dashboard
- Admin access guard → Browser storage: checks session (evidence: `src/admin/components/auth/AdminAuthGuard.jsx`)
- Session manager → Browser storage: clears auth state (evidence: `src/admin/hooks/useSessionManager.js`)
- Content dashboard → Portfolio data: edits portfolio data (evidence: `src/admin/pages/Dashboard.jsx`)
- Admin router → Admin sections: loads sections (evidence: `src/admin/AdminApp.jsx`)