# parthchittalwar/portfolio architecture

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

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

## Overview

#### Purpose and Runtime
This is a static, client-rendered personal portfolio. React 18 + TypeScript runs through Vite; Tailwind CSS provides styling, Framer Motion handles animation, and React Three Fiber/Three.js powers optional 3D visuals. It is deployable to static hosts, with deployment rules present for Netlify and Vercel: `netlify.toml`, `vercel.json`, and `public/_redirects`.

#### Bootstrap and Application Shell
The browser entry point is `src/main.tsx`, which mounts the top-level application in `src/App.tsx`. The shared page shell in `src/components/layout/Layout.tsx` composes navigation, footer, responsive menu, page transitions, and cross-page UI. Global visual defaults live in `src/styles/globals.css`.

#### Routing and Page Boundaries
Client-side route definitions are centralized in `src/router/index.tsx`, with route constants in `src/constants/routes.ts`. The application separates the single-page portfolio landing view from content/detail routes: `src/pages/Home.tsx`, `src/pages/ProjectDetail.tsx`, `src/pages/BlogPost.tsx`, plus `src/pages/NotFound.tsx`. Static-host redirect configuration must preserve SPA deep-link behavior.

#### Home Composition and Content Sections
`src/pages/Home.tsx` assembles independently structured portfolio sections: hero, about, skills, journey, projects, certifications, achievements, and contact. Representative section roots include `src/sections/Hero/index.tsx`, `src/sections/Projects/index.tsx`, and `src/sections/Contact/index.tsx`. This keeps presentation modules separate from the route shell while allowing section navigation and scroll-based behavior.

#### Data-Driven Portfolio Content
Portfolio content is local, typed data rather than API-backed CMS data. Projects, blog entries, skills, journey history, certifications, achievements, social links, and site metadata originate in files such as `src/data/projects.ts`, `src/data/blog.ts`, and `src/data/site.ts`; shared domain shapes reside in `src/types/index.ts`. Project listings filter/search this local dataset and project detail pages resolve route parameters against it.

#### Interaction, Accessibility, and Preferences
Cross-cutting UI behavior is implemented through reusable components and hooks: command navigation in `src/components/common/CommandPalette.tsx`, theme state in `src/hooks/useTheme.ts`, and motion/device adaptation in `src/hooks/useReducedMotion.ts` and `src/hooks/useIsMobile.ts`. Accessibility-oriented shell controls include `src/components/common/SkipLink.tsx` and `src/components/common/ErrorBoundary.tsx`. Navigation definitions in `src/constants/navigation.ts` connect layout controls to page or section destinations.

#### 3D and Progressive Enhancement
The hero has a 2D/common canvas boundary and a dedicated 3D implementation: `src/components/common/HeroCanvas.tsx`, `src/components/three/HeroCanvas3D.tsx`, and `src/components/three/HeroScene.tsx`. The 3D layer is intended to be lazy-loaded and can degrade for mobile or constrained environments, keeping core portfolio content independent of WebGL availability.

#### Metadata, Assets, and Build Output
SEO and structured-data behavior is encapsulated in `src/hooks/useDocumentHead.ts`, `src/hooks/useJsonLd.ts`, and `src/utils/seo.ts`; analytics has an isolated integration boundary at `src/utils/analytics.ts`. Static resume and media assets are bundled from `src/assets/documents/resume.pdf` and related asset directories. Production build post-processing occurs in `scripts/postbuild.mjs`.

Main entry points: [`src/router/index.tsx`](https://github.com/parthchittalwar/portfolio/blob/main/src/router/index.tsx) (Route definitions), [`src/App.tsx`](https://github.com/parthchittalwar/portfolio/blob/main/src/App.tsx) (App root), [`src/pages/Home.tsx`](https://github.com/parthchittalwar/portfolio/blob/main/src/pages/Home.tsx) (Home landing page), [`src/data/projects.ts`](https://github.com/parthchittalwar/portfolio/blob/main/src/data/projects.ts) (Portfolio datasets)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Runtime & Build"]
  node_main(("Browser entry<br/>React bootstrap<br/>[main.tsx]"))
  node_postbuild["Build post-processing<br/>build script<br/>[postbuild.mjs]"]
end

subgraph group_app["Application Shell &amp; Routes"]
  node_app_root["App root<br/>React application<br/>[App.tsx]"]
  node_router["Route definitions<br/>client router<br/>[index.tsx]"]
  node_routes["Route constants<br/>route registry<br/>[routes.ts]"]
  node_layout["Shared page shell<br/>layout<br/>[Layout.tsx]"]
  node_globals["Global styles<br/>Tailwind CSS defaults<br/>[globals.css]"]
end

subgraph group_home["Portfolio UI"]
  node_home_page["Home landing page<br/>route page<br/>[Home.tsx]"]
  node_detail_pages["Content detail routes<br/>route pages<br/>[ProjectDetail.tsx]"]
  node_not_found["Not found page<br/>fallback route<br/>[NotFound.tsx]"]
  node_sections["Portfolio sections<br/>section modules<br/>[index.tsx]"]
  node_project_section["Projects section<br/>listing UI<br/>[index.tsx]"]
end

subgraph group_content["Local Content &amp; Metadata"]
  node_local_data[("Portfolio datasets<br/>typed local content<br/>[projects.ts]")]
  node_domain_types["Domain types<br/>TypeScript models<br/>[index.ts]"]
  node_seo["SEO &amp; structured data<br/>document metadata<br/>[useDocumentHead.ts]"]
end

subgraph group_enhancement["Enhancement &amp; Delivery"]
  node_shell_controls["Accessible shell controls<br/>common UI<br/>[CommandPalette.tsx]"]
  node_hero_canvas["Hero canvas boundary<br/>progressive visual UI<br/>[HeroCanvas.tsx]"]
  node_hero_3d["Lazy 3D hero<br/>React Three Fiber scene<br/>[HeroCanvas3D.tsx]"]
  node_analytics["Analytics boundary<br/>integration utility<br/>[analytics.ts]"]
  node_assets["Resume &amp; media assets<br/>static assets<br/>[resume.pdf]"]
  node_static_delivery["Static-host delivery<br/>deploy configuration"]
end

node_main -->|"mounts"| node_app_root
node_app_root -->|"renders"| node_router
node_app_root -->|"applies"| node_globals
node_router -->|"uses"| node_routes
node_router -->|"wraps routes"| node_layout
node_router -->|"maps landing route"| node_home_page
node_router -->|"maps detail routes"| node_detail_pages
node_router -->|"maps fallback"| node_not_found
node_layout -->|"hosts"| node_shell_controls
node_home_page -->|"assembles"| node_sections
node_home_page -->|"includes"| node_project_section
node_sections -->|"uses for hero"| node_hero_canvas
node_hero_canvas -.->|"lazy-loads"| node_hero_3d
node_project_section -->|"filters and searches"| node_local_data
node_detail_pages -->|"resolves content"| node_local_data
node_local_data -->|"conforms to"| node_domain_types
node_app_root -->|"updates document metadata"| node_seo
node_app_root -.->|"integrates"| node_analytics
node_home_page -->|"references"| node_assets
node_static_delivery -.->|"serves deep links to"| node_router
node_postbuild -.->|"prepares production output for"| node_static_delivery

click node_main "https://github.com/parthchittalwar/portfolio/blob/main/src/main.tsx"
click node_app_root "https://github.com/parthchittalwar/portfolio/blob/main/src/App.tsx"
click node_router "https://github.com/parthchittalwar/portfolio/blob/main/src/router/index.tsx"
click node_routes "https://github.com/parthchittalwar/portfolio/blob/main/src/constants/routes.ts"
click node_layout "https://github.com/parthchittalwar/portfolio/blob/main/src/components/layout/Layout.tsx"
click node_globals "https://github.com/parthchittalwar/portfolio/blob/main/src/styles/globals.css"
click node_home_page "https://github.com/parthchittalwar/portfolio/blob/main/src/pages/Home.tsx"
click node_detail_pages "https://github.com/parthchittalwar/portfolio/blob/main/src/pages/ProjectDetail.tsx"
click node_not_found "https://github.com/parthchittalwar/portfolio/blob/main/src/pages/NotFound.tsx"
click node_sections "https://github.com/parthchittalwar/portfolio/blob/main/src/sections/Hero/index.tsx"
click node_project_section "https://github.com/parthchittalwar/portfolio/blob/main/src/sections/Projects/index.tsx"
click node_local_data "https://github.com/parthchittalwar/portfolio/blob/main/src/data/projects.ts"
click node_domain_types "https://github.com/parthchittalwar/portfolio/blob/main/src/types/index.ts"
click node_seo "https://github.com/parthchittalwar/portfolio/blob/main/src/hooks/useDocumentHead.ts"
click node_shell_controls "https://github.com/parthchittalwar/portfolio/blob/main/src/components/common/CommandPalette.tsx"
click node_hero_canvas "https://github.com/parthchittalwar/portfolio/blob/main/src/components/common/HeroCanvas.tsx"
click node_hero_3d "https://github.com/parthchittalwar/portfolio/blob/main/src/components/three/HeroCanvas3D.tsx"
click node_analytics "https://github.com/parthchittalwar/portfolio/blob/main/src/utils/analytics.ts"
click node_assets "https://github.com/parthchittalwar/portfolio/blob/main/src/assets/documents/resume.pdf"
click node_static_delivery "https://github.com/parthchittalwar/portfolio/blob/main/public/_redirects"
click node_postbuild "https://github.com/parthchittalwar/portfolio/blob/main/scripts/postbuild.mjs"

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_postbuild toneBlue
class node_app_root,node_router,node_routes,node_layout,node_globals toneAmber
class node_home_page,node_detail_pages,node_not_found,node_sections,node_project_section toneMint
class node_local_data,node_domain_types,node_seo toneRose
class node_shell_controls,node_hero_canvas,node_hero_3d,node_analytics,node_assets,node_static_delivery toneIndigo
```

## Components

### Runtime & Build

- [Browser entry](https://github.com/parthchittalwar/portfolio/blob/main/src/main.tsx): React bootstrap · `src/main.tsx`
- [Build post-processing](https://github.com/parthchittalwar/portfolio/blob/main/scripts/postbuild.mjs): build script · `scripts/postbuild.mjs`

### Application Shell & Routes

- [App root](https://github.com/parthchittalwar/portfolio/blob/main/src/App.tsx): React application · `src/App.tsx`
- [Route definitions](https://github.com/parthchittalwar/portfolio/blob/main/src/router/index.tsx): client router · `src/router/index.tsx`
- [Route constants](https://github.com/parthchittalwar/portfolio/blob/main/src/constants/routes.ts): route registry · `src/constants/routes.ts`
- [Shared page shell](https://github.com/parthchittalwar/portfolio/blob/main/src/components/layout/Layout.tsx): layout · Composes navigation, footer, responsive menu, transitions, and cross-page UI. · `src/components/layout/Layout.tsx`
- [Global styles](https://github.com/parthchittalwar/portfolio/blob/main/src/styles/globals.css): Tailwind CSS defaults · `src/styles/globals.css`

### Portfolio UI

- [Home landing page](https://github.com/parthchittalwar/portfolio/blob/main/src/pages/Home.tsx): route page · `src/pages/Home.tsx`
- [Content detail routes](https://github.com/parthchittalwar/portfolio/blob/main/src/pages/ProjectDetail.tsx): route pages · Project and blog detail views resolve local content from route parameters. · `src/pages/ProjectDetail.tsx`
- [Not found page](https://github.com/parthchittalwar/portfolio/blob/main/src/pages/NotFound.tsx): fallback route · `src/pages/NotFound.tsx`
- [Portfolio sections](https://github.com/parthchittalwar/portfolio/blob/main/src/sections/Hero/index.tsx): section modules · Hero, projects, contact, and other landing-page sections. · `src/sections/Hero/index.tsx`
- [Projects section](https://github.com/parthchittalwar/portfolio/blob/main/src/sections/Projects/index.tsx): listing UI · Filters and searches local project content. · `src/sections/Projects/index.tsx`

### Local Content & Metadata

- [Portfolio datasets](https://github.com/parthchittalwar/portfolio/blob/main/src/data/projects.ts): typed local content · Projects, blog entries, skills, history, credentials, links, and site metadata. · `src/data/projects.ts`
- [Domain types](https://github.com/parthchittalwar/portfolio/blob/main/src/types/index.ts): TypeScript models · `src/types/index.ts`
- [SEO & structured data](https://github.com/parthchittalwar/portfolio/blob/main/src/hooks/useDocumentHead.ts): document metadata · `src/hooks/useDocumentHead.ts`

### Enhancement & Delivery

- [Accessible shell controls](https://github.com/parthchittalwar/portfolio/blob/main/src/components/common/CommandPalette.tsx): common UI · Command navigation, skip link, error boundary, and preference-aware behavior. · `src/components/common/CommandPalette.tsx`
- [Hero canvas boundary](https://github.com/parthchittalwar/portfolio/blob/main/src/components/common/HeroCanvas.tsx): progressive visual UI · `src/components/common/HeroCanvas.tsx`
- [Lazy 3D hero](https://github.com/parthchittalwar/portfolio/blob/main/src/components/three/HeroCanvas3D.tsx): React Three Fiber scene · Optional WebGL scene that can degrade on mobile or constrained devices. · `src/components/three/HeroCanvas3D.tsx`
- [Analytics boundary](https://github.com/parthchittalwar/portfolio/blob/main/src/utils/analytics.ts): integration utility · `src/utils/analytics.ts`
- [Resume & media assets](https://github.com/parthchittalwar/portfolio/blob/main/src/assets/documents/resume.pdf): static assets · `src/assets/documents/resume.pdf`
- [Static-host delivery](https://github.com/parthchittalwar/portfolio/blob/main/public/_redirects): deploy configuration · Redirect rules preserve SPA deep links on static hosts. · `public/_redirects`

## Connections

- Browser entry → App root: mounts
- App root → Route definitions: renders
- App root → Global styles: applies
- Route definitions → Route constants: uses
- Route definitions → Shared page shell: wraps routes
- Route definitions → Home landing page: maps landing route
- Route definitions → Content detail routes: maps detail routes
- Route definitions → Not found page: maps fallback
- Shared page shell → Accessible shell controls: hosts
- Home landing page → Portfolio sections: assembles
- Home landing page → Projects section: includes
- Portfolio sections → Hero canvas boundary: uses for hero
- Hero canvas boundary → Lazy 3D hero: lazy-loads
- Projects section → Portfolio datasets: filters and searches
- Content detail routes → Portfolio datasets: resolves content
- Portfolio datasets → Domain types: conforms to
- App root → SEO & structured data: updates document metadata
- App root → Analytics boundary: integrates
- Home landing page → Resume & media assets: references
- Static-host delivery → Route definitions: serves deep links to
- Build post-processing → Static-host delivery: prepares production output for