Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/neocities-dev/llms.txt

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

The About page goes deeper than a standard bio. It tells an honest story about a non-traditional path into software development, showcases a mock guestbook with authentic Y2K flavor, and ends with a grid of developer pet peeves dressed up as pixel-art bugs. Three WindowPanel components carry the content: origin_story.txt, guestbook_preview.html, and pet_peeves.gif.

​
What’s on this page

​
origin_story.txt — Career Path Panel (cyan WindowPanel)

The top panel, spanning full width, presents the “How I Got Here” narrative. The headline is a 3xl pixel-art title in y2k-magenta. Below two paragraphs of prose sits a visual career flow — a horizontal sequence of labelled nodes rendered in monospace within lime-bordered <span> boxes.

​
Career Path Flow

The path is rendered as an inline-flex row of nodes connected by → arrows. The final node pulses: 
<div className="flex flex-wrap gap-2 font-mono text-xs text-y2k-lime my-4">
  <span className="bg-black px-2 py-1 border border-y2k-lime">Nursing School</span>
  <span>→</span>
  <span className="bg-black px-2 py-1 border border-y2k-lime">Healthcare</span>
  <span>→</span>
  <span className="bg-black px-2 py-1 border border-y2k-lime">Retail</span>
  <span>→</span>
  <span className="bg-black px-2 py-1 border border-y2k-lime">Merch</span>
  <span>→</span>
  {/* Inflection point — highlighted in cyan */}
  <span className="bg-black px-2 py-1 border border-y2k-cyan text-y2k-cyan">Curiosity</span>
  <span>→</span>
  {/* Final destination — magenta background, pulsing */}
  <span className="bg-y2k-magenta text-white px-2 py-1 border border-y2k-magenta animate-pulse">
    CODE
  </span>
</div>
The flow uses a flex-wrap layout so that on small screens it wraps gracefully rather than overflowing horizontally. The Curiosity node switches to cyan styling to mark the inflection point where the career path turned toward development.
The descriptive paragraph following the flow draws a deliberate analogy between debugging code and clinical problem-solving in healthcare — “reading the logs (charts), and isolating the root cause. Now I just do it with fewer bodily fluids and more syntax errors.”

​
guestbook_preview.html — Guestbook Panel (purple WindowPanel)

The left-column panel (md:col-span-1) shows a mock guestbook with a “Sign My Guestbook!” header styled in y2k-cyan with a bottom border underline. Two sample guestbook entries are displayed:

xX_CoolDev_Xx

Date: 10/24/1999“Awesome site! Love the tiled background. Do you want to join my webring?”

Mom

Date: 10/25/1999“Very nice dear. How do I close this window?”(Rendered at 50% opacity — dimmed for comedic effect)
Each entry is a <div> with a flex header row showing name and date, separated from the body by a border-b border-[#333]: 
<div className="bg-black border border-y2k-panelDark p-2 text-xs font-mono">
  <div className="flex justify-between text-y2k-textMuted border-b border-[#333] pb-1 mb-1">
    <span>Name: xX_CoolDev_Xx</span>
    <span>Date: 10/24/1999</span>
  </div>
  <p className="text-y2k-text mt-2">
    Awesome site! Love the tiled background. Do you want to join my webring?
  </p>
</div>

{/* Mom's entry has opacity-50 applied for comedic effect */}
<div className="bg-black border border-y2k-panelDark p-2 text-xs font-mono opacity-50">
  ...
</div>
The guestbook is intentionally read-only on the About page — a preview panel only. The Home page ticker also notes that the full guestbook is currently down for maintenance 🛠️.

​
pet_peeves.gif — Pet Peeves Grid (magenta WindowPanel)

The right panel (md:col-span-2) presents four developer pet peeves as a 2×2 grid. Each cell contains a pixel-art SVG icon in a colored border box, alongside a title and a one-liner subtitle. Cells have hover:border-{color} transition-colors applied for subtle interactivity.
Pet PeeveColorIcon PathSubtitle
Awkward WordingMagentaFace-like path"Click here to click here"
Crooked AlignmentCyanCrosshair path"Off by 1px. Unacceptable."
Off-center ButtonsLimeNested square path"Flexbox exists for a reason."
Fake EnthusiasmOrangeDiamond path"We are THRILLED to announce a minor bug fix!"
<WindowPanel title="pet_peeves.gif" titleBarColor="magenta">
  <p className="font-sans text-sm mb-4">Things I notice (represented as pixel bugs):</p>
  <div className="flex-1 grid grid-cols-2 gap-4 overflow-y-auto pr-2">

    {/* Awkward Wording */}
    <div className="bg-black/50 p-3 border border-y2k-panelDark flex items-center gap-4 hover:border-y2k-magenta transition-colors">
      <div className="w-10 h-10 bg-black flex items-center justify-center border border-y2k-magenta">
        <svg width="24" height="24" viewBox="0 0 24 24" className="pixel-art fill-y2k-magenta">
          <path d="M4 4h16v16H4z M8 8h2v2H8z M14 8h2v2h-2z M10 14h4v2h-4z" />
        </svg>
      </div>
      <div>
        <div className="font-pixel text-lg text-y2k-magenta">Awkward Wording</div>
        <div className="font-mono text-[10px] text-y2k-textMuted">"Click here to click here"</div>
      </div>
    </div>

    {/* Additional peeves follow the same pattern with cyan, lime, and orange variants */}

  </div>
</WindowPanel>
The intro line "Things I notice (represented as pixel bugs):" is a visual pun — the items are developer frustrations (bugs in the colloquial sense) rendered as literal pixel-art bug-like icons.

​
Layout Structure

The About page uses a two-section vertical stack:
  1. origin_story.txt — full-width, flex-none, no scroll clipping.
  2. Three-column grid — grid-cols-1 md:grid-cols-3:
    • Left: guestbook_preview.html (1 column, h-full)
    • Right: pet_peeves.gif (2 columns, h-full, inner grid with overflow-y-auto)
The outer container is flex flex-col gap-6 max-w-5xl mx-auto h-full — height-bounded so that the panels fill the available viewport without a page-level scroll.

Build docs developers (and LLMs) love

Get started for freeTalk to us