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.

The About page is themed as a fighting-game character select screen. Instead of a conventional bio section, the developer is presented as a playable character — complete with a pixel-art sprite, a class designation, and a panel of animated attribute bars. A companion “Instruction Manual” card on the right side delivers the actual biographical text in the style of a photocopied game insert.

Route

PropertyValue
Hash route/#/about
Page headingCHARACTER SELECT
SubtitleCHOOSE YOUR DEVELOPER (pulsing animation)

Page Structure

The layout uses a two-panel arrangement side by side:
  • Left panel — Character portrait, identity badge, and stat bars
  • Right panel — Instruction Manual card with biography and warning

Left Panel: Character Card

The left panel opens with a “1P READY” badge at the top. Below it, a pixel-art avatar is generated via the DiceBear API, giving the developer a unique sprite-style portrait. The character’s identity is displayed beneath the sprite:
FieldValue
NameDEV_NAME
ClassFULL STACK MAGE

Stat Bars

Below the character identity, a series of StatBar components visualise developer attributes as horizontal progress bars. Each bar has a label, a fill level out of 10, and a distinct neon color.
AttributeLevelMaxColor
CURIOSITY10/10✅ MAXCyan
PATIENCE FOR BAD UX1/10Magenta
YEARS DEBUGGING6/10Lime
CAFFEINE LEVEL8/10Orange
The StatBar component renders each attribute as an animated fill bar. Bars animate in on page load, growing from 0% to their target width.

Right Panel: Instruction Manual

The right panel displays a card styled to look like a physical game instruction booklet — rotated slightly and rendered on a notebook-paper background texture. It contains the developer’s biography in a casual, conversational tone. Bio summary: The developer started out in retail before discovering a passion for healthcare tech, where they first encountered the challenge of optimising a genuinely terrible inventory system. That moment of turning broken software into something functional sparked the transition into full-time development. The manual card also includes a highlighted warning box:
WARNING: MAY SPEND 4 HOURS TWEAKING A BOX SHADOW.
A “SEAL OF QUALITY” stamp is displayed on the card, echoing the official quality seals found on vintage cartridge packaging.
The instruction manual card is intentionally rotated a few degrees to look like it was tossed onto a desk — a small detail that reinforces the physical, tactile aesthetic of the page.

Build docs developers (and LLMs) love