I rebuilt this site to be a durable playground for ideas rather than a static resume. That meant keeping the stack lean, the UI fast, and wiring in just enough dynamic data to feel "alive" without turning it into a maintenance burden.

Goals

  • Instant first paint (static pages, aggressive caching)
  • Live-ish data for music (Spotify), code (GitHub), and reading (blog metrics) without SSR bloat
  • Consistent interaction language (hover overlays, card pattern, spacing scale)
  • Dark/light with minimal layout shift

Stack Snapshot

  • Next.js (Pages) for simplicity & file‑based routing
  • SWR for client revalidation of API routes (/api/metrics, /api/now-playing, /api/github-profile)
  • Tailwind + a few custom CSS variables (border, overlay, card pad) for predictable design tokens
  • Framer Motion (light) only where motion adds meaning (hero word rotate, subtle fades)

Data Layer

Each dynamic widget hits a tiny API route that normalizes an upstream provider:

  • spotify.ts → now playing + top tracks
  • github routes → profile + repo stats caching stars/forks
  • metrics → aggregates local project count, years coding, etc.

These responses are shape‑stable and small (<2KB). SWR deduping intervals keep network chatter down.

Performance Notes

  • Static export–friendly pages (no mandatory blocking data)
  • All decorative images preloaded only when a sentinel enters view (hero observer)
  • Fonts: single variable system stack fallback + Inter weights subset
  • Gradients & overlays use CSS (no extra DOM wrappers)

Theming

Dark mode is a set of CSS variable flips. Subtle glass surfaces use backdrop-filter only on capable browsers; graceful fallback is a flat color.

Pitfalls Avoided

  • No client state managers: React state + SWR cache is enough
  • Avoided heavyweight chart libs; numbers kept textual
  • Deferred fancy hero effects that hurt CLS (kept it clean)

Future Tweaks

  • Edge function cache layer for Spotify to smooth rate limits
  • MDX for richer post components (callouts, sandboxes)

Shipping small, iterating often, and pruning aggressively has kept the repo sharp. This document is a snapshot—expect the architecture to evolve as I experiment.