Dev Arcade is a React single-page application that turns a developer portfolio into a retro arcade game. Every section of the site is framed as a “level” — complete with pixel fonts, neon glow effects, scanline overlays, and a star-field background — giving developers an unconventional, visually striking way to present their work, skills, and writing to potential employers or clients. If you want a portfolio that stands out from the sea of plain white card layouts, Dev Arcade is built for you.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/dev-arcade/llms.txt
Use this file to discover all available pages before exploring further.
Features
- Retro arcade aesthetic — deep purple color palette with scanline overlays, neon glow drop-shadows, a persistent star-field background, and an animated marquee ticker on the home screen
- 7 gamified pages — Home (“LEVEL 1: START SCREEN”), About (“LEVEL 2: PLAYER PROFILE”), Projects (“LEVEL 3: CARTRIDGE INVENTORY”), Skills (“LEVEL 4: SKILL TREE”), Writing (“LEVEL 5: STRATEGY GUIDES”), Case Studies (“LEVEL 6: BOSS RUSH”), and Contact (“LEVEL 7”)
- Animated page transitions — Framer Motion
AnimatePresencewraps every route change with enter/exit animations so level changes feel like screen wipes - Project cartridge cards — each project renders as a game cartridge with a Framer Motion
whileHover3D tilt effect (rotateX,rotateY,scale) and category filter tabs (ALL, APP, ECOMMERCE, DASHBOARD, SOCIAL) - Interactive skill constellation map — skills are plotted as glowing SVG nodes connected by animated
motion.pathlines; hovering a node reveals its name and level badge - Comic-book strategy guide layout — the Writing page displays blog posts as styled comic-book covers with issue numbers, dates, and a barcode element
- Boss-rush animated case study page — the Case Studies page opens with a “WARNING: BOSS APPROACHING” header and narrates each case study as a battle log with an animated HP bar draining to zero
- Arcade contact form with initials entry — the Contact page uses a keyboard-style input UI reminiscent of classic arcade high-score screens
- Hash-based routing — all routes use
#/URLs (e.g./#/about), so the site deploys to any static host with zero redirect configuration - Custom Tailwind palette and three-font pixel system — a bespoke color scheme and three Google Fonts (
Press Start 2P,VT323,Space Mono) give every element a coherent retro identity
Explore the docs
Quickstart
Clone the repo, install dependencies, and launch the dev server in under five minutes.
Architecture Overview
Understand how routes, the layout shell, page transitions, and the static export fit together.
Home Page
Deep dive into the LEVEL 1 start screen: the arcade cabinet component, marquee ticker, and high-score navigation list.
Customizing Colors
Swap the neon palette —
arcade, purple-electric, magenta-hot, lime-neon, and more — to match your personal brand.Tech Stack
| Technology | Version | Role |
|---|---|---|
| React | 18.3.1 | UI component tree and state management |
| Vite | Latest | Development server and production bundler |
| React Router DOM | Latest | Hash-based client-side routing (#/ URLs) |
| Framer Motion | 11.18.2 | Page transitions, hover effects, and SVG path animations |
| Tailwind CSS | Latest | Utility-first styling with a custom arcade color palette |
| Lucide React | Latest | Icon set used throughout the navigation and UI |
| Google Fonts | — | Press Start 2P (font-arcade), VT323 (font-pixel), Space Mono (font-mono) |