Skip to main content

Documentation Index

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

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

Windows 98 Portfolio combines Tailwind CSS utility classes with a set of hand-written custom classes that recreate the visual language of Windows 98. Tailwind handles layout, spacing, and typography; the custom classes handle the details that Tailwind’s utility model cannot express concisely — multi-side border tricks, box-shadow insets, and the CRT post-processing layer.

​
Retro color palette

A custom color extension adds nine named tokens to Tailwind’s default palette. Every token is available as a bg-, text-, and border- utility class in the same way Tailwind’s built-in colors work.
TokenExample classesHex valueUsage
retro-navybg-retro-navy, text-retro-navy, border-retro-navy#000080Title bars, active selections, primary headings
retro-magentabg-retro-magenta, text-retro-magenta, border-retro-magenta#ec4899Accent highlights, sender names in chat, decorative stars
retro-turquoisebg-retro-turquoise, text-retro-turquoise, border-retro-turquoise#00cfd1Dividers, case-study decorations, icon tints
retro-tealbg-retro-teal, text-retro-teal, border-retro-teal#0d9488Desktop background colour, subtle panel backgrounds
retro-graybg-retro-gray, border-retro-gray#c0c0c0Window chrome, button surfaces, panel fill — the classic silver
retro-darkgrayborder-retro-darkgray, text-retro-darkgray#808080Inset border shadows, disabled text, secondary labels
retro-whitebg-retro-white, text-retro-white, border-retro-white#ffffffContent area backgrounds, inset panel fills
retro-blacktext-retro-black#0a0a0aNear-black body text, text-shadow base colour
retro-cyantext-retro-cyan#5eead4Terminal text colour in the MS-DOS Skills window

​
Win98 border classes

The three custom border classes are the visual core of the Windows 98 aesthetic. They replicate the beveled 3D border effect that Windows 98 used throughout its UI by combining border shorthand with a layered box-shadow inset.
ClassEffectWhen to use
.win98-outRaised — white top and left border, black bottom and right, inner highlight and outer shadowWindow chrome, raised panels, toolbars
.win98-inSunken / inset — gray top and left border, white bottom and right, dark inner shadowText inputs, list boxes, content panes, address bars
.win98-btnButton raised with an active state that flips to inset on clickAll clickable buttons throughout the app
/* Extracted from assets/main.css */

.win98-out {
  border-top: 2px solid white;
  border-left: 2px solid white;
  border-bottom: 2px solid black;
  border-right: 2px solid black;
  box-shadow: inset 1px 1px #dfdfdf, inset -1px -1px gray;
  background: silver;
}

.win98-in {
  border-top: 2px solid #808080;
  border-left: 2px solid #808080;
  border-bottom: 2px solid white;
  border-right: 2px solid white;
  box-shadow: inset 1px 1px #000, inset -1px -1px #dfdfdf;
  background: #fff;
}

.win98-btn {
  cursor: none;
  border-top: 2px solid white;
  border-left: 2px solid white;
  border-bottom: 2px solid black;
  border-right: 2px solid black;
  box-shadow: inset 1px 1px #dfdfdf, inset -1px -1px gray;
  background: silver;
}

/* Active (pressed) state — borders flip to produce the sunken look */
.win98-btn:active {
  padding-top: 1px;
  padding-left: 1px;
  border-top: 2px solid #808080;
  border-left: 2px solid #808080;
  border-bottom: 2px solid white;
  border-right: 2px solid white;
  box-shadow: inset 1px 1px #000, inset -1px -1px #dfdfdf;
  background: #fff;
}

/* Touch devices use the system cursor instead of the custom pixel cursor */
@media (hover: none) and (pointer: coarse) {
  .win98-btn {
    cursor: auto;
  }
}

​
CRT effect classes

Two fixed-position layers are always rendered on top of all page content to simulate an old cathode-ray tube monitor.

​
.crt-overlay — scanlines

A fixed 100vw × 100vh element with z-index: 9998 and pointer-events: none. It applies a repeating linear gradient that alternates between a fully transparent strip and a semi-transparent black strip every 4 pixels, producing horizontal scanlines: 
.crt-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9998;
  background: linear-gradient(#12101000 50%, #0000001a 50%);
  background-size: 100% 4px;
}

​
.crt-vignette — dark edges

A fixed 100vw × 100vh element with z-index: 9999 and pointer-events: none. It uses a radial gradient to darken the edges of the screen while keeping the centre transparent, mimicking the light fall-off of a curved CRT screen: 
.crt-vignette {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
  background: radial-gradient(circle at center, transparent 50%, rgba(0,0,0,.4) 100%);
}
Both layers stack above the application UI (windows, taskbar, desktop icons) but below the custom cursor at z-index: 10000.

​
Typography utility classes

Three Google Fonts are loaded via @import in assets/main.css and mapped to Tailwind font-family utilities:
Tailwind classFont familyTypical use
font-pixelPixelify SansWindow titles, desktop icon labels, section headings
font-vt323VT323Terminal / MS-DOS output, the visitor counter display
font-monoIBM Plex MonoBody content inside windows, chat messages, form labels
A fourth utility, text-shadow-retro, adds a single-pixel black drop shadow that improves legibility when pixel fonts are rendered at small sizes against coloured backgrounds: 
.text-shadow-retro {
  text-shadow: 1px 1px 0px #0a0a0a;
}
The body sets cursor: none globally, hiding the system cursor across the entire app. The CustomCursor component renders a pixel-art SVG arrow that follows mousemove events at z-index: 10000. On touch devices — where (hover: none) and (pointer: coarse) is true — body and .cursor-none restore cursor: auto, and .win98-btn also switches to cursor: auto so buttons remain usable without a mouse.

Build docs developers (and LLMs) love

Get started for freeTalk to us