# dhaneshvar/dhaneshvar-professional-portfolio architecture

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

- Interactive diagram: https://gitdiagram.com/dhaneshvar/dhaneshvar-professional-portfolio
- Repository: https://github.com/dhaneshvar/dhaneshvar-professional-portfolio

## Overview

#### Purpose and Runtime
This repository is a single-page personal portfolio presented as an AI/mission-control interface. It is a TypeScript React frontend built and served with Vite; no backend, API client, database, or CMS implementation is present. Static deployment support appears in `public/_redirects`, with global styling in `src/index.css` and `src/App.css`.

#### Bootstrap and Application Shell
`src/main.tsx` mounts the React application. `src/App.tsx` is the top-level composition point for site-wide layout, navigation, page selection/routing, visual effects, and analytics. `src/pages/Index.tsx` represents the primary portfolio view, while `src/pages/NotFound.tsx` provides the custom fallback/error view.

#### Portfolio Chapter System
The portfolio is organized as independently rendered “chapters,” allowing each content domain to retain its own visual presentation:
- Landing/contact-oriented control surface: `src/components/chapters/CommandCenter.tsx`, `src/components/chapters/MissionControl.tsx`
- Career and technical profile: `src/components/chapters/CareerTimeline.tsx`, `src/components/chapters/WorkExperience.tsx`, `src/components/chapters/SkillsRadar.tsx`
- Portfolio and public presence: `src/components/chapters/ProjectsVault.tsx`, `src/components/chapters/NetworkHub.tsx`, `src/components/chapters/TechInsights.tsx`
- Personal credentials and interests: `src/components/chapters/AchievementsArmory.tsx`, `src/components/chapters/CertificationsVault.tsx`, `src/components/chapters/PersonalityQuadrant.tsx`

These components are the primary content boundary; portfolio data is likely embedded in presentation components rather than sourced from an external content service.

#### Navigation and Interaction Flow
User navigation begins in the app shell and uses reusable link behavior from `src/components/NavLink.tsx`. Navigation selects or scrolls users through chapter sections; effects provide progress feedback and return navigation through `src/components/effects/ChapterProgress.tsx` and `src/components/effects/ScrollToTop.tsx`. The command-center submodule supplies localized dashboard-style information via `src/components/chapters/command-center/CornerStats.tsx`.

#### Visual Experience Layer
The site’s game/system aesthetic is implemented as opt-in visual and lifecycle overlays around content: `src/components/effects/LoadingScreen.tsx`, `src/components/effects/MatrixRain.tsx`, `src/components/effects/ParticleField.tsx`, `src/components/effects/CustomCursor.tsx`, and `src/components/effects/AchievementNotification.tsx`. This layer should remain separate from chapter content so animation or accessibility changes do not alter portfolio information architecture.

#### Shared UI Foundation
`src/components/ui/` is a broad reusable component library for controls, overlays, layout, feedback, charts, and form primitives. Architectural shared pieces include `src/components/ui/button.tsx`, `src/components/ui/card.tsx`, `src/components/ui/dialog.tsx`, and `src/components/ui/sonner.tsx`. Shared class composition resides in `src/lib/utils.ts`; mobile-specific behavior is isolated in `src/hooks/use-mobile.tsx`.

#### External Services and Delivery Boundaries
Google Analytics integration is isolated at `src/components/analytics/GoogleAnalytics.tsx`, creating the only explicit third-party service boundary in the tree. The application is otherwise client-rendered and static. Build/runtime infrastructure is Vite (`vite.config.ts`), Tailwind CSS (`tailwind.config.ts`), and package-managed React dependencies (`package.json`); deployment redirects are handled by `public/_redirects`.

Main entry points: [`src/App.tsx`](https://github.com/dhaneshvar/dhaneshvar-professional-portfolio/blob/master/src/App.tsx) (Application Shell), [`src/pages/Index.tsx`](https://github.com/dhaneshvar/dhaneshvar-professional-portfolio/blob/master/src/pages/Index.tsx) (Portfolio Page), [`src/main.tsx`](https://github.com/dhaneshvar/dhaneshvar-professional-portfolio/blob/master/src/main.tsx) (React Entry), [`src/components/chapters/CommandCenter.tsx`](https://github.com/dhaneshvar/dhaneshvar-professional-portfolio/blob/master/src/components/chapters/CommandCenter.tsx) (Command Center)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Client Runtime"]
  node_entry["React Entry<br/>bootstrap<br/>[main.tsx]"]
  node_app["Application Shell<br/>React root<br/>[App.tsx]"]
  node_index["Portfolio Page<br/>primary page<br/>[Index.tsx]"]
  node_notfound["Fallback Page<br/>error page<br/>[NotFound.tsx]"]
end

subgraph group_chapters["Portfolio Chapters"]
  node_command["Command Center<br/>chapter<br/>[CommandCenter.tsx]"]
  node_mission["Mission Control<br/>chapter<br/>[MissionControl.tsx]"]
  node_career["Career Profile<br/>chapter set<br/>[CareerTimeline.tsx]"]
  node_portfolio["Portfolio Presence<br/>chapter set<br/>[ProjectsVault.tsx]"]
  node_credentials["Credentials &amp; Interests<br/>chapter set"]
  node_cornerstats["Corner Stats<br/>command-center module<br/>[CornerStats.tsx]"]
end

subgraph group_experience["Experience Layer"]
  node_navigation["Navigation Link<br/>shared navigation<br/>[NavLink.tsx]"]
  node_scroll["Chapter Navigation Effects<br/>interaction effects"]
  node_visuals["Visual Overlays<br/>visual effects<br/>[LoadingScreen.tsx]"]
  node_analytics{{"Google Analytics<br/>third-party integration"}}
  node_ui["Shared UI Library<br/>component foundation<br/>[button.tsx]"]
  node_utils["UI Utilities<br/>shared utility<br/>[utils.ts]"]
end

subgraph group_delivery["Delivery"]
  node_vite{{"Vite Build<br/>build tool<br/>[vite.config.ts]"}}
  node_redirects["Static Redirects<br/>hosting config"]
end

node_vite -->|"builds"| node_entry
node_redirects -.->|"SPA fallback"| node_app
node_entry -->|"mounts"| node_app
node_app -->|"renders primary route"| node_index
node_app -->|"renders fallback"| node_notfound
node_index -->|"composes"| node_command
node_index -->|"composes"| node_mission
node_index -->|"composes"| node_career
node_index -->|"composes"| node_portfolio
node_index -->|"composes"| node_credentials
node_command -->|"includes"| node_cornerstats
node_app -->|"uses"| node_navigation
node_navigation -->|"selects or scrolls sections"| node_index
node_app -->|"adds interaction feedback"| node_scroll
node_app -->|"wraps content"| node_visuals
node_app -->|"tracks client activity"| node_analytics
node_app -->|"uses"| node_ui
node_ui -->|"composes classes"| node_utils

click node_vite "https://github.com/dhaneshvar/dhaneshvar-professional-portfolio/blob/master/vite.config.ts"
click node_redirects "https://github.com/dhaneshvar/dhaneshvar-professional-portfolio/blob/master/public/_redirects"
click node_entry "https://github.com/dhaneshvar/dhaneshvar-professional-portfolio/blob/master/src/main.tsx"
click node_app "https://github.com/dhaneshvar/dhaneshvar-professional-portfolio/blob/master/src/App.tsx"
click node_index "https://github.com/dhaneshvar/dhaneshvar-professional-portfolio/blob/master/src/pages/Index.tsx"
click node_notfound "https://github.com/dhaneshvar/dhaneshvar-professional-portfolio/blob/master/src/pages/NotFound.tsx"
click node_command "https://github.com/dhaneshvar/dhaneshvar-professional-portfolio/blob/master/src/components/chapters/CommandCenter.tsx"
click node_mission "https://github.com/dhaneshvar/dhaneshvar-professional-portfolio/blob/master/src/components/chapters/MissionControl.tsx"
click node_career "https://github.com/dhaneshvar/dhaneshvar-professional-portfolio/blob/master/src/components/chapters/CareerTimeline.tsx"
click node_portfolio "https://github.com/dhaneshvar/dhaneshvar-professional-portfolio/blob/master/src/components/chapters/ProjectsVault.tsx"
click node_credentials "https://github.com/dhaneshvar/dhaneshvar-professional-portfolio/blob/master/src/components/chapters/AchievementsArmory.tsx"
click node_cornerstats "https://github.com/dhaneshvar/dhaneshvar-professional-portfolio/blob/master/src/components/chapters/command-center/CornerStats.tsx"
click node_navigation "https://github.com/dhaneshvar/dhaneshvar-professional-portfolio/blob/master/src/components/NavLink.tsx"
click node_scroll "https://github.com/dhaneshvar/dhaneshvar-professional-portfolio/blob/master/src/components/effects/ChapterProgress.tsx"
click node_visuals "https://github.com/dhaneshvar/dhaneshvar-professional-portfolio/blob/master/src/components/effects/LoadingScreen.tsx"
click node_analytics "https://github.com/dhaneshvar/dhaneshvar-professional-portfolio/blob/master/src/components/analytics/GoogleAnalytics.tsx"
click node_ui "https://github.com/dhaneshvar/dhaneshvar-professional-portfolio/blob/master/src/components/ui/button.tsx"
click node_utils "https://github.com/dhaneshvar/dhaneshvar-professional-portfolio/blob/master/src/lib/utils.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_entry,node_app,node_index,node_notfound toneBlue
class node_command,node_mission,node_career,node_portfolio,node_credentials,node_cornerstats toneAmber
class node_navigation,node_scroll,node_visuals,node_analytics,node_ui,node_utils toneMint
class node_vite,node_redirects toneRose
```

## Components

### Client Runtime

Vite-built React single-page application.

- [React Entry](https://github.com/dhaneshvar/dhaneshvar-professional-portfolio/blob/master/src/main.tsx): bootstrap · `src/main.tsx`
- [Application Shell](https://github.com/dhaneshvar/dhaneshvar-professional-portfolio/blob/master/src/App.tsx): React root · Composes routing, navigation, effects, and analytics. · `src/App.tsx`
- [Portfolio Page](https://github.com/dhaneshvar/dhaneshvar-professional-portfolio/blob/master/src/pages/Index.tsx): primary page · `src/pages/Index.tsx`
- [Fallback Page](https://github.com/dhaneshvar/dhaneshvar-professional-portfolio/blob/master/src/pages/NotFound.tsx): error page · `src/pages/NotFound.tsx`

### Portfolio Chapters

Independently rendered portfolio content domains.

- [Command Center](https://github.com/dhaneshvar/dhaneshvar-professional-portfolio/blob/master/src/components/chapters/CommandCenter.tsx): chapter · Landing and contact control surface. · `src/components/chapters/CommandCenter.tsx`
- [Mission Control](https://github.com/dhaneshvar/dhaneshvar-professional-portfolio/blob/master/src/components/chapters/MissionControl.tsx): chapter · `src/components/chapters/MissionControl.tsx`
- [Career Profile](https://github.com/dhaneshvar/dhaneshvar-professional-portfolio/blob/master/src/components/chapters/CareerTimeline.tsx): chapter set · Timeline, work experience, and skills presentation. · `src/components/chapters/CareerTimeline.tsx`
- [Portfolio Presence](https://github.com/dhaneshvar/dhaneshvar-professional-portfolio/blob/master/src/components/chapters/ProjectsVault.tsx): chapter set · Projects, network, and technical insights. · `src/components/chapters/ProjectsVault.tsx`
- [Credentials & Interests](https://github.com/dhaneshvar/dhaneshvar-professional-portfolio/blob/master/src/components/chapters/AchievementsArmory.tsx): chapter set · Achievements, certifications, and personality content. · `src/components/chapters/AchievementsArmory.tsx`
- [Corner Stats](https://github.com/dhaneshvar/dhaneshvar-professional-portfolio/blob/master/src/components/chapters/command-center/CornerStats.tsx): command-center module · `src/components/chapters/command-center/CornerStats.tsx`

### Experience Layer

Navigation, effects, analytics, and shared UI.

- [Navigation Link](https://github.com/dhaneshvar/dhaneshvar-professional-portfolio/blob/master/src/components/NavLink.tsx): shared navigation · `src/components/NavLink.tsx`
- [Chapter Navigation Effects](https://github.com/dhaneshvar/dhaneshvar-professional-portfolio/blob/master/src/components/effects/ChapterProgress.tsx): interaction effects · Progress feedback and return-to-top behavior. · `src/components/effects/ChapterProgress.tsx`
- [Visual Overlays](https://github.com/dhaneshvar/dhaneshvar-professional-portfolio/blob/master/src/components/effects/LoadingScreen.tsx): visual effects · Loading, matrix, particles, cursor, and achievement effects. · `src/components/effects/LoadingScreen.tsx`
- [Google Analytics](https://github.com/dhaneshvar/dhaneshvar-professional-portfolio/blob/master/src/components/analytics/GoogleAnalytics.tsx): third-party integration · Only explicit external service boundary. · `src/components/analytics/GoogleAnalytics.tsx`
- [Shared UI Library](https://github.com/dhaneshvar/dhaneshvar-professional-portfolio/blob/master/src/components/ui/button.tsx): component foundation · Reusable controls, overlays, feedback, charts, and form primitives. · `src/components/ui/button.tsx`
- [UI Utilities](https://github.com/dhaneshvar/dhaneshvar-professional-portfolio/blob/master/src/lib/utils.ts): shared utility · Class composition and mobile-specific behavior. · `src/lib/utils.ts`

### Delivery

Static build and hosting boundaries.

- [Vite Build](https://github.com/dhaneshvar/dhaneshvar-professional-portfolio/blob/master/vite.config.ts): build tool · `vite.config.ts`
- [Static Redirects](https://github.com/dhaneshvar/dhaneshvar-professional-portfolio/blob/master/public/_redirects): hosting config · `public/_redirects`

## Connections

- Vite Build → React Entry: builds
- Static Redirects → Application Shell: SPA fallback
- React Entry → Application Shell: mounts
- Application Shell → Portfolio Page: renders primary route
- Application Shell → Fallback Page: renders fallback
- Portfolio Page → Command Center: composes
- Portfolio Page → Mission Control: composes
- Portfolio Page → Career Profile: composes
- Portfolio Page → Portfolio Presence: composes
- Portfolio Page → Credentials & Interests: composes
- Command Center → Corner Stats: includes
- Application Shell → Navigation Link: uses
- Navigation Link → Portfolio Page: selects or scrolls sections
- Application Shell → Chapter Navigation Effects: adds interaction feedback
- Application Shell → Visual Overlays: wraps content
- Application Shell → Google Analytics: tracks client activity
- Application Shell → Shared UI Library: uses
- Shared UI Library → UI Utilities: composes classes