lofi hip hop radio
Lofi Girl · 24/7 chill
Home / Colophon

Colophon.

The tech, decisions, and integrations that make this site tick. Short list, on purpose.

Framework & Hosting
  • Astro 5
    Static-first with islands. Astro components render on the server, React only hydrates where it has to.
    visit ↗
  • React 19
    Reserved for the interactive bits — the bio slider and the social icon row.
    visit ↗
  • Vercel
    Static output with a few SSR routes for Hardcover, GitHub, and Redis view counts.
    visit ↗
  • TypeScript
    Across components, content schemas, and the handful of API routes.
Content
  • Astro Content Collections
    Two collections so far — Thoughts (MDX) and Bookmarks (JSON), both validated with Zod.
  • Shiki
    Syntax highlighting with Catppuccin Latte for light mode and Tokyo Night for dark.
    visit ↗
  • Changelog
    Generated at build time from git log — no manual list to forget about.
    open →
  • RSS
    Auto-generated from the Thoughts collection, sorted newest first.
    open →
Styling & Design
  • Tailwind CSS 4
    Utility-first with a class-based dark mode variant. Custom design tokens live in @theme.
  • Literata
    Serif for body and headings. System sans is used sparingly for UI labels.
    visit ↗
  • View Transitions
    Astro's ClientRouter for smooth page swaps. Dark mode toggle uses a clip-path circle reveal from the click point.
Integrations
  • Hardcover
    GraphQL-powered reading list on the Readings page. Spines render with a cover popup on hover.
    visit ↗
  • Spotify
    Now-playing widget with a spinning vinyl disc. Currently mocked; live OAuth refresh is on the list.
    visit ↗
  • Upstash Redis
    Per-post view counts with stale-while-revalidate caching and a graceful fallback.
    visit ↗
  • GitHub
    Contribution heatmap on the Projects page. Pulled at build via the public contributions API.
Performance & Polish
  • Static output
    Pre-rendered HTML with selective hydration. Only the interactive islands ship JavaScript.
  • Prefetching
    All routes prefetched on hover for near-instant navigation.
  • OG images
    Per-post share previews generated dynamically via @vercel/og.
Inspired by

A lot of what's here started as me trying to replicate something I saw on itsmeray.com and rashadcodes.com , then tweaking until it felt like mine. Both are worth a click.