Windows 98 Portfolio is a single-page application built with React and bundled by Vite. The entire app is compiled into two static assets —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.
assets/main.js and assets/main.css — which are loaded by a root index.html. From there, React takes over the browser entirely: routing, rendering, animations, and even the mouse cursor are all managed client-side with no server involvement beyond serving the initial HTML shell.
How the app mounts
The entry pointindex.html contains a single <div id="root"></div>. Vite’s compiled main.js module is loaded as type="module", which bootstraps React and calls ReactDOM.createRoot(document.getElementById('root')).render(...). The top-level App component wraps everything inside a HashRouter from React Router, making all navigation hash-based (/#/about, /#/projects, etc.) and fully client-side.
Visual layer stack
The desktop experience is built from several independently positioned layers stacked usingz-index. From bottom to top:
| Layer | Implementation | z-index |
|---|---|---|
| 1. Teal desktop background | body { background-color: #0d9488 } — the classic Windows 98 teal, set globally | — |
| 2. Desktop icon grid | Absolutely positioned flex column container inside the app shell | z-10 / z-20 |
| 3. Win98Window (normal) | Absolutely positioned draggable windows rendered inside routes | z-40 |
| 4. Win98Window (maximized) | Same component, animate to full viewport when maximized toggle is active | z-50 |
| 5. Taskbar | Fixed to bottom-0, full width | z-[9000] |
| 6. CRT scanline overlay | .crt-overlay — fixed, covers 100vw × 100vh, pointer-events: none | 9998 (plain CSS) |
| 7. CRT vignette | .crt-vignette — fixed, covers 100vw × 100vh, pointer-events: none | 9999 (plain CSS) |
| 8. Custom cursor | Fixed at top-0 left-0, follows mousemove events | z-[10000] |
File and folder structure
The repository ships compiled build outputs rather than raw TypeScript or JSX source. Thecomponents/ and assets/ directories you see are Vite’s output, not editable source files.
| File / Directory | Purpose |
|---|---|
index.html | App root entry point — loads main.js and main.css, contains <div id="root"> |
assets/main.js | Vite-compiled React bundle — all components, routes, and state in one module |
assets/main.css | Tailwind utility output plus custom CSS (win98-out, win98-in, win98-btn, CRT effects, font definitions) |
components/Win98Window.js | Draggable, resizable window component powered by Framer Motion |
components/DesktopIcon.js | Desktop icon with entrance animation and click-to-navigate behaviour |
components/CustomCursor.js | Pixel SVG cursor that replaces the system cursor, with click sparkle animations |
components/Taskbar.js | Fixed bottom bar with Start menu and open-window list |
components/VisitorCounter.js | Retro hit-counter display rendered inside the Taskbar |
pages/*.html | Static HTML shells for each route — each injects window.__STATIC_PAGE_ROUTE__ for deep-link support on GitHub Pages |
.nojekyll | Prevents GitHub Pages from processing the repo with Jekyll, ensuring all files are served as-is |
Because the repository ships compiled bundles, editing
assets/main.js or the files under components/ directly is not the intended workflow. See the Customization section for guidance on making changes through the build pipeline.Explore further
Routing
How HashRouter and the
__STATIC_PAGE_ROUTE__ pattern make every URL work on GitHub Pages.Styling
The Tailwind retro palette, win98 border classes, CRT effects, and pixel typography.
Win98Window
The draggable window component that frames every page of content.