The Contact page takes the familiar “contact me” form and skins it as a 2001-era website guestbook. Visitors are invited to leave a name or handle, an optional email, a website URL, and a freeform message. On submission the form shows a success state and theDocumentation 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.
Send Lucide icon animates on the submit button. The page header uses the Mail Lucide icon. To the right, a static panel shows recent “signatures” from fictional famous visitors — a wink at the real guestbooks of the era.
Purpose
This is the primary contact mechanism for the portfolio. The guestbook framing keeps it on-theme and makes it more memorable than a plain contact form. The faux “recent signatures” sidebar provides social proof while reinforcing the comedy of the overall site.Layout and Structure
The page uses a two-column grid (max-w-4xl mx-auto grid-cols-1 md:grid-cols-2 gap-8):
Left column — Guestbook form:
- A
"Get in Touch!!!"heading intext-3xl font-bold text-win-teal - A short invitation paragraph:
"Want to link exchange? Have a question about my code? Just want to say hi? Sign my guestbook below!" - A small italic disclaimer:
"(Or email me at devname@hotmail.com - just kidding, please use the form)" - A Win98Window titled
"Sign Guestbook"with aMailLucide icon. Inside:- Four
win98-button/shadow-bevel-insetinput fields: Name / Handle, Email (optional), Website URL (pre-filled"http://"), and Message (<textarea rows={4}) - A
win98-buttonsubmit button that shows"SENDING..."while the form is in-flight
- Four
"Thanks for signing!", "Your entry has been added to the database.", and a "Sign Again" win98-button that resets the state.
Below the form, a "Link to me!" section displays four animated 88×31 pixel web-badge placeholders in font-pixel animate-flicker.
Right column — Recent signatures:
- A
"Recent Signatures"heading with a teal underline border - Four static entries, each a
bg-white p-3 border border-dashed border-gray-400card showing a name (font-bold text-win-blue), date (text-xs text-gray-500), and message (font-comic text-sm)
| Name | Date | Message |
|---|---|---|
| Hilary Duff (real) | 05/12/2002 | Love the site! So totally cool. |
| Neo | 03/31/2002 | Follow the white rabbit. Also, nice use of tables. |
| Tom from MySpace | 01/15/2002 | Can I be your first friend? |
| Clippy | 12/25/2001 | It looks like you’re building a website. Would you like some help with that? |
The form submission is handled client-side only with a
setTimeout that simulates a 1.5-second network delay before showing the success state. There is no backend endpoint. To make the form functional, replace the setTimeout with a real fetch or use a service like Formspree, Netlify Forms, or EmailJS.Form Fields Reference
| Field | Type | Required | Notes |
|---|---|---|---|
| Name / Handle | text | Yes | The visitor’s name or screen name |
email | No | Not validated beyond HTML5 type | |
| Website URL | url | No | Pre-filled with "http://" |
| Message | textarea | Yes | rows={4}, resize-none |
How to Customize
Wire up a real form backend
Replace the
setTimeout inside the handleSubmit function with a fetch POST to your preferred form service endpoint. Return the JSON response and set the success state on a 200 status.Update the contact email
The placeholder
devname@hotmail.com appears in two places: the italic disclaimer paragraph and the webring footer marquee. Search the source for that string and replace both instances with your real address.Replace the recent signatures
The four static guestbook entries are defined as an inline array inside the right column JSX. Swap them out with real endorsements, or seed them with early messages from actual friends and colleagues.