Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/choose-your-destiny/llms.txt

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

The Contact section is styled as a secure data terminal under the heading ESTABLISH_CONNECTION. Instead of a conventional form, fields are prefixed with terminal-style prompt labels — name>, email>, and message> — giving the impression that the visitor is entering commands into a live shell. The form handles three visual states (idle, submitting, and success), and on successful submission displays the confirmation: TRANSMISSION SENT. Alongside the form, a COMM_CHANNELS panel lists direct links to GitHub, LinkedIn, and Twitter, and a status chip reads CURRENT STATUS: OPEN TO WORK. Route: /contact (hash: #/contact)
Color theme: Neon magenta (#EC4899 / --neon-magenta)

​
Form Fields

Each input is paired with a terminal-style label prefix rendered in neon-lime monospace font:

name>

A single-line text input for the visitor’s name. The input itself is unstyled (transparent background, no border box) with only a bottom-border underline in border-dark-lighter that transitions to border-neon-cyan on focus.

email>

A single-line email input using the same bottom-border treatment. Required and disabled during submission.

message>

A multi-line <textarea> with a full border (border border-dark-lighter) that shifts to border-neon-cyan on focus. Uses resize-none to maintain layout consistency.

​
Form Submission States

The form transitions through three distinct states, each with different button text and behavior:
The submit button reads SEND_TRANSMISSION in the default neon-magenta style. All fields are editable. The NeonButton component renders with a neon-magenta border and box-shadow offset.

​
COMM_CHANNELS

The right panel of the Contact layout displays direct communication links under the COMM_CHANNELS header:
ChannelPlatformIcon
GitHubSource code and repositoriesGitHub mark
LinkedInProfessional profileLinkedIn logo
TwitterDeveloper commentaryTwitter/X bird
Each channel entry renders as a NeonCard with hover behavior. Clicking navigates to the external URL in a new tab.

​
CURRENT STATUS Badge

Below the COMM_CHANNELS list, a status indicator displays: 
CURRENT STATUS: OPEN TO WORK
This is a static text node styled in neon-lime inside a bordered container.

​
Form Implementation

// Contact form structure — contact page component (source)
const [formState, setFormState] = React.useState("idle"); // "idle" | "submitting" | "success"

const handleSubmit = async (e) => {
  e.preventDefault();
  setFormState("submitting");
  // ... submission logic (fetch / EmailJS / etc.)
  setFormState("success");
};

return (
  <form onSubmit={handleSubmit}>
    <div className="flex items-center gap-2">
      <label className="font-terminal text-neon-lime shrink-0">name&gt;</label>
      <input
        className="flex-grow bg-transparent border-b border-dark-lighter
                   focus:border-neon-cyan outline-none text-white px-2 py-1
                   transition-colors disabled:opacity-50"
        required
        disabled={formState === "submitting"}
      />
    </div>
    {/* email> and message> fields follow the same pattern */}
    <NeonButton color="magenta" type="submit" disabled={formState !== "idle"}>
      SEND_TRANSMISSION
    </NeonButton>
  </form>
);

​
Connecting a Form Backend

This is a pre-built static site — assets/main.js is a minified bundle and is not meant to be hand-edited. To wire the form to a real backend, fork or clone the original source repository, update the submission handler in the source, then run vite build to regenerate the bundle and redeploy.
The contact form’s source submission handler contains a placeholder comment for the backend integration. Fork the original source and replace // ... submission logic with your preferred method: 
import emailjs from "@emailjs/browser";

const handleSubmit = async (e) => {
  e.preventDefault();
  setFormState("submitting");
  await emailjs.sendForm(
    "YOUR_SERVICE_ID",
    "YOUR_TEMPLATE_ID",
    e.target,
    "YOUR_PUBLIC_KEY"
  );
  setFormState("success");
};

const handleSubmit = async (e) => {
  e.preventDefault();
  setFormState("submitting");
  await fetch("/api/contact", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ name, email, message }),
  });
  setFormState("success");
};
The OPEN TO WORK badge is one of the most visible signals to recruiters visiting the portfolio. If your availability changes, fork the source and update the CURRENT STATUS string in the contact page component source, then rebuild and redeploy to keep the badge current.

Build docs developers (and LLMs) love

Get started for freeTalk to us