2026 · Design + build
This Website
Astro portfolio with view transitions, a live code playground, and a perfect-Lighthouse budget
AstroTypeScriptReactView Transitions APIGitHub Actions
This site is itself an engineering case study. The constraint: ship the flashy features recruiters remember without sacrificing the fundamentals engineers check.
Under the hood
- Astro islands architecture: the homepage ships almost zero JavaScript; React loads only on the playground for the live code sandbox.
- Native View Transitions: project cards morph into their detail pages with the browser’s View Transitions API. No animation library.
- Hand-rolled interaction: the spring-physics cursor, ⌘K command palette,
and the terminal (type
>anywhere) are small vanilla TypeScript modules, written from scratch. - Theatrical dark mode: the theme toggle sweeps a
clip-pathcircle from your click point using the same View Transitions API. - Accessibility as a feature: full keyboard navigation, visible focus
rings,
aria-liveannouncements, and every animation gated behindprefers-reduced-motion. - Build-time data: the GitHub activity chart is a static SVG rendered at deploy time from the GitHub API. Zero runtime requests, zero trackers.
The source is public, so check the repo to see how it’s put together.