Documentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/windows-xp-developer/llms.txt
Use this file to discover all available pages before exploring further.
The Windows XP Portfolio ships six hand-crafted CSS classes that live in the Tailwind component layer inside assets/main.css. They encapsulate the most visually complex effects — the Frutiger Aero sky background, glassmorphism panels, the iconic Aqua push-button, the Windows XP title bar gradient, the Vista sidebar gadget surface, and the lens-flare hover sweep — so you can apply an entire multi-property effect with a single class name.
frutiger-bg
Sets the full-page Frutiger Aero sky gradient as a fixed background so it never scrolls away from beneath floating panels.
.frutiger-bg {
background: linear-gradient(180deg, #7fd9ff, #1de9b6);
background-attachment: fixed;
}
export default function Layout({ children }) {
return (
<div className="frutiger-bg min-h-screen">
{children}
</div>
);
}
aqua-glass
Renders a translucent frosted-glass panel with a ~30 % white fill (rgba(255,255,255,0.302)), a 50 % white border, and a 12 px backdrop blur — the standard surface treatment for cards and modals.
.aqua-glass {
border-width: 1px;
border-color: rgba(255, 255, 255, 0.502); /* #ffffff80 */
background-color: rgba(255, 255, 255, 0.302); /* #ffffff4d */
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
backdrop-filter: blur(12px);
}
<div className="aqua-glass rounded-xl p-6">
<h2 className="font-display text-xl font-bold text-slate-800">About Me</h2>
<p className="font-sans text-slate-600 mt-2">
Frontend developer building nostalgic interfaces.
</p>
</div>
aqua-glass and aqua-glass-heavy rely on backdrop-filter: blur(), which requires a backdrop-blur-capable browser. All modern browsers — Chrome 76+, Firefox 103+, Safari 9+, and Edge 17+ — support this property.
aqua-glass-heavy
A denser variant of aqua-glass with a 50 % white fill, a ~60 % white border (rgba(255,255,255,0.6)), and a 16 px backdrop blur — use it for elements that need stronger visual separation from the background.
.aqua-glass-heavy {
border-width: 1px;
border-color: rgba(255, 255, 255, 0.6); /* #fff9 */
background-color: rgba(255, 255, 255, 0.502); /* #ffffff80 */
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.3);
backdrop-filter: blur(16px);
}
<aside className="aqua-glass-heavy rounded-2xl p-8 shadow-xl">
<h3 className="font-display text-lg font-bold text-slate-800">Skills</h3>
</aside>
aqua-button-base
Produces the classic macOS Aqua gel button: a four-stop vertical gradient fading from near-white at the top through a teal mid-shine to a solid #14b8a6 base, with multi-layer inset shadows that create a convex highlight. Includes :hover (lifts 2 px, deepens shadow) and :active (pushes down 2 px, adds inset shadow).
.aqua-button-base {
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.902), /* #ffffffe6 */
rgba(255, 255, 255, 0.2) 40%, /* #fff3 */
rgba(45, 212, 191, 0.8) 50%, /* #2dd4bfcc */
#14b8a6
);
box-shadow:
inset 0 2px 3px rgba(255, 255, 255, 0.8), /* #fffc */
inset 0 -2px 5px rgba(0, 0, 0, 0.2), /* #0003 */
0 4px 6px rgba(0, 0, 0, 0.102); /* #0000001a */
border: 1px solid rgba(45, 212, 191, 0.502); /* #2dd4bf80 */
font-weight: 700;
letter-spacing: 0.025em;
color: rgb(19, 78, 74); /* teal-900 */
transition: all 0.2s;
}
.aqua-button-base:hover {
background: linear-gradient(
180deg,
#fff,
rgba(255, 255, 255, 0.4) 40%, /* #fff6 */
rgba(45, 212, 191, 0.902) 50%, /* #2dd4bfe6 */
#0d9488
);
box-shadow:
inset 0 2px 5px rgba(255, 255, 255, 0.902), /* #ffffffe6 */
inset 0 -2px 5px rgba(0, 0, 0, 0.302), /* #0000004d */
0 6px 12px rgba(20, 184, 166, 0.302); /* #14b8a64d */
transform: translateY(-2px); /* -.125rem */
}
.aqua-button-base:active {
transform: translateY(2px); /* .125rem */
box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.2); /* #0003 */
}
<button className="aqua-button-base rounded-full px-6 py-2">
View Projects
</button>
xp-titlebar
Replicates the Windows XP Luna theme title bar: a five-stop blue gradient running from #0058e6 at the top to #0366e8 at the bottom, with bold white text and a hard-dropped text shadow for legibility on the blue field.
.xp-titlebar {
background: linear-gradient(
180deg,
#0058e6,
#3a93ff 8%,
#288eff 40%,
#127dff 88%,
#0366e8
);
border-bottom: 1px solid rgb(30, 64, 175);
font-weight: 700;
letter-spacing: 0.025em;
color: white;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}
<div className="xp-titlebar rounded-t-lg flex items-center gap-2 px-3 py-1.5">
<span className="font-display text-sm">My Computer</span>
</div>
vista-gadget
Styles a small floating widget in the Windows Vista Sidebar style: a 135° diagonal glass gradient, rounded corners, a bright top-edge inner glow, and a 12 px backdrop blur.
.vista-gadget {
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.4), /* #fff6 */
rgba(255, 255, 255, 0.102) /* #ffffff1a */
);
border-radius: 0.75rem;
border: 1px solid rgba(255, 255, 255, 0.4); /* #fff6 */
box-shadow:
inset 0 1px 1px rgba(255, 255, 255, 0.8),
0 4px 15px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(12px);
}
<div className="vista-gadget p-4 w-48">
<p className="font-display text-xs font-semibold text-slate-700">
Clock · 12:00 PM
</p>
</div>
lens-flare
Attaches an animated diagonal light-streak to any element: on hover a white semi-transparent band sweeps from the upper-left corner to the lower-right over 600 ms.
.lens-flare {
position: relative;
overflow: hidden;
}
.lens-flare::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
to bottom right,
transparent,
transparent 40%,
rgba(255, 255, 255, 0.6), /* #fff9 */
transparent 60%,
transparent
);
transform: rotate(30deg) translate(-100%, -100%);
transition: transform 0.6s ease-in-out;
pointer-events: none;
}
.lens-flare:hover::after {
transform: rotate(30deg) translate(100%, 100%);
}
<div className="lens-flare aqua-glass rounded-xl p-6 cursor-pointer">
<h3 className="font-display text-lg font-bold text-slate-800">Project Alpha</h3>
<p className="font-sans text-sm text-slate-600">Hover to see the sweep.</p>
</div>
lens-flare requires the element to have position: relative and overflow: hidden — both are included in the class itself. You do not need to add them separately; however, if you combine lens-flare with another class that overrides position or overflow, the animation will break.