Skip to main content

Documentation Index

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

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

The About page (/about) tells the portfolio owner’s career story through a series of era-appropriate UI widgets rather than a plain biography block. A faux vBulletin forum thread opens the narrative as user FutureDev99, an AIM-style Away Message window follows with candid reflections on career pivots, a yellow legal-pad journal covers the learning journey in three dated entries, and a retro Web Ring widget closes with a present-day “about” paragraph. The page fades in as a motion.div and is capped at max-w-4xl with space-y-12 vertical rhythm.

​
Page Structure

// About page component (minified identifier: nm)
const AboutPage = () => (
  <motion.div
    initial={{ opacity: 0 }}
    animate={{ opacity: 1 }}
    exit={{ opacity: 0 }}
    className="max-w-4xl mx-auto space-y-12 pb-16"
  >
    {/* Section header */}
    <div className="text-center mb-8">
      <h2 className="font-display text-4xl text-y2k-magenta text-glow-magenta mb-2">
        ABOUT_ME.TXT
      </h2>
      <p className="font-code text-sm text-gray-400">
        Loading personal history... 100%
      </p>
    </div>

    {/* 1. vBulletin thread — origin story */}
    <Window title="vBulletin - General Discussion" icon={<MessageSquare />}>
      {/* Thread: "So I'm thinking about nursing school?" */}
      {/* Posted: Oct 14, 2008, 04:20 PM by FutureDev99 */}
    </Window>

    {/* 2. AIM Away Message window */}
    <div className="flex justify-center">
      {/* AIM-style chrome: gradient title bar, retro body, "Close" button */}
    </div>

    {/* 3. Dev_Journal.txt — lined notepad */}
    <Window title="Dev_Journal.txt" icon={<BookOpen />}>
      {/* Day 1: The Descent / Day 45: JavaScript / Day 120: The Epiphany */}
    </Window>

    {/* 4. Web Ring widget */}
    <div className="border-4 border-double border-y2k-teal p-6 text-center bg-black">
      {/* "PROUD MEMBER OF THE MODERN WEB RING" */}
      {/* Present-day bio paragraph + < PREV SITE | NODE #404 | NEXT SITE > */}
    </div>
  </motion.div>
);

​
Section Breakdown

vBulletin Thread

Mimics the classic vBulletin 3.x forum skin with a #5c7099 header bar, a left sidebar showing the FutureDev99 avatar placeholder (Avatar.jpg, Posts: 1,337, Join Date: Jan 2005), and a right post body. The signature reads ♫ Currently listening to: Linkin Park - In The End.

AIM Away Message

A standalone AIM window (not using the Window component — it uses its own #ece9d8/#0a246a → #a6caf0 gradient chrome). The scrollable body shows an Auto-Reply labelled in blue, then five paragraphs covering healthcare, retail, merchandising, and the pivot to software.

Dev Journal

A Window wrapping a #ffffcc legal-pad div with a CSS linear-gradient ruled-line background at 24 px intervals. Three journal entries: Day 1: The Descent, Day 45: JavaScript, and Day 120: The Epiphany.

Web Ring Widget

A double-border teal box on a dark bg-dots-pattern background. Contains the present-day bio paragraph and a three-node Web Ring navigator (< PREV SITE | NODE #404 | NEXT SITE >). The NODE badge uses a magenta Globe icon from Lucide React.

​
Content Reference

​
vBulletin Thread — Post Content

The post body is a single <div className="p-4 bg-white flex-1 text-sm"> containing four paragraphs:
ContentText
Opening"Hey everyone,"
Career pivotNursing school → healthcare, wanting to help people and solve complex problems.
CounterpointContrasts it with “messing around with HTML on my profile pages”
CTA"Has anyone else made a big pivot?"

​
AIM Away Message — Body Lines

LineContent
Auto-Reply label~*~ Out living life ~*~
Healthcare reflectionHealthcare was intense. Retail/merchandising taught chaos management.
Software pivot"I keep looking at the software we use and thinking 'I could build this better.'"
Sign-offbrb, googling "how do websites work" (red italic)

​
Dev Journal — Entries

EntryHeadlineBody
Day 1The DescentHTML/CSS is like riding a bike on fire. Everything is flexbox now.
Day 45JavaScript[] + [] = "" confusion, but the first working modal felt like wizardry.
Day 120The EpiphanyNursing = triage/empathy. Retail = UX. Merchandising = architecture. It all connects.

​
Web Ring — Present-day Bio

Today, I’m a detail-oriented software developer who brings a wildly diverse background to the table. I build robust, accessible, and occasionally sarcastic web applications. I care about the user because I’ve been the frustrated user on the other side of the screen.

​
Customising This Page

This is a pre-built static site. The repository contains only compiled output — there is no src/ directory or editable source files. The customisation steps below describe changes that must be made in the original source project before rebuilding, not directly in the minified bundle.
1

Update the vBulletin thread date and username

In your source project, find the bg-[#5c7099] header <div> inside the vBulletin - General Discussion Window. Change the Posted: date string (Oct 14, 2008, 04:20 PM) and the username (FutureDev99). Update Posts:, Join Date:, and Location: in the sidebar metadata block to match your own history.
2

Edit the AIM away message text

In the source project, the AIM window body is a font-serif <div>. Each paragraph is a separate <p> with mb-3. Replace the five paragraphs with your own career-pivot narrative. Keep the text-blue-600 font-bold Auto-Reply: label for visual authenticity.
3

Rewrite the Dev Journal entries

In the source project, locate the three <div> blocks inside the Dev_Journal.txt Window. Each has an <h4> (day/title) and a <p> (body). Change the day numbers and headings to match your own learning milestones. The lined-paper background is a pure CSS backgroundImage — do not remove it.
4

Update the present-day bio paragraph

In the source project, inside the Web Ring widget (border-4 border-double border-y2k-teal div), find <p className="font-body text-sm text-gray-300 max-w-2xl mx-auto mb-6"> and replace the bio with your own. Keep it under three sentences — the widget is narrow.
5

Change the Web Ring node number

The <span className="text-y2k-turquoise">NODE #404</span> string inside the Web Ring navigator is purely decorative. Change 404 to any number that feels personal (your birth year, first port number you memorised, etc.).
The AIM Away Message window is not built with the shared Window component. It uses its own hardcoded #ece9d8 background and from-[#0a246a] to-[#a6caf0] title bar gradient to match authentic AIM 5.x chrome. If you want to change the title bar style in the source project, edit the bg-gradient-to-r from-[#0a246a] to-[#a6caf0] class directly on that element.
The forum signature line (♫ Currently listening to: Linkin Park - In The End) is a perfect easter egg spot. Change the artist and song to anything you want — it’s inside the mt-8 pt-2 border-t border-dashed signature <div> at the bottom of the post body.

Build docs developers (and LLMs) love

Get started for freeTalk to us