📝 Building This Retro Homepage
_ □ ×
Date: 2026-01-31

How I Built This Retro Homepage

I wanted my personal site to look like it came straight out of 1999, but I still wanted it to work great on modern devices.

The Stack

  • Astro for static site generation
  • Markdown for blog posts and project pages
  • Pure CSS for all the retro effects (no JavaScript frameworks!)
  • Cloudflare Pages for hosting

The Retro Effects

All the fun retro stuff — the marquee text, blinking badges, rainbow text, spinning stars — is done with pure CSS animations. No deprecated HTML tags here!

The beveled panels use a classic technique with border-color to simulate light and shadow, just like Windows 95 UI elements.

Responsive Design

The trick was making it responsive while keeping the retro feel. On desktop, the site looks like a beige computer sitting on a tiled wallpaper. On mobile, it goes full-width but keeps all the personality.

Pretty cool, right?

« Back to Blog