Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/retrowin/llms.txt

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

RetroWin is a single-page React 18 application that simulates a Windows 98 desktop environment in the browser. Rather than a conventional page layout, the entire viewport is treated as a desktop surface: icon grid, draggable windows, a persistent taskbar, and a CRT scanline overlay all compose into one cohesive illusion. React Router v6 (hash-based) determines which retro window is currently open, while Framer Motion handles drag-and-drop repositioning of those windows.

​
Component hierarchy

The root component ud() — mounted into #root by React 18’s createRoot — wraps the whole application in a HashRouter and lays out every major layer as siblings inside a single full-screen div: 
<HashRouter>           ← React Router v6 (hash-based)
  <div>                ← teal desktop surface (bg-win-teal, 100vw × 100vh)
    <CRTOverlay />     ← fixed overlay (z-100)
    <Desktop />        ← icon grid (z-0)
    <Routes>
      <Route path="/about"    element={<AboutWindow />} />
      <Route path="/projects" element={<ProjectsWindow />} />
      <Route path="/skills"   element={<SkillsWindow />} />
      <Route path="/contact"  element={<ContactWindow />} />
    </Routes>
    <Mascot />         ← fixed bottom-right (z-55)
    <Taskbar />        ← fixed bottom bar (z-60)
  </div>
</HashRouter>
The Desktop component renders the desktop icon grid and, when the path is /, also mounts the welcome.htm RetroWindow that greets first-time visitors. Every routed page (AboutWindow, ProjectsWindow, SkillsWindow, ContactWindow) is itself a RetroWindow — the shared draggable window shell component.

​
Z-index layers

All layers are siblings in the DOM, stacked via explicit z-index values so that nothing accidentally occludes the taskbar or the CRT overlay:
Componentz-indexPurpose
Desktop icon gridz-0Background icon layer, behind all windows
RetroWindow (normal)z-10Open page windows floating on the desktop
RetroWindow (maximised)z-50Expanded window fills the viewport above other windows
Mascotz-[55]Always visible character, above maximised windows
Taskbarz-[60]Fixed bottom bar, above the mascot
Start menu popupz-[70]Dropdown rendered above the taskbar itself
CRTOverlayz-[100]Top-most fixed layer — scanlines and flicker affect everything

​
State management

RetroWin has no external state library. All interactive state is managed with React’s built-in useState:
  • Window maximise toggle — RetroWindow holds a local isMaximized boolean. Clicking the maximise button (□) flips this flag, expanding the window to fill the viewport via inset-0 !w-full !h-full.
  • Guestbook form submission — ContactWindow tracks a submitted boolean. On form submit the flag is set to true and the form swaps out for a thank-you message.
  • Taskbar Start menu — Taskbar holds an isOpen boolean that toggles the Start menu popup on button click.
  • Hit counter — HitCounter reads and writes a visit count to localStorage, incrementing it on first render via useEffect.
  • System clock — Taskbar updates a Date object every second via setInterval inside a useEffect cleanup pattern.

​
Data flow

Navigation in RetroWin always flows in one direction:
  1. User action — a double-click on a DesktopIcon, a click on a Start menu item in Taskbar, or an <a href="#/about"> link in the welcome window.
  2. useNavigate() / hash anchor — DesktopIcon and Taskbar call useNavigate() from React Router. Anchor links update the hash directly.
  3. Hash change — the browser URL updates to e.g. /#/about, and HashRouter reacts.
  4. <Routes> match — React Router matches the new path and renders the corresponding RetroWindow component into the DOM alongside the persistent desktop layer.
  5. Close — the RetroWindow “X” button calls useNavigate("/"), popping back to the desktop and unmounting the window.
DesktopIcon (double-click)
Taskbar Start menu (button click)     →  useNavigate("/about")  →  HashRouter  →  <AboutWindow />
welcome.htm anchor (<a href="#/about">)
The files under assets/ — main.js, main.css, index.js, proxy.js — are the production Vite bundle output. They are minified and contain React, React Router, Framer Motion, and all application code compiled into a single module graph. Do not edit these files directly; they are regenerated each build from the source components under components/y2k/.

Build docs developers (and LLMs) love

Get started for freeTalk to us