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 built from a small set of purpose-built React components that carry the retro arcade aesthetic throughout the portfolio. ArcadeButton drives all navigation with neon glow styling, ScanlineOverlay layers the CRT scanline and vignette effect on top of every page, and StatBar renders the pixel-art progress bars used to visualise developer skills. Each component is self-contained, uses only Tailwind CSS and Framer Motion, and accepts no external state.

​
ArcadeButton

ArcadeButton is the primary navigation element used in the AppShell bottom bar. It renders a React Router NavLink styled as a pixel-font arcade button with a neon border glow. When the linked route is active, the button fills with its neon color and shows a blinking ▶ cursor to the left of the label. On hover, the button shifts down by 2 pixels; on press it shifts down 6 pixels and scales to 95% — simulating a physical button press. The bottom navigation bar renders seven instances of this component: 
<ArcadeButton to="/"         label="HOME"     color="cyan"    />
<ArcadeButton to="/about"    label="ABOUT"    color="lime"    />
<ArcadeButton to="/projects" label="PROJECTS" color="magenta" />
<ArcadeButton to="/skills"   label="SKILLS"   color="cyan"    />
<ArcadeButton to="/writing"  label="WRITING"  color="lime"    />
<ArcadeButton to="/cases"    label="CASES"    color="magenta" />
<ArcadeButton to="/contact"  label="CONTACT"  color="cyan"    />

​
Props

​
to
string
required
The React Router destination path, e.g. /about or /projects. Passed directly to the underlying NavLink component.
​
label
string
required
The button text. Rendered in uppercase using the font-pixel class and tracking-widest letter-spacing.
​
color
"cyan" | "lime" | "magenta"
required
The neon accent color applied to the button border, text, and glow shadow. Maps to the arcade-cyan, arcade-lime, and arcade-magenta Tailwind color tokens respectively.

​
Color reference

ValueInactive border/textActive backgroundGlow shadow
"cyan"#00f0ff#00f0ff0 0 20px rgba(0,240,255,0.8)
"lime"#9eff00#9eff000 0 20px rgba(158,255,0,0.8)
"magenta"#ff2bd6#ff2bd60 0 20px rgba(255,43,214,0.8)

​
Usage example

components/ArcadeButton.js is a pre-compiled ES module. The friendly component name is not preserved in the compiled export. The examples below reflect the source-level prop API as used inside AppShell.
// Cyan navigation link to the home route
<ArcadeButton to="/" label="HOME" color="cyan" />

// Magenta navigation link to the projects route
<ArcadeButton to="/projects" label="PROJECTS" color="magenta" />
The active state is determined automatically by comparing to against the current React Router pathname via useLocation. You do not need to pass an isActive prop.

​
ScanlineOverlay

ScanlineOverlay is a purely visual full-screen overlay that replicates the look of a CRT monitor. It is rendered once inside AppShell and sits at z-50 above all page content. Because it uses pointer-events-none, it never intercepts clicks or other user interactions. The component is made up of three stacked layers:
1

Static scanlines

An absolute inset-0 div with a repeating CSS gradient that draws horizontal scan bands across the entire viewport. Rendered at opacity-30 with mix-blend-overlay so the page content shows through.
2

Animated scanline band

A second absolute inset-0 div with height 10% and a soft vertical gradient (from-transparent via-white/5 to-transparent). This band continuously sweeps from top (translateY -100%) to bottom (translateY 100%) over 8 seconds using the animate-scanline Tailwind keyframe, simulating the beam refresh of a real CRT.
3

CRT vignette

A third absolute inset-0 div using crt-vignette — a custom Tailwind utility that applies an inset box-shadow to darken the screen edges and create the characteristic curved-monitor look.

​
Props

ScanlineOverlay accepts no props. It is a zero-configuration presentational component.

​
Usage example

components/ScanlineOverlay.js is a pre-compiled ES module that exports the component as the minified name S. It is consumed internally by assets/main.js (the compiled AppShell). The example below reflects the source-level API.
// Render once at the top of your layout
function AppShell() {
  return (
    <div className="min-h-screen flex flex-col animate-flicker relative">
      <ScanlineOverlay />
      <main>{/* page content */}</main>
    </div>
  );
}
Always render ScanlineOverlay as a direct child of your layout root — not inside a scrollable container — so it covers the full viewport regardless of page scroll position.

​
StatBar

StatBar renders a pixel-art progress bar used to display developer skill levels on the About / Character Select page. It draws a row of equal-width segments inside a bordered track; filled segments use the color prop as a Tailwind background class and emit a subtle box-shadow glow, while unfilled segments are transparent. A text label and the current value (or "MAX" when value === max) sit above the bar.

​
Props

​
label
string
required
The stat name displayed above the progress bar in the font-pixel typeface, e.g. "CURIOSITY" or "CAFFEINE LEVEL".
​
value
number
required
The current level. Must be between 0 and max (inclusive). When value equals max, the value display shows "MAX" instead of the number.
​
max
number
default:"10"
The total number of segments in the bar. Defaults to 10.
​
color
string
default:"\"bg-arcade-lime\""
A Tailwind background utility class applied to filled segments, e.g. "bg-arcade-cyan" or "bg-arcade-magenta". The value label colour is derived from this prop by replacing the bg- prefix with text-.

​
Usage example

StatBar is compiled into assets/main.js and is not available as a standalone module. The examples below reflect the component’s source-level prop API as used inside the About page.
// Default lime color, 10-segment bar
<StatBar label="CURIOSITY"           value={10} color="bg-arcade-cyan"    />
<StatBar label="PATIENCE FOR BAD UX" value={1}  color="bg-arcade-magenta" />
<StatBar label="YEARS DEBUGGING"     value={6}  color="bg-arcade-lime"    />
<StatBar label="CAFFEINE LEVEL"      value={8}  color="bg-orange-500"     />

function CharacterStats() {
  return (
    <div className="space-y-2">
      <StatBar label="CURIOSITY"           value={10} color="bg-arcade-cyan"    />
      <StatBar label="PATIENCE FOR BAD UX" value={1}  color="bg-arcade-magenta" />
      <StatBar label="YEARS DEBUGGING"     value={6}  color="bg-arcade-lime"    />
      <StatBar label="CAFFEINE LEVEL"      value={8}  color="bg-orange-500"     />
    </div>
  );
}
StatBar is currently used exclusively on the About page inside the Character Select panel. It does not carry its own animation — the parent page component controls entry animations via Framer Motion on the containing motion.div.

Build docs developers (and LLMs) love

Get started for freeTalk to us