Retro Cosmic Arcade is a single-page application portfolio that channels the garish, neon-soaked energy of late-1990s and early-2000s web design — blinking marquees, CRT scanline overlays, chunky pixel borders, and a deep-space color palette — while running entirely on a modern React 18 stack. This page introduces the project’s goals, philosophy, technology choices, and the key features that make it feel like a long-lost GeoCities page that somehow learned React.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/retro-cosmic-arcade/llms.txt
Use this file to discover all available pages before exploring further.
The Y2K Aesthetic Philosophy
The visual language of the internet circa 1999–2002 was defined by constraints: low-resolution screens, limited color palettes, bitmapped fonts, and a sense that every possible pixel should be filled. Retro Cosmic Arcade embraces those constraints deliberately — not as a limitation but as a design system. The dark cosmic background (#060010), acid-cyan glows, magenta highlights, and lime-green health bars are all intentional callbacks to the era of hit counters, guestbooks, and <marquee> tags.
Unlike true retro sites, the project achieves this look through modern tooling: Tailwind CSS utility classes, Framer Motion animations, and a component architecture that keeps the codebase maintainable while the UI looks delightfully chaotic.
Routes
The site has seven pages, each backed by its own static HTML entry point and identified by a thematic name in the navigation bar:| Path | Nav Label |
|---|---|
/ | HOME |
/about | ABOUT |
/projects | PROJECTS |
/skills | STATS |
/writing | JOURNAL |
/case-studies | DEEP DIVES |
/contact | GUESTBOOK |
Color Palette
Seven custom Tailwind tokens define the entire Y2K color system:| Token | Hex | Role |
|---|---|---|
y2k-cyan | #4dffff | Primary accent — link hovers, nav active state |
y2k-magenta | #ff4ad8 | Secondary accent — selection highlight, hover glows |
y2k-lime | #adff2f | Tertiary accent — HP bars, success states |
y2k-black | #060010 | Body background — deep cosmic near-black |
y2k-panel | #150826 | Panel and card backgrounds |
y2k-silver | #d4d0e8 | Default text — cool lavender-tinted white |
y2k-darkSilver | #6b6480 | Muted/secondary text, disabled states |
Technology Stack
| Layer | Technology |
|---|---|
| UI library | React 18 |
| Build tool | Vite |
| Routing | React Router 6 (react-router-dom v6.30.4) |
| Animation | Framer Motion |
| Styling | Tailwind CSS + custom Y2K tokens |
| Fonts | Inter, Major Mono Display, Silkscreen, VT323 (Google Fonts) |
| Deployment target | Any static file host |
Key Features
Hash-Based Routing
Every page is a standalone HTML file. React Router 6 runs inside each page using hash-based routing, making the entire site deployable to GitHub Pages, Netlify, Vercel, or any static CDN with zero server configuration.
Y2K Design System
A cohesive set of custom Tailwind color tokens (
y2k-cyan, y2k-magenta, y2k-lime, y2k-black, y2k-panel) and utility classes (.scanlines, .chrome-bg, .pixel-border-*) encode the retro aesthetic into reusable primitives.CRT Scanline Overlay
A full-viewport
.scanlines CSS overlay simulates a cathode-ray tube effect. The overlay is toggled at runtime via the Footer component, letting visitors switch the effect on or off.Retro UI Components
Eight purpose-built components —
ChromeButton, CursorTrail, HitCounter, MarqueeTicker, PixelHPBar, Polaroid, WebringNav, and Footer — replicate iconic Y2K UI patterns as first-class React components.Cursor Trail
A canvas- or DOM-based cursor trail rendered by the
CursorTrail component adds a sparkle effect reminiscent of early-2000s personal homepages and Flash intros.Pixel HP Bar
PixelHPBar renders an RPG-style health or skill bar using pixel-art styling, used throughout the Skills/Stats page to represent proficiency levels in a uniquely on-brand way.Navigation
Installation
Clone the repo, install dependencies, start the Vite dev server, and have the site running locally in under two minutes.
Project Structure
Understand the multi-page HTML layout, the
components/ directory, and how Vite bundles assets for static hosting.Routing
Deep dive into how
window.__STATIC_PAGE_ROUTE__ and hash-based React Router work together across seven static HTML entry points.Styling
Explore the Y2K design token system, pixel border utilities, CRT effect classes, and the custom Tailwind configuration.
Components
Full reference for all eight components: ChromeButton, CursorTrail, Footer, HitCounter, MarqueeTicker, PixelHPBar, Polaroid, and WebringNav.