The Home page is the first thing visitors see when they land on the site. It greets them with an unmistakably nostalgic splash — a largeDocumentation 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.
font-comic headline reading "Welcome to my homepage!!!", an animated “Under Construction” badge, and a retro visitor counter ticking upward in real time. From here, users can jump to every other section of the portfolio via a column of Win98-style nav buttons.
Purpose
This is the portfolio’s landing screen. Its job is twofold: establish the Y2K aesthetic immediately and give visitors a clear, icon-labeled map to every other page. The tagline"Welcome, surfer! Grab a Mountain Dew and stay a while." signals that the site is a playful creative work as much as a professional showcase.
Layout and Structure
The page uses a 12-column grid at medium breakpoints (max-w-5xl mx-auto grid grid-cols-1 md:grid-cols-12 gap-6).
- Left sidebar (3 cols): A Win98Window titled
"Navigation"holds the nav button list. Below it, a profile photo is displayed inside aborder-double border-win-tealframe with the caption"Me hacking the mainframe (circa 2001)"and afilter sepia-[0.3]vintage effect. - Main column (9 cols): A
font-comicheading with pulsingy2k-pinkasterisk sparkles on either side. Below the heading, a yellow dashed “Under Construction” banner features a bobbingHammericon (Lucide). A"Recent Guestbook Signatures"Win98Window shows the three latest visitor messages.
win98-button elements arranged in a vertical list inside the "Navigation" window. The eight entries and their routes are:
| Label | Route |
|---|---|
| About Me | /about |
| Projects | /projects |
| Skills | /skills |
| Resume | /work |
| Case Studies | /case-studies |
| Journal | /blog |
| Testimonials | /testimonials |
| Contact | /contact |
"Projects" tile carries an isNew: true flag, which renders a blinking "NEW!" badge in font-pixel text-y2k-pink animate-blink.
The visitor counter component (
VisitorCounter) starts at 1333337 and increments by 1 every 1.5 seconds using a setTimeout loop. It is purely cosmetic — numbers are not persisted anywhere.How to Customize
Change the headline and tagline
Find the
font-comic <h1> element and the italic subheading in the main column. Update these strings to match your personal branding. The asterisks on either side are separate <span> elements with animate-pulse.Replace the profile photo
The left sidebar photo uses an
<img> with an Unsplash src. Swap in the path to your own photo. The image is styled with filter sepia-[0.3] for a vintage feel — remove that class if you prefer true color.Update the nav tile labels and routes
The nav tile array is defined near the top of the Home component. Each entry has a
to (route path), label (display text), and icon. Add, remove, or reorder entries to match your actual pages.