Skip to main content

Documentation Index

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

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

The About page presents a personal bio in a fully retro layout. Content is organized into a three-column grid — a left column holding the profile photo window and a speech-bubble “currently” status note, and a wider right column containing a Stats & Facts list, a Likes & Dislikes grid, and a MySpace-style “Top 8 Inspirations” gallery. Each section leans into early-2000s web culture: pixel fonts, dashed borders, bright accent colors, and an animated spinning badge overlaid on the profile photo.

​
Page Sections

​
Profile Window

The left column contains a WindowFrame titled me.jpg. Inside it:
  • Photo — a <img> element pointing to a placeholder image URL. Replace this with your own photo.
  • Spinning badge — a Framer Motion motion.div overlaid in the top-right corner of the photo, rotating 360° on a 10-second loop. It reads 100% NERD and uses a star/polygon clip-path shape.
Below the photo window, a yellow speech-bubble panel shows a casual status note:
Currently: building cool stuff and listening to MP3s.
This is a <div> with a rotated diamond pseudo-element for the speech-bubble tail, rendered in Comic Sans style. It is not an AIM away-message component — it is a static inline element.

​
Stats & Facts

The right column opens with a Stats & Facts heading followed by a bulleted list of hardcoded profile facts:
FieldValue
NameThe Webmaster
LocationCyberspace
OccupationCode Ninja / Pixel Pusher
Favorite Tag<blink> (RIP)

​
Likes & Dislikes

A two-column grid showing 👍 LIKES and 👎 DISLIKES as square-bulleted lists: LIKES: Clean Code · Pizza · Mechanical Keyboards · CSS Variables DISLIKES: Internet Explorer 6 · Spam · Broken Links · Merge Conflicts

​
Top 8 Inspirations

Below the main grid, a full-width bg-win-gray panel titled “My Top 8 Inspirations” renders a 2×4 (mobile) or 4×2 (wider) gallery of portrait cards. Each card shows a name and a square photo. The eight entries are: Tom, Linus, Ada, Grace, Tim, Brendan, Håkon, You!

​
Route Registration

The About component (Dp in the compiled bundle) is mounted at /about: 
// Inside <Routes>:
<Route path="/about" element={<About />} />

​
Updating the Profile Photo

Find the <img> inside the WindowFrame titled me.jpg and replace the src: 
<WindowFrame title="me.jpg">
  <div className="relative">
    <img
      src="/images/your-photo.jpg"
      alt="Me coding"
      className="w-full h-auto border-2 border-black"
    />
    {/* Spinning badge stays in place */}
  </div>
</WindowFrame>
For best results, use a portrait-oriented image. The photo fills the full column width so keep the file size reasonable.

​
Updating the Status Note

Locate the yellow speech-bubble <div> below the WindowFrame and update the paragraph text: 
<div className="bg-yellow-100 border border-yellow-400 p-3 ...">
  <p className="font-comic text-sm ...">
    <strong className="text-blue-700">Currently:</strong>{' '}
    your custom status here.
  </p>
</div>

​
Updating Stats & Facts

Edit the <li> items inside the Stats & Facts <ul> directly in the About component source: 
<ul className="font-times text-lg space-y-2 list-disc list-inside mb-8">
  <li><strong>Name:</strong> Your Name</li>
  <li><strong>Location:</strong> Your City</li>
  <li><strong>Occupation:</strong> Your Job Title</li>
  <li><strong>Favorite Tag:</strong> &lt;marquee&gt;</li>
</ul>

​
Updating Likes & Dislikes

Find the two <ul> elements inside the Likes & Dislikes grid and edit their <li> children: 
{/* Likes */}
<ul className="list-[square] list-inside">
  <li>Clean Code</li>
  <li>Pizza</li>
  {/* Add your own */}
</ul>

{/* Dislikes */}
<ul className="list-[square] list-inside">
  <li>Internet Explorer 6</li>
  <li>Spam</li>
  {/* Add your own */}
</ul>

​
Updating the Top 8

The Top 8 data is an inline array of { name, img } objects rendered with .map(). Find the array in the About component and swap out names and image URLs: 
[
  { name: 'Tom',    img: 'https://...' },
  { name: 'Linus',  img: 'https://...' },
  // Replace with your own inspirations
]
To replace a Unsplash placeholder with a real portrait, use a square image (e.g. 150 × 150 px). Each card renders the image at w-20 h-20 with object-cover, so tightly cropped square crops work best.

Build docs developers (and LLMs) love

Get started for freeTalk to us