Portfolio

// Problem

Most developer portfolios are template snapshots: heavy JS bundles, motion libraries pulling 30–80KB of gzip into the critical path, and no evidence behind a performance claim.

// Approach

Treat the site as a small production app — a shared @theme design system (one indigo→violet anchor, layered dark surfaces), SSG-only routes, and measured budgets. Every change must keep the mobile Lighthouse Performance in the 90-or-better band and CLS at or near 0 before it merges.

// Key Decisions

• Removed framer-motion entirely and rebuilt all entrance/scroll motion as pure-CSS @keyframes — cut ~60KB of gzip and dropped TBT, with reveals that paint without waiting on hydration.
• One Tailwind v4 @theme token scale instead of scattered hex values, so spacing, type scale, and color stay consistent across every section.
• next/image with breakpoint-accurate sizes + AVIF/WebP, so mobile never downloads the full-resolution master files.
• CI gate (lint, tsc, jest, Playwright hero regression, npm audit) that reviews every PR before merge.

// Outcome

Mobile Lighthouse: Performance 93, Accessibility 100, Best Practices 100, SEO 100 (audited on the live site via PageSpeed Insights). Accessibility kept AA-clean while the hero renders lazily-rendered text that doesn't wait on JS hydration.

// What I'd Improve Next

• Add 3–5 more case-study routes to cover different tech stacks and outcomes.
• Add a Lighthouse CI badge auto-published from the main branch so the score is verifiable, not just claimed.
• Extract the design tokens into a shared package so a second product site reuses the same system.