Observatory’s UI is built on a single, cohesive design system called Aurora. Every visual element — from the star-dusted hero background to the polaroid testimonials — is an Aurora component. All components are written in React 18, animated with Framer Motion, styled with Tailwind CSS, and navigated with React Router v6. The system divides into four groups by responsibility: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.
Background Effects
Purely decorative, full-bleed layers that set the atmospheric tone. They render behind all page content and require no configuration.Starfield
An animated canvas that renders hundreds of twinkling white stars. Rare shooting stars streak across at random intervals.
Aurora Ribbon
Four SVG wave paths animated in real time to simulate the Aurora Borealis. Uses the aurora Tailwind palette with a
mix-blend-screen overlay.Cursor Trail
A Framer Motion trail of glowing turquoise dots that follow the cursor. Particles fade out after 500 ms, keeping the trail short and subtle.
Layout
Structural components that wrap all pages and provide navigation, transitions, and the global shell.Layout
The root layout shell. Composes
CursorTrail, Navigation, a global film-grain noise overlay, the main content area, and a footer timestamp.Navigation
A fixed top navigation bar with a Framer Motion sliding indicator, a scrolled-glass blur effect, and a full-screen mobile overlay menu.
Page Transition
Wraps routed pages in a Framer Motion wipe animation — a teal gradient curtain slides up as each new route enters.
Data Visualization
Interactive components that each own a dedicated route and transform structured data arrays into immersive visual experiences.Constellation Layout
Renders a portfolio of projects as an interactive star map. Each project node is positioned by
x/y coordinates and sized by magnitude. Hover reveals a tooltip with tech tags and links. Used on /projects.Spectrum Analyzer
Displays skills as animated vertical bars styled as a radio-frequency spectrum analyzer. Bars animate from zero height on mount and breathe with a looping opacity pulse. Used on
/skills.Orbital Path
Maps work history as clickable nodes on an SVG elliptical orbit. Selecting a node slides in a detail panel with role, company, and description. Used on
/work.Radio Dial
A circular dial metaphor for contact channels. A spring-animated pointer rotates to the selected channel; switching triggers a noise static overlay. Used on
/contact.Content Display
Components that present long-form and social proof content with thematic styling.Case Study Reader
A two-panel layout with a film-strip sidebar index and a darkroom viewer. Selecting an entry triggers a development animation — the content blurs, desaturates, then slowly resolves into focus. Used on
/case-studies.Star Map Index
Plots articles as stars on an astronomical coordinate grid with α (ascension) and δ (declination) axis labels. Star size encodes article magnitude (depth). Hover reveals a floating metadata card. Used on
/articles.Polaroid Testimonials
Renders testimonials as tilted polaroid photo cards. Each card has a hue-rotated gradient photo placeholder. On hover, Framer Motion flattens the tilt and scales the card up. Used on
/testimonials.Common Patterns
All Aurora components share a set of conventions:- No external props — data is co-located in each component file as a plain JavaScript array. To customize, edit the array directly.
- Framer Motion via proxy — animations import
mfromassets/proxy.js, which re-exportsframer-motion. Usem.div,m.button,m.line, etc. - Tailwind aurora palette — custom color tokens (
aurora-turquoise,aurora-teal,aurora-seafoam,aurora-violet,aurora-magenta,space-800,space-900) defined intailwind.config.js. AnimatePresence— tooltip and panel transitions useAnimatePresenceto coordinate entry and exit animations. Detail panels (OrbitalPath, CaseStudyReader) addmode="wait"so the exit animation finishes before the next panel mounts; tooltip overlays omit the mode and allow overlapping transitions.