The Road to Neobrutalism: A Design Retrospective

The site got a rewrite — moved from a generic look to something that actually feels like a tool. We went with Neobrutalism: hard shadows, thick borders, and a high-contrast palette. Here's how it went.

Phase 1: The Foundation Replaced CDN fonts with self-hosted JetBrains Mono (variable WOFF2). Extracted PageHeader and TerminalLine into reusable Astro components. Added safe-area insets and 44px touch targets.

Phase 2: Going Fluid Used clamp() for fluid typography so the type scales between 768px and 1440px without awkward breakpoint jumps.

Phase 3: The Feel Added a tactile :active scale animation on buttons, a custom 404 page, and empty states for all data views.

Phase 4: Under the Hood Set up Vercel immutable cache headers for fonts and assets. Added security headers (X-Content-Type-Options, etc.) and Open Graph tags.

Phase 5: The Final Polish Added a <noscript> fallback, did a full CSS audit to clean up dead styles, and wrote everything down in DESIGN.md.

The Result A site that's faster, cleaner, and looks like it belongs in a terminal. No Tailwind, no React — just CSS and Astro.