Skip to main content

Documentation Index

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

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

The Contact page distils the portfolio’s theme down to its most interactive point: a form wrapped in ceremony. Rather than a plain contact form, the SummoningForm component places the input fields at the centre of an animated summoning circle drawn in SVG. The circle reacts to user input — geometric elements appear progressively as each field is filled in, and the outer ring animates its stroke-dashoffset to reflect overall form completion. It is both a functional form and a piece of interactive illustration.

​
Route

Nav labelPlain labelPath
Send a RavenContact/contact

​
Page header

  • Heading (h1): Send a Raven — Cinzel typeface, amber
  • Subheading: Complete the circle to initiate contact — teal, spaced uppercase
The page is vertically centred (justify-center) in addition to being horizontally centred, making it the only full-screen-centred layout in the portfolio.

​
SummoningForm

The SummoningForm component features a summoning circle visual design. The SVG circle is drawn behind the form fields and updates in real time as the user fills in each input — completing the circle as the ritual progresses.

​
Form fields

The form contains three required inputs, each with a witchy label:
Field labelHTML typePlaceholder
True NametextYour true name (or developer alias)
Astral Addressemailyou@realm.com
Incantationtextarea (4 rows)Whisper your message into the void...

​
Submit button

The submit button reads Cast Spell with a Send icon (Lucide send). While submitting it changes to Summoning... and the icon is hidden. The button is disabled until all three fields contain a value (completedFields < 3) or while submission is in progress.

​
Summoning circle SVG

The circle SVG is positioned absolutely behind the form, rendering at 150% of the form width for an oversized, atmospheric effect. It uses three layers that activate progressively:
1

First field filled (completedFields ≥ 1)

An upward-pointing triangle path appears: M 100 10 L 178 145 L 22 145 Z in teal, stroke-width 1. Fades in over 1 second.
2

Second field filled (completedFields ≥ 2)

A downward-pointing triangle path appears: M 100 190 L 22 55 L 178 55 Z in teal, stroke-width 1. Fades in over 1 second, forming a Star of David / hexagram together with the first triangle.
3

Third field filled (completedFields = 3)

An inner circle (r="45") appears in amber, stroke-width 1, completing the full summoning circle geometry.
The outer amber arc (r="90") is always visible and animates its stroke-dashoffset from 565 down toward 0 as form completion rises from 0% to 100%: 
strokeDasharray: "565"
animate: { strokeDashoffset: 565 - (565 * completedFields / 3 * 100 / 100) }
transition: { duration: 0.5, ease: "easeInOut" }

​
Success state

On successful submission (after a simulated 2-second delay), the form fields are replaced by a full-overlay success screen that stays visible for 5 seconds:
  • A dashed amber circle rotates continuously (rotate: 360, duration 10 s, infinite)
  • Inside it, a teal blur glow pulses
  • Below it, the message “Message Sent into the Ether” appears in Cinzel amber
The form fields are reset to empty strings after the success state resolves.

​
Testimonials note

The /testimonials route is a separate, valid page (nav label: “Testimony”) that renders three GhostQuote components in a flex-wrap layout. It does not share any UI with the Contact page but is positioned adjacently in the navigation order.

Sarah Jenkins

“I’ve never seen code written so cleanly. It was like watching a master illusionist at work. The bugs simply vanished.”Product Manager @ MysticTech

David Chen

“They took our chaotic, tangled legacy system and wove it into a beautiful, performant React application. Absolute sorcery.”CTO @ Ethereal Agency

Elena Rodriguez

“Not only did they deliver the project ahead of schedule, but the animations were so smooth I thought my screen was melting in a good way.”Founder @ Startup Void

​
Layout structure

/contact  (Contact — "Send a Raven")
├── PageTransition wrapper
│   ├── Centred header (mb-16)
│   │   ├── h1: "Send a Raven"
│   │   └── p: "Complete the circle to initiate contact"
│   └── SummoningForm (scale: 0.9 → 1, delay: 0.2s)
│       ├── SVG summoning circle (absolute, -z-10, 150% width)
│       │   ├── Outer static ring (teal, r=90, opacity 0.3)
│       │   ├── Outer progress arc (amber, r=90, dashoffset animated)
│       │   ├── Triangle ▲ (teal, field 1+)
│       │   ├── Triangle ▽ (teal, field 2+)
│       │   └── Inner circle (amber, r=45, field 3)
│       └── Form card (bg-ink/80, border teal/20, backdrop-blur)
│           ├── AnimatePresence → success overlay (when submitted)
│           ├── True Name input
│           ├── Astral Address input
│           ├── Incantation textarea
│           └── "Cast Spell" submit button
└── (Global) Navigation + Footer

Build docs developers (and LLMs) love

Get started for freeTalk to us