Skip to main content

Documentation Index

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

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

Taskbar is the persistent navigation bar fixed to the bottom of every page in the portfolio. It mirrors the iconic Windows 98 shell chrome: a Start button on the left that opens an animated flyout menu, an active-window indicator in the center, and a system tray on the right housing a visitor counter, two pulsing status dots, and a live clock. The component is entirely self-contained — it reads the current route from React Router and manages its own state.

​
Start button and flyout menu

Clicking Start toggles an open boolean. When true, an animated motion.div flyout panel appears immediately above the Start button using Framer Motion’s AnimatePresence for enter/exit transitions: 
initial:  { opacity: 0, y: 10 }
animate:  { opacity: 1, y: 0  }
exit:     { opacity: 0, y: 10 }
transition: { duration: 0.1 }
The flyout is a two-column layout. The left column is a narrow w-8 strip with bg-retro-navy background displaying the text “Windows 98” rendered with writing-mode: vertical-rl and rotate(180deg), making it read from bottom to top — an authentic reproduction of the Windows 98 Start menu sidebar. The right column is a bg-retro-gray list of menu items. Clicking any item with a path calls useNavigate(path) and closes the menu.

​
Start menu items

LabelRouteIcon
Programs(folder, no navigation — divider follows)Folder
About Moi/aboutUser
Stuff I Built/projectsMonitor
My L33t Skillz/skillsTerminal
* Where I’ve Been */workBriefcase
Deep Dives/case-studiesFileText
My Webrings & Writings/blogBookOpen
(divider)——
Sign My Guestbook/contactMail
Kind Words/testimonialsMessageSquare
Divider rows render as a two-pixel horizontal rule (border-t border-retro-darkgray border-b border-retro-white) that visually separates groups, matching the Windows 98 menu separator style.

​
Active page indicator

The center region of the taskbar displays the currently active page as a win98-in inset button — the same beveled, sunken styling used by open application buttons in original Windows 98. The component derives the label by matching useLocation().pathname against the Start menu item list:
  • If the path is "/" (the desktop), no button is shown and the center region is empty.
  • If the path matches a known menu item, that item’s name is displayed (e.g. "Stuff I Built").
  • If the path is unrecognized, the button shows "Unknown".
The button is non-interactive (clicking it does nothing) and exists purely as a visual indicator.

​
System tray

The system tray sits at the right end of the taskbar inside a win98-in panel and contains three elements rendered left-to-right: VisitorCounter — The six-digit LED-style session counter (hidden on small screens via hidden sm:block). See the VisitorCounter docs for full details on how the count is stored and displayed. Status dots — Two small (w-3 h-3) filled circles with rounded-full:
  • A bg-retro-turquoise dot with animate-pulse (Tailwind’s pulse animation).
  • A bg-retro-magenta dot (static, no animation).
Retro clock — A live time display formatted as hh:mm using toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }). The time is held in a Date state value that is refreshed every second by a setInterval (cleaned up on unmount via the useEffect return function). The clock uses font-mono text-xs.

​
Usage

Taskbar accepts no props and manages all its own state. Add it once at the application root so it persists across all route changes: 
import Taskbar from './components/Taskbar';
import { Outlet } from 'react-router-dom';

export default function App() {
  return (
    <>
      <Outlet />
      <Taskbar />
    </>
  );
}
Because Taskbar is position: fixed; bottom: 0, it overlays whatever page content is beneath it. Ensure page layouts account for the h-10 (40px) taskbar height — for example, by adding pb-10 to the desktop container — so that content near the bottom of the viewport is not permanently obscured.

VisitorCounter

The LED counter component rendered inside the system tray.

CustomCursor

The pixel-art cursor that pairs with the taskbar for full Win98 immersion.

Architecture: Routing

How the Start menu paths map to React Router routes.

Desktop Page

The main desktop canvas that sits above the taskbar.

Build docs developers (and LLMs) love

Get started for freeTalk to us