Contact Page: Win98 Form, Guestbook, and Social Links

The Contact page (/contact) lets visitors reach the developer through a Windows 98–styled contact form, browse and sign a retro guestbook, and jump to external social profiles via icon links. The layout is a two-column grid: the contact form and social links on the left and the guestbook on the right.

Layout structure

On large screens, the page uses a two-column grid (lg:grid-cols-12) inside a max-w-6xl centered container. The left column spans five columns (lg:col-span-5) and holds the contact form and social links; the right column spans seven (lg:col-span-7) and holds the guestbook panel. On smaller screens the columns stack vertically with the contact form rendered first.

┌──────────────────────────────┬──────────────────────────────┐
│  Win98Window                 │  Guestbook panel             │
│  "Send_Message.exe"          │  (border-ridge, bg-[#0c0814])│
│  ─────────────────────────── │  ─────────────────────────── │
│  Your Name: [_____________]  │  MY GUESTBOOK                │
│  Email:     [_____________]  │  Please sign before you leave│
│  Message:                    │  ─────────────────────────── │
│  [________________________]  │  [Name] [Comment...]  [Sign] │
│  [________________________]  │                              │
│  [SEND IT]                   │  CoolHacker99: First! ...    │
│                              │  DesignGuru: The bevels...   │
│  ── EXTERNAL_LINKS ──        │  Mom: Very nice dear...      │
│  [GitHub] [LinkedIn] [Twitter│                              │
└──────────────────────────────┴──────────────────────────────┘

Contact form

The contact form lives inside a <Win98Window> titled "Send_Message.exe". It contains three labeled fields (Your Name, Email Address, Message) and a submit button. Each input uses .bevel-inset styling to create the characteristic sunken look of Win98 text fields.

// Contact form (from assets/main.js)
<Win98Window title="Send_Message.exe">
  <form className="space-y-4" onSubmit={(e) => e.preventDefault()}>
    {/* Name field */}
    <div className="space-y-1">
      <label className="font-mono text-sm text-[#e2e8f0]">Your Name:</label>
      <input
        type="text"
        className="w-full bevel-inset bg-black text-[#22d3ee] p-2 font-mono text-sm
                   focus:outline-none focus:border-[#a855f7]"
        placeholder="Anonymous Surfer"
      />
    </div>

    {/* Email field */}
    <div className="space-y-1">
      <label className="font-mono text-sm text-[#e2e8f0]">Email Address:</label>
      <input
        type="email"
        className="w-full bevel-inset bg-black text-[#22d3ee] p-2 font-mono text-sm
                   focus:outline-none focus:border-[#a855f7]"
        placeholder="you@cyberspace.net"
      />
    </div>

    {/* Message textarea */}
    <div className="space-y-1">
      <label className="font-mono text-sm text-[#e2e8f0]">Message:</label>
      <textarea
        rows={4}
        className="w-full bevel-inset bg-black text-[#22d3ee] p-2 font-mono text-sm
                   focus:outline-none focus:border-[#a855f7] resize-none"
        placeholder="Type your message here..."
      />
    </div>

    {/* Submit button */}
    <div className="pt-2">
      <button
        type="submit"
        className="bevel-button w-full py-2 font-bold flex items-center justify-center gap-2"
      >
        SEND IT
      </button>
    </div>
  </form>
</Win98Window>

The .bevel-inset class applies the inverted border colors of .bevel-window, giving inputs a sunken appearance:

/* From main.css */
.bevel-inset {
  border-top:    2px solid #475569;
  border-left:   2px solid #475569;
  border-bottom: 2px solid #e2e8f0;
  border-right:  2px solid #e2e8f0;
  background: #0f172a;
}

The contact form does not include a server-side handler in the static build. To make it functional, wire the onSubmit handler to a service such as Formspree, EmailJS, or a serverless function endpoint, then replace the placeholder action attribute.

Below the contact form, a <div className="bevel-window p-4 bg-[#1a0f24]"> panel titled "EXTERNAL_LINKS" holds a row of .bevel-button icon links pointing to the developer’s external profiles. Each link wraps a lucide-react icon.

// Social links panel (from assets/main.js)
<div className="bevel-window p-4 bg-[#1a0f24]">
  <h3 className="font-mono text-sm text-[#a3ff12] mb-4 text-center">
    EXTERNAL_LINKS
  </h3>
  <div className="flex justify-center gap-4">
    <a href="#" className="bevel-button w-12 h-12 flex items-center justify-center group">
      {/* Github icon — lucide-react */}
    </a>
    <a href="#" className="bevel-button w-12 h-12 flex items-center justify-center group">
      {/* Linkedin icon — lucide-react */}
    </a>
    <a href="#" className="bevel-button w-12 h-12 flex items-center justify-center group">
      {/* Twitter icon — lucide-react */}
    </a>
  </div>
</div>

To update the links, locate the href attributes on the three anchor tags in the Contact component in assets/main.js and replace the placeholder "#" values with your actual profile addresses.

Guestbook

The guestbook is a separate panel on the right side of the layout. It uses a border-4 border-ridge border-[#c0c8d8] bg-[#0c0814] outer wrapper with a bg-[#c0c8d8] text-black header bar — distinct from the <Win98Window> chrome used by the contact form. The panel has two parts: a sign form at the top and a scrollable list of existing entries below.

Sign form

The sign form uses .bevel-inset inputs and a bevel-button submit button. On submission the new entry is prepended to the entries list in component state.

// Guestbook sign form (from assets/main.js)
<div className="bg-[#1a0f24] border border-dashed border-[#a855f7] p-4">
  <div className="flex gap-2">
    <input
      type="text"
      placeholder="Name"
      className="w-1/3 bevel-inset bg-black text-white px-2 py-1 font-mono text-sm"
    />
    <input
      type="text"
      placeholder="Leave a comment..."
      className="flex-1 bevel-inset bg-black text-white px-2 py-1 font-mono text-sm"
    />
    <button className="bevel-button px-4 font-bold text-xs">Sign</button>
  </div>
</div>

Existing entries

Each guestbook entry is rendered as a .bevel-inset card with the author’s handle in text-[#22d3ee] font-mono, the message in font-sans text-[#e2e8f0] italic, and a date stamp in a top-right corner badge with bg-[#475569] styling. The default seed entries sourced from the component are:

Handle	Date	Message
`CoolHacker99`	`10/24/2026`	`"First! Awesome site layout. Reminds me of my old Angelfire page."`
`DesignGuru`	`10/23/2026`	`"The bevels are exquisite. 10/10 would click again."`
`Mom`	`10/20/2026`	`"Very nice dear. Are you eating enough vegetables?"`

// Guestbook entry pattern (from assets/main.js)
<div className="bg-[#1a0f24] border border-[#475569] p-4 relative">
  <div className="absolute top-0 right-0 bg-[#475569] text-white font-mono text-[10px] px-2 py-1">
    {entry.date}
  </div>
  <div className="font-bold text-[#22d3ee] mb-2 font-mono">
    <a href="mailto:fake@email.com" className="hover:underline">{entry.name}</a> wrote:
  </div>
  <p className="font-sans text-[#e2e8f0] italic">"{entry.message}"</p>
</div>

To add pre-seeded guestbook entries, edit the im array (the guestbook entries constant) in assets/main.js:

// In assets/main.js — guestbook seed data
const im = [
  { name: "CoolHacker99", date: "10/24/2026", message: "First! Awesome site layout. Reminds me of my old Angelfire page." },
  { name: "DesignGuru",   date: "10/23/2026", message: "The bevels are exquisite. 10/10 would click again." },
  { name: "Mom",          date: "10/20/2026", message: "Very nice dear. Are you eating enough vegetables?" },
  // Add more seed entries here
];

Guestbook entries added through the sign form are stored only in React component state. They are lost on page refresh unless you persist them to a backend (e.g., a simple key–value store or database). To add persistence, fire an API call in the sign handler and fetch initial entries on component mount.

CSS utilities used

Class	Purpose
`.bevel-window`	Raised Win98 outer window container
`.bevel-inset`	Sunken input field style
`.bevel-button`	Interactive button with bevel border
`text-[#a855f7]`	Purple label/accent text
`text-[#22d3ee]`	Cyan username text in guestbook entries
`text-[#94a3b8]`	Muted secondary text (timestamps, hints)
`font-mono`	`DM Mono` — used throughout the form UI

Customization

Wire up the contact form: Add an onSubmit handler that calls an external email API. A minimal Formspree integration requires only changing <form> to <form action="https://formspree.io/f/YOUR_ID" method="POST">. Add a CAPTCHA: Insert a hCaptcha or Cloudflare Turnstile widget between the message textarea and the submit button to reduce spam on both the contact form and guestbook. Persist guestbook entries: Replace the static im array with a useEffect that fetches entries from a REST API on mount, and update the sign handler to POST new entries to the same endpoint. Add more social icons: Import additional lucide-react icons (e.g., Mail, Codepen, Youtube) and add .bevel-button anchor tags following the existing social link pattern.

The .bevel-button:active CSS rule reverses the border shadow directions on click, producing a satisfying pressed-in effect. This happens automatically via the CSS in main.css — no JavaScript is needed.

Home

Site entry point with hero section and navigation

About

Developer bio, quick facts, and interests

Projects

Filterable portfolio with GitHub and live links

Writing

Multi-style retro blog post listing

Overview

Pages & Features

Components

Customization

Contact Page: Win98 Form, Guestbook, and Social Links

Layout structure

Contact form

Guestbook

Sign form

Existing entries

CSS utilities used

Customization

Home

About

Projects

Writing

Build docs developers (and LLMs) love

Overview

Pages & Features

Components

Customization

Documentation Index

​Layout structure

​Contact form

​Social links section

​Guestbook

​Sign form

​Existing entries

​CSS utilities used

​Customization

​Related pages

Home

About

Projects

Writing

Build docs developers (and LLMs) love

Layout structure

Contact form

Social links section

Guestbook

Sign form

Existing entries

CSS utilities used

Customization

Related pages