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 Home page is the first thing visitors see — a full-viewport hero that immediately communicates the Y2K aesthetic and the developer’s personality. It pairs a punchy animated headline with floating RetroWindow widgets that users can drag around the screen, making the portfolio itself feel like a playable OS desktop. On mobile, the layout collapses gracefully so the core message still lands without the drag behavior.

​
Route

This page renders on the index route (/), declared as: 
<Route index element={<HomePage />} />

​
Hero Layout

The hero is a flex container (flex flex-col md:flex-row gap-8 items-start pt-12) that splits into two columns on medium screens and above.

​
Left Column — Headline, Stickers, and CTAs

The left column (flex-1 flex flex-col gap-8 z-10) holds the primary content block. Headline The <motion.h1> element fades in from below (initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }) and renders in two lines: 
<motion.h1
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  className="text-5xl md:text-7xl font-display font-bold leading-tight"
>
  HELLO, WORLD. <br />
  <span className="rainbow-text">I BUILD THINGS.</span>
</motion.h1>
The second line uses the .rainbow-text utility class, which applies a cycling neon gradient animation to the text. The headline is sized at text-5xl on mobile and scales up to text-7xl on medium screens. Sticker Components Two <Sticker> callout labels are absolutely positioned relative to the headline container:
LabelColorRotationPosition
Chaotic Goodmagenta+12°-top-6 -right-4 md:-right-12
100% Humancyan-8°-bottom-4 left-1/4
<div className="absolute -top-6 -right-4 md:-right-12">
  <Sticker color="magenta" rotation={12}>Chaotic Good</Sticker>
</div>
<div className="absolute -bottom-4 left-1/4">
  <Sticker color="cyan" rotation={-8}>100% Human</Sticker>
</div>
Subtitle Paragraph Below the headline block, a font-mono paragraph provides a brief bio in gray:
Former healthcare worker turned software developer. I write code that works, interfaces that pop, and commit messages that read like diary entries.
CTA Buttons Two call-to-action buttons sit in a flex row (flex gap-4 mt-4): 
<button className="px-6 py-3 bg-y2k-lime text-black font-display tracking-widest border-2 border-y2k-lime shadow-retro-lime hover:translate-y-1 hover:shadow-none transition-all">
  ENTER_SYSTEM
</button>
<button className="px-6 py-3 bg-transparent text-y2k-magenta font-display tracking-widest border-2 border-y2k-magenta hover:bg-y2k-magenta/10 transition-all">
  READ_DOCS
</button>
  • ENTER_SYSTEM — lime background, black text, drops 1px on hover and removes the box shadow for a pressed effect.
  • READ_DOCS — transparent background with magenta border and text; fills with a 10% magenta tint on hover.

​
Right Column — Floating RetroWindow Widgets

The right column (flex-1 relative h-[500px] w-full hidden md:block) is only visible on medium screens and above. It holds two absolutely positioned RetroWindow components that users can drag freely.

​
now_playing.exe (Cyan, Draggable)

Positioned at top-0 right-0 w-80 z-20. 
<RetroWindow title="now_playing.exe" color="cyan" draggable={true}>
  {/* media player UI */}
</RetroWindow>
The window renders a mini media player layout:
  • Album art placeholder: a w-16 h-16 box with a Music icon in cyan.
  • Track info: “Currently Learning” label in font-mono font-bold text-y2k-cyan, with “Rust & WebAssembly” as the track name and a static 01:24 / 99:99 timestamp below.
  • Transport controls: Rewind (<Rewind />), Play (<Play />), and FastForward (<FastForward />) Lucide icons in a flex row separated by a top border.

​
system_status.log (Purple, Draggable)

Positioned at top-48 right-20 w-72 z-10. 
<RetroWindow title="system_status.log" color="purple" draggable={true}>
  {/* terminal boot log */}
</RetroWindow>
The window renders a terminal-style boot log in font-mono text-xs text-y2k-purple: 
> Initializing coffee protocol...
> Coffee loaded: 100%
> Compiling reality...
> ERROR: Sleep not found    ← rendered in text-red-500
_                           ← blinking cursor via animate-pulse

​
Mobile Layout

On small screens the right column is hidden (hidden md:block). A separate mobile-only block (md:hidden flex flex-col gap-6 w-full mt-12) renders a simplified, non-draggable version of now_playing.exe directly below the hero text: 
<RetroWindow title="now_playing.exe" color="cyan">
  <div className="flex items-center gap-4">
    <div className="w-12 h-12 bg-y2k-gray border border-y2k-cyan flex items-center justify-center">
      <Music className="text-y2k-cyan" size={20} />
    </div>
    <div>
      <div className="font-mono font-bold text-y2k-cyan">Currently Learning</div>
      <div className="font-sans text-sm text-gray-300">Rust & WebAssembly</div>
    </div>
  </div>
</RetroWindow>
The transport buttons are omitted in the mobile variant. The window is not draggable (draggable prop is absent, defaulting to false).

​
Customization

​
Updating “Currently Learning”

The “Currently Learning” text and track name appear in two places in the component — the desktop widget and the mobile widget. Update both the label and the track name string: 
// Desktop widget (and mobile widget below)
<div className="font-mono font-bold text-y2k-cyan">Currently Learning</div>
<div className="font-sans text-sm text-gray-300">Rust & WebAssembly</div>
Replace "Rust & WebAssembly" with whatever technology you are currently studying. The timestamp (01:24 / 99:99) is static and can be updated or removed as desired.

​
Updating the System Status Messages

The boot messages in system_status.log are hardcoded JSX inside the Home component. To change them, edit the <p> elements within the purple RetroWindow: 
<RetroWindow title="system_status.log" color="purple" draggable={true}>
  <div className="font-mono text-xs text-y2k-purple space-y-1">
    <p>&gt; Initializing coffee protocol...</p>
    <p>&gt; Coffee loaded: 100%</p>
    <p>&gt; Compiling reality...</p>
    <p className="text-red-500">&gt; ERROR: Sleep not found</p>
    <p className="animate-pulse">_</p>
  </div>
</RetroWindow>
Add additional <p> lines, change the error message text, or apply text-y2k-lime to any line to style it as a success message. The blinking cursor (animate-pulse) should remain as the final element.

​
Connecting the CTA Buttons

Both CTA buttons are currently unstyled <button> elements. To wire them up to routes, replace them with React Router <Link> components: 
import { Link } from 'react-router-dom';

<Link to="/projects" className="px-6 py-3 bg-y2k-lime text-black ...">
  ENTER_SYSTEM
</Link>
<Link to="/writing" className="px-6 py-3 bg-transparent text-y2k-magenta ...">
  READ_DOCS
</Link>

Build docs developers (and LLMs) love

Get started for freeTalk to us