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.

Dark Retro Webpage is a personal portfolio and blog built with React 18 and Vite, styled to look and feel like a Windows 98 desktop running on a dark CRT monitor. It is designed for developers and creatives who want a distinctive online presence that goes far beyond a generic portfolio template — every UI surface uses bevelled window chrome, phosphor-glow color tokens, pixel-display fonts, and animated scanline overlays that evoke late-90s computing. The result is a fully navigable, hash-routed React SPA with seven built-in pages, two reusable retro components, and a Tailwind-powered design system you can retheme in minutes.

Getting Started

Clone the repo, install dependencies, and run the dev server in under five minutes.

Home Page

Explore the landing page layout, hero marquee, and window composition.

Win98Window Component

Learn the props and usage of the core bevel window chrome component.

Theming & Customization

Swap color tokens, fonts, and bevel styles to make the aesthetic your own.

​
Key Features

Dark Retro Webpage ships with a focused set of features purpose-built for the retro aesthetic:
  • Windows 98 bevel window components — The Win98Window component wraps any content in a title-bar chrome with minimize, maximize, and close buttons, all rendered with CSS bevel-window inset/outset borders.
  • CRT scanline overlay — A full-viewport .crt-overlay pseudo-element lays horizontal scanlines over the entire page, reinforcing the phosphor-screen illusion without JavaScript.
  • Framer Motion animated marquee — The Marquee component uses Framer Motion to scroll a configurable text ticker at a controllable speed, matching the <marquee> nostalgia of early web pages.
  • Hash-based routing — React Router is configured with a hash history (/#/), so the site deploys as a fully static artifact with no server-side routing configuration required.
  • 7 built-in pages — Home, About, Projects, Skills, Writing, Case Studies, and Contact are all pre-built and ready to populate with your own content.
  • 3 retro typefaces — Press Start 2P (pixel display), DM Mono (monospaced body), and Space Grotesk (clean sans-serif) are loaded from Google Fonts and mapped to .font-display, .font-mono, and .font-sans utility classes.
  • Tailwind CSS with custom retro tokens — A set of CSS custom properties defines the dark neon palette and maps into Tailwind via the config, keeping all color usage consistent and easy to override.

​
Tech Stack

LayerLibrary / ToolVersion
UI frameworkReact18
Build toolVitelatest
StylingTailwind CSSlatest
AnimationFramer Motionlatest
RoutingReact Routerlatest
Iconslucide-react0.522.0
React 18’s concurrent rendering keeps animations smooth even as Framer Motion orchestrates multiple simultaneous entrance transitions across window components. Vite’s ESM-native dev server provides near-instant HMR during development, and its production build outputs a dist/ folder of pre-bundled static files ready for any CDN or static host.

​
Color Palette

All colors are defined as CSS custom properties on :root inside assets/main.css. Tailwind picks them up through the theme configuration, making them available as utility classes (e.g. bg-[var(--purple)]) throughout the app. 
:root {
  /* Backgrounds */
  --bg-dark:    #0c0814;   /* page background — deep near-black purple */
  --bg-panel:   #1a0f24;   /* panel/window background — dark violet */

  /* Accent colors */
  --purple:     #a855f7;   /* primary accent — bright violet */
  --magenta:    #ff2bd6;   /* hot pink / call-to-action highlights */
  --cyan:       #22d3ee;   /* info / link color */
  --mint:       #5eead4;   /* secondary teal-green */
  --turquoise:  #14b8a6;   /* tertiary teal */
  --silver:     #c0c8d8;   /* body text / muted UI */
  --lime:       #a3ff12;   /* high-contrast yellow-green highlight */
}
All seven accent colors are designed to pass WCAG AA contrast against --bg-dark and --bg-panel, so you can use any of them for interactive text or icon labels without additional contrast checking.

​
Custom CSS Classes

The stylesheet exposes a small set of semantic utility classes that go beyond what Tailwind provides out of the box:
ClassPurpose
.bevel-windowOuter bevel border — simulates a raised Win98 window frame
.bevel-buttonButton bevel — inset shadow on :active to simulate a physical press
.bevel-insetInset bevel — for recessed panels, input fields, and status bars
.crt-overlayFull-viewport scanline pseudo-element applied to the page wrapper
.blinkCSS animation: blink keyframe — the classic blinking cursor effect
.font-displaySets font-family to Press Start 2P (pixel headings)
.font-monoSets font-family to DM Mono (code, labels, metadata)
.font-sansSets font-family to Space Grotesk (body text, UI copy)

Build docs developers (and LLMs) love

Get started for freeTalk to us