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 About page lives at the /about route and is reachable by clicking the My Computer desktop icon. It renders a single draggable RetroWindow titled “about_me.htm” with the address bar showing http://127.0.0.1/about_me.htm. The window is sized at 600×450 px and positioned at x: 100, y: 80 by default. Inside it sits a two-column layout: a square profile image placeholder on the left and your developer biography on the right.

​
Visual Layout

The window’s interior has a white background with a win-gray border. The two-column layout is built with a flex row — a fixed 128×128 px image placeholder and a scrollable text column side-by-side.

​
Profile Image Area

The image slot is a 128×128 px box styled with a navy border and a silver background. Until you replace it, it shows the text “Image Not Found” in a pixel font — a deliberate nod to broken <img> tags of the dial-up era.

​
Biography Section

The right column contains:
  • A VT323-font heading: “A/S/L?” (a nod to early IRC chat culture), underlined by a gray rule
  • Two prose paragraphs of developer bio copy
  • A Current Status box with a pixel-font heading and three emoji-prefixed status items
The default status items are:
EmojiLabelValue
🎧Listening toMP3s downloaded from Kazaa
🎮PlayingMinesweeper
💻CodingThis portfolio
The A/S/L? heading is purely decorative — it references the classic “Age / Sex / Location?” prompt from 1990s chat rooms. You can replace it with any heading that suits your style.

​
Customization

The About page is implemented in the td() function in assets/main.js.

​
Replacing the Profile Image

Find the placeholder <div> and swap it with a real <img> tag pointing to your photo: 
{/* Before — placeholder */}
<div className="w-32 h-32 border-4 border-win-navy bg-win-silver flex items-center justify-center shrink-0">
  <span className="font-pixel text-xs text-center">
    Image<br />Not Found
  </span>
</div>

{/* After — your actual photo */}
<img
  src="/assets/profile.jpg"
  alt="Profile photo"
  className="w-32 h-32 border-4 border-win-navy shrink-0 object-cover"
/>

​
Editing the Bio Paragraphs

Locate the two <p> elements inside the right column and replace their text with your own bio: 
<p>
  Just kidding. I'm a full-stack developer who loves building things for
  the web. I started coding back when tables were for layout and
  spacer.gif was a legitimate architectural pattern.
</p>
<p>
  Nowadays I write React and TypeScript, but deep down I still miss the
  simplicity of FTPing a file to a server and calling it a deployment.
</p>

​
Updating the Current Status Items

The three status entries are plain <li> elements inside a <ul>. Edit them to reflect what you are actually doing: 
<ul className="list-none space-y-1">
  <li>🎧 Listening to: MP3s downloaded from Kazaa</li>
  <li>🎮 Playing: Minesweeper</li>
  <li>💻 Coding: This portfolio</li>
</ul>
Change the emoji, label, or value of any line to suit your current obsessions.

​
Changing the Window Size or Position

The RetroWindow props control where and how large the window appears: 
<RetroWindow
  title="about_me.htm"
  url="http://127.0.0.1/about_me.htm"
  defaultPosition={{ x: 100, y: 80 }}
  width={600}
  height={450}
>
Adjust defaultPosition, width, and height to reposition or resize the window on first render.
The RetroWindow is draggable by default — the defaultPosition only sets where it appears initially. Visitors can move it freely around the desktop.

Build docs developers (and LLMs) love

Get started for freeTalk to us