Case study

Portfolio Website

This site — rebuilt from a broken template into a typed, data-driven Next.js application.

Problem

The original site was a template: hardcoded JSX content, state-based fake navigation with no URLs, image paths broken in production, fonts that downloaded but never rendered, and placeholder content that did not represent its owner.

Approach

• Migrated to strict TypeScript on the Next.js 15 App Router, with all content extracted into typed data modules — editing the portfolio means editing data, not components.
• Built a semantic design-token system over Tailwind CSS with a committed dark theme and self-hosted Geist typography.
• Rebuilt as a single scrolling page with scroll-spy navigation, an accessible native-dialog project viewer, visible focus rings, and prefers-reduced-motion support.
• Added structured data (schema.org Person), Open Graph assets, a sitemap, robots rules, and Netlify CI deploys captured in netlify.toml.

Outcome

• First-load JavaScript cut from 193 KB to 113 KB; image payload from 10.5 MB to about 0.5 MB.
• Zero console errors or warnings, valid HTML, and clean keyboard navigation.

Stack