Interactive Portfolio Engine
2026- Next.js
- TypeScript
- React Three Fiber
- Tailwind CSS
- GitHub Actions
Role: Sole developer: architecture, design, and implementation.
The portfolio you're looking at, built the way I'd build on a product team: clear architecture, measurable performance, accessibility, and a CI-gated workflow.
Problem
Most portfolios show what someone has shipped, not how they work. I wanted this one to demonstrate the practices a production frontend team relies on, rather than start from a template.
Approach
- Organized the code into feature modules (projects, profile, visuals), each owning its types, data, and components. Pages compose features, and features don't import each other.
- Code-split the React Three Fiber starfield with next/dynamic and ssr: false so Three.js never blocks first paint, and kept all content sections as Server Components that ship no client JavaScript.
- Loaded project content from per-project JSON files with Next 16 Cache Components (use cache, cacheLife, cacheTag), statically prerendered with generateStaticParams.
- Diagnosed a WebGL context-loss bug caused by Next 16 preserving hidden routes with React's <Activity>, traced it into React Three Fiber's source, and fixed it with a keyed remount.
- Built accessibility in from the start: semantic landmarks and heading order, a keyboard-navigable lightbox gallery with focus management, and smooth scrolling that respects prefers-reduced-motion.
- Enforced quality on every change: strict TypeScript, ESLint with no any, Prettier, Husky and lint-staged pre-commit hooks, GitHub Actions CI, and Vercel preview deploys for each pull request.
Outcome
- Every change passes lint, format, and build checks in CI and gets a live preview before it reaches production.