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 About page lives at /about and introduces the portfolio owner through a nostalgic AIM-style instant messenger window. Rather than a static bio, the content plays out as a scripted chat conversation that auto-advances line by line, giving the impression of a real-time IM exchange. A Buddy List panel on the left shows online contacts; the chat pane on the right streams the pre-written messages automatically.

​
Win98 Window configuration

PropertyValue
Window titleInstant Message - About Moi
Title bar iconmessage-square (Lucide), magenta
Width600 px
Height450 px
Interior backgroundbg-retro-gray

​
Page layout

The window interior is split into two panes side by side: 
Win98Window (600 × 450)
└── div.flex.gap-2  (bg-retro-gray, p-1)
    ├── div.w-1/3  (Buddy List panel, win98-in)
    │   ├── div  (header: "Buddy List", bg-retro-navy)
    │   └── ul   (online buddies + status message)
    └── div.w-2/3  (Chat pane)
        ├── div.flex-1  (message history, win98-in)
        ├── div.h-20    (message input box, win98-in, readOnly)
        └── div         (Warn / Block / Send buttons)

​
Auto-play chat script

The chat messages are defined in the wr array inside main.js. The component uses a useState counter and a useEffect with setTimeout to reveal one message at a time. Each message shows the sender ("me" or "them") and a typing indicator while the next message is loading. 
// In main.js — About component chat script (wr array)
const wr = [
  { sender: "me",   text: "hey! welcome 2 my site!!! a/s/l?" },
  { sender: "them", text: "lol hi. just checking out your portfolio." },
  { sender: "me",   text: "sweet! im a full stack dev. i love building cool stuff on the web." },
  { sender: "me",   text: "mostly react, typescript, node... the usual suspects :P" },
  { sender: "them", text: "nice. what do you do when ur not coding?" },
  { sender: "me",   text: "drinking way too much coffee, playing retro games, or trying to make my css pixel perfect." },
  { sender: "me",   text: "brb, someone is calling on the landline and messing up my dial-up connection!!" },
];
"me" messages use a 1 500 ms delay before appearing; "them" messages use 2 500 ms, simulating a slower typing speed from the other party.

​
Typing indicator

While the next message is loading, a "[username] is typing..." line appears in italic below the current messages. The username shown depends on which sender owns the next message in the array.
1

Window mounts

The Win98Window renders and the chat pane shows the timestamp of when the chat started (new Date().toLocaleTimeString()).
2

Messages stream in

A useEffect fires a setTimeout for each message. After the delay, the message counter increments and the new line appears in the chat history.
3

Typing indicator clears

Once all messages in wr have been shown, the typing indicator is hidden and the chat is complete.

​
Buddy List panel

The left pane shows a static list of three online buddies and one away buddy, plus a status message block:
BuddyStatus
dev_wizard99Online
css_hacker_xoxoOnline
react_fanaticOnline
xX_dark_coder_XxAway
A yellow status box at the bottom of the Buddy List reads: My Status: CODING — leave me alone >_<

​
Customizing the About page

All editable content for this page is co-located in the About component inside main.js.
Find the wr array near the top of the About component and edit the text fields. To add a message, push a new { sender, text } object. Keep sender as either "me" or "them" to control username label and message delay.
// In main.js — About component
const wr = [
  { sender: "me",   text: "your updated opening line" },
  { sender: "them", text: "their reply" },
  // ...
];
The delay per message is controlled by a ternary in the useEffect:
const delay = wr[t].sender === "me" ? 1500 : 2500;
Increase the values for a slower, more dramatic reveal, or decrease them for a faster auto-play.
The buddy names are hardcoded as JSX list items inside the About component. Find the <ul> inside the Buddy List panel and update the <li> entries directly.

Win98Window

Full props reference for title, icon, width, height, and drag behavior.

Contact

The Sign My Guestbook page — another personal-touch section of the portfolio.

Theming

How to change the teal background token and other retro color values.

Adding Pages

Template for adding new Win98Window-wrapped portfolio pages.

Build docs developers (and LLMs) love

Get started for freeTalk to us