Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/windows-xp-developer/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 entire visual tone of the portfolio. It occupies the full viewport and leans hard into Windows XP nostalgia — a glossy teal Aqua badge containing the developer’s name, a short punchy tagline, and two chunky CTA buttons. The goal is immediate impact: a visitor should know within two seconds that this developer has a strong visual identity and a sense of humour about it.

​
Visual overview

The hero is a single full-screen section centred both vertically and horizontally. A large glossy badge — rendered as a rounded pill with an inset glass highlight and a teal gradient fill — contains the name Alex Developer. Beneath the badge, a tagline reads “Software developer. Now with 100% more gloss.” Two AquaButton components sit below the tagline and act as the primary calls to action.

View Projects CTA

Routes to /projects and opens the My Computer file explorer. The button uses the primary Aqua style — a convex gloss highlight on a blue pill shape.

Contact Me CTA

Routes to /contact and opens the Outlook-style email composer. Uses the secondary Aqua variant with a slightly softer glow.

​
Component structure

The Home page hero is a single centred motion.div that springs into view on mount. The name badge, tagline, and CTA row are all children of this container. 
// Simplified Home page structure
import { AquaButton } from '../components/AquaButton';
import { Bubbles }    from '../components/Bubbles';
import { motion }     from 'framer-motion';
import { useNavigate } from 'react-router-dom';

export default function Home() {
  const navigate = useNavigate();

  return (
    <div className="h-full flex flex-col items-center justify-center p-6 relative">
      <Bubbles />

      <motion.div
        initial={{ opacity: 0, scale: 0.8 }}
        animate={{ opacity: 1, scale: 1 }}
        transition={{ duration: 0.8, type: 'spring', bounce: 0.4 }}
        className="text-center z-10"
      >
        {/* Glossy teal name badge */}
        <div className="aqua-name-badge">
          <h1>Alex Developer</h1>
        </div>

        {/* Tagline */}
        <p>Software developer. Now with 100% more gloss.</p>

        {/* CTA buttons */}
        <div className="cta-row">
          <AquaButton onClick={() => navigate('/projects')}>
            View Projects
          </AquaButton>
          <AquaButton onClick={() => navigate('/contact')} variant="secondary">
            Contact Me
          </AquaButton>
        </div>
      </motion.div>
    </div>
  );
}

​
Customization

All hero content is defined inline in the Home route component inside assets/main.js. To update it, locate the component by searching for "Alex Developer" and change the following values (or edit the originating JSX source if you are running the Vite dev server): 
// In assets/main.js — locate the Home component (search for "Alex Developer")
const heroName    = "Alex Developer";
const heroTagline = "Software developer. Now with 100% more gloss.";
const cta1Label   = "View Projects";    // navigates to /projects
const cta2Label   = "Contact Me";       // navigates to /contact
The name badge uses a teal gradient (from-teal-300 to-teal-500) with a box-shadow inset highlight to produce the Aqua gloss effect. To change the badge colour, find the badge element in the Home component and update the gradient classes.

​
Key interactions

InteractionBehaviour
Page loadHero motion.div scales from 0.8 → 1.0 with a spring entrance (bounce: 0.4, duration: 0.8)
Bubbles backgroundTranslucent orbs drift upward in an infinite loop behind the hero content
Hover on AquaButtonGloss highlight brightens; button lifts via scale: 1.04 transform
Click “View Projects”React Router navigates to /projects (the My Computer explorer)
Click “Contact Me”React Router navigates to /contact (the Outlook composer)
The Bubbles background component runs its own independent animation loop and is not tied to the hero entrance timing. Bubbles are already rising before the text appears, creating a sense of ambient depth.

Build docs developers (and LLMs) love

Get started for freeTalk to us