Web Surfer is a React-based personal portfolio website that recreates the look and feel of late-1990s internet culture — complete with Windows 98-style windows, a sparkling cursor, dial-up loading animations, and a scrolling webring footer. It is built with Vite, React Router, Tailwind CSS, and Framer Motion, and deploys as a fully static site.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.
Getting Started
Clone the repo, install dependencies, and run the site locally in minutes.
Project Structure
Understand the file layout, build output, and how pages are organized.
Components
Explore the Win98Window, SparkleCursor, and Layout components.
Customization
Swap colors, fonts, and content to make the portfolio your own.
What’s Inside
Web Surfer ships with eight pre-built portfolio pages, all wrapped in the same retro shell:Home
Hero section with visitor counter and animated intro
About
Personal bio displayed in a resizable Win98 window
Skills
Tech stack shown as retro progress bars and badges
Projects
Featured work with Win98-style project cards
Work
Employment history in a retro timeline format
Blog
Writing section with notebook-paper background
Testimonials
Quotes styled as floating sticky notes
Contact
Contact form inside a draggable Win98 dialog
Quick Start
Start the dev server
Key Features
Windows 98 UI components
Windows 98 UI components
Every page is wrapped in authentic Win98-style windows with inset bevel shadows, a navy gradient title bar, and working minimize, maximize, and close buttons powered by Framer Motion layout animations.
Sparkle cursor effect
Sparkle cursor effect
Moving the mouse spawns animated star particles in teal (
#00CED1), hot pink (#FF69B4), and lime green (#9AE600) — drawn on a fixed canvas overlay that sits above all page content.Dial-up loading transitions
Dial-up loading transitions
Every route change triggers a full-screen Windows 98 dialog with a spinning blue ball, a “Dialing 56k modem…” message, and a Framer Motion progress bar — then fades out to reveal the new page.
Static deployment with hash routing
Static deployment with hash routing
React Router is configured in hash mode (
createHashRouter), so the entire site deploys as plain HTML/JS/CSS files with no server-side routing required.Retro typography
Retro typography
Three Google Fonts are loaded at runtime: Press Start 2P for pixel-style headings, Comic Neue for casual body copy, and Courier Prime for monospace/code sections.