Skip to main content

Documentation Index

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

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

Y2K Webring is a single-page application (SPA) built with React 18 and Vite, designed as a personal developer portfolio template. It uses React Router v6 for client-side routing (with hash-based navigation so the app deploys anywhere as static HTML), Framer Motion for page transitions and micro-animations, and Tailwind CSS for utility-first styling. The entire look and feel is inspired by the visual language of early-2000s web design — bold neon palettes, chunky decorative borders, pixel-display fonts, and animated UI flourishes — updated with modern accessibility and component architecture.

​
The Y2K Aesthetic

The design philosophy of Y2K Webring is unapologetically loud. Every visual decision is a deliberate callback to the era of GeoCities, early Flash sites, and ICQ status widgets. Color palette — Three hero colors dominate the interface, all defined as Tailwind theme tokens:
TokenHexRole
y2k-magenta#ff00aaPrimary accent, headings, CTAs, scrollbar thumb
y2k-lime#aeff00Secondary accent, marching-ants borders, hover states
y2k-cyan#00e5ffTertiary accent, nav panels, guestbook widget
y2k-violet#14001fDark background base, panel fills
y2k-lavender#e9d5ffDefault body text color
The page background is a radial-gradient that radiates dark violet (#14001f) from the top center against pure black (#000000), and it is fixed so it stays in place during scroll. Typography — Three Google Fonts families are loaded:
  • VT323 (monospace display) — used for all h1–h6 headings, giving them the look of a dot-matrix or CRT terminal.
  • Caveat (handwriting) — used via the .font-marginalia utility for annotations, guestbook entries, and hand-written-feel labels.
  • Outfit (sans-serif) — the default body font for paragraphs and UI copy.
Chunky borders — Panels use .border-chunky-magenta, .border-chunky-lime, and .border-chunky-cyan utility classes. Each applies a 2px solid border in the matching neon color plus a 4px 4px 0px 0px box-shadow at 50% opacity, replicating the hard-offset shadows of early web design tools like Photoshop 5. Marching-ants border — The .marching-ants-border class uses four linear-gradient background images (top, bottom, left, right) on a 10×2px repeat and animates background-position over 1 second to produce the classic moving dashed border effect seen in image-editing software. Text selection — The global ::selection color is overridden to magenta (#ff00aa) background with white text, so even copy-pasting text carries the brand.

​
Tech Stack

React 18

Component architecture with concurrent features. All UI is composed from functional React components using hooks.

Vite

Lightning-fast dev server and optimized production bundler. Outputs pre-split JS modules with modulepreload hints baked into index.html.

React Router v6

Client-side routing with HashRouter so no server rewrite rules are required for static hosting.

Framer Motion

Declarative animation library powering page transition bars, hover effects, and the SparkleTrail cursor animation on the home page.

Tailwind CSS

Utility-first CSS framework. Custom Y2K design tokens (y2k-magenta, y2k-lime, y2k-cyan, y2k-violet, y2k-lavender) are defined in the Tailwind config and used throughout.

lucide-react

Icon library (v0.522.0) providing the GitHub, LinkedIn, mail, and RSS icons rendered in the RightWebring social links panel.

​
Project Structure

The repository ships as a pre-built static site — the assets/ directory contains Vite-compiled bundles, and pages/ contains server-rendered HTML shells for each route. The source component tree lives under components/. 
y2k-webring/
├── assets/            # Vite-compiled JS and CSS bundles
├── components/
│   ├── layout/        # AppLayout, LeftNav, RightWebring, PageTransitionBar
│   └── y2k/           # BorderedPanel, ChunkyButton, PillTag, SparkleTrail, StatusWidget
├── data/
│   └── portfolioData.js  # All portfolio content
├── pages/             # Pre-rendered HTML per route
└── index.html         # Entry point
components/layout/ — Structural shell components. AppLayout wraps every page in a responsive three-column flex layout: a fixed-width LeftNav sidebar (navigation links and dev info), a fluid <main> content area wrapped in PageTransitionBar, and a RightWebring panel (social links and guestbook count) that appears only on the home route. The SparkleTrail cursor effect is also mounted only on the home route. components/y2k/ — Reusable Y2K-styled primitive components consumed by page components. These are the building blocks for the neon-bordered panels, pill tags, chunky buttons, status widgets, and cursor sparkle effect. data/portfolioData.js — The single source of truth for all portfolio content. Editing this one file is all that is needed to personalize the site. See Customize Data for the full schema. pages/ — Static HTML files (Home.html, About.html, Projects.html, Skills.html, Writing.html, WritingPost.html, CaseStudies.html, Contact.html) that correspond to the app’s routes.

​
Next Steps

Getting Started

Clone the repo, install dependencies, and spin up the dev server in under five minutes.

Architecture Overview

Understand how AppLayout, routing, and the static build pipeline fit together.

Y2K Components

Explore the reusable component library: BorderedPanel, ChunkyButton, PillTag, SparkleTrail, and StatusWidget.

Customize Data

Learn the full schema for portfolioData.js and how to swap in your own projects, skills, and writing.

Build docs developers (and LLMs) love

Get started for freeTalk to us