Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/retrowin/llms.txt

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

This guide walks you through cloning RetroWin, spinning up the Vite dev server, and making your first content edits. By the end you will have a fully functional Windows 98 desktop portfolio running locally and know exactly which files to change to make it your own.
Prerequisites: Node.js ≥ 18 and npm (or yarn / pnpm) must be installed on your machine. You can verify your Node version with node -v. No other global tooling is required — Vite runs entirely from the local node_modules.
1

Clone the repository

Fork or clone the repo from GitHub, then move into the project directory:
git clone https://github.com/apursley2012/retrowin.git
cd retrowin
The repository contains the full Vite source tree along with the pre-built assets/ bundle and the components/y2k/ directory that holds every Win98 UI component.
2

Install dependencies

Install all packages declared in package.json. Choose whichever package manager you prefer:
npm install
This pulls in React 18, React Router v6, Framer Motion, Tailwind CSS, and the Vite build toolchain.
3

Start the dev server

Launch the Vite development server with hot module replacement:
npm run dev
Vite will print a local URL — by default http://localhost:5173 — and open it automatically. Any changes you save to source files are reflected in the browser instantly without a full page reload.
4

Explore the desktop

Once the browser opens you will see the teal Win98 desktop. Here is what to try first:
  • Start menu — Click the Start button in the bottom-left taskbar. A pop-up menu slides up with color-coded links to About Me, Projects, Skillz, and Guestbook.
  • Desktop icons — Double-click any DesktopIcon on the wallpaper to open the corresponding RetroWindow.
  • Drag windows — Click and drag a window’s navy title bar to reposition it anywhere on the desktop, just like Windows 98.
  • Maximize / Close — The □ button in the title bar toggles full-screen mode; X navigates back to the root route.
  • CRT overlay — Notice the subtle scanline shader layered over the entire desktop — courtesy of the CRTOverlay component.
5

Edit your content

The four portfolio pages are driven by the React components under components/y2k/ and the page-level views wired to each route. The quickest way to customize content is to fork the repo and edit the source JSX directly.For example, to update the About page title bar, open RetroWindow.js and change the title prop passed from the About page component:
// In your About page component
<RetroWindow
  title="About — Your Name Here"
  icon={<span>🖥️</span>}
  url="retrowin://about"
  defaultPosition={{ x: 80, y: 60 }}
  width={640}
  height={460}
>
  {/* Your about content here */}
</RetroWindow>
To change the Start menu navigation labels, edit the button text inside components/y2k/Taskbar.js:
// Taskbar.js — Start menu entries
// The source uses a helper that navigates and closes the menu together:
// const t = (path) => { navigate(path); setOpen(false); };
<button onClick={() => t("/about")}>About Me</button>
<button onClick={() => t("/projects")}>Projects</button>
<button onClick={() => t("/skills")}>Skillz</button>
<button onClick={() => t("/contact")}>Guestbook</button>
The Win98 color utilities (win-teal, win-navy, win-silver, etc.) and beveled-border classes (.win98-outset, .win98-inset, .win98-btn) are available throughout any component for consistent retro styling.

​
Build for Production

When your customizations are ready, compile an optimized static bundle: 
npm run build
Vite outputs everything to the dist/ directory — a self-contained folder of HTML, CSS, and ES module chunks that can be served from any static host. The index.html in dist/ is the entry point; all assets use relative paths so the folder can be deployed at any subdirectory.

​
Deploy to GitHub Pages

RetroWin’s hash-based routing means zero configuration is needed on the host side:
  1. Push your fork to a GitHub repository (e.g., your-username/retrowin).
  2. In the repository Settings → Pages, set the source to the main branch and the / (root) folder — or point it at the dist/ output if you commit the build artefacts.
  3. GitHub Pages will serve index.html for all requests. Because all routes are hash fragments (/#/about, /#/projects, etc.), the browser never asks the server for a different HTML file — everything resolves client-side automatically.
Your live portfolio will be available at https://your-username.github.io/retrowin/ within a minute or two of Pages finishing its deployment.
The Start menu is your primary navigation. Share the root URL (https://your-username.github.io/retrowin/) with recruiters and visitors — they will land on the full desktop and can navigate to any section through the Start button, just as they would on a real Windows 98 machine. Deep-linking to a specific page (e.g., /#/projects) also works and opens that window directly.

Build docs developers (and LLMs) love

Get started for freeTalk to us