NeonRetro Contact: Y2K Guestbook, Form, and Social Links

The Contact page takes the familiar “contact form” concept and renders it as a Y2K-era guestbook — the kind that lived at the bottom of every Geocities page. The left column lets visitors leave a message (with a playful confirmation alert), while the right column provides direct social links for anyone who prefers a less theatrical route to saying hello. The sample guestbook entries are populated from data/mockData.js and set the tone for what kind of messages the page invites.

Route

/contact

Declared in the router as:

<Route path="contact" element={<ContactPage />} />

The page opens with a title and subtitle outside of any window component:

<h1 className="text-4xl font-display text-white mb-2">GUESTBOOK.exe</h1>
<p className="font-mono text-gray-400">Sign my guestbook, but make it employable.</p>

Layout

The page uses a flex flex-col md:flex-row gap-8 container that stacks vertically on mobile. On desktop it becomes a side-by-side layout with the form and entries taking flex-1 and the social links sidebar fixed at w-72.

Left Column — Guestbook Form and Entries

sign_guestbook.bat RetroWindow

A lime-colored RetroWindow titled sign_guestbook.bat wraps the submission form:

<RetroWindow title="sign_guestbook.bat" color="lime">
  <form onSubmit={handleSubmit} className="space-y-4">

    <div>
      <label className="block font-mono text-sm text-y2k-lime mb-1">NAME / ALIAS:</label>
      <input
        type="text"
        required
        value={formState.name}
        onChange={e => setFormState({ ...formState, name: e.target.value })}
        className="w-full bg-y2k-black border border-y2k-gray p-2 text-white font-mono
          focus:border-y2k-lime focus:outline-none"
        placeholder="xX_CoolRecruiter_Xx"
      />
    </div>

    <div>
      <label className="block font-mono text-sm text-y2k-lime mb-1">MESSAGE:</label>
      <textarea
        required
        rows={4}
        value={formState.message}
        onChange={e => setFormState({ ...formState, message: e.target.value })}
        className="w-full bg-y2k-black border border-y2k-gray p-2 text-white font-mono
          focus:border-y2k-lime focus:outline-none resize-none"
        placeholder="We have a job for you..."
      />
    </div>

    <button
      type="submit"
      disabled={isSubmitting}
      className="flex items-center gap-2 bg-y2k-lime text-black font-display px-6 py-2
        hover:bg-white transition-colors disabled:opacity-50"
    >
      <Send size={16} /> {isSubmitting ? 'TRANSMITTING...' : 'SUBMIT_ENTRY'}
    </button>

  </form>
</RetroWindow>

Form fields:

NAME / ALIAS — single-line text input, required, placeholder="xX_CoolRecruiter_Xx".
MESSAGE — 4-row textarea, required, placeholder="We have a job for you...".
Both fields use focus:border-y2k-lime to highlight the active field with a lime border.

Submission behavior:

const handleSubmit = (e) => {
  e.preventDefault();
  setIsSubmitting(true);
  setTimeout(() => {
    setIsSubmitting(false);
    setFormState({ name: '', message: '' });
    alert('Message transmitted to the void.');
  }, 1000);
};

After a 1-second simulated delay, the form clears and a browser alert() fires with “Message transmitted to the void.” While submitting, the button label changes to TRANSMITTING... and is disabled.

RECENT_ENTRIES Section

Below the form, a RECENT_ENTRIES heading (gray, with a bottom border) introduces the three sample guestbook entries from data/mockData.js:

<h3 className="font-mono text-gray-500 border-b border-y2k-gray pb-2">RECENT_ENTRIES</h3>
{guestbookEntries.map(entry => (
  <div key={entry.id} className="bg-y2k-lightgray/20 border border-y2k-gray p-3">
    <div className="flex justify-between font-mono text-xs mb-2">
      <span className="text-y2k-cyan">{entry.name}</span>
      <span className="text-gray-500">{entry.date}</span>
    </div>
    <p className="font-sans text-sm text-gray-300">{entry.message}</p>
  </div>
))}

The entry name is text-y2k-cyan and the date is right-aligned in gray. The message body uses font-sans. Sample entries from data/mockData.js:

Name	Date	Message
`xX_DarkSlayer_Xx`	2026-05-20	First! Cool site, reminds me of my old Angelfire page but less broken.
`Recruiter_Bot_9000`	2026-05-22	Impressive profile. We are looking for a Rockstar Ninja 10x Developer for an unpaid internship. Interested?
`Former_CoWorker_Sarah`	2026-05-25	Still can’t believe you left the hospital to stare at glowing rectangles all day. Miss you in the ward! Site looks amazing.

summon_me.txt RetroWindow

A magenta-colored RetroWindow titled summon_me.txt holds the social links:

<RetroWindow title="summon_me.txt" color="magenta">
  <p className="font-mono text-sm text-gray-300">
    No actual spells required, just suspiciously organized files and standard communication protocols.
  </p>
  <div className="flex flex-col gap-3">
    <a href="#" className="flex items-center gap-3 p-2 border border-y2k-gray
      hover:border-y2k-magenta hover:bg-y2k-magenta/10 transition-colors group">
      <Mail className="text-y2k-magenta group-hover:animate-bounce" size={20} />
      <span className="font-mono text-sm text-white">EMAIL</span>
    </a>
    <a href="#" className="flex items-center gap-3 p-2 border border-y2k-gray
      hover:border-white hover:bg-white/10 transition-colors group">
      <Github className="text-white group-hover:animate-bounce" size={20} />
      <span className="font-mono text-sm text-white">GITHUB</span>
    </a>
    <a href="#" className="flex items-center gap-3 p-2 border border-y2k-gray
      hover:border-y2k-cyan hover:bg-y2k-cyan/10 transition-colors group">
      <Linkedin className="text-y2k-cyan group-hover:animate-bounce" size={20} />
      <span className="font-mono text-sm text-white">LINKEDIN</span>
    </a>
  </div>
</RetroWindow>

Each link row has a hover state that changes the border and background to match the icon’s color. The icon itself applies group-hover:animate-bounce for a playful micro-interaction.

Link	Icon	Hover border	Placeholder
EMAIL	`Mail` (magenta)	`border-y2k-magenta`	`#`
GITHUB	`Github` (white)	`border-white`	`#`
LINKEDIN	`Linkedin` (cyan)	`border-y2k-cyan`	`#`

Hire Me Pls Sticker

A <Sticker> component is centered below the social window:

<div className="flex justify-center mt-4">
  <Sticker color="white" rotation={8}>Hire Me Pls</Sticker>
</div>

Guestbook Entry Data Structure

Entries are stored in data/mockData.js and exported as the guestbookEntries array:

{
  id: 1,
  name: 'xX_DarkSlayer_Xx',
  date: '2026-05-20',
  message: 'First! Cool site, reminds me of my old Angelfire page but less broken.',
}

Customization

Replace the href="#" placeholders in the component with real URLs:

// EMAIL — use mailto: for direct email links
<a href="mailto:you@example.com" ...>

// GITHUB
<a href="https://github.com/yourhandle" ...>

// LINKEDIN
<a href="https://linkedin.com/in/yourprofile" ...>

Connecting the Form to a Real Backend

The guestbook form is front-end only — handleSubmit fires a browser alert() and clears the form without sending data anywhere. To actually receive messages, integrate a third-party form service or a backend endpoint. Two common options: Option A — Formspree

// Replace the onSubmit handler with a fetch to your Formspree endpoint
const handleSubmit = async (e) => {
  e.preventDefault();
  setIsSubmitting(true);
  await fetch('https://formspree.io/f/YOUR_FORM_ID', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(formState),
  });
  setIsSubmitting(false);
  setFormState({ name: '', message: '' });
  alert('Message transmitted to the void.');
};

Option B — Resend (email delivery) Create a serverless API route (Next.js, Express, or a Vercel function) that calls the Resend API with the form values, then point the fetch call at that endpoint.

Updating the Sample Guestbook Entries

The three entries in data/mockData.js are display-only. Edit them to seed the page with more contextually appropriate placeholder messages, or remove them entirely once real submissions are coming in:

const guestbookEntries = [
  { id: 1, name: 'YourFriend', date: '2026-06-01', message: 'This site is incredible.' },
  // ...
];

Overview

Architecture

Components

Pages

Data & Customization

NeonRetro Contact: Y2K Guestbook, Form, and Social Links

Route

Page Header

Layout

Left Column — Guestbook Form and Entries

sign_guestbook.bat RetroWindow

RECENT_ENTRIES Section

summon_me.txt RetroWindow

Hire Me Pls Sticker

Guestbook Entry Data Structure

Customization

Connecting the Form to a Real Backend

Updating the Sample Guestbook Entries

Build docs developers (and LLMs) love

Overview

Architecture

Components

Pages

Data & Customization

Documentation Index

​Route

​Page Header

​Layout

​Left Column — Guestbook Form and Entries

​sign_guestbook.bat RetroWindow

​RECENT_ENTRIES Section

​Right Column — Social Links Sidebar

​summon_me.txt RetroWindow

​Hire Me Pls Sticker

​Guestbook Entry Data Structure

​Customization

​Connecting the Social Links

​Connecting the Form to a Real Backend

​Updating the Sample Guestbook Entries

Build docs developers (and LLMs) love

Route

Page Header

Layout

Left Column — Guestbook Form and Entries

sign_guestbook.bat RetroWindow

RECENT_ENTRIES Section

Right Column — Social Links Sidebar

summon_me.txt RetroWindow

Hire Me Pls Sticker

Guestbook Entry Data Structure

Customization

Connecting the Social Links

Connecting the Form to a Real Backend

Updating the Sample Guestbook Entries