Web Surfer is a personal portfolio site template that recreates the look and feel of the late-1990s web — complete with Windows 98-style windows, a sparkling cursor, a visitor counter, and a scrolling webring banner. It is built on a fully modern stack (React 18, Vite, Tailwind CSS, and Framer Motion), so you get pixel-perfect Y2K nostalgia with none of the era’s browser-compatibility headaches.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.
What makes it unique
Win98 UI Components
Every content section is wrapped in a
Win98Window component — complete with a navy-to-blue gradient title bar, minimize, maximize, and close buttons, and the characteristic bevel shadow that defined Windows 98’s visual identity.Sparkle Cursor
Moving your mouse across the page spawns animated star particles that drift and fade in the site’s Y2K accent colors — teal (
#00CED1), hot pink (#FF69B4), and lime (#9AE600) — rendered on a full-screen canvas overlay. Respects prefers-reduced-motion.Dial-up Transitions
Navigating between pages triggers a Framer Motion overlay styled as a Netscape Navigator loading dialog — complete with a spinning loading indicator, a filling progress bar, and the message “Dialing 56k modem…” The animation is skipped automatically when the user prefers reduced motion.
Hash-based Static Routing
React Router v6 runs in hash mode (
createHashRouter), which means every URL is a fragment like /#/about. The entire site resolves from a single index.html with no server-side routing configuration required.Tech stack
- React 18 — component model and hooks
- Vite — fast dev server and production bundler
- React Router v6 (hash mode) — client-side routing with no server config
- Tailwind CSS — utility-first styling with custom Win98 and Y2K color tokens
- Framer Motion — page transition animations and window layout animations
- Lucide React v0.522 — icon set used for Win98 window control buttons
- Google Fonts — Press Start 2P (pixel headings), Comic Neue (body alternative), Courier Prime (monospace)
Project pages
The router defines nine routes — eight content pages plus a catch-all 404:| Route | Page |
|---|---|
/ | Home |
/about | About |
/skills | Skills |
/projects | Projects |
/work | Work |
/blog | Blog |
/testimonials | Testimonials |
/contact | Contact |
Layout component, which provides the header (with visitor counter), the dial-up page transition wrapper, and the footer with the scrolling webring marquee.
Web Surfer deploys as pure static files — the production build outputs a single
dist/ folder with index.html and pre-built JS/CSS assets. No server, database, or back-end is required. Drop the folder onto any static host (GitHub Pages, Netlify, Vercel, Cloudflare Pages, or a plain S3 bucket) and it works.