Skip to main content

Documentation Index

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

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

​
Contact Page

The Contact page (/contact) is reached via the navigation label “Send a Signal”. It renders the RadioDial component — a physical dial metaphor that lets visitors tune to a communication channel. Pressing a channel button rotates the dial pointer to the corresponding angle and reveals the contact detail for that channel.

​
RadioDial Component

RadioDial (components/aurora/RadioDial.js) presents four frequency buttons arranged around a central dial. Key behaviours:
  • Each button represents a contact channel (email, GitHub, LinkedIn, Twitter).
  • Clicking a button animates the dial pointer to the channel’s angle using a CSS rotation transition.
  • The active channel’s label and value are displayed in a readout panel below the dial, styled as a frequency display.
  • The dial uses the angle field to determine how far the pointer needle rotates from its resting position (the email channel at -45°).

​
Angle Field

The angle field is the CSS transform: rotate() value applied to the dial pointer when the channel is selected. Values are relative to the dial’s neutral/upright position:
AnglePointer position
-45°Upper-left (default resting position)
0°Straight up / noon
45°Upper-right
90°Right / 3 o’clock

​
Contact Channels Data

// components/aurora/RadioDial.js
const channels = [
  {
    id: 'email',
    label: 'Secure Channel',
    value: 'hello@observer.net',
    angle: -45,
  },
  {
    id: 'github',
    label: 'Code Repository',
    value: 'github.com/observer',
    angle: 0,
  },
  {
    id: 'linkedin',
    label: 'Professional Net',
    value: 'linkedin.com/in/observer',
    angle: 45,
  },
  {
    id: 'twitter',
    label: 'Public Broadcast',
    value: '@observer_sys',
    angle: 90,
  },
];
All contact values in the demo data (hello@observer.net, github.com/observer, etc.) are placeholders. Replace them with your real contact details before deploying. See the update steps below.

​
Data Shape Reference

FieldTypeDescription
idstringUnique identifier (e.g. 'email'). Used as the button key and for the active channel indicator.
labelstringHuman-readable channel name displayed as the frequency label (e.g. 'Secure Channel').
valuestringThe actual contact detail — email address, URL, or handle — shown in the readout display.
iconstring(Optional) Lucide icon name rendered on the channel button. Defaults to a generic signal icon if omitted.
anglenumberCSS rotation in degrees applied to the dial needle when this channel is active.

​
Channel Summary

ChannelLabelDefault value
emailSecure Channelhello@observer.net
githubCode Repositorygithub.com/observer
linkedinProfessional Netlinkedin.com/in/observer
twitterPublic Broadcast@observer_sys

​
Updating Your Contact Details

1

Open RadioDial.js

The channels array is near the top of components/aurora/RadioDial.js.
2

Replace placeholder values

Update each value string with your real contact detail. For email, use your actual address. For social links, use the full path or handle that matches the platform.
3

Update labels if needed

The label strings are deliberately thematic ('Secure Channel', 'Code Repository'). You may keep them as-is or replace them with plain labels like 'Email' and 'GitHub' — your preference.
4

Add or remove channels

To add a channel (e.g. Dribbble), append a new object to the array with a unique id, a label, your profile value, and an angle that continues the dial’s sweep (e.g. 135°). To remove a channel, delete its object from the array.
Do not commit real personal contact information to a public repository. If the repo is public, use environment variables or a contact form API so your email address is not exposed in source code.
PropertyValue
Route/contact
Nav labelSend a Signal
Nav short labelContact

Build docs developers (and LLMs) love

Get started for freeTalk to us