Skip to main content

Documentation Index

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

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

The Contact page strips things back to the essentials: a centred heading, a playful subtitle, and a DoorbellForm component that handles the entire form interaction. The header slides up from below on mount and the form itself renders beneath it. The copy is deliberately disarming — “Don’t be shy, I don’t bite. Much.” — balancing the gothic aesthetic with genuine approachability.
Route: /contact
Static HTML: pages/Contact.html
Page function: H() in assets/main.js

​
What the page displays

ElementContent
Section heading (h1)Leave a message at the doorbell
SubtitleDon't be shy, I don't bite. Much.
Primary componentDoorbellForm — the full contact form

​
Halloween-themed concept

The contact metaphor is a doorbell on a haunted house. Instead of “Send me an email” or “Get in touch”, visitors are invited to ring the doorbell and wait to see who answers. The DoorbellForm component likely renders a form with a doorbell-styled submit button (a glowing ring or bell icon) that plays into the house entrance theme established on the Home page.

​
Component: DoorbellForm

The DoorbellForm component is imported from components/DoorbellForm.js and is rendered directly beneath the page header with no additional props from the page layer. All form fields, validation logic, and submission handling live inside the component itself. To change field labels, add new fields, update the submission endpoint, or modify the button label, edit components/DoorbellForm.js directly.

​
Framer Motion animations

A single motion.div wraps the heading and subtitle and fires a bottom-up entrance on mount. 
// Header motion.div
{
  initial: { y: -20, opacity: 0 },
  animate: { y: 0,   opacity: 1 }
}
The DoorbellForm component renders outside of any page-level motion wrapper — it appears immediately after the header resolves and manages any of its own internal animations independently.

​
How to customise

1

Update the page heading

Find the h1 inside the motion.div in the H() function in assets/main.js and replace "Leave a message at the doorbell" with your preferred contact page title.
2

Update the subtitle

The p tag directly below the h1 holds the subtitle. Edit "Don't be shy, I don't bite. Much." to match your own tone.
3

Edit the form fields

Open components/DoorbellForm.js to add, remove, or relabel form inputs. Common additions include a subject line field, a phone number field, or a project-type dropdown.
4

Connect a form backend

The submission handler inside DoorbellForm.js is the right place to wire up a service like Formspree, Netlify Forms, or a custom API endpoint. Look for the onSubmit handler or fetch/axios call within that file.
The page wrapper uses max-w-4xl mx-auto and flex flex-col items-center to keep the form centred and readable on wide screens. If your form grows to include many fields, consider widening the max-width to max-w-2xl for the form itself by wrapping <DoorbellForm /> in its own constrained container inside the component file.

Build docs developers (and LLMs) love

Get started for freeTalk to us