Welcome to HYPERPOP

After hours of development, experimentation, and nostalgia-fueled coding, HYPERPOP is finally here, a fully-featured static blog theme that brings authentic late 90s/early 2000s web aesthetics to modern development.

The Genesis

This project started with a simple question: What if we could recreate the energy of GeoCities and Angelfire, but with modern performance and accessibility?

The answer became HYPERPOP. Not just another "vaporwave" theme with some purple gradients slapped on, but a genuine attempt to capture what made that era of web design so special.

What Makes HYPERPOP Different?

Authentic Design Language

We didn't just add neon colors to a modern blog. We studied the actual design patterns of Y2K websites:

Three-column squished layout - Left sidebar, narrow center content, right sidebar
Widgets everywhere - Hit counters, guestbook links, "Best Viewed In" badges, webring navigation
Windows 98 UI elements - Floating windows with actual minimize/maximize/close buttons
Crunchy images - CSS filters that make images look authentically low-quality
Beveled borders - That iconic 3D look on everything

Modern Foundation

Built on Eleventy (11ty), HYPERPOP is:

⚡ Blazing fast - Static HTML generation
🔒 Secure - No database, no server vulnerabilities
♿ Accessible - WCAG AA compliant with reduced motion support
📱 Responsive - Looks great on all devices
🎨 Pure CSS - All effects done without heavy frameworks

The Tech Stack

Eleventy 2.0 - Static site generator
Nunjucks - Templating engine
Vanilla CSS - 1,500+ lines of hand-crafted styles
Vanilla JavaScript - Minimal, focused interactions
Custom Python scripts - Image scraping and management

Key Features

Visual Effects

Glitch text with RGB chromatic aberration
CRT monitor styling with scan lines and vignette
Holographic borders with rotating gradients
Floating Windows 98 windows displaying random images
"Crunched" image filter for that authentic low-quality feel

Interactive Elements

Custom cursor trail (desktop only)
Client-side search with JSON index
Konami code easter egg (↑ ↑ ↓ ↓ ← → ← → B A)
LocalStorage stats tracking page views
Interactive guestbook with localStorage persistence

Content Management

Blog posts in Markdown
Tag filtering on archive page
RSS feed generation
Automatic sitemap
Service worker for offline support

The Development Journey

Building HYPERPOP taught me several valuable lessons:

Authenticity matters - Users can tell when a design is genuinely inspired vs. superficially styled
Performance and aesthetics aren't enemies - Heavy visual effects can coexist with fast load times
Accessibility is non-negotiable - Even retro designs need to be usable by everyone
Documentation is crucial - Good docs make the difference between a project people use and one they abandon

Image Management System

One of the coolest features is the built-in image scraper that:

Fetches Y2K aesthetic images from Pexels and Pixabay
Uses environment variables to keep API keys secure
Generates an HTML gallery for preview
Saves photographer credits automatically
Applies "crunchy" filters for authentic look

What's Next?

HYPERPOP is open source and ready for you to use, customize, and learn from. Whether you want to:

Build your own Y2K blog
Study how CSS effects are implemented
Learn about static site generation
Contribute improvements

The entire codebase is on GitHub with comprehensive documentation.

Try It Yourself

git clone https://github.com/brennanbrown/hyperpop.git
cd hyperpop
npm install
npm run dev

Visit http://localhost:8080 and experience the digital dreamscape.

Support the Project

If you find HYPERPOP useful, consider:

⭐ Starring the repo on GitHub
☕ Supporting on Ko-fi (ko-fi.com/brennan)
💜 Sponsoring on GitHub (github.com/sponsors/brennanbrown)
📢 Sharing with others who might enjoy it

Your support helps me create more open-source projects and maintain this one!

Welcome to the future of the past. Welcome to HYPERPOP. 🌈✨

Built with 💜 using Eleventy and way too much nostalgia