How this portfolio was built.
From concept to deploy — the six moves that shaped this site.
Concept & narrative
Every project framed as a chess move, every skill as a piece on the board — a structure for telling a career story instead of listing it.
Architecture
TanStack Start + TanStack Router for file-based routing with SSR, React 19, and Vite as the build pipeline. Supabase sits behind it for any data needs.
Design system
Tailwind CSS v4 with a single oklch-based gold/dark theme defined once in styles.css — light and dark variants share the same tokens, just remapped.
Motion layer
Framer Motion drives reveals, page transitions, and the custom cursor; GSAP + ScrollTrigger handle scroll-scrubbed and timeline-based sequences; Three.js powers the 3D chess scenes.
Content & data
Projects live as typed data in src/data/projects.ts — each one a 'move' with its own notation, year, impact, and tech stack, rendered consistently across the list and detail views.
Performance & SEO
Per-route meta tags, JSON-LD structured data, a generated sitemap and robots.txt, and dynamically generated Open Graph cards for every project — checked against Lighthouse before shipping.
Curious about the theme itself? About the Theme.