developer.exe: Architecture, Routing, and CSS System

developer.exe is a fully static single-page application produced by Vite’s build pipeline. There is no server runtime — the entire site is a collection of pre-rendered HTML stubs, a CSS bundle, and JavaScript module chunks that are loaded by the browser and hydrated into a React tree. Vite handles module bundling, code splitting, and asset fingerprinting, while React Router v6 takes over navigation entirely in the browser using the URL hash so that no web server needs to understand client-side routes.

Directory Structure

developer-exe/
├── assets/               # Compiled JS/CSS bundles (Vite output)
│   ├── main.js           # Primary application bundle
│   ├── main.css          # Tailwind output + custom CSS variables
│   ├── jsx-runtime.js    # React JSX transform runtime
│   └── proxy.js          # Framer Motion bundle
├── components/           # React components (HUD, CRTOverlay, SynthwaveGrid, GlitchText, PixelButton)
│   ├── HUD.js
│   ├── CRTOverlay.js
│   ├── SynthwaveGrid.js
│   ├── GlitchText.js
│   └── PixelButton.js
├── pages/                # Pre-rendered HTML stubs for each route
│   ├── Home.html
│   ├── About.html
│   ├── Projects.html
│   ├── Skills.html
│   ├── Writing.html
│   ├── CaseStudies.html
│   └── Contact.html
├── index.html            # App entry point (serves the #/ route)
├── useScreenInit.js      # React + React DOM exports (shared module)
└── canvas.manifest.js    # Build manifest

Routing

developer.exe uses React Router v6’s HashRouter for all client-side navigation. Every URL in the app begins with #/, which means the path after the hash is invisible to the web server — the server always serves the same HTML file, and the React app reads window.location.hash to determine which page component to render. The router is initialized in the compiled bundle via the HashRouter (Xe) export from components/HUD.js, which re-exports React Router internals. The seven application routes are:

Hash Route	Page	HUD Level Label
`#/`	Home	`ATTRACT MODE`
`#/about`	About	`ABOUT`
`#/projects`	Projects	`PROJECTS`
`#/skills`	Skills	`SKILLS`
`#/writing`	Writing	`WRITING`
`#/case-studies`	Case Studies	`CASE STUDIES`
`#/contact`	Contact	`CONTACT`

The HUD component derives the level label directly from the active pathname at runtime:

const getLevel = (pathname) =>
  pathname === "/" ? "ATTRACT MODE" : pathname.substring(1).toUpperCase().replace("-", " ");

The app’s route structure (as expressed in JSX before compilation) follows the standard React Router v6 <Routes> / <Route> pattern wrapped in a <HashRouter>:

import { HashRouter, Routes, Route } from "react-router-dom";

function App() {
  return (
    <HashRouter>
      <HUD />
      <CRTOverlay />
      <SynthwaveGrid />
      <Routes>
        <Route path="/"             element={<Home />} />
        <Route path="/about"        element={<About />} />
        <Route path="/projects"     element={<Projects />} />
        <Route path="/skills"       element={<Skills />} />
        <Route path="/writing"      element={<Writing />} />
        <Route path="/case-studies" element={<CaseStudies />} />
        <Route path="/contact"      element={<Contact />} />
      </Routes>
    </HashRouter>
  );
}

Static Export and Pre-rendered HTML Stubs

Each route has a corresponding pre-rendered HTML stub in the pages/ directory. These stubs are identical in structure to index.html — they load the same compiled JS and CSS assets — but each one sets a different value for window.__STATIC_PAGE_ROUTE__ and seeds the hash before the React app boots. For example, pages/About.html contains:

<script>
  window.__STATIC_PAGE_ROUTE__ = "/about";

  (function () {
    if (!window.location.hash || window.location.hash === "#") {
      window.location.replace(
        window.location.pathname +
        window.location.search +
        "#/about"
      );
    }
  })();
</script>

When a visitor lands directly on pages/About.html (for example, after following a direct link or refreshing the page), the inline script fires before React hydrates. If the hash is absent or bare, it immediately redirects to #/about, ensuring that React Router’s HashRouter receives the correct route on first render. The window.__STATIC_PAGE_ROUTE__ value can also be read by the app to skip the redirect on subsequent renders. This pattern makes the site fully navigable as a static file tree without any server-side routing logic.

Component Architecture

The app’s layout is composed of three always-present overlay layers plus route-specific page components:

App (HashRouter)
├── <HUD />              — fixed top bar: player status, level name, live clock (z-index: 40)
├── <CRTOverlay />       — fixed scanline + vignette layer (z-index: 50–51)
├── <SynthwaveGrid />    — animated perspective grid (z-index: -10, behind page content)
└── <Routes>
    └── <Route element={<PageComponent />} />   — route-matched page, rendered into #root

HUD uses useLocation() from React Router to read the current pathname and updates the level label on every navigation. CRTOverlay is a pure presentational component: two fixed <div> elements applying CSS background gradients to simulate phosphor scanlines and a radial vignette. SynthwaveGrid animates a CSS perspective-transformed grid using the grid-move keyframe defined in main.css.

CSS Architecture

Styles are produced by a single compiled assets/main.css that layers three systems together: 1. Tailwind CSS utility classes — generated from the component markup, covering layout (flex, grid, absolute, fixed), spacing, color, typography, and responsive variants. Custom Tailwind tokens extend the palette with arcade-specific colors:

Token	Value	Usage
`arcade-black`	`#06070d`	Page background
`arcade-navy`	`#0c1024`	Card and panel backgrounds
`neon-green`	`#39ff14`	Primary HUD text, borders
`neon-magenta`	`#ff2bd6`	Glitch offsets, scrollbar, selection
`neon-cyan`	`#22d3ee`	Secondary accents, focus rings
`neon-yellow`	`#fde047`	Highlight accents

2. CSS custom properties — declared on :root and consumed by the hand-authored classes:

:root {
  --neon-green:    #39ff14;
  --hot-magenta:   #ff2bd6;
  --electric-cyan: #22d3ee;
}

3. Custom utility classes — authored by hand and compiled into the bundle alongside Tailwind output:

Class	Effect
`.pixel-border`	4 px box-shadow offset on all sides using `currentColor`, producing a hard pixel-art frame
`.pixel-border-sm`	2 px variant of `.pixel-border` for smaller elements
`.glitch-text-base`	Positions `::before` / `::after` pseudo-elements with `--hot-magenta` and `--electric-cyan` text-shadow offsets; both pseudo-elements animate independently via `glitch-anim` and `glitch-anim-2` keyframes
`.synthwave-container`	Sets `perspective: 1000px` and `overflow: hidden` as the parent context for the grid
`.synthwave-grid`	Applies `rotateX(75deg)` and the `grid-move` animation to produce an infinite scrolling vanishing-point grid
`.crt-overlay`	Scanline effect via repeating `background-size: 100% 4px` linear gradient
`.crt-vignette`	Radial gradient darkening toward viewport edges
`.font-pixel`	Applies `"Press Start 2P", cursive`
`.font-hud`	Applies `VT323, monospace`

Getting Started

Visual Design

developer.exe: Architecture, Routing, and CSS System

Directory Structure

Routing

Static Export and Pre-rendered HTML Stubs

Component Architecture

CSS Architecture

Build docs developers (and LLMs) love

Getting Started

Visual Design

Documentation Index

​Directory Structure

​Routing

​Static Export and Pre-rendered HTML Stubs

​Component Architecture

​CSS Architecture

Build docs developers (and LLMs) love

Directory Structure

Routing

Static Export and Pre-rendered HTML Stubs

Component Architecture

CSS Architecture