This guide takes you from zero to a running local development server, then walks through the four key customization steps you need to make Dev Arcade your own. The whole process — including your first content edits — should take less than five minutes.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.
Start the development server
Start the Vite development server:Vite opens the app at
http://localhost:5173. Because Dev Arcade uses hash-based routing, every page URL includes a # fragment — for example, the About page is at http://localhost:5173/#/about and the Projects page is at http://localhost:5173/#/projects. You can navigate to any of the seven levels directly in the address bar.Build for production
When you are ready to deploy, generate an optimized production build:Vite outputs the compiled application to the
dist/ folder. The repository also includes a pages/ directory containing pre-built static HTML entry points for each route (Home.html, About.html, Projects.html, Skills.html, Writing.html, CaseStudies.html, Contact.html) — these are Vite build artifacts and should not be edited by hand.Deploy the dist/ folder to any static hosting platform:| Platform | Notes |
|---|---|
| Netlify | Drag-and-drop the dist/ folder or connect your Git repo |
| Vercel | Import the repo; Vite is auto-detected |
| GitHub Pages | Push dist/ to the gh-pages branch |
| Any static host | Upload the contents of dist/ — no server required |
Customize your content
Dev Arcade ships with placeholder sample data embedded directly in the compiled JavaScript bundle (
See the Customization section of the docs for step-by-step instructions on editing each array and rebuilding the site.
assets/main.js). To add your real projects, skills, tools, and writing entries, you need to edit the source data arrays before rebuilding.The four key data arrays to update are:| Array | Location in source | What it controls |
|---|---|---|
projects | Projects page component | Cartridge cards (title, type, description, tech stack) |
skills (constellation nodes) | Skills page component | Skill nodes on the SVG constellation map (name, position, level) |
tools | Skills page component | ”Power-ups collected” tool icons grid |
writingEntries | Writing page component | Comic-book strategy guide covers (title, issue, date) |
Because Dev Arcade is a pre-built static export, all content lives inside the compiled source. Customization requires editing the React source files and running
npm run build again to regenerate the output. Do not edit files inside dist/ or pages/ directly — those are generated by Vite and will be overwritten on the next build.Next steps
Architecture Overview
Learn how the layout shell,
PageTransition component, and hash router work together to power the seven-level structure.Customizing Colors
Replace the default neon palette —
arcade, purple-electric, magenta-hot, lime-neon — with your own brand colors in tailwind.config.js.