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.

​
Home Page

The Home page (/) is the first thing visitors see when they arrive at Observatory. It renders a full-viewport hero section under the navigation label “Tonight’s Forecast”, establishing the space-telescope aesthetic with layered animated backgrounds, a bold headline, and two call-to-action buttons that route visitors deeper into the portfolio.

​
Hero Section

The hero is composed of three visual layers stacked using absolute positioning:
  1. Starfield — a canvas-based background that renders hundreds of twinkling stars at randomised positions, sizes, and opacities.
  2. AuroraRibbon — an SVG ribbon of animated gradient bands rendered beneath the text, simulating a borealis curtain effect in the site’s teal-to-violet palette.
  3. Content overlay — centred text and buttons rendered above both background layers.

​
Headline & Subtitle

// In assets/main.js — search for the Home component
<p className="text-aurora-turquoise font-mono text-sm tracking-[0.3em] uppercase mb-6">
  Tonight's Forecast
</p>
<h1 className="font-display text-5xl md:text-7xl font-bold text-white leading-tight mb-6">
  Building systems<br />
  <span className="text-gradient">at high altitude.</span>
</h1>
ElementValue
Subtitle labelTonight's Forecast
Headline line 1Building systems
Headline line 2at high altitude.
Gradient span classtext-gradient (turquoise → teal)

​
CTA Buttons

Two buttons appear below the headline:
ButtonLabelDestination
PrimaryVIEW SIGHTINGS/projects
SecondaryTRANSMIT SIGNAL/contact
The primary button carries a glowing box-shadow using the aurora-turquoise colour token. Both use the React Router Link component so navigation is client-side without a full page reload.

​
Scroll Indicator

A chevron-down icon animates vertically at the bottom of the viewport to invite scrolling. It uses a simple CSS animate-bounce class and disappears once the user scrolls past the hero threshold (50 px).

​
Customising the Hero Text

Open assets/main.js and locate the Home page component. The two pieces of text you are most likely to want to change are the headline and the subtitle label.
1

Open main.js

The file is at assets/main.js in the repository root. Because it is a bundled file, search for the string "Tonight's Forecast" to jump to the right section.
2

Update the subtitle label

Replace the string "Tonight's Forecast" with your preferred label. This text is also used as the navigation tooltip in the header.
3

Update the headline

Find "Building systems" and "at high altitude." and replace them with your own copy. The second line is wrapped in a <span className="text-gradient"> — keep that wrapper to retain the colour gradient.
4

Update the CTA destinations

The to props on the two Link components point to /projects and /contact. Change these if you rename those routes.
// Minimal hero text block — edit the strings marked ✏️
<p className="... font-mono ...">
  Tonight's Forecast   {/* ✏️ subtitle label */}
</p>
<h1 className="... font-display ...">
  Building systems     {/* ✏️ headline line 1 */}
  <span className="text-gradient">
    at high altitude.  {/* ✏️ headline line 2 */}
  </span>
</h1>
<Link to="/projects">VIEW SIGHTINGS</Link>   {/* ✏️ primary CTA */}
<Link to="/contact">TRANSMIT SIGNAL</Link>   {/* ✏️ secondary CTA */}
The text-gradient class is defined in tailwind.config.js as a CSS background-clip: text gradient running from aurora-turquoise to aurora-teal. You can swap the gradient stops there to change the headline accent colour globally.

​
Background Components

Starfield

Canvas-rendered star field. Configure star count, speed, and minimum size in the Starfield component (components/aurora/Starfield.js).

AuroraRibbon

SVG animated ribbon. Adjust band count, opacity, and animation duration in components/aurora/AuroraRibbon.js.

Build docs developers (and LLMs) love

Get started for freeTalk to us