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.

The Projects page wraps the portfolio’s work in the most iconic UI shell of the early 2000s — the Windows XP My Computer explorer window. An AquaWindow with the title “My Computer \ Projects” contains a full file-browser layout: an address bar showing C:\Users\Alex\Projects, a left-hand System Tasks sidebar, and a main icon grid listing three project folders and a README.txt file. Double-clicking a folder reveals an inline detail panel for that project.

​
Visual overview

The explorer chrome is faithful to Windows XP’s Luna theme. A toolbar row at the top contains a greyed-out Back button and an active Forward button. The address bar shows the path with a folder icon. The left sidebar has a collapsible System Tasks panel (with a blue gradient header) and a Search for file link. The main pane renders each project as a large folder icon with the project name beneath it. README.txt sits at the end of the list as a plain text file. Hovering a folder highlights it; double-clicking opens the detail panel in the same window without a route change.

Folder icons

Three project folders render as large Windows XP-style yellow folder icons with the project name underneath. Single-click selects; double-click opens the detail view.

Detail panel

On double-click, a slide-in detail panel replaces the icon grid, showing the project description, tech stack badges, and links for the live demo and GitHub repo.

​
The three projects

All project data is stored in an array in the Projects route component inside assets/main.js:
NameTypeDateSizeTech stack
Aero UI Kitfolder10/24/202512 MBReact, Tailwind, Framer Motion
Nostalgia Playerfolder08/15/202545 MBTypeScript, Web Audio API, Canvas
Glass Dashboardfolder05/02/20258 MBNext.js, Recharts, Tailwind
README.txt is a static file entry (type "file") with the prompt “Double click a folder to view project details.”

​
Component structure

// Simplified Projects page — My Computer explorer
import { AquaWindow } from '../components/AquaWindow';
import { useState } from 'react';

const projects = [
  {
    id:          'aero-ui',
    name:        'Aero UI Kit',
    type:        'folder',
    date:        '10/24/2025',
    size:        '12 MB',
    description: 'A React component library bringing back the glossy goodness of Windows Vista and OS X Tiger.',
    tech:        ['React', 'Tailwind', 'Framer Motion'],
    link:        '#',
    github:      '#',
  },
  {
    id:          'nostalgia-player',
    name:        'Nostalgia Player',
    type:        'folder',
    date:        '08/15/2025',
    size:        '45 MB',
    description: 'Web-based music player styled exactly like iTunes 7, complete with Cover Flow.',
    tech:        ['TypeScript', 'Web Audio API', 'Canvas'],
    link:        '#',
    github:      '#',
  },
  {
    id:          'glass-dashboard',
    name:        'Glass Dashboard',
    type:        'folder',
    date:        '05/02/2025',
    size:        '8 MB',
    description: 'Analytics dashboard using heavy glassmorphism and real-time data visualization.',
    tech:        ['Next.js', 'Recharts', 'Tailwind'],
    link:        '#',
    github:      '#',
  },
  {
    id:          'readme.txt',
    name:        'README.txt',
    type:        'file',
    date:        'Today',
    size:        '1 KB',
    description: 'Double click a folder to view project details.',
    tech:        [],
    link:        '',
    github:      '',
  },
];

export default function Projects() {
  const [selected, setSelected]     = useState(null);
  const [openProject, setOpenProject] = useState(null);

  const handleClick = (project) => setSelected(project);

  const handleDoubleClick = (project) => {
    if (project.type === 'folder') setOpenProject(project);
  };

  return (
    <AquaWindow
      title="My Computer \\ Projects"
      icon={<FolderIcon />}
      className="w-full max-w-4xl h-[600px]"
    >
      {/* Explorer toolbar: address bar */}
      {/* Left sidebar: System Tasks */}
      {/* Main icon grid */}
      <div className="icon-grid">
        {projects.map((project) => (
          <div
            key={project.id}
            onClick={() => handleClick(project)}
            onDoubleClick={() => handleDoubleClick(project)}
            className={`folder-icon ${selected?.id === project.id ? 'selected' : ''}`}
          >
            {project.type === 'folder' ? <FolderIcon /> : <FileIcon />}
            <span>{project.name}</span>
          </div>
        ))}
      </div>
    </AquaWindow>
  );
}

​
Customization

Project entries live in the projects array in the Projects route component inside assets/main.js. The compiled bundle is minified — locate the array by searching for "Aero UI Kit". Each entry supports the following fields: 
// In assets/main.js — locate the projects array (search for "Aero UI Kit")
const projects = [
  {
    id:          'your-project-id',     // Unique string key
    name:        'Your Project Name',   // Displayed as folder label
    type:        'folder',              // 'folder' opens detail view; 'file' is decorative
    date:        '01/01/2025',          // Shown in detail header
    size:        '10 MB',               // Shown in detail header
    description: 'Short description.',  // Two to three sentences
    tech:        ['React', 'Node.js'],  // Array of badge labels
    link:        'https://...',         // Live demo URL
    github:      'https://github.com/...', // Repo URL
  },
];
To add a new project, append a new object to the array. Folders render in the order they appear in the array, so put your most impressive work first.
Setting type to anything other than "folder" prevents the detail panel from opening on double-click. Use "file" only for decorative or informational entries like README.txt.

​
Key interactions

InteractionBehaviour
Single-click folderHighlights the icon with a blue selection tint
Double-click folderOpens the inline detail panel showing description, tech badges, and demo/GitHub links
Double-click README.txtNo action — type: "file" entries are non-interactive
Back button (toolbar)Active only when a detail panel is open — returns to the icon grid
Forward button (toolbar)Greyed out and non-functional by default
The README.txt entry at the end of the projects list is intentional: it serves as a friendly hint for visitors who may not immediately realise the folder icons are double-clickable. Its description text is “Double click a folder to view project details.”

Build docs developers (and LLMs) love

Get started for freeTalk to us