Skip to main content

Documentation Index

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

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

The Contact page — labeled “CONTACT” in the top navigation — is your open communications channel. Titled “Comms Array” in the UI, it pairs a full-featured contact form with a sidebar of direct links (GitHub, LinkedIn, email) and a simulated recent-activity log. Submitting the form triggers an animated “TRANSMITTING…” state before resetting.

​
Route

#/contact
Rendered by the Contact page component in main.js, registered as the contact child route under /.

​
Static Shell

The file pages/Contact.html is the standalone entry point: 
<script>window.__STATIC_PAGE_ROUTE__ = "/contact";</script>

​
Page Layout

The page fills 100vh minus the header and uses a three-column grid at large breakpoints:

Contact Form (left, 2 cols)

A bg-midnight-navy/40 panel with a scanning line animation. Three fields: name, email, and message textarea. Submit button shows “INITIATE TRANSMISSION” normally and an animated “TRANSMITTING…” pulse on submit.

Sidebar (right, 1 col)

Two cards: Established Channels (GitHub, LinkedIn, email links) and Recent Activity (a static log of timestamped status messages).

​
Contact Form Fields

FieldTypeLabelPlaceholder
NametextFREQUENCY: SENDER_ID"Enter your designation..."
EmailemailFREQUENCY: RETURN_COORD"Enter email coordinates..."
Messagetextarea (6 rows)PAYLOAD: MESSAGE_DATA"Type your transmission here..."
The form uses a Radio icon in text-aurora-cyan next to each label. On submit, onSubmit prevents default, sets isSending: true, and uses setTimeout(..., 2000) to reset — the current implementation is a placeholder with no server call.

​
Scanning Line Animation

A motion.div element with w-full h-1 bg-aurora-teal/20 animates y: ["0%", "1000%"] over 8 seconds on an infinite loop, creating a radar-scan sweep effect across the form panel.

​
Established Channels

The sidebar’s Established Channels card renders three link rows. Each row has:
  • A circular icon badge (Github, Linkedin, or Mail icon)
  • A label in text-aurora-violet font-mono text-[10px]
  • The URL/handle value in text-white font-sans text-sm

​
Available Icons

The following Lucide React icons are bundled and available for contact links:
Icon nameSuggested use
GithubGitHub profile or repository
LinkedinLinkedIn profile
MailEmail address
SendForm submit button, DM link
ExternalLinkAny external URL
The three link items are defined inline inside the Contact page component as an array literal: 
// Find this inside the Contact page component — the "Established Channels" card:
[
  { icon: Github,   label: "GITHUB_REPO",   val: "github.com/alexcosmos"       },
  { icon: Linkedin, label: "LINKEDIN_NET",   val: "linkedin.com/in/alexcosmos"  },
  { icon: Mail,     label: "DIRECT_LINE",    val: "hello@alexcosmos.dev"        },
]
The handle values above are example placeholder values. Replace them with your real username, profile URL, and email address.
1

Replace placeholder values

Update each val string with your real handle or address. The values are display text only — the links themselves use href="#" placeholders.
2

Update the href attributes

Find the <a href="#"> element that wraps each channel row. Replace "#" with the real URL:
// GitHub
href="https://github.com/your-username"

// LinkedIn
href="https://linkedin.com/in/your-profile"

// Email
href="mailto:you@yourdomain.com"
3

Add external link attributes

For GitHub and LinkedIn, add target="_blank" rel="noopener noreferrer" to open in a new tab.
4

Add more channels

To add a channel (e.g. Twitter/X, Bluesky, Dribbble), append a new object to the array and import or use an available Lucide icon. Use ExternalLink as a fallback icon for any platform not in the Lucide set.
Add the interactive CSS class to any custom link element or button you create on the Contact page. This class is read by the CustomCursor component to switch the cursor to its hover state (a larger ring). Without it, custom elements won’t trigger the cursor change and the interaction will feel inconsistent with the rest of the site.

​
Wiring Up the Contact Form

The current onSubmit handler is a frontend-only simulation. To send real messages, replace the handler body with a fetch call to your preferred service: 
const onSubmit = async (e) => {
  e.preventDefault();
  setIsSending(true);
  await fetch("https://formspree.io/f/YOUR_FORM_ID", {
    method: "POST",
    body: new FormData(e.target),
    headers: { Accept: "application/json" },
  });
  setIsSending(false);
  e.target.reset();
};

​
Recent Activity Panel

The sidebar’s lower card shows a static three-line activity log styled as mission timestamps: 
10:42 UTC - Signal received from Earth.
11:15 UTC - Handshake established.
12:00 UTC - Awaiting new input...
The last line uses text-aurora-cyan to indicate the current awaiting state. Replace these strings with recent actual activity — e.g. last commit date, last blog post published, or current availability status.

Build docs developers (and LLMs) love

Get started for freeTalk to us