Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/developer-exe/llms.txt

Use this file to discover all available pages before exploring further.

HUD is the persistent heads-up display that frames every page of developer.exe as though it were a level inside an arcade game. It fixes itself to the top of the viewport in a three-column layout and updates in real time: the centre column reflects the active React Router route as a game-level name, while the right column ticks a live 24-hour clock every second. Because the overlay uses pointer-events-none, it sits visually above page content without ever blocking clicks or keyboard focus.

​
Props

HUD accepts no props. It sources all its display data internally:
  • Route name — read from React Router’s useLocation() hook; no prop needed.
  • Score — computed from new Date() at render time: year × 100 + month.
  • Clock — managed with a useState / setInterval pair that fires every 1 000 ms, cleaned up on unmount.

​
Usage

Place HUD once at the application root, inside a React Router <Router> context so the useLocation() hook has access to the routing tree: 
// Place once at the app root, inside a Router context
import { HUD } from './components/HUD';

function App() {
  return (
    <Router>
      <HUD />
      {/* rest of app */}
    </Router>
  );
}

​
HUD layout

The bar is divided into three flex columns: Left column — player status
  • PLAYER 1: READY — static player identifier in neon-green.
  • SCORE: [value] — rendered in neon-cyan. The score is Date.getFullYear() * 100 + Date.getMonth(), producing a four-to-six digit number that changes once per calendar month.
Centre column — current level
  • LEVEL: [ROUTE NAME] — rendered in neon-magenta with a Tailwind animate-pulse class for a slow brightness pulse. The route pathname is mapped to a human-readable level name (see table below).
Right column — system readout
  • VIBES: 60FPS — static performance display in neon-green.
  • Live time — rendered in neon-yellow, updated every second via toLocaleTimeString("en-US", { hour12: false }).

​
Route-to-level mapping

RouteHUD display
/ATTRACT MODE
/aboutABOUT
/projectsPROJECTS
/skillsSKILLS
/writingWRITING
/case-studiesCASE STUDIES
/contactCONTACT
Routes are mapped by taking pathname.substring(1).toUpperCase() and replacing hyphens with spaces. The root path / is the only special case, returning the string "ATTRACT MODE".

​
CSS classes

Class / propertyEffect
fixed top-0Locks the bar to the top of the viewport on all scroll positions
z-40Renders above page content but below the CRT overlay layers (z-50, z-51)
pointer-events-nonePasses all mouse and touch events through to the content beneath
font-hudCustom bitmap/monospace font from the design system
text-neon-greenDefault text colour for the bar
The bar enters with a Framer Motion slide-down animation (initial={{ y: -50 }} → animate={{ y: 0 }}), so it drops in smoothly on first load.
HUD uses pointer-events-none on its root element so it never intercepts clicks, taps, or keyboard navigation targeted at page content rendered beneath it. If you add interactive elements inside HUD in a fork, you will need to re-enable pointer events on those specific children with pointer-events-auto.

Build docs developers (and LLMs) love

Get started for freeTalk to us