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.

Layout is the root page wrapper for the Windows XP Developer Portfolio. Every route rendered by React Router lives inside this component, which establishes the full-viewport desktop environment — from the animated Frutiger Aero sky gradient, to the floating bubble layer, all the way down to the persistent Taskbar fixed at the bottom of the screen.

​
Structure

Layout composes four layers stacked inside a single h-screen w-screen frutiger-bg flex flex-col relative overflow-hidden container:
  1. frutiger-bg gradient — A full-viewport background class that applies the signature cyan-to-white Frutiger Aero gradient across the entire screen.
  2. Soft ambient glows — Two absolutely-positioned blurred circles (white/20 and teal-200/20) that simulate the dreamy depth of the XP era without any external assets.
  3. Bubbles — The animated floating sphere layer, rendered at z-0 so it stays fully behind page content.
  4. <main> scrollable area — A flex-1 relative z-10 overflow-y-auto overflow-x-hidden container with pb-12 bottom padding that holds the active route’s page content, padded at the bottom to clear the Taskbar.
  5. Taskbar — Rendered last in the DOM so it naturally sits above all other content; the Taskbar positions itself fixed bottom-0 at z-50.

​
Usage

Layout wraps all routes at the app entry point. Because Taskbar calls useLocation() internally, the entire tree must be nested inside a router context. 
import { HashRouter, Routes, Route } from 'react-router-dom';
import { L as Layout } from './components/Layout.js';
import Home from './pages/Home';

function App() {
  return (
    <HashRouter>
      <Layout>
        <Routes>
          <Route path="/" element={<Home />} />
          {/* additional routes */}
        </Routes>
      </Layout>
    </HashRouter>
  );
}

​
Props

​
children
ReactNode
required
The routed page content to render inside the scrollable desktop area. Typically a <Routes> tree from React Router.

​
Viewport and scroll behaviour

The outer container uses h-screen w-screen overflow-hidden to lock the viewport to exactly one screen height with no external scroll bars — the “desktop” metaphor requires the OS chrome (Taskbar) to always be visible. All scrolling happens inside the <main> element, keeping the Taskbar and background layers completely stationary. The pb-12 bottom padding on <main> exactly matches the Taskbar’s h-12 height, preventing page content from being obscured when scrolled to the bottom.

​
Component tree

Layout (h-screen w-screen, frutiger-bg, flex flex-col, relative, overflow-hidden)
├── Ambient glow divs (absolute, pointer-events-none, z-0)
├── Bubbles (fixed, inset-0, z-0, pointer-events-none)
├── <main> (flex-1, relative, z-10, overflow-y-auto, overflow-x-hidden, pb-12)
│   └── {children}  ← active route
└── Taskbar (fixed, bottom-0, z-50)

Build docs developers (and LLMs) love

Get started for freeTalk to us