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.

AboutMe.txt is a fully functional Notepad clone that opens as a draggable window on the Log Portfolio desktop. It greets visitors with a plain-text bio written in the voice of a developer nostalgic for the early 2000s web, complete with a skills list and a faux file-properties block — all rendered in a pixel font on the classic Windows 98 parchment background.

​
What It Looks Like

The window is split into two parts: a menu bar strip across the top and a scrollable text area filling the rest. Menu bar — displays five items: File, Edit, Format, View, and Help. Each item turns blue on hover (hover:bg-blue-600 hover:text-white). The menu bar is purely decorative — no dropdowns are attached to any item. Text area — uses whitespace-pre-wrap so the template-literal line breaks and indentation are preserved exactly as written. The font is font-pixel (inherited from the outer wrapper). The text area itself carries no background class and renders on the outer wrapper’s bg-white surface; the warm cream bg-[#ece9d8] belongs only to the menu bar strip above.

​
Default Bio Text

The textarea ships with the following content (copied verbatim from the source): 
Hello World!

I'm a Full Stack Developer stuck in the year 2001.
I build modern web applications but I miss the days of table layouts and marquee tags.

> SKILLS:
- React / TypeScript (Modern stuff)
- Node.js / Express
- HTML <blink> tags
- CSS (I know how to center a div now)

> PROPERTIES:
Size: 1 lifetime
Created: 1990s
Modified: Today

"Best viewed in Internet Explorer 6 at 800x600."
The trailing underscore (_) acts as a blinking cursor aesthetic — it is the last character of the template literal.

​
CSS Classes Reference

ElementKey Classes
Outer wrapperh-full flex flex-col bg-white font-pixel text-sm
Menu barflex gap-4 px-2 py-1 bg-[#ece9d8] border-b border-gray-300 text-black
Menu itemshover:bg-blue-600 hover:text-white px-1 cursor-pointer
Text areaflex-1 p-2 overflow-auto outline-none whitespace-pre-wrap

​
Customizing the Bio

1

Open Desktop.js

The AboutMe.txt content lives in the G component inside components/Desktop.js. Find the div with class whitespace-pre-wrap.
2

Edit the template literal

Replace the text inside the template literal string (the content between the backticks in the children prop) with your own bio:
<div className="flex-1 p-2 overflow-auto outline-none whitespace-pre-wrap">
  {`Hello World!

I'm a [Your Title] based in [Your City].
[Your bio text here...]

> SKILLS:
- [Skill 1]
- [Skill 2]

> PROPERTIES:
Size: 1 lifetime
Created: [Your birth year]
Modified: Today

"[Your tagline here]"

_`}
</div>
3

Save and preview

Because the content is a plain template literal, all newlines and indentation render as-is thanks to whitespace-pre-wrap. No HTML tags are needed.
The menu bar items (File, Edit, Format, View, Help) are decorative <span> elements with hover styles only. If you want to add real dropdown functionality, you will need to wire up click handlers and state to each item yourself.
Keep lines short — Notepad windows are narrow by default (500 × 400 px). Long lines will wrap, which can look unintentional in the preformatted text aesthetic. Use the > and - ASCII conventions from the default bio to keep the retro feel consistent.

Build docs developers (and LLMs) love

Get started for freeTalk to us