This quickstart walks you through getting Dev Mode Arcade running on your local machine from scratch. By the end you will have the full retro arcade portfolio live atDocumentation 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.
localhost:5173, with all seven routes navigable and the neon CRT aesthetic rendering exactly as intended.
Prerequisites
Before you begin, make sure the following are installed on your machine:- Node.js 18 or later — nodejs.org
- A package manager — npm (bundled with Node), yarn, or pnpm
- Git — git-scm.com
Node.js 18+ is required because Vite’s current release depends on Node’s built-in
fetch and other modern APIs that are not available in older runtimes.Steps
Clone the repository
Clone the Dev Mode Arcade source to your local machine and move into the project directory:
Install dependencies
Install all project dependencies using your preferred package manager:This pulls in React 18, Vite, React Router v6, Framer Motion, Tailwind CSS, and every other dependency listed in
package.json.Start the development server
Launch the Vite dev server with hot module replacement:Vite starts almost instantly. Open your browser to http://localhost:5173 — you should see the home screen with the CRT scanline overlay and neon glow effects fully active.
Explore the pages
The portfolio has seven routes, all accessible via the in-app navigation:
All navigation uses hash URLs so the browser never makes a new server request when you move between pages.
| Route | Page | Description |
|---|---|---|
/#/ | Home | Landing screen with animated intro and nav buttons |
/#/projects | Projects | Project cards styled as arcade game cabinets |
/#/about | About | Personal bio section |
/#/skills | Skills | Skill tree with RPG-style level indicators |
/#/writing | Writing | Article list formatted as game chapters |
/#/case-studies | Case Studies | Boss-fight-framed engineering deep dives |
/#/contact | Contact | Contact form and guestbook leaderboard |
Data File Structure
data/mockData.js exports five named collections. Here is the complete shape of each:
The exports use short single-character aliases (
p, s, a, c, g) because the file is minified. When importing from data/mockData.js in a component, use those exact names and rename locally as needed: import { p as projects, s as skills } from '../data/mockData.js'.Building for Production
When you are ready to deploy, run the Vite build:pages/ alongside the hashed JS and CSS bundles in assets/. The entire output is a directory of static files — upload it to any static host (GitHub Pages, Netlify, Vercel, Cloudflare Pages, an S3 bucket, etc.) with no server configuration required.