Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/full-stack-sorcerer/llms.txt

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

The /contact route, titled Boo at Me, invites visitors to summon the developer with a message. Rather than a plain form on a white background, the entire UI is built to look like a Ouija board: aged parchment texture with a subtle noise filter, bold YES and NO labels anchored to the top corners, and the full alphabet displayed in two arched rows across the top of the board — just like the real thing. Numbers 1–0 sit on a third row beneath the letters.

​
The Ouija Board UI

The board container uses a warm #e6d5b8 background color with an SVG feTurbulence noise filter overlaid at 15% opacity to simulate aged parchment. An 8px solid border in #c2b29a frames the board, and a faint decorative ghost SVG sits in the lower-right corner at 20% opacity. All form labels are rendered in an uppercase tracked display font in muted #5c5243 to blend with the parchment.

​
Submitting the Form

1

Navigate to /contact

Open the portfolio and click Boo at Me from the home menu, or visit /contact directly. The Ouija board form fades and scales into view.
2

Fill in your name and email

Enter your full name in the Your Earthly Name field and your email address in How to Reach You. Both fields are required — the form will not submit without them.
3

Describe what haunts you

Type your message in the What Haunts You (Message) textarea. Use this field to describe a project, ask a question, or propose a collaboration. Placeholder text reads “I have a project that needs resurrecting…”
4

Click the ghost SEND button

Press the ghost-shaped submit button at the bottom of the board. The button is split into three equal horizontal bands — white on top, orange in the middle, yellow on the bottom — and shaped with rounded-t-full to form a ghost silhouette. The label in the orange band reads SEND at rest.
5

Wait for the spirits to confirm

The button label switches to Summoning… and the button is disabled for 1.5 seconds. Once the mock submission resolves, the confirmation text “Message received by the spirits!” fades in below the form in glowing turquoise.

​
Form Field Reference

FieldTypeRequiredDescription
Your Earthly Nametext✅ YesThe sender’s full name. Placeholder: John Doe.
How to Reach Youemail✅ YesA valid email address. Placeholder: ghost@machine.com.
What Haunts You (Message)textarea✅ YesThe message body. Renders as a 4-row resizable textarea.

​
UI State Transitions

The form is a React controlled component. All three field values are held in a single formData state object via useState. Submission state is tracked by two additional booleans: sending and success.
StateButton labelForm fieldsNotes
IdleSENDEditableDefault state on page load and after reset.
SubmittingSummoning...DisabledActive for 1.5 s while sending === true.
SuccessSENDClearedsuccess === true for 5 s; confirmation text visible.
ResetSENDEditableAfter 5 s the success flag clears and the form is ready again.
The contact form is currently a demo with no backend. Clicking SEND triggers a setTimeout of 1.5 seconds that resolves to a mock success state — no email is sent and no data is stored anywhere. The form is safe to test freely without side effects.
To wire up a real submission, replace the setTimeout inside handleSubmit with a fetch call to your preferred backend or form service. Formspree is a zero-infrastructure option that works with a single endpoint URL:
const handleSubmit = async (e) => {
  e.preventDefault();
  setSending(true);
  // Replace with your real endpoint
  await fetch('https://formspree.io/f/YOUR_FORM_ID', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(formData),
  });
  setSending(false);
  setSuccess(true);
};
Swap https://formspree.io/f/YOUR_FORM_ID for any REST endpoint — your own Express route, a Netlify Function, or another form service — and the rest of the UI state logic stays exactly the same.

Build docs developers (and LLMs) love

Get started for freeTalk to us