Skip to main content

Documentation Index

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

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

The Contact page (/contact) translates the portfolio’s arcane theme into an interactive contact form. A decorative orbit ring — similar in structure to the Home page sigil — is displayed above the form and reacts visually as the user fills in each field, glowing more intensely with each completed input. Below the form, three social links provide additional channels for reaching the developer. The combination of reactive animation and thematic copy (“CAST MESSAGE”) makes the contact experience feel cohesive with the rest of the site.

​
Route & Navigation

PropertyValue
Route/contact
Nav LabelSUMMON
Page HeadingSUMMONING CIRCLE
Subheading// ESTABLISH A DIRECT CONNECTION

​
Visual Structure

​
Animated Summoning Circle

A circular orbit ring sits above or beside the form. Unlike the Home page sigil, this ring’s glow intensity is driven by form state — it dims when the form is empty and brightens progressively as fields are filled. The glow is implemented by binding the ring’s box-shadow or SVG filter: drop-shadow() value to a computed intensity derived from how many fields have non-empty values: 
// Reactive glow intensity based on form completion
const filledCount = [name, email, message].filter(Boolean).length;
const glowIntensity = filledCount / 3; // 0, 0.33, 0.67, or 1.0

const glowStyle = {
  filter: `drop-shadow(0 0 ${8 + glowIntensity * 24}px rgba(139, 92, 246, ${0.3 + glowIntensity * 0.6}))`
};
The ring continues its rotation animation regardless of form state — only the glow changes.

​
Contact Form

The form contains three fields:
Field IDLabelTypePlaceholder
IDENTIFIERNametextArcane-themed placeholder
RETURN_ADDRESSEmailemailArcane-themed placeholder
INCANTATIONMessagetextareaArcane-themed placeholder
Each field is styled with the glass-panel border treatment, a dark background, and the site’s accent focus ring color. Labels are displayed in uppercase monospace above each field.

​
Submit Button

The submit button is labeled: 
CAST MESSAGE  ➤
It includes a send/arrow icon aligned to the right of the text. On hover, the button brightens and the icon shifts slightly to the right using a CSS transform: translateX transition. On click, the button should trigger form submission logic.
The form does not currently have a connected backend or form service. The submit handler is a placeholder. To make the form functional, integrate a service such as Formspree, EmailJS, or a custom API endpoint, and wire it to the form’s onSubmit handler.

​
Social Links

Below the form, three social platform links are displayed as icon buttons:
PlatformIconCurrent href
GitHubGitHub icon# (placeholder)
Twitter / XX icon# (placeholder)
LinkedInLinkedIn icon# (placeholder)
All three links currently use href="#" in the source. Update these to real profile URLs before deploying.

​
Animations

The summoning circle ring uses the same continuous rotate: 360 Framer Motion animation as the Home page sigil. The glow intensity is a reactive CSS value, not an animation — it updates synchronously with React’s controlled input state, so there is no animation delay between typing and the glow changing. Form fields entrance-animate with a staggered fade-in on page load: 
// Staggered form field entrance
const fields = ["IDENTIFIER", "RETURN_ADDRESS", "INCANTATION"];

fields.map((field, index) => (
  <motion.div
    key={field}
    initial={{ opacity: 0, y: 16 }}
    animate={{ opacity: 1, y: 0 }}
    transition={{ duration: 0.4, delay: 0.2 + index * 0.1 }}
  >
    {/* Field label and input */}
  </motion.div>
))

​
Customization

Connecting the form to a backend: Replace the placeholder onSubmit handler with a real submission function. Using Formspree as an example: 
// Example: Formspree integration
async function handleSubmit(e) {
  e.preventDefault();
  const response = await fetch("https://formspree.io/f/YOUR_FORM_ID", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ name, email, message })
  });
  if (response.ok) {
    // Show success state
  }
}
Updating social links: Find the social links array (or inline <a> tags) in the Contact component and replace the href="#" values with real URLs: 
// Social links data shape
[
  { platform: "GitHub",   url: "https://github.com/your-username" },
  { platform: "Twitter",  url: "https://twitter.com/your-handle" },
  { platform: "LinkedIn", url: "https://linkedin.com/in/your-profile" }
]
Adding a success state: After a successful form submission, consider replacing the form with a confirmation message (e.g., “YOUR INCANTATION HAS BEEN RECEIVED”) and dimming or completing the summoning circle animation to signal that the ritual concluded. Changing field labels or placeholders: Each field’s label and placeholder text are set inline in the JSX. Update the label prop and placeholder attribute for each input or textarea to match your preferred copy.
The reactive glow effect is one of the most distinctive interactive details on the site. Test it on both mouse and touch devices — ensure the glow updates correctly on mobile where focus and blur events behave differently from desktop hover interactions.
The social links use href="#" in the deployed source. Leaving these as-is in production will cause clicks to scroll the page to the top rather than opening a profile. Update all three URLs before going live.

Build docs developers (and LLMs) love

Get started for freeTalk to us