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 Home page (/) is the first thing visitors see and sets the tone for the entire portfolio. A scrolling magenta marquee ticker spans the full width at the top, a giant HELLO_WORLD headline glows with a magenta drop-shadow, and a responsive grid of retro OS windows below summarises every major section — about, projects, skills, blog, and a playful “coffee break” widget. All motion is handled by Framer Motion’s AnimatePresence/motion.div system so the page fades and slides in as a single animated unit.

​
Page Structure

The root component (tm) mounts as a motion.div with a vertical slide-in animation and renders two primary zones:
  1. Hero — full-width heading, tagline, and accent marquee.
  2. Dashboard grid — five Window cards laid out in a CSS Grid (grid-cols-1 md:grid-cols-2 lg:grid-cols-3).
// Home page component (minified identifier: tm)
const HomePage = () => (
  <motion.div
    initial={{ opacity: 0, y: 20 }}
    animate={{ opacity: 1, y: 0 }}
    exit={{ opacity: 0, y: -20 }}
    className="h-full w-full flex flex-col gap-6"
  >
    {/* Hero */}
    <div className="text-center py-8 relative">
      <h2 className="font-display text-5xl md:text-7xl text-white tracking-widest text-glow-magenta">
        HELLO_WORLD
      </h2>
      <p className="font-code text-y2k-teal text-lg md:text-xl">
        <span className="text-y2k-lime">&gt;</span> Software Developer
        <span className="text-y2k-violet"> | </span> Digital Tinkerer
        <span className="text-y2k-violet"> | </span> Nostalgia Enthusiast
      </p>
    </div>

    {/* Dashboard grid — 5 Window cards */}
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 pb-12">
      <Window title="about_me.txt" icon={<UserIcon />} className="h-64">
        {/* Bio snippet + link to /about */}
      </Window>
      <Window title="projects.dir" icon={<FolderIcon />} className="h-64">
        {/* Recent builds list + "EXECUTE ./projects.sh" CTA */}
      </Window>
      <Window title="sys_reqs.exe" icon={<CpuIcon />} className="h-64">
        {/* Mini skill bars: Frontend 90%, Backend 75%, Debugging 110% */}
      </Window>
      <Window title="blog_roll.html" className="h-64 md:col-span-2 lg:col-span-1">
        {/* Latest blog post snippet */}
      </Window>
      <Window title="coffee_break.exe" className="h-64 lg:col-span-2">
        {/* UnderConstruction widget */}
      </Window>
    </div>
  </motion.div>
);

​
Key UI Elements

Marquee Ticker

The Marquee component (exported as M from RetroElements.js) renders a magenta full-width bar with the text +++ WELCOME TO MY CORNER OF THE WEB +++ CURRENTLY DEBUGGING REALITY +++ BEST VIEWED IN ANY BROWSER, YOU SURVIVOR +++ scrolling on a CSS animate-marquee keyframe. The global layout wraps every page with this ticker.

HELLO_WORLD Hero

A text-glow-magenta CSS shadow utility class creates the neon glow effect on the oversized display font. The tagline beneath uses font-code (monospace) and colour-coded > and | separators in lime and violet.

Window Cards

Each card is the shared Window component — a retro OS chrome with a gradient title bar (from-y2k-teal to-y2k-turquoise), minimise/maximise/close buttons, and a dark scrollable body panel.

Mini Skill Bars

The sys_reqs.exe window previews three skill DLL bars: Frontend.dll (violet, 90 %), Backend.dll (teal, 75 %), and Debugging.dll (orange, 110 %, animate-pulse). These are hardcoded preview values separate from the full Skills page.

​
Retro Components Used

ComponentExportWhere Used
MarqueeM from RetroElements.jsGlobal layout, wraps every page
BlinkBadgeB from RetroElements.jsprojects.dir window header
UnderConstructionU from RetroElements.jscoffee_break.exe window body
HitCounterH from RetroElements.jsSidebar layout, count="00404"

​
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 to assets/main.js (which is a minified production bundle).
1

Change the hero tagline

In your source project, open the Home page component and find the <p> element containing Software Developer | Digital Tinkerer | Nostalgia Enthusiast. Replace the text nodes between the <span> separators with your own descriptors, then rebuild the project.
2

Update the marquee message

The Marquee component in the global layout receives its text prop from the App/layout wrapper. In the source project, locate the string WELCOME TO MY CORNER OF THE WEB and replace it with your own ticker copy, then rebuild.
3

Edit the 'about_me.txt' window snippet

In the source project, locate the about_me.txt Window card. The career path string Nursing School -> Healthcare -> Retail -> Merchandising -> "Wait, how do websites actually work?" -> Software Development. is a plain text node. Update it to reflect your own journey, then rebuild.
4

Update the projects preview list

Inside the source project’s projects.dir Window, find the <ul> with the project name <li> items. Replace these with your most recent project names. Each item uses a ChevronRight icon from Lucide React.
5

Adjust the mini skill bar percentages

The three skill DLL preview bars have inline widths (w-[90%], w-[75%], w-full). In the source project, update the percentage values and labels (Frontend.dll, Backend.dll, Debugging.dll) to match your actual top skills.
6

Replace the latest blog post snippet

In the source project, the blog_roll.html Window contains a hardcoded post title and preview sentence. Replace both the title and body copy with your latest post’s info, then rebuild.

​
Component Reference

<Window
  title="about_me.txt"     // Title bar text
  icon={<Icon />}           // Optional icon before title
  className="h-64"          // Additional Tailwind classes
  isActive={true}           // true = teal gradient bar, false = gray
  onClose={() => {}}        // Optional close button handler
>
  {children}
</Window>
Props:
PropTypeDefaultDescription
titlestring—Text displayed in the OS title bar
iconReactNodeundefinedIcon rendered before the title
classNamestring""Extra classes on the outer container
isActivebooleantrueActive windows get the teal gradient title bar
onClose() => voidundefinedWires up the ✕ button
The Home page is the only page with initial={{ opacity: 0, y: 20 }} and exit={{ opacity: 0, y: -20 }}. All other pages use the simpler initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} pattern. This gives the home page a distinctive upward-slide entrance that signals it as the root.
The visitor counter in the sidebar (HitCounter component, exported as H from RetroElements.js) is hardcoded to "00404". In the source project, update the count prop on the <HitCounter count="00404" /> instance in the layout component to reflect a real count, or wire it up to a serverless analytics endpoint.

Build docs developers (and LLMs) love

Get started for freeTalk to us