How this site is made.
A personal site. The cadence is whatever I have time for; the topics shift around. This page documents the seams.
Type
Set in Newsreader (display and body) and Inter (UI labels, masthead). Both self-hosted via @fontsource — no fonts.googleapis.com requests on first paint. The two weights most likely to render above the fold are preloaded.
Long-form essays may opt into their own typographic system when the piece warrants it — the Borrowed magic essay sets in Source Serif 4 + Inter Tight + JetBrains Mono, and Flood, floor. scopes Source Serif 4 inside its own layout. The site's home base stays Newsreader.
Stack
Built with Astro and deployed on Cloudflare. Content lives in markdown under src/content/; the schema is enforced by Astro's content collections. The Playground watch chart is a React island, hydrated on viewport entry — the homepage doesn't pay its cost. Open Graph images and favicons are baked at prebuild via satori + @resvg/resvg-js.
Practice
The site is paper, not product. A few things it deliberately doesn't have:
- No analytics beyond Cloudflare Insights.
- No newsletter forms.
- No comments.
- No client-side framework on the homepage. Astro islands are used only where interactivity earns the cost (today: the watch chart).
- No CMS. Content is written and versioned in markdown, alongside the code.
Source
The full source is at github.com/CreamSpinachYo/personal-website. PRs and issues welcome — particularly typo catches and accessibility regressions.