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 home screen is the entry point for the entire RetroWin portfolio. Rendered at the / route, it displays a Windows 98-style teal desktop populated with clickable DesktopIcon components and — when the user is at the root path — a floating RetroWindow containing a classic early-web welcome page. Every other route in the app is reachable from here.

​
Visual Layout

When a visitor lands on /, they see a full-screen teal desktop with five icons arranged in the top-left corner. A draggable RetroWindow titled “welcome.htm” with the address bar showing http://127.0.0.1/home.htm opens automatically in the center of the screen.

​
Desktop Icons

Icon TypeLabelAction
computerMy ComputerNavigates to /about
foldermy_projectsNavigates to /projects
exeskillz.exeNavigates to /skills
mailGuestbookNavigates to /contact
recycleRecycle BinTriggers alert("Empty!")

​
Welcome Window Contents

The RetroWindow renders at a default position of x: 200, y: 50 (responsive: x: 20 on mobile) with a width capped at 500px and a height of 550px. Inside it:
  • A large cyan heading in VT323 font: “WELCOME 2 MY WEBSITE!!!1!”
  • A scrolling Marquee strip: +++ UPDATED TODAY (PROBABLY) +++ OPTIMIZED FOR 1024x768 +++
  • A pulsing “UNDER CONSTRUCTION” SVG image placeholder
  • A short bio paragraph with links to /about, /projects, and /contact
  • A HitCounter component labelled “YOU ARE VISITOR NO:”
  • A Webring component at the bottom
The welcome window only renders when the current path is exactly /. Navigating to any sub-route hides it, so the desktop icons remain visible as a persistent navigation layer on every page.

​
Customization

The home desktop is implemented in the ed() function inside assets/main.js. Here is where to make the most common changes.

​
Changing the Welcome Message

Find the <h1> element inside the RetroWindow children and replace its text content: 
<h1 className="font-vt323 text-4xl text-win-cyan drop-shadow-[2px_2px_0_#000]">
  WELCOME 2 MY WEBSITE!!!1!
</h1>

​
Changing the Marquee Text

Locate the <Marquee> component and update its text prop: 
<Marquee text="+++ UPDATED TODAY (PROBABLY) +++ OPTIMIZED FOR 1024x768 +++" />
Replace the string with any scrolling message you want to display.

​
Replacing the “Under Construction” Placeholder

The placeholder is an inline SVG rendered via a data: URI on an <img> tag. Swap it with a real animated GIF or a hosted image: 
{/* Before */}
<img
  src="data:image/svg+xml;utf8,..."
  alt="Under Construction"
  className="animate-pulse"
/>

{/* After — use your own hosted asset */}
<img
  src="/assets/under-construction.gif"
  alt="Under Construction"
/>

​
Editing the Bio Paragraph

Find the <p> element inside the white bordered box and replace it with your own introduction: 
<p className="font-sans text-sm mb-4">
  Hi, I'm a developer. This is my personal homepage on the World Wide Web.
  Feel free to surf around, but don't forget to sign my guestbook!
</p>

​
Adding or Removing Desktop Icons

Each icon is a <DesktopIcon> component with icon, label, and either to (route) or onClick props. Add a new icon by inserting another <DesktopIcon> in the ed() function: 
<DesktopIcon icon="folder" label="my_projects" to="/projects" />
<DesktopIcon icon="exe"    label="skillz.exe"  to="/skills"  />
{/* Add your own: */}
<DesktopIcon icon="computer" label="Blog" to="/blog" />
To remove the Recycle Bin joke icon, simply delete its <DesktopIcon> line. To change the alert message, update the onClick arrow function: onClick={() => alert("Your message here")}.

Build docs developers (and LLMs) love

Get started for freeTalk to us