Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/log-portfolio/llms.txt

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

The My Computer window is a pixel-perfect recreation of the Windows 98 Explorer shell. It lets visitors browse your projects in three classic view modes, click items to highlight them, and read metadata — file type, size, and date — all inside a draggable portfolio window.

​
View Modes

Switch between the three modes using the <select> dropdown in the toolbar. The selection is stored in React state (r) and controls which layout renders in the main file-list area.

Large Icons

Files are laid out as a flex flex-wrap gap-6 grid. Each item is a 96 px-wide column (w-24) with a large icon (32 px) stacked above the filename. Best for a visual showcase.

List

Files render as a vertical flex column (flex flex-col). Each row is 192 px wide (w-48) with a 14 px icon and a truncated filename side by side. Good for long project names.

Details

Files are shown in a full-width <table> with four columns: Name, Size, Type, and Modified. Column headers have a bg-[#ece9d8] background matching the classic Windows look.

​
Interface Elements

Toolbar — contains Back (ArrowLeft) and Up (ArrowUp) navigation buttons (decorative), a Search button, and the view-mode <select>. Address bar — always displays C:\My Computer\Projects with a filled yellow Folder icon (text-yellow-500 fill-yellow-500) to the left. Status bar — pinned to the bottom of the window. Shows the total object count on the left (4 object(s)) and the size of the selected item on the right when one is highlighted.

​
Selection Behaviour

Clicking any file item calls n(s.id) to store that file’s id in state (a). A selected item is highlighted with bg-[#0b61ff] text-white and a dotted white border in Icons view. All other views also apply the same blue highlight. Clicking outside items does not deselect — selection persists until a different item is clicked.

​
Icon Types

File TypeIconColor
File FolderFolder (filled)text-yellow-500 fill-yellow-500
Bitmap ImageImagetext-purple-500
Everything elseFileTexttext-blue-500

​
Default Project Files

The four sample files are defined in the x array in components/Desktop.js:
#NameTypeSizeDate
1E-Commerce.exeApplication1.2 MB10/24/2001
2Portfolio_v1.htmlHTML Document45 KB08/15/2001
3Secret_ProjectFile Folder(empty)11/02/2001
4meme.bmpBitmap Image2.4 MB01/01/2001

​
Customizing Your Projects

1

Find the files array

Open components/Desktop.js and locate the x array (it appears just above the J component definition). Each entry is a plain object.
2

Edit or add entries

Each file object follows this shape:
{
  id: 1,               // unique number
  name: "E-Commerce.exe",
  type: "Application", // controls the icon rendered
  size: "1.2 MB",      // leave "" for folders
  date: "10/24/2001"
}
Add as many entries as you like. Use "File Folder" as the type for directory-style items (they get the yellow folder icon), "Bitmap Image" for images, or any other string for the generic blue document icon.
3

Update icon logic (optional)

If you add a new file type and want a custom icon, find the ternary inside the J component that checks s.type === "File Folder" and add another branch for your type.
The Details view does not render the purple Image icon — it falls back to the generic FileText icon for simplicity. Only the Icons view distinguishes Bitmap Image entries with the purple Image icon.
Set size: "" for folder-type entries so the status bar doesn’t show an empty string as a size label when that item is selected.

Build docs developers (and LLMs) love

Get started for freeTalk to us