Documentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/full-moon/llms.txt
Use this file to discover all available pages before exploring further.
The Contact page completes the portfolio’s narrative arc: having witnessed the craft, the visitor may now summon the developer directly. The form fields abandon conventional labels in favor of in-world equivalents — "True Name" instead of Name, "Ethereal Address (Email)" instead of Email, and "The Incantation (Message)" instead of Message. On successful submission, a raven is dispatched, and the visitor receives confirmation that their message is traversing the void.
Route & Static Shell
The Contact page is served from pages/Contact.html. Its static shell sets the hash to /contact on load.
<script>
window.__STATIC_PAGE_ROUTE__ = "/contact";
if (!window.location.hash || window.location.hash === "#/" || window.location.hash === "#") {
window.location.hash = "/contact";
}
</script>
Section Headings
| Element | Text |
|---|
| Section heading | "Summon Me" |
| Subheading | "Send a message into the ether" |
"Summon Me" is rendered in font-heading (Cinzel Decorative) with witch-teal-glow (#2dd4bf) coloring. It is the most direct command in the entire portfolio — an invitation phrased as an instruction. The subheading "Send a message into the ether" uses font-body (Cormorant Garamond) and describes the action in the same atmospheric register as the rest of the site.
Contact Form
The form is the primary interactive element on this page. All field labels use thematic names that map directly to standard contact form concepts.
| Field Label | Field Type | Standard Equivalent |
|---|
"True Name" | Text input | Name |
"Ethereal Address (Email)" | Email input | Email address |
"The Incantation (Message)" | Textarea | Message / inquiry body |
The parenthetical (Email) in "Ethereal Address (Email)" serves a practical purpose: it tells visitors what the field is asking for without breaking the thematic label. This balances aesthetic consistency with usability.
Form States
The contact form has three distinct states managed in React component state.
| State | Condition | UI |
|---|
| Idle | Initial load; no submission attempted | Form fields and submit button visible |
| Submitting | User has clicked submit; request in flight | Submit button may disable or show loading indicator |
| Success | Message sent successfully | Form replaced by success confirmation message |
Success State
On successful form submission, the form is replaced by a two-line success confirmation styled in the portfolio’s atmospheric language.
| Element | Text |
|---|
| Success headline | "The Raven has flown." |
| Success body | "Your message traverses the void." |
The raven is a classic messenger archetype in dark-fantasy and Gothic storytelling. Using it as the delivery mechanism for a contact form submission reframes a mundane UX pattern as a thematic moment — the visitor’s message is now in flight, carried by a creature of the night.
Form Interactions
| Interaction | Behavior |
|---|
| Field focus | Border or glow effect may activate in witch-teal-glow |
| Field filled | Value persists in controlled component state |
| Submit click | Form may validate inputs, transitions to submitting state, dispatches to handler |
| Submit success | Form content replaced by raven success message with Framer Motion fade-in |
| Submit failure | Error state displayed; form remains editable |
The CandleSVG component — with its animated looping flame — may appear as a decorative accent near the form, suggesting a candle lit in anticipation of the summoning. This adds ambient motion to an otherwise static form UI.
Animation Details
| Element | Animation |
|---|
| Section heading | Fade in + upward translate on mount |
| Subheading | Short delayed fade-in |
| Form fields | Staggered fade-in, each field offset by a small delay |
| Submit button | Fade in last; hover glow effect may activate |
| Success state | Framer Motion fade-in replaces form content |
Navigation Context
In the site’s thematic navigation, the Contact page is linked as “Summon Me”, matching the section heading and closing the arcane chapter sequence that runs across all navigation links.
Typography & Color Reference
| Token | Hex | Usage on this page |
|---|
midnight-base | #0a0e1a | Page background |
witch-teal-glow | #2dd4bf | Section heading, form field focus borders |
witch-teal-bright | #5eead4 | Submit button, success headline text |
witch-teal-dark | #0e3a3a | Form field background fill |
font-heading | Cinzel Decorative | Section heading, success headline |
font-body | Cormorant Garamond | Subheading, field labels, success body |