Skip to main content

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.

Retro Cosmic Arcade is a fully client-side portfolio SPA that channels the aesthetic of early 2000s web design — complete with CRT scanlines, neon glows, pixel-art UI elements, and webring navigation. Built on React 18, Vite, React Router 6, Framer Motion, and Tailwind CSS, every component is designed to be reusable and highly customizable.

Installation

Clone the repo, install dependencies, and spin up the dev server in minutes.

Project Structure

Understand how pages, components, and assets are organized.

Component Library

Explore all eight Y2K UI components with props and usage examples.

Customization

Swap colors, fonts, and animations to make the site your own.

​
What’s Inside

Retro Cosmic Arcade ships with eight purpose-built components and seven routed pages, all wired together with hash-based routing for zero-config static hosting.

ChromeButton

Windows 98-style beveled buttons with Framer Motion press animations.

CursorTrail

Animated neon particle trail that follows the mouse pointer.

HitCounter

Segmented LCD display showing a static visitor count.

MarqueeTicker

Infinite scrolling text banner with neon lime styling.

PixelHPBar

Pixel-art health/skill bar with configurable percentage fill.

Polaroid

Draggable project card with rotation and Framer Motion constraints.

WebringNav

Previous/Next/Random navigation linking all seven site sections.

Footer

Site footer with retro badge links and a CRT scanline toggle.

​
Quick Start

1

Clone and install

git clone https://github.com/apursley2012/retro-cosmic-arcade.git
cd retro-cosmic-arcade
npm install
2

Start the dev server

npm run dev
Open http://localhost:5173 to see the site.
3

Build for production

npm run build
Static output lands in dist/. Deploy the folder to any static host.
4

Customize

Edit the Y2K color tokens in tailwind.config.js, swap fonts in src/index.css, and add your own content to each page component.

​
Architecture at a Glance

Routing

Hash-based React Router 6 setup with static HTML pre-rendered entry points per page.

Styling

Tailwind CSS with custom Y2K design tokens, pixel borders, and CRT effects.

Build System

Vite with multi-page entry configuration and ESM output.

Animations

Framer Motion powers drag interactions, hover scales, and cursor particle effects.

Build docs developers (and LLMs) love

Get started for freeTalk to us