Skip to main content

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.

dev-mode is a static React SPA built and bundled by Vite. Because it targets static file hosting (no server-side rendering), every artefact the browser needs is either pre-compiled into the assets/ directory or shipped as a small hand-authored module in components/. The pages/ directory holds one HTML shell per route so direct-URL navigation works without a server rewrite rule. 
dev-mode/
├── index.html                  # Entry point — bootstraps the React SPA at /
├── canvas.manifest.js          # Empty manifest placeholder
├── useScreenInit.js            # Re-exports React and ReactDOM for module sharing
│
├── assets/
│   ├── main.js                 # Compiled SPA (all pages, router, animations)
│   ├── main.css                # Tailwind output + custom arcade utilities
│   └── jsx-runtime.js          # React JSX transform runtime
│
├── components/
│   ├── ArcadeButton.js         # Navigation button component
│   └── ScanlineOverlay.js      # CRT visual overlay
│
└── pages/
    ├── Home.html               # Static shell for / (sets __STATIC_PAGE_ROUTE__ = "/")
    ├── About.html              # Static shell for /about
    ├── Projects.html           # Static shell for /projects
    ├── Skills.html             # Static shell for /skills
    ├── Writing.html            # Static shell for /writing
    ├── CaseStudies.html        # Static shell for /cases
    └── Contact.html            # Static shell for /contact

​
index.html

The root entry point. It mounts the React app into <div id="root"> and wires up every module the browser will need via <script type="module"> and <link rel="modulepreload">. It also contains the hash-redirect bootstrap script that ensures /#/ is set when a visitor lands directly on the root URL (see Routing for details).

​
useScreenInit.js

A thin re-export shim that surfaces React and ReactDOM under stable named exports (r → React default, R → ReactDOM namespace). All other modules — ArcadeButton.js, ScanlineOverlay.js, and assets/main.js — import React from this single location, so the runtime is only evaluated once regardless of how many entry chunks the browser loads.

​
assets/main.js

The primary compiled bundle produced by Vite. It contains the complete application tree:
  • React Router (HashRouter, Routes, Route)
  • Framer Motion (AnimatePresence, motion.*)
  • All seven page components (Home, About, Projects, Skills, Writing, CaseStudies, Contact)
  • The AppShell layout (bottom nav bar + ScanlineOverlay)
  • Shared components ArcadeButton and StatBar
  • All Tailwind-driven animation logic
main.js is a minified production build. The readable source equivalents live across the components/ directory and were compiled from the project’s Vite source before deployment.

​
assets/main.css

The compiled Tailwind stylesheet. It includes the full utility layer plus every custom arcade-themed extension defined in the Tailwind config:
TokenValue
arcade-bg#0a0610
arcade-cyan#00f0ff
arcade-lime#9eff00
arcade-magenta#ff2bd6
arcade-purple#1a0a2e
arcade-white#f0e9ff
Custom utilities such as animate-flicker, animate-blink, animate-scanline, animate-marquee, font-pixel, text-shadow-crt, and neon box-shadow helpers are all defined here.

​
assets/jsx-runtime.js

The React 18 automatic JSX transform runtime (react/jsx-runtime). Vite externalises it into its own chunk so it can be shared between main.js and components/ArcadeButton.js without being duplicated.

​
components/ArcadeButton.js

An independently loadable ES module for the neon navigation button component. Because ArcadeButton is referenced by <link rel="modulepreload"> in every HTML shell, the browser can fetch and parse it in parallel with main.js. The file imports React core from useScreenInit.js and bundles React DOM and Framer Motion directly, making it self-contained for preload purposes. See Components for the full prop API.

​
components/ScanlineOverlay.js

A compact module exporting the ScanlineOverlay component — the fixed, full-screen CRT effect layer rendered above all page content. Like ArcadeButton.js, it is modulepreloaded in every HTML shell for fast first paint. See Components for implementation details.

​
pages/*.html

One HTML shell per route. Each file is structurally identical to index.html with two differences:
  1. <title> — reflects the page name (e.g. About | dev-mode).
  2. window.__STATIC_PAGE_ROUTE__ — set to the route’s hash path (e.g. "/about"), so the SPA can read the intended destination before React has mounted.
The inline script in each file also performs a hash-redirect if the URL arrives without a hash fragment, ensuring HashRouter receives a valid route on direct navigation.
The pages/ shells allow the site to be deployed to any static host — S3, GitHub Pages, Netlify — without configuring server-side rewrites. Each page URL resolves to a real HTML file.

​
canvas.manifest.js

An empty JavaScript file serving as a manifest placeholder. It is present in the repository for tooling compatibility but contains no executable code.

Build docs developers (and LLMs) love

Get started for freeTalk to us