Skip to main content

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.

Dev Mode Arcade is a retro arcade-themed React single-page application built for developers who want their personal portfolio to feel like a playable experience. This page covers what the project is, what it includes out of the box, the technologies that power it, and how its architecture fits together — giving you everything you need before diving into the code.

​
What Is Dev Mode Arcade?

Most developer portfolios are static résumés dressed in CSS. Dev Mode Arcade flips that script: every page is styled to evoke the warm glow of a 1980s CRT monitor, navigation feels like inserting a coin, and project cards look like game cabinet marquees. Beneath the aesthetic, it is a fully production-ready React SPA with hash-based routing, Framer Motion transitions, and a single central data file you can swap out in minutes to make it your own. The portfolio covers seven distinct sections — home, projects, about, skills, writing, case studies, and contact — each rendered as a static HTML file by Vite’s build pipeline so the whole site deploys anywhere that can serve flat files.
All content — projects, skills, articles, case studies, and guestbook entries — lives in a single file: data/mockData.js. You only need to edit that one file to personalise the entire portfolio. See the Data Layer guide and the Mock Data reference for details.

​
Key Features

Retro Arcade Theme

Dark background (#0a0510), four neon accent colors (purple, lime, cyan, magenta), VT323 pixel font, and CRT scanline overlay — all implemented with Tailwind CSS custom design tokens.

Framer Motion Transitions

Every page enters and exits with a brightness/contrast/grayscale flicker effect via PageTransition. ArcadeButton responds to hover and tap with spring-physics scale animations.

ArcadeButton Component

A reusable button with four color variants (purple, lime, magenta, cyan), neon box-glow on hover, and full Framer Motion spring animations — no extra configuration needed.

CRT Overlay

A fixed, pointer-events-none overlay rendering animated scanlines, a moving light sweep, and a radial vignette — applied globally so every page feels like it’s on real hardware.

Hash-Based Routing

React Router v6 configured with HashRouter so all seven routes work correctly whether the site is hosted on GitHub Pages, Netlify, or a plain CDN with no server rewrites.

Vite Static Build

Vite generates a pre-rendered HTML file per route (Home, Projects, About, Skills, Writing, Case Studies, Contact) and injects window.__STATIC_PAGE_ROUTE__ for client-side hydration.

Single Data File

All portfolio content (projects, skills, articles, case studies, guestbook) is exported from data/mockData.js. Swap the data, redeploy — done.

Responsive Layout

Tailwind’s responsive grid utilities (md:grid-cols-2, lg:grid-cols-3) ensure the arcade aesthetic scales cleanly from mobile to widescreen without custom media query files.

​
Tech Stack

LayerTechnologyVersion
UI frameworkReact18
Build toolVitelatest
RoutingReact Routerv6 (HashRouter)
AnimationFramer Motionlatest
StylingTailwind CSSlatest
Pixel fontVT323Google Fonts
Monospace fontJetBrains MonoGoogle Fonts
LanguageJavaScript (JSX)ES2020+

​
Architecture Overview

Dev Mode Arcade is a client-side single-page application built on React 18 and bundled by Vite. Here is a condensed map of how the pieces connect: 
index.html                  ← entry point, sets window.__STATIC_PAGE_ROUTE__
└── main.js                 ← React root mount, HashRouter wrapper
    ├── CRTOverlay          ← fixed global scanline/vignette layer (z-50)
    ├── PageTransition      ← Framer Motion enter/exit per route
    └── Routes
        ├── /               → pages/Home.html
        ├── /projects       → pages/Projects.html
        ├── /about          → pages/About.html
        ├── /skills         → pages/Skills.html
        ├── /writing        → pages/Writing.html
        ├── /case-studies   → pages/CaseStudies.html
        └── /contact        → pages/Contact.html

​
Single-Page Application

The React app mounts into a single <div id="root"> in index.html. React Router v6’s HashRouter intercepts all URL changes at the # boundary, so no server-side routing configuration is ever needed.

​
Hash-Based Routing

All navigation uses hash URLs (e.g., /#/projects). This means the server always serves the same index.html regardless of which route the user visits — the route resolution happens entirely in the browser. On initial load, the inline script in index.html redirects bare paths to their hash equivalents automatically.

​
Vite Static Build

Running npm run build produces one HTML file per route in pages/ (e.g., pages/Home.html, pages/Projects.html). Each file has window.__STATIC_PAGE_ROUTE__ pre-set to its canonical path so the React app can hydrate to the correct route without waiting for a hash change event.

​
Design Tokens

All neon colors are defined as Tailwind custom tokens in the CSS output and used consistently across every component:
TokenHexUsage
arcade-bg#0a0510Page background
arcade-mid#1a0a2eCard and panel backgrounds
arcade-purple#b026ffPrimary accent, scrollbar, focus rings
arcade-lime#39ff14Secondary accent, selection highlight
arcade-cyan#00f0ffTertiary accent
arcade-magenta#ff10f0Quaternary accent
arcade-text#f0e6ffBody text
The neon glow effects (text-glow-purple, box-glow-lime, etc.) are custom Tailwind utilities defined in assets/main.css. They use layered text-shadow and box-shadow values at 5 px, 10 px, and 20 px radii to simulate phosphor bloom. See the Design Tokens reference for the full list.

​
Next Steps

Ready to run the portfolio locally? Head to the Quickstart to clone the repo, install dependencies, and launch the dev server in under five minutes. For a deeper look at how the project is organised on disk, see the Project Structure guide. To understand how page transitions work, read the Animations reference.

Build docs developers (and LLMs) love

Get started for freeTalk to us