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.

This guide walks you through everything you need to go from zero to a running Windows 98 Portfolio on your local machine and, when you are ready, deployed to GitHub Pages. The entire process takes fewer than five minutes on a modern laptop.

​
Prerequisites

Before you begin, make sure you have the following installed:
  • Node.js 18 or later — Vite requires Node 18+. Check your version with node -v.
  • npm (bundled with Node) or yarn — either package manager works; the examples below use npm.
  • A GitHub account — needed only if you plan to deploy to GitHub Pages.
  • Git — to clone the repository.

​
Setup

The GitHub repository at apursley2012/windows-98 is a compiled static deployment — it contains the Vite build output (assets/, components/, pages/) but no package.json, vite.config.js, or src/ directory. The npm install, npm run dev, and npm run build commands described below require the original development source, which you would have in your own local clone where you built the project. If you are forking this portfolio to customise it, you will need to recreate the source project (or obtain the source separately) before running any npm commands.
1

Clone the repository

Clone the Windows 98 Portfolio repository from GitHub and change into the project directory:
git clone https://github.com/apursley2012/windows-98.git && cd windows-98
This downloads the full repository, including the pre-built production assets in assets/ and the compiled component bundles in components/. Because the repo ships compiled bundles, you can open index.html directly in a browser or serve the folder with any static file server — no build step required for the deployed output.
2

Install dependencies (original source only)

If you are working from the original development source (with a package.json, vite.config.js, and src/ directory present), install all npm dependencies:
npm install
This pulls in React, Vite, Tailwind CSS, Framer Motion, React Router, and all other packages into node_modules/. If you cloned the compiled GitHub Pages deployment, this directory structure will not be present — see the warning above.
3

Start the development server (original source only)

From the original development source, launch the Vite development server:
npm run dev
Vite starts on http://localhost:5173 by default. The terminal will print the exact URL. Hot Module Replacement (HMR) is enabled, so any edits to source files are reflected in the browser instantly without a full page reload.
4

Open the portfolio in your browser

Navigate to http://localhost:5173 (dev server) or open index.html via a local static server. You should see the teal Windows 98 desktop with desktop icons on the left, a Taskbar pinned to the bottom, and the CRT scanline overlay across the whole screen.Click any desktop icon to open the corresponding portfolio window. Try dragging a window around the desktop — Framer Motion handles the drag interaction. Use the × button on a window’s title bar to close it and return to the desktop, or click a different icon to open another section.

​
Project Structure

After cloning, the repository contains the following top-level files and folders: 
windows-98/
├── index.html          # App root — mounts <div id="root"> and loads main.js
├── assets/
│   ├── main.js         # Vite-compiled React bundle (entry point)
│   ├── main.css        # Tailwind output + custom win98-* and CRT styles
│   ├── jsx-runtime.js  # React JSX runtime chunk
│   ├── index.js        # Shared vendor chunk
│   └── ...             # Additional code-split chunks
├── components/
│   ├── Win98Window.js      # Draggable, titled window frame
│   ├── DesktopIcon.js      # Clickable icon + label
│   ├── Taskbar.js          # Bottom bar with Start button and clock
│   ├── CustomCursor.js     # Pixel-art cursor overlay
│   └── VisitorCounter.js   # Retro hit-counter badge
├── pages/
│   ├── Desktop.html        # Static HTML shell for the / route
│   ├── About.html          # Static HTML shell for /#/about
│   ├── Projects.html       # Static HTML shell for /#/projects
│   ├── Skills.html         # Static HTML shell for /#/skills
│   ├── Work.html           # Static HTML shell for /#/work
│   ├── CaseStudies.html    # Static HTML shell for /#/case-studies
│   ├── Blog.html           # Static HTML shell for /#/blog
│   ├── Contact.html        # Static HTML shell for /#/contact
│   └── Testimonials.html   # Static HTML shell for /#/testimonials
└── README.md
Key directories at a glance:
  • assets/ — Vite-compiled JavaScript and CSS bundles. These are the files referenced by index.html via <script type="module"> and <link rel="stylesheet">.
  • components/ — Individual compiled component modules (Win98Window, DesktopIcon, Taskbar, CustomCursor, VisitorCounter). They are loaded as module preloads in index.html.
  • pages/ — Lightweight HTML files that each load the same main.js bundle. GitHub Pages serves these files for direct URL access; once the JavaScript boots, React Router takes over using hash-based navigation.
  • index.html — The application root. A single <div id="root"> is the React mount point.

​
Building for Production

These commands require the original development source (a local clone with package.json, vite.config.js, and src/). The compiled GitHub Pages deployment in the repository already contains the finished build output in assets/ — you do not need to run npm run build before deploying from that repo.
To generate an optimised production build from the original source, run: 
npm run build
Vite outputs the compiled and minified files to a dist/ directory. The build applies tree-shaking, code-splitting, and asset hashing. You can preview the production build locally with: 
npm run preview
This serves the dist/ folder on a local HTTP server so you can verify the production output before deploying.

​
Deploying to GitHub Pages

The simplest deployment path is to push the repository directly to GitHub and enable Pages on the main branch:
  1. Push your fork or clone to a GitHub repository.
  2. Go to Settings → Pages in your repository.
  3. Under Source, select Deploy from a branch and choose main / root.
  4. Click Save. GitHub Pages will build and publish the site within a minute.
The pages/ HTML files act as entry points for each section, ensuring that visitors who land on a deep URL (e.g. https://yourusername.github.io/windows-98/pages/About.html) still load the correct React app. A .nojekyll file in the repository root tells GitHub’s Pages infrastructure to skip Jekyll processing and serve all files — including those starting with an underscore — as static assets.
The production build is already committed to the repository. The assets/ folder contains the compiled and minified main.js and main.css bundles, and the components/ folder contains the individual compiled component modules. This means you can deploy straight from the cloned repository to GitHub Pages without running npm run build first — the built artefacts are ready to serve.
Hash-based routing means every navigation URL takes the form /#/about, /#/projects, and so on. The hash fragment is handled entirely in the browser and is never sent to the server, so the site works on any static file host — GitHub Pages, Netlify, Vercel static output, Amazon S3, or even a plain Apache/Nginx server — with absolutely no server-side configuration, redirects, or rewrite rules required.

​
Next Steps

With the dev server running, you are ready to start personalising the portfolio. Explore the pages below for deeper guidance:

Architecture Overview

Learn how the router, desktop component, and window system are wired together.

Win98Window Component

Understand the props and drag behaviour of the core window component.

Customization & Theming

Change the colour palette, fonts, and desktop icons to match your brand.

Adding Pages

Create a new portfolio section by adding a route, a component, and a desktop icon.

Build docs developers (and LLMs) love

Get started for freeTalk to us