Skip to main content

Documentation Index

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

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

The Contact page frames getting in touch as sending a message through a retro email client. A WindowPanel titled Compose New Message contains a styled form with four fields. On submission, the form transitions through three distinct UI states — idle, sending (pulsing bar animation), and sent (success confirmation). A Network.sys sidebar on the right shows current availability and links to GitHub and LinkedIn.

​
What’s on this page

​
Compose Form — Compose New Message (cyan WindowPanel)

The form uses a vertical stack of labelled rows separated by bottom borders (border-b border-y2k-panelDark). Labels use font-pixel text-xl text-y2k-textMuted at a fixed w-16 width. Input fields stretch to fill the remaining space.

​
Form Fields

LabelTypeDefault / PlaceholderNotes
To:texthello@developer.netPre-filled, disabled — displayed in y2k-cyan
From:emailyour@email.comRequired
Subj:textJob Opportunity / Collab / HelloRequired
MessagetextareaType your message here...Required, non-resizable
<form onSubmit={handleSubmit} className="flex flex-col gap-4">

  {/* To: (disabled, pre-filled) */}
  <div className="flex items-center gap-2 border-b border-y2k-panelDark pb-2">
    <label className="font-pixel text-xl text-y2k-textMuted w-16">To:</label>
    <input
      type="text"
      value="hello@developer.net"
      disabled
      className="flex-1 bg-transparent font-mono text-sm text-y2k-cyan outline-none"
    />
  </div>

  {/* From: */}
  <div className="flex items-center gap-2 border-b border-y2k-panelDark pb-2">
    <label className="font-pixel text-xl text-y2k-textMuted w-16">From:</label>
    <input
      type="email"
      required
      placeholder="your@email.com"
      className="flex-1 bg-black/50 border border-y2k-panelDark p-1 font-mono text-sm text-white focus:border-y2k-cyan outline-none"
    />
  </div>

  {/* Subj: */}
  <div className="flex items-center gap-2 border-b border-y2k-panelDark pb-2">
    <label className="font-pixel text-xl text-y2k-textMuted w-16">Subj:</label>
    <input
      type="text"
      required
      placeholder="Job Opportunity / Collab / Hello"
      className="flex-1 bg-black/50 border border-y2k-panelDark p-1 font-mono text-sm text-white focus:border-y2k-cyan outline-none"
    />
  </div>

  {/* Message textarea */}
  <div className="flex flex-col gap-2 flex-1 min-h-[200px]">
    <textarea
      required
      placeholder="Type your message here..."
      className="flex-1 bg-black/50 border border-y2k-panelDark p-2 font-mono text-sm text-white focus:border-y2k-cyan outline-none resize-none"
    />
  </div>

  {/* Footer row */}
  <div className="flex justify-between items-center mt-2">
    <div className="font-mono text-[10px] text-y2k-textMuted">
      Guestbook, But Make It Employable
    </div>
    {/* Submit button or sending indicator */}
  </div>

</form>

​
Three-State Flow

The form’s parent component manages a status state variable with three values: "idle", "sending", and "sent". 
const [status, setStatus] = useState("idle");

const handleSubmit = (e) => {
  e.preventDefault();
  setStatus("sending");
  setTimeout(() => setStatus("sent"), 2000); // 2-second simulated delay
};

Idle

The default state. The form is fully visible and interactive. The submit button reads Send It → rendered as a primary PixelButton.

Sending

Triggered on form submit. The PixelButton is replaced by a w-32 h-8 container holding three pulsing magenta bars (animate-pulse with staggered delay-75 and delay-150), visually indicating transmission in progress.

Sent

After 2,000 ms, the entire form is replaced by a centered success state: a 4xl lime pixel-font "Message Delivered!" heading, a muted subtext line, and a Compose Another secondary PixelButton that resets status to "idle".

​
Sending State — Pulsing Bar Indicator

{status === "sending" ? (
  <div className="w-32 h-8 bg-black border-2 border-y2k-panelDark p-1 flex gap-1">
    <div className="flex-1 bg-y2k-magenta animate-pulse" />
    <div className="flex-1 bg-y2k-magenta animate-pulse delay-75" />
    <div className="flex-1 bg-y2k-magenta animate-pulse delay-150" />
  </div>
) : (
  <PixelButton type="submit" variant="primary">Send It →</PixelButton>
)}

​
Sent State — Success Screen

{status === "sent" && (
  <div className="h-64 flex flex-col items-center justify-center text-center gap-4">
    <div className="font-pixel text-4xl text-y2k-lime">Message Delivered!</div>
    <p className="font-mono text-sm text-y2k-textMuted">
      Your transmission has entered the mainframe.
    </p>
    <PixelButton onClick={() => setStatus("idle")} variant="secondary">
      Compose Another
    </PixelButton>
  </div>
)}
The 2,000 ms delay in setTimeout simulates network latency for UX effect. The form does not currently submit to a real backend — it is a visual prototype demonstrating the three-state flow.

​
Network.sys Sidebar (magenta WindowPanel)

The right column (w-full md:w-64) contains a single WindowPanel titled Network.sys. Its contents are divided into two sections separated by pixel-font headers with bottom borders.

​
Status

An online indicator using a 12px rounded-full div in bg-y2k-lime with a green shadow-[0_0_5px_#C6FF00] animate-pulse glow effect, next to the text “Online”. A muted subtext line reads: "Accepting opportunities". 
<div className="flex items-center gap-2 font-mono text-xs">
  <div className="w-3 h-3 rounded-full bg-y2k-lime shadow-[0_0_5px_#C6FF00] animate-pulse" />
  <span className="text-y2k-text">Online</span>
</div>
<div className="font-mono text-[10px] text-y2k-textMuted mt-1">
  Accepting opportunities
</div>

​
Channels

Two social links rendered as flex rows with icon boxes and hover states:
ChannelIconHover Color
GitHubGHy2k-cyan
LinkedInINy2k-cyan
Each link uses a w-6 h-6 bg-black border border-y2k-panelDark icon box with a group-hover:border-y2k-cyan border transition.
Both channel links currently point to href="#" — placeholder anchors. In a deployed version, these would link to the developer’s actual GitHub and LinkedIn profile URLs.

​
Layout Structure

  • Outer: max-w-4xl mx-auto h-full flex flex-col md:flex-row gap-6
  • Left (flex-1): Compose New Message WindowPanel — takes remaining width
  • Right (w-full md:w-64): Network.sys WindowPanel — fixed sidebar width on desktop
  • Both columns stack vertically on mobile via flex-col

Build docs developers (and LLMs) love

Get started for freeTalk to us