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 Home page serves as the primary landing experience for the y2k-web portfolio. It immediately immerses visitors in a late-1990s / early-2000s web aesthetic — complete with a cursor trail animation, an animated 3D-tilting gradient headline, and a marquee ticker scrolling across the top. The layout is deliberately maximalist, evoking the era of GeoCities and personal homepages, while the underlying implementation uses React 18 and Framer Motion to keep everything smooth and performant.

​
Key Sections and Widgets

Hero Headline

Two stacked retro gradient headings that tilt in 3D using a looping Framer Motion rotateX/rotateY animation. The first line uses a retro-cyan → retro-blue gradient; the second uses retro-pink → purple. Both are skewed with skew-x-[-10deg] for a slanted impact look.

MarqueeText Ticker

A continuously scrolling marquee banner rendered immediately below the hero. The default text reads +++ UPDATED TODAY +++ HIRE ME PLZ +++ BEST VIEWED IN NETSCAPE NAVIGATOR +++ NO RE-POSTING MY ART +++. It accepts a text prop and a speed prop (default 15).

Layout Table with Bio

A two-column HTML <table> styled with Windows-98-era borders. The left column contains a ~*~ Navigation ~*~ link list and a dancing-baby GIF. The right column holds a bio paragraph and a yellow “WARNING: THIS SITE IS HIGHLY ADDICTIVE!!!” callout box.

Guestbook Form Embed

The Guestbook component (components/Guestbook.js) is embedded directly in the Home page under a “Don’t forget to sign!” heading. Visitors can sign the guestbook without navigating away from the home view.

VisitorCounter Widget

A vintage hit-counter widget rendered as a six-digit odometer readout. On mount it reads from localStorage (visitor_count), increments the count by a small random amount, and displays the result as individual digit tiles on a black background.

​
Route Registration

The Home component (Mp in the compiled bundle) is mounted at the root route (/) inside the app router: 
// Inside <Routes>:
<Route path="/" element={<Home />} />

​
Customizing the Hero Text

The two gradient headings are hardcoded strings in the Home component’s JSX. Open the Home component source and locate the two <h1> elements inside the Framer Motion motion.div: 
<motion.div
  animate={{ rotateX: [0, 20, 0, -20, 0], rotateY: [0, 10, 0, -10, 0] }}
  transition={{ repeat: Infinity, duration: 5, ease: 'easeInOut' }}
>
  <h1 className="... bg-gradient-to-b from-retro-cyan to-retro-blue ...">
    WELCOME TO MY
  </h1>
  <h1 className="... bg-gradient-to-b from-retro-pink to-purple-600 ...">
    HOMEPAGE!
  </h1>
</motion.div>
Replace the string content of each <h1> with your own headline copy. To change the gradient color stops, edit the Tailwind gradient classes (from-* and to-*) or override them in your CSS.

​
Customizing the MarqueeText Ticker

The MarqueeText component accepts a text prop and a speed prop. Find its usage in the Home component and update the text value: 
<MarqueeText
  text="+++ YOUR CUSTOM MARQUEE TEXT +++ GOES HERE +++"
  speed={15}
/>
Lower speed values scroll faster; higher values scroll slower.

​
Customizing the Bio

The bio content lives in the right-hand <td> of the layout table. Locate and update the paragraph text and the navigation links in the left-hand <td>: 
{/* Left column - navigation links */}
<h2>~*~ Navigation ~*~</h2>
<ul>
  <li>👉 <a href="#/about">All About Me!!!</a></li>
  <li>👉 <a href="#/projects">My Projects (Click Em!!)</a></li>
  {/* Add or remove links here */}
</ul>

{/* Right column - bio copy */}
<h2>My Lil Corner of the Web</h2>
<p>Hello surfer! Welcome to my personal slice of the information superhighway...</p>
The cursor trail animation (CursorTrail / S export from Primitives.js) is rendered globally at the app level, not inside the Home component. It tracks mouse movement and spawns ✦ sparkle particles. On devices that have prefers-reduced-motion: reduce set, the trail is automatically disabled.

Build docs developers (and LLMs) love

Get started for freeTalk to us