Skip to main content

Documentation Index

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

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

The About page is a two-column layout that blends personal biography with playful RPG game-UI mechanics and a classic Winamp media player sidebar. It uses a 12-column CSS grid to split the page into an 8-column main content area and a 4-column Winamp sidebar, giving the page an asymmetric, lived-in desktop feel. Every element intentionally channels the personality of an early-2000s “About Me” page — with the technical execution of a modern React 18 application.

​
Grid Layout

<div className="max-w-5xl mx-auto grid grid-cols-1 md:grid-cols-12 gap-6 pb-20">
  <div className="md:col-span-8 space-y-6">  {/* Bio + Stats + Gallery */}
  <div className="md:col-span-4 space-y-6">  {/* Winamp sidebar */}
On mobile the grid collapses to a single column. On md and above the 8/4 split is applied.

​
About_Me.exe Window

The main content column opens with a Window component titled “About_Me.exe”, rendered with a User icon from Lucide (pe). The window is !static — meaning it is not draggable and flows in document order like a normal block element.
Visual appearance: Classic Win98 grey window border (bg-win-gray shadow-win-out p-1) with a blue title bar showing a user silhouette icon and the filename label. The inner white content area has p-4 font-comic space-y-4 — Comic Sans styling throughout.

​
Bio Text

The window contains two prose paragraphs in font-comic with a retro-purple VT323 heading “Who am I?”: 
"I'm a developer who remembers when the internet made dial-up noises. Now I build
blazing fast SPAs, but deep down, I still miss the <marquee> tag."

"By day, I write clean, scalable TypeScript and React. By night, I'm probably trying
to center a div using tables just for the thrill of it."
A decorative <hr className="retro-hr"> rule separates the bio text from the stats section below.

​
RPG Stat Bars

Three animated stat bars follow under an <h3> heading “My Stats” (font-vt323 text-2xl text-retro-teal). They are rendered inside a black panel with an inset shadow (bg-black p-4 border-2 border-win-gray shadow-win-in), replicating a retro game HUD. Each bar is rendered by the local StatBar component (f in the compiled bundle), which accepts label, color, and percentage props: 
function StatBar({ label, color, percentage }) {
  return (
    <div>
      <div className="text-white font-vt323 text-sm mb-1">{label}</div>
      <div className="h-4 bg-gray-800 border border-gray-600 w-full">
        <motion.div
          initial={{ width: 0 }}
          animate={{ width: `${percentage}%` }}
          transition={{ duration: 1.5, ease: "easeOut" }}
          className={`h-full ${color}`}
        />
      </div>
    </div>
  );
}
The three stat definitions passed as props:
Stat LabelColor ClassPercentage
HP (Health)bg-red-50085
MP (Mana/Coffee)bg-blue-50040
XP (Experience)bg-retro-yellow92
Visual appearance: The three progress bars animate from zero width to their target percentage over 1.5 seconds with an easeOut curve on page load. HP renders as a red bar at 85%, MP as a blue bar at 40%, and XP as a yellow bar at 92%. Each bar is 16px tall (h-4) against a dark grey track.
The motion.div animation fires once on mount — there is no loop. Framer Motion’s initial / animate props drive the width transition. The transition object specifies duration: 1.5 seconds with ease: "easeOut" for a natural deceleration into the final value.

​
Polaroid Photo Gallery

Below the stats section, two Polaroid-style photos are displayed in a flex flex-wrap gap-6 justify-center row. Each is rendered by the local PolaroidPhoto component (N in the compiled bundle): 
function PolaroidPhoto({ src, caption, rotation }) {
  return (
    <motion.div
      whileHover={{ scale: 1.1, rotate: 0, zIndex: 10 }}
      initial={{ rotate: rotation }}
      className="bg-white p-3 pb-8 shadow-xl border border-gray-200 w-48 flex flex-col items-center cursor-pointer"
    >
      <img
        src={src}
        alt={caption}
        className="w-full h-40 object-cover border border-gray-300 pointer-events-none"
      />
      <span className="font-comic text-sm mt-3 text-gray-800">{caption}</span>
    </motion.div>
  );
}
The two photo instances:
CaptionInitial RotationSource
Me coding (2025)-5degUnsplash code photo
My CPU fan3degUnsplash circuit board photo
Visual appearance: White card frames with pb-8 bottom padding for the wide Polaroid border, a thin grey border, and a heavy drop shadow. Photos are 192px wide (w-48) with a fixed h-40 height and object-cover crop. Each card is initially rotated — the first tilts left, the second tilts right — giving them a scattered-on-a-desk appearance. On hover, both snap to upright (rotate: 0) and scale up 10%, lifting above siblings via zIndex: 10.

​
Winamp 2.91 Sidebar

The 4-column right sidebar renders a faithful Winamp 2.x replica using the Window component titled “Winamp 2.91” with a Music Lucide icon.
Visual appearance: Dark background (bg-[#111]) with font-vt323 text-retro-turquoise text throughout — an accurate approximation of Winamp’s dark green-on-black LCD aesthetic. The window is !static and flows inline.

​
Bitrate Display

A right-aligned text-xs label reads KBPS: 128 KHZ: 44, replicating Winamp’s audio quality indicators.

​
Track Display

A black panel with a grey border contains two elements:
  • An animated time counter displaying 01:42 with animate-pulse
  • A <Marquee> component scrolling the track name at speed: 8: 
    Daft Punk - Harder, Better, Faster, Stronger ***
    Rendered in text-retro-yellow within a w-32 clipping container.

​
Equalizer Visualiser

A 64px-tall (h-12) black panel renders 16 animated equalizer bars using Framer Motion: 
{[...Array(16)].map((_, i) => (
  <motion.div
    key={i}
    className="w-full bg-gradient-to-t from-green-500 via-yellow-500 to-red-500"
    animate={{ height: ["10%", "90%", "30%", "100%", "20%"] }}
    transition={{
      duration: 0.5 + Math.random(),
      repeat: Infinity,
      repeatType: "mirror",
    }}
  />
))}
Each bar has an independently randomised duration between 0.5s and 1.5s, producing a realistic staggered oscillation effect. The gradient (from-green-500 via-yellow-500 to-red-500) matches Winamp’s classic green-to-red visualiser colour scheme.

​
Playback Controls

Four pixel-button controls rendered as plain <button> elements in a centered flex row: 
⏮  ▶  ⏸  ⏭
Each uses px-2 bg-gray-800 border border-gray-600 hover:bg-gray-700 for a dark raised-button appearance. These are decorative; no audio playback is wired.

​
Component Dependencies

ComponentSourceUsage
Window (p)components/Window.jsAbout_Me.exe and Winamp frames
Marquee (_)components/Marquee.jsWinamp track name scroll
motion.divframer-motionStat bar animation, Polaroid hover
AnimatePresenceframer-motion(imported, available for transitions)
user (Lucide)lucide-reactWindow title bar icon
music (Lucide)lucide-reactWinamp window title bar icon

Build docs developers (and LLMs) love

Get started for freeTalk to us