The About page presents the portfolio owner’s bio in a deliberately handwritten, diary-like format. The centrepiece is aDocumentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/web-surfer/llms.txt
Use this file to discover all available pages before exploring further.
notebook-paper styled writing area — a cream background ruled with teal horizontal lines and a pink left margin — that mimics a real physical notebook. A float-left profile photo and a stats panel on the right complete the Y2K personal-homepage aesthetic.
Purpose
This page is the “who am I” section of the portfolio. It humanises the developer behind the work and sets a personal, self-deprecating tone consistent with the rest of the site. The copy reads like a late-1990s GeoCities “About Me” page, complete with favourite colour and currently-playing song.Layout and Structure
The page uses a three-column CSS grid at medium breakpoints (grid-cols-1 md:grid-cols-3):
- Notebook paper area (2 cols): A
notebook-paperdiv withrotate-1tilt shadow. Inside,font-comic text-blue-800paragraphs form the bio. The first paragraph begins with"Dear Diary (just kidding, it's the internet!)". A float-left<img>— captioned"Me hacking the mainframe (circa 2001)"— sits within the writing area. The bio closes with a personal sign-off. - Right sidebar (1 col): Contains two Win98Window panels:
"Self Portrait"— the profile photo inside aborder-double border-win-tealframe."My Stats.txt"— abg-black text-y2k-lime font-courierterminal-style readout listing Name, Age, Location, Fav Color, Browser, and a Currently Listening section with a small equaliser bar animation.
The
notebook-paper CSS class is defined in assets/main.css. It uses a CSS repeating-linear-gradient to draw ruled lines at 25 px intervals and a solid pink left-margin line at 1.5rem — no image assets required.How to Customize
Edit the bio text
The paragraphs inside the notebook-paper area are plain text strings in the JSX. Replace them with your own story. Keep the
font-comic leading-[25px] class so text sits neatly on the ruled lines.Swap the profile photo
The
<img> inside the notebook area and the one in the Self Portrait window both reference the same placeholder URL. Point both src attributes at your actual photo. The caption is a <p className="text-xs italic"> directly below the image.Update the Stats.txt panel
The terminal readout is an array of label/value pairs rendered in the
"My Stats.txt" Win98Window. The default labels are Name, Age, Location, Fav Color, and Browser. Extend or shorten the list and update the values to reflect your own details.