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 Home page (/) is the entry point of the portfolio and sets the visual tone for the entire site. It combines a full-viewport hero section rendered in the Press Start 2P pixel font, a horizontally scrolling marquee ticker at the top of the screen, a Windows 98–styled intro panel, and a row of social icon links — all layered over a deep dark background with a subtle dot-grid pattern and a scanline CRT overlay.

​
Visual design

The page background is --bg-dark (#0c0814) with a radial-gradient dot pattern using rgba(168,85,247,.15) dots on a 24 × 24 px grid, giving the impression of a phosphor-dot display. The .crt-overlay element is fixed to the full viewport at z-index: 9999 and renders horizontal scanlines via a repeating linear-gradient with a 4 px background-size, simulating a CRT monitor effect without blocking pointer events. The hero title uses the font-display utility class, which maps to "Press Start 2P", cursive — the 8-bit pixel font loaded from Google Fonts. The title receives a magenta drop-shadow (drop-shadow(4px 4px 0px #a855f7)) and is wrapped in a Framer Motion motion.div for entrance animation. 
/* From main.css */
.font-display {
  font-family: "Press Start 2P", cursive;
}

.crt-overlay {
  pointer-events: none;
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: 9999;
  background: linear-gradient(#12101000 50%, #00000040 50%);
  background-size: 100% 4px;
}

​
Layout structure

The page is structured as a single scrolling column inside a max-w-6xl centered container. From top to bottom:
  1. Marquee ticker — a full-width strip rendered by the <Marquee> component that continuously scrolls a status message string across the screen. The ticker bar uses bg-[#000080] and monospace white text to mimic a vintage status bar.
  2. Hero section — an h-[80vh] flex container centered both axes. Contains the pixel-font site title, a short tagline in font-mono (DM Mono), and animated entrance via Framer Motion initial/animate props.
  3. Win98Window intro panel — a <Win98Window> component with the title "Hello_World.exe" containing the developer’s bio/intro paragraph. The window chrome includes the characteristic blue gradient title bar (from-[#000080] to-[#1084d0]) and three bevel-style control buttons (minimize, maximize, close).
  4. Social links row — three icon buttons using lucide-react icons: Github, Linkedin, and Twitter. Each uses .bevel-button styling and links out to the developer’s external profiles.
  5. Navigation links — a row of .bevel-button styled links pointing to /about, /projects, /skills, /writing, /case-studies, and /contact.

​
The Win98Window component

The <Win98Window> component is the primary UI container used throughout the site. It renders a panel styled to mimic a Windows 98 application window, with a blue gradient title bar, three window-control buttons, and a dark body panel. 
// components/Win98Window.js
function Win98Window({ title, children, className = "", icon, onClose }) {
  return (
    <div className={`bevel-window flex flex-col ${className}`}>
      {/* Title bar: blue gradient, white monospace label, control buttons */}
      <div className="bg-gradient-to-r from-[#000080] to-[#1084d0] p-1 flex justify-between items-center select-none">
        <div className="flex items-center gap-2 text-white font-mono text-sm px-1">
          {icon && <span className="w-4 h-4 flex items-center justify-center">{icon}</span>}
          <span className="font-bold tracking-wider">{title}</span>
        </div>
        <div className="flex gap-1">
          {/* Minimize, Maximize, Close buttons — each is a .bevel-button */}
        </div>
      </div>
      {/* Body: bg-[#1a0f24], text-[#c0c8d8], scrollable */}
      <div className="p-4 bg-[#1a0f24] text-[#c0c8d8] flex-1 overflow-auto">
        {children}
      </div>
    </div>
  );
}
Props accepted by Win98Window:
PropTypeDescription
titlestringWindow title bar text
childrenReactNodeBody content
classNamestringExtra classes applied to the outer wrapper
iconReactNodeOptional icon rendered before the title
onClose() => voidOptional handler for the close button
The .bevel-window CSS class applies the characteristic Windows 98 raised-edge border: border-top and border-left are light (#e2e8f0), while border-bottom and border-right are dark (#475569), creating a 3-D bevel illusion.

​
The Marquee component

The <Marquee> component renders a horizontally auto-scrolling text strip. It uses Framer Motion’s animate prop with an x translation to loop continuously. The component accepts a single text string (which it duplicates internally for a seamless loop) and a numeric speed value controlling the scroll duration. 
// Example usage (from main.js)
<Marquee
  text="SYSTEM BOOT COMPLETE ✦ ALL SYSTEMS OPERATIONAL ✦ WELCOME TO THE DIGITAL COVEN ✦"
  speed={20}
/>
Props accepted by Marquee:
PropTypeDefaultDescription
textstring—The string to scroll across the ticker
speednumber20Animation duration in seconds — lower values scroll faster
classNamestring""Extra classes applied to the outer wrapper

​
Customization

Change the hero title: Search for the font-display heading in the Home component inside assets/main.js and update the text content. Update social links: Find the social icon row in the Home component and replace the href values on the anchor tags wrapping the Github, Linkedin, and Twitter lucide-react icons. Adjust the CRT effect: The scanline density is controlled by background-size: 100% 4px in the .crt-overlay rule in assets/main.css. Increasing the pixel value reduces scanline frequency; reducing it increases it. Set display: none on the overlay to disable the effect entirely. Edit the marquee text: Locate the text prop on the <Marquee> call within assets/main.js and update the string value. Separate segments with a delimiter such as " ✦ " for visual spacing between phrases.
The dot-grid background pattern is set on body in main.css via background-image: radial-gradient(rgba(168,85,247,.15) 1px, transparent 1px) with background-size: 24px 24px. To change the accent color of the dots, update the rgba value to match your chosen --purple CSS variable.

​
Related pages

About

Bio, quick-facts sidebar, and interests grid

Projects

Filterable portfolio showcase with bevel cards

Skills

Animated progress bars grouped by category

Contact

Win98 contact form, guestbook, and social links

Build docs developers (and LLMs) love

Get started for freeTalk to us