Windows 98 Portfolio is a single-page React application that transforms a personal portfolio into a fully interactive Windows 98 desktop experience. Every element — the silver bevelled window chrome, the teal desktop, the pixel cursor, and the scanline overlay — is faithful to the original operating system aesthetic, while the underlying stack is entirely modern. The goal is to let visitors explore your work the way they would have navigated a mid-nineties PC: clicking desktop icons to open windows, dragging them around, and checking out the Taskbar at the bottom of the screen.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.
Key Technologies
The project is built with a carefully chosen set of tools that balance retro looks with contemporary developer experience:| Technology | Role |
|---|---|
| React 18 | UI component tree, state, and routing |
| Vite | Development server and production bundler |
| Framer Motion | Draggable windows (drag, dragMomentum) and entrance animations |
| React Router v6 (hash-based) | Client-side routing without server configuration |
| Tailwind CSS | Utility-first styling with a custom retro color palette |
Custom Tailwind Color Palette
Tailwind is extended with a set of retro-named colors that map directly to the classic Windows 98 palette:| Token | Hex | Usage |
|---|---|---|
retro-teal | #0d9488 | Desktop background |
retro-navy | #000080 | Title bars, headings |
retro-gray | #c0c0c0 | Window chrome, buttons (win98-out) |
retro-darkgray | #808080 | Borders, shadows |
retro-white | #ffffff | Inset controls (win98-in) |
retro-turquoise | #00cfd1 | Accent highlights |
retro-magenta | #ec4899 | Accent, selection highlight |
retro-black | #0a0a0a | Body text |
retro-cyan | #5eead4 | Decorative text |
The Desktop Metaphor
The entire application is structured around a simulated desktop environment:- Teal desktop background — The body background colour is
#0d9488(retro-teal), matching the iconic Windows 98 default wallpaper colour. - Draggable windows — Every section of the portfolio (About, Projects, Skills, etc.) opens inside a
Win98Windowcomponent styled with the authentic.win98-outbevelled border (white top/left, black bottom/right, silver background). Windows are made draggable via Framer Motion’sdragprop. - Desktop icons —
DesktopIconcomponents line the left side of the screen. Each icon has a retro filename (e.g.About.exe,Projects.folder,Contact.bat) and navigates to the corresponding hash route on double-click. - Taskbar — A
Taskbarcomponent is pinned to the bottom of the viewport (position: fixed; bottom: 0). It contains the Start button and a clock, just like the original. - Custom pixel cursor — The native cursor is hidden (
cursor: noneonbody) and replaced with aCustomCursorcomponent that renders a pixel-art pointer. On touch devices, the native cursor is restored automatically via a@media (hover: none)rule. - Visitor counter — A
VisitorCountercomponent re-creates the hit-counter badge common on late-1990s personal homepages.
Typography
Three Google Fonts are imported and exposed as Tailwind font-family utilities:| Tailwind class | Family | Use |
|---|---|---|
font-pixel | Pixelify Sans | Headings, icon labels, window titles |
font-vt323 | VT323 | Terminal-style text, build output blocks |
font-mono | IBM Plex Mono | Body copy inside windows, code snippets |
CRT Effects
Two full-viewport overlay<div> elements sit on top of every other element and are entirely pointer-events: none:
.crt-overlay— A repeating 4 px linear gradient that simulates CRT scanlines (z-index: 9998)..crt-vignette— A radial gradient that darkens the screen edges to mimic the curvature of an old cathode-ray tube monitor (z-index: 9999).
Routing
React Router v6 is configured in hash mode (HashRouter). All URLs take the form /#/route, which means the browser never makes a request to the server for nested paths. This is what makes the site work perfectly on GitHub Pages and any other static file host with zero configuration.
Available Routes
| Hash URL | Content |
|---|---|
/#/ | Desktop (icons only, no window open) |
/#/about | About Me — AIM-style instant message chat |
/#/projects | Projects — Polaroid-style project cards |
/#/skills | Skills — Retro skill badges and progress bars |
/#/work | Work History — Pinboard of job cards |
/#/case-studies | Case Studies — Netscape Navigator-themed deep dive |
/#/blog | Blog — Captain’s Log with webring buttons |
/#/contact | Contact — Guestbook with sign form |
/#/testimonials | Testimonials — Draggable sticky notes and forum posts |
Static Hosting on GitHub Pages
The production build is committed directly to the repository. Thepages/ directory contains individual HTML entry-point files for each section (About.html, Blog.html, etc.), and a .nojekyll file at the repository root instructs GitHub Pages to serve the files as-is without Jekyll processing. Because all client-side navigation uses hash routing, every link resolves correctly from the single index.html root — no 404 redirects or server-side rewrites are needed.
Getting Started
Clone the repo, install dependencies, and run the Vite dev server in under five minutes.
Architecture Overview
Understand how the desktop metaphor, router, and component tree fit together.
Win98Window Component
Deep dive into the draggable window component at the heart of the UI.
Customization & Theming
Swap colours, fonts, and icons to make the portfolio your own.