Dev Mode Arcade is a single-page application portfolio that turns a developer’s professional presence into an arcade cabinet experience. Built with React 18, Vite, Framer Motion, and Tailwind CSS, every route is themed as a game screen — from a high-score contact guestbook to boss-fight case studies and coin-op skill displays.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/dev-mode-arcade/llms.txt
Use this file to discover all available pages before exploring further.
Introduction
Learn what Dev Mode Arcade is, how it’s structured, and what makes it tick.
Quickstart
Clone, install, run locally, and customize your own arcade portfolio in minutes.
Project Structure
Explore the Vite build layout, component directories, and static HTML routing.
Design Tokens
Full reference for the arcade neon color palette and Tailwind CSS custom tokens.
What’s Inside
Dev Mode Arcade ships seven themed screens, three reusable UI primitives, a custom animation system, and a static-hosting-friendly Vite build.ArcadeButton
Animated Framer Motion button with four neon color variants and glow effects.
CRT Overlay
Fixed scanline + vignette layer that gives every screen its retro CRT look.
Page Transition
Framer Motion wrapper that plays a brightness-flicker effect between routes.
Arcade UI Components
All seven page components documented with props and customization notes.
Animations
CSS keyframes and Framer Motion patterns used across the portfolio.
Customization
Swap out projects, skills, writing, and personal bio to make it your own.
Tech Stack
| Layer | Technology |
|---|---|
| Framework | React 18 |
| Build tool | Vite |
| Routing | React Router v6 (hash-based) |
| Animation | Framer Motion |
| Styling | Tailwind CSS + custom utilities |
| Fonts | VT323 (pixel) · JetBrains Mono |
| Deployment | Static HTML per route |