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.

DesktopIcon places a classic Windows 98 desktop shortcut on the portfolio’s main canvas. Each icon consists of a 40×40px graphic area above a truncated pixel-font label. Icons fade and scale in when the desktop mounts, support single-click selection highlighting, and trigger navigation or a custom callback on double-click. They are the primary way visitors launch windows and explore the portfolio’s content.

​
Props

​
name
string
required
The label text rendered beneath the icon image. Long names are displayed with leading-tight wrapping up to two lines; anything beyond is hidden.
​
icon
ReactNode
required
The visual graphic for the shortcut, rendered inside a 40×40px flex container. Pass an SVG, image element, emoji string, or any React node. Icons get a drop-shadow-md for depth and scale up 110% on hover via a CSS transition.
​
path
string
A React Router route path such as "/projects" or "/about". When provided, a double-click calls useNavigate(path) to perform a client-side route change. Takes precedence over onClick — if both are supplied, path wins.
​
onClick
function
A callback invoked on double-click when no path prop is supplied. Use this to open a window component managed in local state rather than navigating to a new route.
​
delay
number
default:0
A stagger delay in seconds applied to the Framer Motion entrance animation. Passing incremental values (e.g. 0, 0.1, 0.2) across a set of icons creates a cascade effect as the desktop loads.

​
Single-click vs. double-click behavior

DesktopIcon distinguishes between selection and activation, matching the Windows 98 interaction model: Single-click — Updates an internal selected boolean to true, visually highlighting the icon. The icon wrapper gains bg-retro-navy/40 and a border-dotted border-retro-navy outline. The label text switches to bg-retro-navy text-retro-white. Selection is cleared when the icon loses focus (onBlur). Double-click — Triggers navigation or the onClick callback. If path is defined, React Router’s useNavigate is called with that path. Otherwise, onClick is invoked. The component does not track whether a single-click was followed by a second click using a timer — React’s synthetic onDoubleClick event is used directly, so both onClick (selection) and onDoubleClick (activation) fire on a double-click.

​
Entrance animation

Each DesktopIcon is wrapped in a motion.div from Framer Motion with the following configuration: 
initial: { opacity: 0, scale: 0.8 }
animate: { opacity: 1, scale: 1  }
transition: { delay: delay, duration: 0.2 }
The delay prop feeds directly into transition.delay. Set staggered delay values across all icons on a page to animate them in sequentially rather than all at once.

​
Usage

import { D as DesktopIcon } from './components/DesktopIcon';
import { Monitor, Terminal, Briefcase } from 'lucide-react';

export default function Desktop() {
  const [aboutOpen, setAboutOpen] = React.useState(false);

  return (
    <div className="relative w-screen h-screen bg-retro-teal overflow-hidden">

      {/* Path-based navigation */}
      <DesktopIcon
        name="Stuff I Built"
        icon={<Monitor size={36} className="text-retro-white" />}
        path="/projects"
        delay={0}
      />

      {/* Local state window */}
      <DesktopIcon
        name="About Moi"
        icon={<Terminal size={36} className="text-retro-white" />}
        onClick={() => setAboutOpen(true)}
        delay={0.1}
      />

      <DesktopIcon
        name="~*~ Where I've Been ~*~"
        icon={<Briefcase size={36} className="text-retro-white" />}
        path="/work"
        delay={0.2}
      />

    </div>
  );
}

Desktop Page

See how all desktop icons are laid out on the main portfolio canvas.

Win98Window

The window component icons typically open on double-click.

Architecture: Routing

How React Router connects icon paths to page components.

Adding Pages

Add a new desktop icon and route to the portfolio.

Build docs developers (and LLMs) love

Get started for freeTalk to us