Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/neon-retro-sys-admin/llms.txt

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

The About page frames the developer’s background as an RPG character sheet — a deliberate design choice that makes an unconventional career path (healthcare → software) feel like a feature rather than a footnote. The left sidebar presents stats in a game-UI format while the right column gives honest, personal prose about the transition. Together they communicate personality and competence at the same time.

​
Route

/about
Declared in the router as: 
<Route path="about" element={<AboutPage />} />

​
Page Layout

The page uses a flex container (flex flex-col md:flex-row gap-8) that stacks vertically on mobile and switches to a side-by-side layout on medium screens. The sidebar is w-full md:w-64 flex flex-col gap-6 shrink-0 — 256px wide on desktop, full-width on mobile.

​
VITAL_STATS.dat RetroWindow

A lime-colored RetroWindow titled VITAL_STATS.dat renders an RPG-style stat block in font-mono text-sm:
FieldValueColor
ClassFrontend Developertext-y2k-lime
SubclassFormer Nursetext-white
BaseEarth, Probablytext-white
AlignmentChaotic Goodtext-y2k-magenta
CurrentlyDebugging Realitytext-y2k-cyan animate-pulse
<RetroWindow title="VITAL_STATS.dat" color="lime">
  <div className="space-y-4 font-mono text-sm">
    <div>
      <span className="text-gray-500">Class:</span>
      <div className="text-y2k-lime">Frontend Developer</div>
    </div>
    <div>
      <span className="text-gray-500">Subclass:</span>
      <div className="text-white">Former Nurse</div>
    </div>
    <div>
      <span className="text-gray-500">Base:</span>
      <div className="text-white">Earth, Probably</div>
    </div>
    <div>
      <span className="text-gray-500">Alignment:</span>
      <div className="text-y2k-magenta">Chaotic Good</div>
    </div>
    <div className="pt-2 border-t border-y2k-gray">
      <span className="text-gray-500">Currently:</span>
      <div className="text-y2k-cyan animate-pulse">Debugging Reality</div>
    </div>
  </div>
</RetroWindow>
The “Currently” field is separated from the rest by a top border and uses animate-pulse to give the impression of an active status indicator. Three <Sticker> components are stacked below the window in a flex flex-col gap-3 items-center container: 
<Sticker color="magenta" rotation={-5}>Coffee Powered</Sticker>
<Sticker color="cyan" rotation={3}>CSS Survivor</Sticker>
<Sticker color="white" rotation={-2}>Will Pet Dogs</Sticker>

​
Right Column — Bio and Observations

The right column is flex-1 space-y-8.

​
ABOUT_ME.txt Heading

The section opens with an h1 styled as a terminal filename, with a bottom border acting as an underline: 
<h1 className="text-4xl font-display text-white mb-6 border-b-2 border-y2k-gray pb-2 inline-block">
  ABOUT_ME.txt
</h1>

​
Biography Paragraphs

Three prose paragraphs are rendered inside a prose prose-invert container for consistent font-sans typography with relaxed line-height: Paragraph 1 — Origin
I didn’t start out writing code. I started out taking blood pressures, managing retail inventory, and trying to figure out why the hospital’s scheduling software looked like it was built in 1994.
Paragraph 2 — The Connection
Turns out, triage in an emergency room and debugging a complex React application require the exact same skillset: stay calm, isolate the problem, and apply the fix before everything crashes. The only difference is that when a server crashes, nobody bleeds. (Usually.)
Paragraph 3 — The Pivot
I pivot into web development because I realized I loved building the tools more than I loved using the broken ones. Now, I specialize in building interfaces that are highly functional, accessible, and occasionally, a little bit weird.

​
THINGS_I_NOTICE.log RetroWindow

A purple RetroWindow titled THINGS_I_NOTICE.log follows the bio. It contains a <ul> in font-mono text-sm text-gray-300: 
<RetroWindow title="THINGS_I_NOTICE.log" color="purple">
  <ul className="list-disc list-inside space-y-2 font-mono text-sm text-gray-300">
    <li>When buttons are off-center by exactly 1 pixel.</li>
    <li>Error messages that just say "An error occurred" (Who wrote this? Why do you hate us?)</li>
    <li>Forms that clear all your data when one field fails validation.</li>
    <li>The distinct lack of neon colors in modern corporate web design.</li>
  </ul>
</RetroWindow>

​
Customization

​
Editing the Bio Paragraphs

The three biography paragraphs are hardcoded JSX strings inside the About component. Edit them directly: 
<div className="prose prose-invert prose-p:font-sans prose-p:text-gray-300 prose-p:leading-relaxed max-w-none">
  <p>Your first paragraph here.</p>
  <p>Your second paragraph here.</p>
  <p>Your third paragraph here.</p>
</div>

​
Updating VITAL_STATS

The stat fields are hardcoded <div> elements inside the VITAL_STATS.dat window. Update the text content of any value — for example, change "Frontend Developer" to "Full-Stack Developer" or update "Debugging Reality" to reflect your actual current focus. To add a new row, copy an existing <div> block and add it to the space-y-4 container.

​
Updating the Stickers

The three stickers in the sidebar accept any string as children and support the following color values: "magenta", "cyan", "lime", and "white". Rotation is in degrees (positive = clockwise, negative = counter-clockwise). Replace the label text to match your own personality.

​
Updating THINGS_I_NOTICE

Add or remove <li> elements from the unordered list inside the purple RetroWindow. Keep entries short and observational — they work best as dry one-liners.

Build docs developers (and LLMs) love

Get started for freeTalk to us