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 Projects page lives at /projects and presents the portfolio owner’s work as files inside a Windows Explorer–style browser. The window chrome includes a toolbar with Back/Forward buttons and an address bar showing C:\My Documents\Stuff I Built. A folder tree panel on the left lets visitors navigate the simulated directory, while a file list panel on the right shows five project entries. Clicking a file selects it and shows its description in the left panel; double-clicking opens a detail pop-up window for that project.

​
Win98 Window configuration

PropertyValue
Window titleC:\My Documents\Stuff I Built
Title bar iconfolder (Lucide), turquoise (filled)
Width800 px
Height500 px
Interior backgroundbg-retro-gray

​
Explorer layout

Win98Window (800 × 500, bg-retro-gray)
└── div.flex-col
    ├── toolbar  (Back / Forward buttons + address bar)
    └── div.flex
        ├── div.w-1/3  (folder tree + selected-file preview, win98-in)
        └── div.w-2/3  (file list with Name / Size / Modified columns, win98-in)

​
Folder tree

The left panel shows a static Windows Explorer tree rooted at Desktop → My Computer → C: → My Documents → Stuff I Built. The My Documents node is highlighted as the active directory.

​
File list

The right panel renders each project as a file row. Columns are Name, Size, and Modified. Single-clicking a row selects it (navy highlight) and populates a description pane in the left panel below the folder tree.

​
Detail pop-up

Double-clicking a file opens a secondary Win98Window (400 × 300) showing:
  • Project icon, name, and file type
  • Full description paragraph
  • Tech stack line
  • Run and Cancel buttons
Multiple project windows can be open at the same time; each is positioned with a 30 px cascade offset.

​
Project data array

All project entries are defined in the kr array inside the Projects component in main.js: 
// In main.js — Projects component (kr array)
const kr = [
  {
    id:   1,
    name: "E-Commerce_V2.exe",
    type: "Application",
    size: "14.2 MB",
    date: "10/24/2023",
    desc: "A full-stack Next.js e-commerce platform with Stripe integration.",
    tech: "Next.js, Tailwind, Stripe",
  },
  {
    id:   2,
    name: "Portfolio_Old.html",
    type: "HTML Document",
    size: "45 KB",
    date: "05/12/2021",
    desc: "My previous portfolio, built before I discovered the magic of retro UI.",
    tech: "HTML, CSS, JS",
  },
  {
    id:   3,
    name: "TaskMaster.dll",
    type: "System Extension",
    size: "2.1 MB",
    date: "08/01/2023",
    desc: "A productivity app that gamifies your daily tasks.",
    tech: "React, Redux, Node.js",
  },
  {
    id:   4,
    name: "Weather_Widget.sys",
    type: "System File",
    size: "128 KB",
    date: "02/14/2024",
    desc: "A lightweight weather widget using the OpenWeather API.",
    tech: "React, API",
  },
  {
    id:   5,
    name: "Retro_Game.bat",
    type: "Batch File",
    size: "1.5 MB",
    date: "11/30/2023",
    desc: "A browser-based platformer game built with Canvas API.",
    tech: "JavaScript, Canvas",
  },
];
Project names follow a retro file-naming convention. Use extensions that match the project type for flavor: .exe for full apps, .dll for libraries, .html for frontend-only work, .bat for scripts.

​
Customizing the projects list

1

Add a new project

Push a new object into the kr array with id, name, type, size, date, desc, and tech fields. Increment id for each new entry.
2

Update an existing project

Find the entry in kr by its id and edit any fields directly. The file list and detail pop-up both read from the same array.
3

Remove a project

Delete the object from the kr array. The file list re-renders with the remaining entries automatically.
The window is fixed at 800 × 500. If you have more than five or six projects, the file list area will scroll vertically. The selection state (useState) tracks only the currently clicked file ID, so adding more entries does not affect behavior.

Win98Window

Full props reference for title bar text, icon, and fixed dimensions.

Case Studies

Deep-dive write-up on a specific technical project — a companion to this page.

Architecture Overview

How Vite, React, and Framer Motion work together to power the portfolio.

Adding Pages

How to add entirely new portfolio sections beyond the defaults.

Build docs developers (and LLMs) love

Get started for freeTalk to us