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.

The Home page (/) is the attract screen and launch pad for the entire portfolio. Visitors see the large DEVELOPER.EXE headline rendered through GlitchText with an interactive hover glitch effect, beneath which a typewriter component scrolls the tagline > INITIALIZING CREATIVE PROTOCOLS... character by character. A single PRESS START button — built with PixelButton — and the blinking prompt INSERT COIN TO CONTINUE greet the user until they engage. Once the button is clicked, it transitions into a full arcade-style MAIN MENU navigation overlay, listing every section of the portfolio as selectable menu items with a neon cursor indicator that tracks mouse hover.

​
Visual Background: SynthwaveGrid

Every page in the portfolio renders the SynthwaveGrid component as a fixed, full-viewport background layer. It is composed of three stacked sublayers:

Star Field

Twenty floating animated particles in neon-cyan, each given a randomised start position and looping vertical and opacity animation via Framer Motion to simulate drifting stars in the upper half of the screen.

Horizon Line

A single horizontal bar in neon-magenta placed at the vertical midpoint with a magenta glow shadow, acting as the synthwave horizon.

Perspective Grid

The lower half contains a perspective-transform grid texture. An overlay gradient fades it from transparent at the bottom back into the background colour so it blends seamlessly with page content.

​
Hero Section

The hero is a motion.div that enters from y: -20, opacity: 0 and animates to y: 0, opacity: 1 over 0.8 s. It contains two elements: 
// GlitchText headline with interactive hover glitch
<GlitchText
  text="DEVELOPER.EXE"
  as="h1"
  className="font-pixel text-4xl md:text-6xl lg:text-8xl mb-6 text-white"
  interactive={true}
/>

// Typewriter tagline component
<TypewriterText text="> INITIALIZING CREATIVE PROTOCOLS..." />
GlitchText accepts an interactive boolean prop. When true, hovering the element triggers a CSS glitch animation that shifts duplicate ::before/::after pseudo-elements in magenta and cyan, producing a classic scan-line distortion. When interactive is false (used on all inner pages), the glitch plays continuously on load.
The GlitchText component reads its text content from the text prop and also sets data-text={text} on the inner element so the CSS pseudo-elements can mirror it for the offset glitch effect.

​
Start Flow: Two-State UI

The home component tracks a single started boolean in React state. Before PRESS START is clicked the UI shows: 
<PixelButton onClick={() => setStarted(true)} className="text-xl md:text-2xl px-8 py-4 animate-pulse-fast">
  PRESS START
</PixelButton>
<p className="font-hud text-neon-yellow mt-6 text-xl animate-pulse">
  INSERT COIN TO CONTINUE
</p>
After clicking, AnimatePresence with mode="wait" cross-fades to the MAIN MENU panel.

​
MAIN MENU Navigation

The main menu is a motion.div panel that slides up from y: 20, opacity: 0. It renders the navigation array as a vertical button list. A second piece of state (hoveredIndex) tracks which item the cursor is over, displaying a neon-green arrow icon next to the active item and brightening the label. The navigation items defined in the source are:
LabelRoute
START GAME (ABOUT)/about
CHOOSE BUILD (PROJECTS)/projects
SKILL TREE/skills
MISSION LOGS (WRITING)/writing
BOSS BATTLES (CASE STUDIES)/case-studies
INSERT COIN (CONTACT)/contact
// Navigation item structure
const navItems = [
  { label: "START GAME (ABOUT)",           path: "/about" },
  { label: "CHOOSE BUILD (PROJECTS)",       path: "/projects" },
  { label: "SKILL TREE",                    path: "/skills" },
  { label: "MISSION LOGS (WRITING)",        path: "/writing" },
  { label: "BOSS BATTLES (CASE STUDIES)",   path: "/case-studies" },
  { label: "INSERT COIN (CONTACT)",         path: "/contact" },
];
To add a new route, append an object with label and path to this array. The hover indicator and useNavigate call are handled automatically by the map.

​
HUD Overlay

The persistent HUD component renders on every page at the top of the viewport. It displays three columns of arcade information:

Left Column

PLAYER 1: READY on the first line. SCORE: followed by a computed value derived from the current date, updated every second.

Center Column

LEVEL: followed by the current route label in uppercase (e.g. LEVEL: ABOUT). The home route maps to ATTRACT MODE.

Right Column

VIBES: 60FPS on the first line. A live HH:MM:SS clock on the second, updating every second via setInterval.

​
CRT Overlay

CRTOverlay wraps the entire app. It adds a subtle scanline texture and screen-edge vignette via CSS pseudo-elements to simulate a cathode-ray tube monitor. The overlay is purely cosmetic and does not interact with pointer events.

​
Customisation

1

Change the headline

Edit the text prop on <GlitchText> inside the Home component. The as="h1" prop controls the rendered HTML element.
2

Change the tagline

Edit the text prop on <TypewriterText>. The component loops through the string at 50 ms per character via setInterval.
3

Add a navigation item

Append an entry to the navigation array: { label: "YOUR LABEL", path: "/your-route" }. Also add a matching <Route> in the router config.
4

Change the start button label

Find PRESS START in the PixelButton children and replace the text. The INSERT COIN TO CONTINUE blink copy lives in the <p> directly below it.

Build docs developers (and LLMs) love

Get started for freeTalk to us