y2k-web is a personal portfolio website that deliberately recreates the visual language of the late-1990s and early-2000s internet — think Windows 98 chrome, pixel fonts, garish neon palettes, and over-animated everything — while running entirely on modern, production-grade tooling under the hood. Rather than using a legacy stack, it is a React 18 single-page application bundled by Vite, animated by Framer Motion 11, and styled with Tailwind CSS. The result is a lovingly ironic tribute to an era of GeoCities pages, blinking marquees, and AIM away messages that also ships fast and deploys cleanly to GitHub Pages.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/y2k-web/llms.txt
Use this file to discover all available pages before exploring further.
Key Features
Windows 98–Style UI Chrome
Every content area is wrapped in a faithful Windows 98 window frame — complete with a title bar, close/minimise/maximise buttons, and the classic
shadow-win-out / shadow-win-in inset-border effects that gave every dialog its characteristic depth.Retro Tailwind Color Palette
A custom Tailwind palette ships with the project:
retro-blue (#0000EE), retro-pink (#FF1493), retro-lime (#00FF00), retro-cyan (#00FFFF), and win-gray (#C0C0C0) — matching period-accurate system and hyperlink colors.Pixel Font — Press Start 2P
The Google Font Press Start 2P is loaded globally and applied via the
font-pixel Tailwind utility. It provides the authentic 8-bit bitmap-style lettering seen on title bars, labels, and navigation items throughout the site.Hash-Based React Router
Client-side navigation uses React Router with hash-based URLs (e.g.
#/about, #/projects). This approach requires no server-side configuration and works perfectly on static hosts like GitHub Pages without any redirect rules.Framer Motion Animations
Framer Motion 11 drives the site’s theatrical animations: a custom cursor sparkle trail that follows the mouse pointer, animated 3-D page headers, spring-physics project cards, and
AnimatePresence-powered modal dialogs for blog post read-more overlays.Static Pre-Rendered HTML Pages
Each hash route has a corresponding static HTML file in the
pages/ directory (e.g. pages/About.html). Each file injects window.__STATIC_PAGE_ROUTE__ and sets the correct hash on load, enabling direct deep-link navigation without a 404.IM-Style Guestbook
The
Guestbook component renders an AIM-flavoured form where visitors can leave a name, handle, and message. Entries are persisted to localStorage under the key retro_guestbook and pre-seeded with two nostalgic example posts.Visitor Counter
A classic hit counter reads and increments a
visitor_count key from localStorage (adding a small random delta for that authentic inflated-count feel), then displays the current number to the visitor — just like every self-respecting GeoCities page of 1999.Tech Stack
| Dependency | Role |
|---|---|
React 18 (18.3.1) | Component model, hooks, StrictMode |
| React Router | Client-side hash-based routing across all 8 pages |
| Framer Motion 11 | Animations — cursor trail, hover effects, AnimatePresence modals |
| Tailwind CSS | Utility-first styling with custom retro color and shadow tokens |
| Vite | Development server (port 5173), production bundler, output to dist/ |
| Google Fonts — Press Start 2P | Pixel-art bitmap-style typeface loaded via @import in CSS |
The project ships a single bundled
assets/main.js and assets/main.css generated by Vite. The components/Primitives.js and components/Guestbook.js files are declared as modulepreload entries in the root index.html and each static page HTML so the browser can prefetch them in parallel.Pages
The application defines eight hash routes, each with a dedicated static HTML bootstrap file inpages/:
| Route | Static file | Description |
|---|---|---|
/ | index.html | Home — The front page. Features a Framer Motion 3-D animated hero heading, a scrolling marquee ticker, a classic 2-column table layout with inline navigation, an embedded Guestbook, and the visitor counter. |
/about | pages/About.html | About Me — A “Stats & Facts” profile card with bulleted attributes, a rotating star badge, a sticky-note aside, and a “My Top 8 Inspirations” grid that parodies the old MySpace feature. |
/projects | pages/Projects.html | Projects — A 2×2 masonry grid of spring-animated project cards. Each card is slightly rotated at rest and snaps straight on hover, wrapping a screenshot, description, tech stack badge, and View Source / Launch buttons. |
/work | pages/Work.html | Resume — A print-faithful résumé rendered as an on-screen document, complete with a Times New Roman typeface, a torn-sticky-note TL;DR annotation, objective statement, experience timeline, and skills table. |
/case-studies | pages/CaseStudies.html | Case Studies — A sticky sidebar index alongside long-form write-ups (Project Alpha, Beta, and Gamma) presented as a scrollable blog-like layout with inline figures. |
/blog | pages/Blog.html | Blog — A Web Log (weblog!) styled like an early 2000s LiveJournal, complete with mood and “currently listening to” metadata per post. Clicking “Read More” opens an AnimatePresence scale-in modal window. |
/testimonials | pages/Testimonials.html | Testimonials — A forum-style list of fictional visitor reviews showing name, spoofed IP address, date, star rating, and a quoted message alongside an animated GIF avatar. |
/contact | pages/Contact.html | Contact — An AIM Instant Messenger window simulation with a live chat UI. Messages sent by the visitor trigger a timed auto-reply from “Webmaster”, complete with a retro formatting toolbar. |