Lighthouse 95+ on all four scores
LCP < 1.5s cold load
WCAG 2.1 AA across all pages
Problem
Most developer portfolios look interchangeable. They cargo-cult the same hero-grid-form template and never demonstrate the craft they claim to ship.
Solution
Build the portfolio as its own case study. Hand-tune every motion variant. Treat accessibility as a feature, not a checkbox. Use type as a system, not a font tag.
Impact
Lighthouse 95+ across Performance, Accessibility, Best Practices, and SEO. WCAG 2.1 AA across every flow. Reduced-motion fallbacks on every animation. A ships-with-the-site accessibility menu users actually use.
What I built
- Motion variants in lib/animations.ts hand-tuned against the 12 principles of animation
- Bespoke UI primitives: MagneticButton, GlassCard, AlchemyText: no off-the-shelf templates
- AccessibilityMenu shipping font-size, line-height, contrast, and reduced-motion controls
- Dynamic imports below the fold keep LCP under 1.5s on cold loads
- Per-route generateMetadata + JSON-LD for AI search engine citations
- Dark mode tuned for AA contrast on every text-on-surface pair
Stack
Next.js 16React 19TypeScriptTailwind CSSFramer Motionshadcn/uiVercel