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.

The Desktop is the first thing visitors see at / — a teal retro desktop (bg-retro-teal) that acts as the portfolio’s home screen. Ten DesktopIcon shortcuts are arranged in a flex column wrap, including two system icons (My Computer and Recycle Bin) and eight portfolio section shortcuts. The CustomCursor, Taskbar, a CRT flicker overlay, and a radial vignette are all rendered at the app root and remain visible regardless of which sub-route is active.

​
What the Desktop renders

Every portfolio icon links to a route. The table below lists each shortcut in render order, along with its icon, accent color, and destination. The two system icons (My Computer and Recycle Bin) are rendered first and open modal windows rather than navigating to a route.
Icon labelAccent colorRoute
My ComputerGrayModal pop-up (system info)
Recycle BinGrayModal pop-up (deleted files)
About.exeMagenta/about
Projects.folderTurquoise/projects
Skills.txtWhite/skills
Work.dllBrown (#8B4513)/work
CaseStudies.zipNavy/case-studies
Blog.htmlTeal/blog
Contact.batMagenta/contact
Testimonials.logTurquoise/testimonials

​
Win98 Window configuration

The Desktop itself is not wrapped in a Win98Window — it is the root canvas. Window chrome only appears when the user navigates into a sub-route.
PropertyValue
Backgroundbg-retro-teal (Tailwind custom token)
Overlaycrt-overlay crt-flicker div + crt-vignette div
Cursor<CustomCursor /> replaces the native pointer
Navigation bar<Taskbar /> pinned to the bottom of the viewport
A large "DEVELOPER" watermark text is absolutely positioned in the background at -rotate-12, rendered at text-[20vw] with very low opacity, visible on the canvas behind the icons.

​
Entrance animations

Each DesktopIcon plays a fade-in entrance animation via Framer Motion. The icons are staggered so they appear one after another in render order.
1

Mount

The Desktop component mounts and the teal background fills the viewport.
2

Icon stagger

Framer Motion staggers each portfolio DesktopIcon with a delay prop calculated as index * 0.05 seconds (where index is the zero-based position in the portfolio icon array), so icons animate in sequentially.
3

CRT layers

The crt-overlay and crt-vignette div elements are positioned with pointer-events: none over the full viewport, adding depth without blocking clicks.
4

Taskbar

The <Taskbar /> component renders at the bottom, pinned via the router-level wrapper, with the Start button and active-window strip visible immediately.

​
Customizing the desktop icons

The portfolio icon definitions live in the l array inside the Desktop component (wd function) in main.js. Each entry has the following shape: 
// In main.js — Desktop component icon array
{
  name:  "About.exe",       // Text shown below the icon
  path:  "/about",          // React Router path
  icon:  <User size={32} className="text-retro-magenta" />,  // JSX icon element
}
The delay is computed inline as index * 0.05 when mapping over the array, so you don’t need to set it manually on each entry.
Icon positions are laid out with flex flex-col flex-wrap and a fixed height of calc(100vh - 60px). Icons flow top-to-bottom and wrap into new columns automatically. If you add more than eight portfolio icons, they will wrap into a third column.

​
CRT and vignette layers

Two decorative div elements are rendered as siblings to the icon grid: 
{/* CRT flicker overlay */}
<div className="crt-overlay crt-flicker" />

{/* Radial vignette */}
<div className="crt-vignette" />
Both classes are defined in the global CSS / Tailwind @layer blocks inside main.js. Removing either class removes that visual effect with no impact on routing or layout.

DesktopIcon

Props, animation API, and how each shortcut navigates to its route.

Taskbar

The persistent bottom bar with Start menu and active-window indicator.

CustomCursor

The pixel-art cursor and click-sparkle animation rendered on the Desktop.

Architecture & Routing

How React Router hash-based routing connects desktop icons to page routes.

Build docs developers (and LLMs) love

Get started for freeTalk to us