Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/digital-domain/llms.txt

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

The Home page is the front door of Digital Domain and sets the aesthetic tone for the entire site. It greets visitors with an authentic Windows 98 / early-2000s personal homepage experience, complete with a scrolling marquee banner, a Notepad-style window introducing the author, a pair of animated GIFs, and a webring navigation panel. Every element is deliberately over-the-top retro — the visual equivalent of a GeoCities page that somehow survived into the modern era.

​
Page Layout

The root element is a centered flex column (max-w-4xl mx-auto flex flex-col items-center justify-center min-h-[80vh] gap-8) that stacks three major UI regions vertically: the marquee bar, the Notepad window, and the webring panel.

​
Scrolling Marquee Bar

The very first thing a visitor sees is a full-width black bar containing a continuously scrolling marquee message.
Visual appearance: A solid black banner spanning the full container width with a thick Win98-style beveled border (border-4 border-win-gray shadow-win-out). The text scrolls left-to-right in font-vt323 (the retro VT323 bitmap font), uppercase, spaced wide with tracking-widest, rendered in bright yellow (text-retro-yellow).
The scrolling text reads: 
*** WELCOME TO MY HOMEPAGE *** Now with 100% more semicolons! *** Best viewed in Netscape Navigator *** Last updated: literally just now ***
The <Marquee> component accepts a speed prop set to 15 and a className that applies the typography. This is a shared component imported from components/Marquee.js and re-used across the site (the About page Winamp sidebar also uses it for the track display).

​
Notepad-Style Intro Window

Below the marquee sits the main content area — a Win98 Notepad window styled with the classic grey bg-win-gray shadow-win-out p-1 shell and a blue title bar.
Visual appearance: The window title bar uses bg-titlebar text-white font-comic font-bold and displays a yellow star icon (oe / Lucide star, filled yellow) alongside the filename label “index.html - Notepad”. The inner content area is white (bg-white shadow-win-in) with generous padding (p-6), and all items are centred with flex flex-col items-center text-center gap-6.

​
Heading

The window opens with a large <h1> greeting rendered in the VT323 bitmap font at size 5xl with a retro purple drop shadow: 
<h1 className="font-vt323 text-5xl text-retro-purple drop-shadow-[2px_2px_0px_#00CED1]">
  Hello, World!
</h1>

​
Bio Paragraphs

Two <p> tags follow in font-comic text-lg, introducing the author as a Full-Stack Developer (emphasised in text-retro-pink) with a self-aware disclaimer about sarcasm and 90s nostalgia rendered in smaller italic grey text.

​
Animated GIFs

Two classic 90s-era animated GIFs are displayed side-by-side in a flex gap-4 container, each wrapped in a <img> tag with a dashed black border: 
// Under Construction GIF
<img
  src="https://media.giphy.com/media/11jGtzDu7Nh89a/giphy.gif"
  alt="Under Construction"
  className="h-16 border-2 border-dashed border-black p-1"
/>

// Dancing Baby GIF
<img
  src="https://media.giphy.com/media/3o7TKSjRrfIPjeiVyM/giphy.gif"
  alt="Dancing Baby"
  className="h-16 border-2 border-dashed border-black p-1"
/>
Visual appearance: Both GIFs are 64px tall (h-16), displayed at original aspect ratio, surrounded by a 2px dashed black border with 4px inner padding — mimicking the “under construction” badges that populated 1990s personal homepages.

​
Guestbook Call-to-Action

A large pink BeveledButton sits beneath the GIFs, linking visitors to the Guestbook page at /testimonials: 
<Link to="/testimonials">
  <BeveledButton className="text-xl py-2 px-6 mt-4 flex items-center gap-2 bg-retro-pink text-white hover:bg-pink-600">
    <Mail size={20} />
    Sign My Guestbook!
  </BeveledButton>
</Link>
The button uses the Lucide Mail icon and applies a hover state that darkens the pink background.

​
Webring Navigation Panel

The bottom section replicates the community webring panels that were ubiquitous on 90s personal pages. It uses a bg-win-gray shadow-win-out p-4 container with a centered layout.
Visual appearance: A grey Win98-bordered panel. The heading reads “My Webring” in font-vt323 text-2xl uppercase tracking-widest, flanked on both sides by spinning globe icons (v / Lucide globe, animated with animate-spin-slow). Below the heading sit four BeveledButton navigation links, and beneath those a set of old-style [ Prev | Random | Next ] webring anchors in text-xs font-comic.

​
Webring Navigation Buttons

Four BeveledButton elements link to the four main portfolio sections: 
<Link to="/about">   <BeveledButton>About Me</BeveledButton>    </Link>
<Link to="/projects"><BeveledButton>Cool Projects</BeveledButton></Link>
<Link to="/skills">  <BeveledButton>Skillz</BeveledButton>       </Link>
<Link to="/blog">    <BeveledButton>Weblog</BeveledButton>        </Link>

​
Prev / Random / Next Links

Standard <a> anchors styled as blue underlined links with a hover:text-retro-pink transition: 
[ <a href="#">Prev</a> | <a href="#">Random</a> | <a href="#">Next</a> ]
The href="#" values are intentionally non-functional — these are decorative anchors that mimic the ring-navigation scripts of the era. No actual webring backend exists.

​
Component Dependencies

ComponentSourceUsage
Marqueecomponents/Marquee.jsScrolling banner text
BeveledButtoncomponents/BeveledButton.jsNav and CTA buttons
LinkReact Router (via components/Layout.js)Internal navigation
star (Lucide)lucide-reactTitle bar icon
mail (Lucide)lucide-reactGuestbook button icon
globe (Lucide)lucide-reactSpinning webring icons

Build docs developers (and LLMs) love

Get started for freeTalk to us