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.

The Projects page is accessible at the /projects route via the my_projects desktop icon. It renders a RetroWindow that mimics the Windows 98 Explorer file manager — complete with a toolbar, a left-side folder tree, and a right-side file listing table. The window title reads “C:\My Documents\my_projects”, the window is 700×400 px, and it opens at position x: 150, y: 100. The !p-0 class removes all inner padding so the Explorer chrome fills the window edge-to-edge.

​
Visual Layout

​
Toolbar

A gray toolbar strip sits at the top of the window with three win98-btn buttons: ← Back, View, and Help. These buttons are currently decorative and do not perform navigation — they exist for visual authenticity.

​
Left Panel — Folder Tree

A 192 px wide sidebar shows a collapsible tree view: 
[-] Desktop
    [+] My Computer
    [-] my_projects   ← selected (highlighted in win-navy)
The selected item (my_projects) is highlighted with a win-navy background and white text to indicate the current folder.

​
Right Panel — File List

A full-width table lists each project as a file. The columns mirror the Windows Explorer “Details” view:
ColumnDescription
NameFilename with an inline icon (exe/dll → blue square icon, .txt → document icon)
SizeFile size string
TypeFile type label
ModifiedDate string
The default projects pre-loaded into the table are:
NameSizeTypeModified
portfolio.exe1.2MBApplication10/24/1999
ecommerce_v2.dll845KBSystem file05/12/2001
react_dashboard.exe4.5MBApplication01/01/2024
readme.txt2KBText DocumentToday
Clicking any row selects it, highlighting the row with a win-navy background and white text. Only one row can be selected at a time via a useState hook tracking the selected id.
The toolbar buttons (Back, View, Help) are intentionally non-functional — they are purely decorative UI chrome mimicking the Windows 98 Explorer aesthetic. Add onClick handlers to any button if you want real functionality.

​
Customization

The project list is defined as the nd array near the top of the rd() function in assets/main.js.

​
Adding a Project

Each project entry is a plain object with five fields. Append a new object to the nd array: 
const nd = [
  { id: 1, name: "portfolio.exe",      type: "Application",   size: "1.2MB", date: "10/24/1999" },
  { id: 2, name: "ecommerce_v2.dll",   type: "System file",   size: "845KB", date: "05/12/2001" },
  { id: 3, name: "react_dashboard.exe",type: "Application",   size: "4.5MB", date: "01/01/2024" },
  { id: 4, name: "readme.txt",         type: "Text Document", size: "2KB",   date: "Today"      },
  // Add yours:
  { id: 5, name: "my_new_project.exe", type: "Application",   size: "3.1MB", date: "06/15/2025" },
];

​
Updating the File Icon Logic

The row icon is chosen by a conditional on name.endsWith(".txt"). To support additional file types, extend the ternary into a helper function: 
function getIcon(name) {
  if (name.endsWith(".txt")) return "/icons/text.svg";
  if (name.endsWith(".dll")) return "/icons/dll.svg";
  return "/icons/exe.svg"; // default
}

// Inside the table row:
<img src={getIcon(project.name)} alt="icon" className="w-4 h-4" />

​
Renaming the Window Title or Folder Path

Update the title prop on RetroWindow to change the Explorer title bar text: 
<RetroWindow
  title="C:\My Documents\my_projects"
  defaultPosition={{ x: 150, y: 100 }}
  width={700}
  height={400}
  className="!p-0"
>

​
Changing the Selected Row Highlight

The highlight is applied via a conditional class on each <tr>: 
className={`cursor-pointer ${
  selected === project.id
    ? "bg-win-navy text-white"
    : "hover:bg-win-light"
}`}
Replace bg-win-navy and text-white with any Tailwind color utilities to change the selection style.
Make filenames thematic to your actual stack. Naming a project ecommerce_v2.dll (System file) adds a layer of irony — a .dll as a web commerce project implies it’s deeply embedded in the OS of the internet.

Build docs developers (and LLMs) love

Get started for freeTalk to us