parthchittalwar/portfolio

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.