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.

Win98Window is the primary UI container throughout the Dark Retro Webpage. It wraps any piece of content in an authentic Windows 98-style frame: a deep navy-to-cobalt gradient title bar, a set of bevel-bordered control buttons (minimize, maximize, close), and a dark panel body using the site’s --bg-panel token. Every major section of the portfolio — the about card, the projects list, the contact form — lives inside a Win98Window.

​
Props

​
title
string
required
Text displayed in the Windows 98 title bar. Rendered in bold monospace with wide letter-spacing alongside any provided icon.
​
children
ReactNode
Content rendered inside the window body. The body area uses bg-[#1a0f24] (--bg-panel) as its background and text-[#c0c8d8] (--silver) as its default text colour, and is set to flex-1 overflow-auto so it fills available height and scrolls if needed.
​
className
string
default:"\"\""
Additional Tailwind or custom CSS classes applied to the outermost container div. Use this to control the window’s size, positioning, margin, or grid placement.
​
icon
ReactNode
An icon element (e.g. a Lucide React icon or an <img>) rendered to the left of the title text in the title bar. Wrapped in a w-4 h-4 span to keep it consistently sized. When omitted, the title left-aligns without any spacing gap.
​
onClose
function
Callback invoked when the user clicks the X close button in the top-right button group. When this prop is omitted the button is still rendered but clicking it has no effect.

​
Usage

import Win98Window from "./components/Win98Window";
import { Monitor } from "lucide-react";

export default function AboutSection() {
  return (
    <Win98Window
      title="about.txt"
      icon={<Monitor size={12} />}
      className="w-full max-w-2xl"
      onClose={() => console.log("window closed")}
    >
      <p>Hello! I'm a developer who loves retro aesthetics.</p>
    </Win98Window>
  );
}

​
The Bevel CSS

The raised-border appearance comes from the .bevel-window utility class defined in assets/main.css. It uses light edges on the top and left (simulating a light source from the upper-left) and dark edges on the bottom and right, exactly as Windows 98 did. 
.bevel-window {
  border-top:    2px solid #e2e8f0;
  border-left:   2px solid #e2e8f0;
  border-bottom: 2px solid #475569;
  border-right:  2px solid #475569;
  background: var(--bg-panel);
}
var(--bg-panel) resolves to #1a0f24 — the dark aubergine panel colour defined in :root.

​
Variations

​
With an icon

Pass any ReactNode as icon to place a small glyph before the title text. Lucide React icons at size={12} fit neatly inside the w-4 h-4 container. 
import { FolderOpen } from "lucide-react";

<Win98Window title="projects" icon={<FolderOpen size={12} />}>
  {/* project list */}
</Win98Window>

​
With an onClose handler

Wire onClose to navigate away, toggle visibility, or trigger an animation when the user clicks the X button. 
const [open, setOpen] = React.useState(true);

{open && (
  <Win98Window title="welcome.exe" onClose={() => setOpen(false)}>
    <p>Click the X to dismiss this window.</p>
  </Win98Window>
)}

​
With a custom className

Use className to set explicit dimensions or integrate the window into a grid layout. 
<Win98Window title="terminal" className="col-span-2 h-64">
  <pre className="text-[#a3ff12] font-mono text-xs">$ npm run dev</pre>
</Win98Window>
The title bar uses a CSS linear-gradient from #000080 (classic Windows navy) to #1084d0 (cobalt blue), applied via Tailwind’s bg-gradient-to-r from-[#000080] to-[#1084d0]. This is hard-coded in the component and is intentional — it reproduces the exact Windows 98 active-window look. To change it, edit the div class directly in Win98Window.js or override it with a CSS custom property.

​
Related

Marquee

Infinite-scroll text ticker powered by Framer Motion — often used as a decorative band between Win98Window instances.

Layout Utilities

CSS custom properties, bevel variants, CRT overlay, and typography classes used across every component.

Theming

How to remap the :root colour tokens and bevel border colours to create new retro palettes.

Build docs developers (and LLMs) love

Get started for freeTalk to us