Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/web-surfer/llms.txt

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

This quickstart walks you through everything you need to get Web Surfer running locally: cloning the repository, installing dependencies, starting the Vite dev server, and making your first customization. By the end you will have a fully working Y2K portfolio site running at http://localhost:5173.

​
Prerequisites

Before you begin, make sure you have the following installed:
  • Node.js 18 or later — nodejs.org
  • npm (bundled with Node.js) or any compatible package manager such as pnpm or yarn
  • A terminal — any shell works; the commands below use npm
  • Basic React knowledge — familiarity with components and props is enough to start customizing

​
Installation

1

Clone the repository

Clone the Web Surfer repo from GitHub and move into the project directory:
git clone https://github.com/apursley2012/web-surfer.git
cd web-surfer
2

Install dependencies

Install all project dependencies with npm:
npm install
This installs React 18, Vite, React Router v6, Tailwind CSS, Framer Motion, and Lucide React, among other packages.
3

Start the development server

Launch the Vite dev server:
npm run dev
Vite will print a local URL — open http://localhost:5173 in your browser. The server supports Hot Module Replacement (HMR), so changes you make to source files are reflected instantly without a full page reload.
4

Open the browser and surf

With the site open at http://localhost:5173, try the following to see Web Surfer’s signature features in action:
  • Move your mouse around the page to trigger the sparkle cursor particle effect.
  • Click any navigation link (for example, the link to /about) to watch the Netscape Navigator dial-up loading overlay animate in and out.
  • Hover over the webring marquee at the bottom of the page to pause the scrolling animation.
  • Click the minimize or maximize buttons on any Win98 window to see Framer Motion animate the layout change.

​
Project scripts

ScriptCommandDescription
Development servernpm run devStarts the Vite dev server with HMR at http://localhost:5173
Production buildnpm run buildCompiles and bundles the site into the dist/ directory
Preview buildnpm run previewServes the contents of dist/ locally so you can verify the production output before deploying

​
Build output

Running npm run build produces a dist/ folder that contains all the static assets needed to host the site: 
dist/
├── index.html          # Single HTML entry point
├── assets/
│   ├── main.js         # Bundled JavaScript
│   ├── main.css        # Compiled Tailwind stylesheet
│   ├── jsx-runtime.js
│   └── proxy.js
└── components/
    ├── Layout.js
    ├── Win98Window.js
    └── SparkleCursor.js
Because Web Surfer uses hash-based routing (/#/about, /#/skills, etc.), the browser never makes a server request for those paths — the fragment is handled entirely by React Router on the client. This means the single index.html file handles every route automatically, and you can deploy the dist/ folder to any static host without configuring URL rewrites or redirects. Popular zero-configuration deployment targets include GitHub Pages, Netlify, Vercel, and Cloudflare Pages.

​
First customization

Ready to make the site your own? The fastest place to start is colors and fonts. Head to the Customizing Styles guide to learn how to swap the Win98 teal header, Y2K accent colors, and retro Google Fonts using Tailwind’s configuration file.

Build docs developers (and LLMs) love

Get started for freeTalk to us