Skip to main content

Documentation Index

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

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

Log Portfolio is styled with Tailwind CSS utility classes throughout, with a small set of custom semantic classes compiled into assets/main.css that encapsulate the signature Windows 98 chrome look: the raised 3D borders, the gray desktop surface, and the blue gradient title bar. Changing the theme means editing the CSS variables and custom class definitions in that file.

​
CSS Custom Properties

All core colors are declared as CSS variables on :root at the top of assets/main.css. Editing these values propagates the change to every component that references them: 
:root {
  --desktop-bg: #0d1b2a;        /* Deep navy desktop background */
  --chrome-light: #e0e0e0;      /* Highlight edge of 3D borders */
  --chrome-base: #c0c0c0;       /* Classic Win98 silver/gray surface */
  --chrome-dark: #808080;       /* Mid shadow */
  --chrome-darker: #404040;     /* Dark shadow edge of 3D borders */
  --accent-magenta: #ff00ff;    /* Neon glow accents */
  --accent-cyan: #00ffff;
  --accent-lime: #39ff14;
  --titlebar-active-start: #000080;  /* Title bar gradient start */
  --titlebar-active-end: #1084d0;    /* Title bar gradient end */
  --titlebar-inactive: #808080;      /* Unfocused window title bar */
}

​
Custom CSS Classes

These semantic classes are compiled into assets/main.css and can be used anywhere in the JSX just like Tailwind utility classes.

win-bg

Applies background-color: var(--chrome-base) — the classic Windows silver. Used on window bodies, buttons, and toolbars.

win-border

Outset 3D border: light top/left edges (--chrome-light) and dark bottom/right edges (--chrome-darker). Makes elements appear raised.

win-border-inset

Inset 3D border: dark top/left, light bottom/right. Makes elements appear sunken — used for inputs, progress bars, and pressed states.

win-button

Combines win-bg with win-border and centers content. On :active it switches to win-border-inset, simulating a physical button press.

titlebar-active

A left-to-right linear gradient from #000080 to #1084d0 with white text. Applied to the title bar of the focused (active) window.

titlebar-inactive

Flat #808080 gray background with --chrome-light text. Applied to title bars of unfocused windows.

font-pixel

font-family: VT323, monospace — the VT323 bitmap font loaded from Google Fonts. Used for system text, the Notepad app, and the visitor counter.

font-comic

font-family: 'Comic Neue', cursive — a cleaner Comic Sans alternative loaded from Google Fonts. Used in the Internet Explorer blog window.

crt-flicker

Runs a flicker keyframe animation at 0.15s infinite, toggling opacity between 0.95 and 1.0. Applied during the boot sequence for a CRT monitor effect.

scanlines

A CSS background with a 4px repeating gradient that draws horizontal scanlines over any element it’s applied to, completing the CRT illusion.

​
Color Palette Reference

The following Tailwind arbitrary-value colors appear throughout the codebase and define the signature look:
RoleValueWhere used
Windows blue (title bar start)#000080from-[#000080] gradient, taskbar hover
Title bar end#1084d0to-[#1084d0] gradient
Selection blue#0b61ffbg-[#0b61ff] — selected file/icon highlight
Toolbar beige#ece9d8bg-[#ece9d8] — Explorer toolbar, form backgrounds
Sticky yellow#ffffccbg-[#ffffcc] — Clippy speech bubble
Dark desktop#0d1b2abg-[#0d1b2a] — the desktop root body background

​
Changing the Desktop Background

The desktop background color is controlled by the --desktop-bg CSS variable and by the body rule in assets/main.css: 
body {
  background-color: var(--desktop-bg);
}
To use a different solid color, change --desktop-bg: 
:root {
  --desktop-bg: #008080; /* Classic teal, like Windows 95 */
}
To use a background image instead, add a backgroundImage style to the desktop root div in components/Desktop.js or override the body rule: 
body {
  background-color: var(--desktop-bg);
  background-image: url('/wallpaper.jpg');
  background-size: cover;
  background-position: center;
}

​
Changing the Title Bar Colors

To replace the classic Windows blue gradient with a custom palette, edit the two CSS variables: 
:root {
  --titlebar-active-start: #4a0080; /* Purple gradient start */
  --titlebar-active-end: #9b30d0;   /* Purple gradient end */
}
The titlebar-active class references these directly, so all active window title bars update immediately.

​
Fonts

Both fonts are imported from Google Fonts at the top of assets/main.css: 
@import "https://fonts.googleapis.com/css2?family=VT323&family=Comic+Neue:wght@400;700&display=swap";
To swap in a different pixel font, replace VT323 with another monospace or bitmap font name and update the font-pixel definition: 
.font-pixel {
  font-family: 'Press Start 2P', monospace;
}
The win-border and win-border-inset classes use four separate border-* properties rather than outline or box-shadow, which means they interact correctly with Tailwind’s border utilities and work on any display type without affecting layout flow.

Build docs developers (and LLMs) love

Get started for freeTalk to us