Add client routing, case studies & lab pages, new UI components, and react-router integration

[JamesDeRaja]

Motivation

• Convert the single-page app into a routed SPA so case studies, lab experiments, and writing can be navigated with stable URLs and internal links.
• Publish XR Performance Stress Lab results and supporting experiment pages to surface measured evidence and visualizations.
• Replace anchor-based navigation with client-side routing and componentized UI for compact results/metrics visuals.

Description

• Added react-router-dom to package.json and updated package-lock.json to include router packages and peers.
• Integrated routing by wrapping the app in BrowserRouter, adding SiteLayout (with Navbar) and route definitions in App.tsx.
• Added a set of new pages and routes under src/caseStudies and src/lab (e.g. XRStressLabCaseStudyPage, OverdrawLabPage, MSAALabPage, InstancingLabPage, FramePacingLabPage, XRFrameTimingLabPage, etc.).
• Introduced several UI components: MiniBars chart, MetricsSummary, updated ResultsTable formatting, and updated WorkCard and Navbar to use Link from react-router-dom.
• Added data files src/data/xrStressLabResults.ts and updated src/data/projects.ts and src/types.ts to use structured impacts and route paths.
• Implemented scroll-to-section behavior in HomePage via query param handling, updated HeroSection, WritingSection, and XRLabSection to link into new pages.
• Minor style change in src/index.css removing a repeated background-image pattern and added vercel.json rewrite to serve index.html for client-side routing.

Testing

• Built the project with npm run build (vite build) to validate compilation and bundling.
• Started the dev server with npm run dev and exercised several routes to confirm pages render and client-side navigation works.

---

Codex Task

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
portfolio	Ready	Preview, Comment	Feb 26, 2026 4:19am