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 StartMenu component is the portfolio’s primary navigation panel. Triggered by the green Start button in the Taskbar, it slides up from the bottom-left corner of the screen as a frosted-glass overlay — faithfully echoing the classic Windows XP Start Menu layout while incorporating modern Framer Motion animations and Tailwind backdrop blur. The menu wraps its content in AnimatePresence so both mount and unmount transitions are fully animated.

​
Structure

The overlay is a fixed w-80 panel anchored at bottom-12 left-0 (just above the Taskbar). It is built from three vertical sections:

​
Header — user badge

An xp-titlebar gradient bar at the top of the menu displays a circular DiceBear avatar alongside the username and role. 
┌──────────────────────────────────┐
│  [Avatar]  Alex Developer        │
│            Administrator         │
├──────────────────────────────────┤
The avatar is fetched from the DiceBear avataaars API (seed=Alex, backgroundColor=b6e3f4).

​
Two-column navigation

Below the header, two columns share the navigation links:
  • Left column (white background, flex-1) — the first five items rendered at full width with icon + label.
  • Right column (w-32, bg-blue-50/50) — the remaining four items in a more compact layout.
┌──────────────────┬──────────────┐
│ 👤 Home          │ 💿 Case...   │
│ 👤 About Me      │ 📚 Articles  │
│ 📁 My Projects   │ 💬 Testimon… │
│ ⚡ Skills Dash…  │ ✉️ Contact   │
│ 💼 Work History  │              │
└──────────────────┴──────────────┘

​
Footer — Log Off bar

A blue gradient bar (from-blue-600 to-blue-500) at the bottom holds a “Log Off” button. Clicking it calls onClose, dismissing the menu.

​
Navigation items

All nine portfolio routes are defined in the menuItems array: 
const menuItems = [
  { path: '/',             label: 'Home',             icon: <User /> },
  { path: '/about',        label: 'About Me',         icon: <User /> },
  { path: '/projects',     label: 'My Projects',      icon: <FolderOpen /> },
  { path: '/skills',       label: 'Skills Dashboard', icon: <Zap /> },
  { path: '/work',         label: 'Work History',     icon: <Briefcase /> },
  { path: '/case-studies', label: 'Case Studies',     icon: <Disc /> },
  { path: '/articles',     label: 'Articles',         icon: <Library /> },
  { path: '/testimonials', label: 'Testimonials',     icon: <MessageSquare /> },
  { path: '/contact',      label: 'Contact',          icon: <Mail /> },
];
Clicking any item navigates to the corresponding route via useNavigate() and then calls onClose to dismiss the menu.

​
Active route styling

Items whose path matches the current useLocation().pathname receive highlighted styling:
  • Left column: bg-blue-50/50 text-blue-600 font-semibold
  • Right column: text-blue-700 font-semibold
Icons of active items are tinted text-blue-500 to reinforce the selection state.

​
Props

​
isOpen
boolean
required
Controls whether the Start Menu is visible. Pass true to show the menu and false to hide it. The value is consumed by AnimatePresence so the exit animation plays before the component unmounts.
​
onClose
() => void
required
Callback invoked when the menu should close — fired after any navigation link is clicked, when the Log Off button is pressed, or when the transparent backdrop overlay is clicked.

​
Animation

The menu panel uses Framer Motion with the following transition spec: 
initial:    { opacity: 0, y: 20, scale: 0.95 }
animate:    { opacity: 1, y: 0,  scale: 1    }
exit:       { opacity: 0, y: 20, scale: 0.95 }
transition: { duration: 0.2 }
This produces a quick, snappy slide-up-and-scale-in effect on open, and the reverse on close.

​
Usage

The StartMenu is instantiated once inside Taskbar, which controls the isOpen state: 
import { S as StartMenu } from './components/StartMenu.js';

function Taskbar() {
  const [isMenuOpen, setIsMenuOpen] = React.useState(false);

  return (
    <>
      <StartMenu
        isOpen={isMenuOpen}
        onClose={() => setIsMenuOpen(false)}
      />
      <div className="fixed bottom-0 left-0 w-full h-12 ...">
        <button onClick={() => setIsMenuOpen(!isMenuOpen)}>
          start
        </button>
      </div>
    </>
  );
}

Build docs developers (and LLMs) love

Get started for freeTalk to us