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.

developer.exe is a single-page portfolio application built for developers who want their personal site to feel like booting up an arcade cabinet. Built on React 18 and Vite, it wraps every section of a traditional portfolio — projects, writing, skills, case studies — in the language of retro video games: neon scanlines, a floating HUD, a perspective synthwave grid, and pixel-border components styled with the Press Start 2P and VT323 fonts. It is aimed at developers who want a distinctive online presence that reflects craft, personality, and technical depth, without sacrificing the performance and maintainability of a modern React stack.

Key Features

Arcade Visual Theme

Deep-space #06070d background, neon color palette, and pixel-art typography using Press Start 2P and VT323 — the entire UI reads like a mid-90s arcade attract screen.

CRT Overlay Effects

A fixed CRTOverlay component layers authentic scanline and RGB-channel separation effects over the entire viewport using CSS background-size: 100% 4px and a radial vignette.

Neon Component Library

Reusable components — GlitchText, PixelButton, SynthwaveGrid — each built with Tailwind utility classes and custom CSS variables so neon colors stay consistent site-wide.

Game-Inspired Navigation

A persistent heads-up display (HUD) floats above every page, showing a live clock, the current “level” name derived from the active route, and a score counter — all styled in font-hud (VT323).

Framer Motion Animations

Page transitions, component entrances, and the scrolling synthwave grid are driven by Framer Motion, keeping animations performant and declarative alongside JSX markup.

Hash-based Routing

React Router v6 HashRouter powers all navigation, keeping the app deployable as a fully static site on GitHub Pages or any CDN without server-side routing configuration.

Design Philosophy

developer.exe treats a developer portfolio as a video game, and every section maps to a familiar game concept. This metaphor system is not purely cosmetic — it shapes how content is structured and how visitors experience the site.
Portfolio SectionGame MetaphorRoute
HomeAttract Mode — the idle loop before a player inserts a coin#/
AboutCharacter Select — stats, backstory, origin#/about
ProjectsLevel Select — pick your challenge#/projects
SkillsSkills Tree — earned abilities laid out as a progression grid#/skills
WritingMission Briefings — dispatches and notes from the field#/writing
Case StudiesBoss Levels — deep dives that require full attention#/case-studies
ContactContinue Screen — the invitation to start a new game together#/contact
The HUD component makes this metaphor tangible in real time: it reads the current React Router pathname and converts it to an uppercase “LEVEL:” label — /case-studies becomes LEVEL: CASE STUDIES, / becomes LEVEL: ATTRACT MODE — so the game framing is always present in the UI, not just in the copy.

Tech Stack

TechnologyVersion / DetailRole
React18.3.1UI rendering and component model
ViteLatest (compiled output)Build tool, dev server, static bundling
Tailwind CSSUtility-first (compiled)Layout, spacing, responsive breakpoints
Framer MotionVia proxy.js bundleDeclarative animations and page transitions
React Routerv6.30.4 (HashRouter)Client-side routing with hash-based URLs
Press Start 2PGoogle FontsPixel-art display font (.font-pixel)
VT323Google FontsMonospace HUD font (.font-hud)
The neon color palette is defined as CSS custom properties in assets/main.css and referenced throughout every component. The three core values are:
  • --neon-green#39ff14 — primary accent, HUD text, cursor crosshair stroke
  • --hot-magenta#ff2bd6 — glitch shadow offset, scrollbar thumb, selection highlight
  • --electric-cyan#22d3ee — secondary accent, GlitchText counter-shadow, border highlights
These variables drive both the custom CSS classes (.glitch-text-base, .pixel-border) and the Tailwind extended palette (text-neon-green, border-neon-cyan, bg-neon-magenta, etc.).

Build docs developers (and LLMs) love