Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/dark-retro-webpage/llms.txt

Use this file to discover all available pages before exploring further.

The About page (/about) gives visitors a more detailed look at the developer behind the portfolio. It wraps the primary bio inside a <Win98Window> panel, places a sticky “quick facts” sidebar alongside it, and finishes with a grid of interest/hobby tiles — all rendered in the site’s signature dark-retro aesthetic using .bevel-window and .bevel-button CSS utilities.

​
Layout structure

The page uses a two-column grid on medium and large screens (md:grid-cols-12). The main content area spans eight columns (md:col-span-8) and the sidebar spans the remaining four (md:col-span-4). On mobile, both columns stack vertically in a single column layout. 
┌─────────────────────────────────────────┐
│  Win98Window — "About_Me.txt"           │
│  ┌────────────────────┐  ┌────────────┐ │
│  │  Bio paragraphs    │  │ Quick Facts│ │
│  │                    │  │ (sticky)   │ │
│  │                    │  │            │ │
│  └────────────────────┘  └────────────┘ │
│                                         │
│  Interests grid (3 columns)             │
└─────────────────────────────────────────┘

​
Bio section

The bio is rendered inside a <Win98Window> with the title "About_Me.txt". The window body (bg-[#1a0f24], text-[#c0c8d8]) contains several paragraphs of narrative text set in Space Grotesk (the site’s font-sans). To update the bio, edit the text directly inside the Win98Window children in assets/main.js. 
// From the About component in assets/main.js
<Win98Window title="About_Me.txt">
  <p>
    Full-stack developer obsessed with the early web aesthetic.
    Building things that feel alive — glitchy, tactile, and a little
    haunted.
  </p>
  <p className="mt-4">
    Based in the Pacific Northwest. Currently open to freelance work
    and collaborations on weird, ambitious projects.
  </p>
</Win98Window>

​
Quick facts sidebar

The sidebar is a second <Win98Window> panel titled "Quick_Facts" with position: sticky and top: 5rem (top-20), so it stays visible as the user scrolls through the bio. It contains a compact list of key metadata rendered as label/value pairs in font-mono. Typical quick-facts entries include:
LabelExample value
LocationPacific Northwest
FocusFrontend + Design Systems
AvailableFor freelance
StackReact, TypeScript, Node
CoffeeYes, always
To add or remove entries, locate the quick-facts list inside the sidebar <Win98Window> in assets/main.js. 
// Sidebar quick-facts pattern
<Win98Window title="Quick_Facts">
  <ul className="space-y-2 font-mono text-sm">
    <li>
      <span className="text-[#a855f7]">location:</span> Pacific Northwest
    </li>
    <li>
      <span className="text-[#a855f7]">focus:</span> Frontend + Design
    </li>
    {/* Add more entries here */}
  </ul>
</Win98Window>
The sidebar uses position: sticky via Tailwind’s sticky class combined with top-20. If your bio content is shorter than the viewport, the sticky behavior will not be visible — this only activates when the content beside it is tall enough to scroll.

​
Interests grid

Below the two-column bio/sidebar section, the page renders a grid of interest tiles. On large screens these are arranged in three columns (lg:grid-cols-3); on smaller screens they collapse to a single column. Each tile is a .bevel-window card with an emoji icon, a short label, and a one-line description. 
// Interest tile pattern
<div className="bevel-window p-4">
  <span className="text-2xl">⚡</span>
  <h3 className="font-mono text-[#a855f7] mt-2">Retro Tech</h3>
  <p className="text-sm text-[#94a3b8] mt-1">
    Old hardware, new tricks.
  </p>
</div>
To add a new interest tile, duplicate one of the existing tile objects in the interests array inside assets/main.js and update the emoji, label, and description fields.

​
CSS utilities used

ClassPurpose
.bevel-windowRaised Win98-style border + --bg-panel background
.bevel-buttonInteractive button with reversed bevel on :active
.font-monoDM Mono monospace font
.font-displayPress Start 2P pixel font (used for section headings)
text-[#a855f7]Purple accent (--purple) for labels and highlights
text-[#94a3b8]Muted secondary text color

​
Customization

Update the bio text: Edit the paragraph content inside the Win98Window titled "About_Me.txt" in the About component within assets/main.js. Change quick-facts entries: Locate the <ul> inside the sidebar Win98Window and edit the <li> items. Each entry follows the label: value pattern with the label colored in text-[#a855f7]. Add an interest tile: Find the interests array (or grid of tiles) in the About component and append a new tile object with emoji, title, and description fields. Adjust the sidebar stickiness offset: The sidebar’s top-20 class (top: 5rem) matches the site navigation bar height. If you change the nav height, update this value accordingly.
To swap the sidebar to the left side of the layout, change the order of the two grid columns in the About component’s JSX. The bio div and sidebar div can be reordered, and the grid will automatically re-flow them.

​
Related pages

Home

Animated hero, marquee ticker, and site intro

Skills

Animated progress bars grouped by technology category

Writing

Multi-style retro blog post listing

Contact

Win98 contact form and guestbook

Build docs developers (and LLMs) love

Get started for freeTalk to us