dev-mode is a personal developer portfolio that trades the typical minimalist white-card aesthetic for the visual language of a 1990s arcade cabinet. The site runs as a React single-page application, uses hash-based routing for static hosting compatibility, and wraps every page transition in a Framer Motion blur-and-scale animation that mimics a CRT screen switching inputs. The portfolio ships seven themed pages — a high-score leaderboard for the home screen, a character-select screen for the bio, a cartridge wall for projects, and a fighting-game command list for skills — all rendered over a persistent scanline overlay and bottom arcade navigation bar. Every element, from the neon glow utilities to the pixel-font headings, is implemented with a custom Tailwind CSS palette and two Google Fonts: VT323 for the retro pixel look and JetBrains Mono for crisp monospace body text.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/dev-mode/llms.txt
Use this file to discover all available pages before exploring further.
What’s in this documentation
Installation
Prerequisites, cloning the repo, and installing dependencies.
Running Locally
Start the Vite dev server, understand hash routing, and build for production.
Project Structure
How pages, components, assets, and the static build output are organised.
Routing
React Router HashRouter setup, route table, and animated page transitions.
Components
ArcadeButton, ScanlineOverlay, and StatBar — props, usage, and examples.
Color Palette
Six arcade neon tokens as CSS custom properties and Tailwind utility classes.
Animations
CSS keyframe animations and Framer Motion page transitions, explained.
Adding Projects
Extend the cartridge wall with your own projects, genres, and neon colors.
Tech stack
| Technology | Role |
|---|---|
| React + ReactDOM | UI rendering and component model |
| Vite | Build tooling and dev server |
| React Router (HashRouter) | Client-side navigation |
| Framer Motion | Page transitions and animated components |
| Tailwind CSS | Utility-first styling with custom arcade tokens |
| VT323 | Pixel-style heading font |
| JetBrains Mono | Monospace body and code font |
| lucide-react | Icon library |
| DiceBear | Pixel-art avatar generation |
Quick navigation
The bottom navigation bar is always visible and uses theArcadeButton component with three neon colors — cyan for primary destinations (Home, Skills, Contact), lime for content pages (About, Writing), and magenta for portfolio sections (Projects, Cases). Page transitions use a blur(10px) fade with a subtle scale so switching between sections feels like a screen change rather than a page load.