Skip to main content

Documentation Index

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

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

The Contact page opens a direct communications channel between the visitor and the developer. In sys-core’s space-operations language it is the open comms terminal — the place a visitor goes when they want to initiate contact, whether that is a job enquiry, a project collaboration, or a general message. The route is #/contact and the static entry point is pages/Contact.html. Unlike the other sections, the Contact page has no associated data file. Its content is defined directly inside the Contact React component and is intentionally left minimal so each developer can wire up their preferred contact mechanism.

​
Components Used

ComponentRole
HudFrameDecorative panel wrapper around the contact form or links area
StarfieldFull-viewport animated background
NebulaBackgroundAtmospheric depth layer
HudNavPersistent top navigation
PageTransitionEnter/exit animation wrapper

HUD Frame

The decorative corner-chrome wrapper used around the contact area.

Architecture

How pages/Contact.html bootstraps the React SPA at the correct hash route.

​
What Visitors See

The Contact page renders a HudFrame-wrapped panel containing:
  • A short invitation message in the monospace HUD typeface.
  • One or more contact mechanisms (see options below).
  • Optionally, social links (GitHub, LinkedIn, etc.) displayed as HUD-styled icon buttons.

​
Contact Implementation Options

The implementation is left to the developer. Three common patterns are listed below — choose the one that best fits your deployment situation. The simplest approach. A mailto: link opens the visitor’s default email client with no server required. 
// Inside your Contact component JSX
<a href="mailto:you@example.com" className="hud-link">
  INITIATE TRANSMISSION
</a>
Pros: zero infrastructure, works everywhere. Cons: exposes your email address in the HTML source. Formspree handles form submissions as a service, forwarding them to your email. No server needed — perfect for a GitHub Pages deployment. 
<form action="https://formspree.io/f/YOUR_FORM_ID" method="POST">
  <input type="email" name="email" placeholder="YOUR CALLSIGN (EMAIL)" required />
  <textarea name="message" placeholder="TRANSMISSION BODY" required />
  <button type="submit">SEND TRANSMISSION</button>
</form>
Replace YOUR_FORM_ID with the ID from your Formspree dashboard.

​
Option 3 — Netlify Forms

If you later migrate the site to Netlify, adding netlify and data-netlify="true" attributes to any <form> tag activates Netlify’s built-in form handling with zero additional code. 
<form name="contact" method="POST" data-netlify="true">
  <input type="hidden" name="form-name" value="contact" />
  <input type="email" name="email" placeholder="YOUR CALLSIGN (EMAIL)" required />
  <textarea name="message" placeholder="TRANSMISSION BODY" required />
  <button type="submit">SEND TRANSMISSION</button>
</form>
Netlify Forms requires the site to be built and deployed through Netlify’s build pipeline. The data-netlify="true" attribute is not processed by GitHub Pages.
Social profile links can be added as icon buttons below the form. Keep the count small — three to four links is enough to avoid visual clutter. 
const socialLinks = [
  { label: "GitHub",   href: "https://github.com/yourhandle" },
  { label: "LinkedIn", href: "https://linkedin.com/in/yourhandle" },
  { label: "X / Twitter", href: "https://x.com/yourhandle" }
];
Keep the Contact page simple. One clear call-to-action (a form or a mailto link) converts better than a busy page with many options. Visitors who reach the Contact page already intend to reach out — remove every obstacle between them and sending a message.

​
Route and Static Entry Point

The contact route follows the same pattern as every other section: 
Hash route:   #/contact
Entry file:   pages/Contact.html
Bootstrap:    window.__STATIC_PAGE_ROUTE__ = "/contact"
The pages/Contact.html file sets the hash to #/contact on load so that visitors who land directly on the contact URL (e.g. from a shared link) are taken straight to the contact view without passing through the home page.

Home

The entry point — HudNav on the Home page links directly to Contact.

Architecture

Full explanation of hash routing and static page entry points.

HUD Frame

Decorative panel wrapper used on the Contact page.

Quickstart

Get sys-core running locally before customising the Contact page.

Build docs developers (and LLMs) love

Get started for freeTalk to us