Observatory is a fully client-side React single-page application designed as a personal portfolio template for senior systems engineers. Every element of the UI — from the animated starfield background to the aurora gradient ribbon — is built around a consistent deep-space aesthetic. Rather than a generic portfolio, Observatory gives you a thematic system: nine distinct pages, each translated into a unique astronomy metaphor, powered by a custom component library called Aurora.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.
Observatory has no backend. All personal data — project entries, work history, skills, testimonials, articles — is hardcoded directly in the Aurora component source files. There is no CMS, no database, and no API.
Tech Stack
Observatory is assembled from a focused set of modern frontend tools. Each was chosen for a specific purpose.| Layer | Technology | Role |
|---|---|---|
| Framework | React 18 | Component rendering and state |
| Build tool | Vite | Dev server and production bundler |
| Routing | React Router v6 | Client-side SPA routing with nested routes |
| Animation | Framer Motion | Page transitions, entrance animations, layout IDs |
| Styling | Tailwind CSS | Utility-first CSS, custom color tokens |
| Icons | Lucide React | Consistent icon set (Menu, X, ArrowRight, etc.) |
proxy.js — throughout the codebase you’ll see import { m as motion } from "../../assets/proxy.js". All animated components use motion.div, motion.span, etc., via this alias.
The Aurora Component System
All custom UI lives undercomponents/aurora/. This directory is the entire design system. Each file corresponds to either a layout primitive or a full page section. There are no external UI libraries; every interactive element — the radio dial, the orbital path timeline, the constellation project map — is purpose-built.
Components in Aurora break into two categories:
Layout & ambient effects — wrappers and background elements used on every page:
Layout.js— root page layout shell, renders Navigation, CursorTrail, PageTransition, and the content outletNavigation.js— fixed top navigation bar with scroll-aware opacity and Framer Motion spring indicatorStarfield.js— canvas-based animated star field rendered behind page contentAuroraRibbon.js— the sweeping gradient ribbon visible on the home pageCursorTrail.js— mouse-follow particle trail effectPageTransition.js— fade/slide transitions between routes
ConstellationLayout.js— interactive SVG constellation map for ProjectsSpectrumAnalyzer.js— animated frequency bars for SkillsOrbitalPath.js— horizontal timeline for Work historyRadioDial.js— interactive radio tuner for ContactCaseStudyReader.js— long-form article reader for Case StudiesStarMapIndex.js— grid index of articles for the NotebookPolaroidTestimonials.js— polaroid-style testimonial cards
Space Metaphor System
Every page in Observatory has been renamed to fit the astronomy theme. The metaphor runs consistently from the URL labels shown in the navigation bar down to the page heading copy.| Route | Nav Label | Astronomy Metaphor | Component |
|---|---|---|---|
/ | Tonight’s Forecast | Home / hero | (inline in main.js) |
/about | The Observer | Engineer biography | (inline in main.js) |
/projects | Logged Sightings | Projects as a constellation map | ConstellationLayout |
/skills | Instruments | Skills as a spectrum analyzer | SpectrumAnalyzer |
/work | Expeditions | Work history as orbital path | OrbitalPath |
/case-studies | Field Reports | Case studies as long-exposure logs | CaseStudyReader |
/articles | Notebook | Articles as stellar cartography index | StarMapIndex |
/testimonials | Peer Reports | Testimonials as peer telemetry | PolaroidTestimonials |
/contact | Send a Signal | Contact as a radio transmission dial | RadioDial |
The Nine Pages
Tonight's Forecast
The hero page. Features the animated Starfield, AuroraRibbon gradient, and a large typographic headline: “Building systems at high altitude.”
The Observer
Engineer biography. Splits into a two-column grid — an animated geometric avatar panel on the left, long-form bio text on the right.
Logged Sightings
Projects mapped as an interactive SVG constellation. Hover over a star node to reveal project telemetry data. Lines connect projects that share architectural patterns.
Instruments
Skills rendered as an animated spectrum analyzer with frequency bars per domain — proficiency expressed as signal strength.
Expeditions
Work history laid out as a horizontal orbital path. Select a coordinate to expand mission logs and responsibilities.
Field Reports
Case studies in a long-exposure reader format — extended technical write-ups with a “content develops slowly” visual metaphor.
Notebook
Articles indexed as stellar cartography — a grid of entries mapped by topic and magnitude via
StarMapIndex.Peer Reports
Colleague testimonials displayed as polaroid photograph cards with slight rotation, via
PolaroidTestimonials.Send a Signal
Contact page built around an interactive
RadioDial component. The engineer is described as “listening on all frequencies” with a “response time of typically 1 Earth rotation.”Color Palette
The Observatory color system is defined as custom Tailwind tokens. Every shade maps directly to a specific CSS color value found inassets/main.css:
| Token | Hex | Usage |
|---|---|---|
aurora-turquoise | #2dd4bf | Primary accent — active nav indicator, CTA borders, glow effects |
aurora-teal | #14b8a6 | Section labels, icon accents, gradient start |
aurora-seafoam | #5eead4 | Hover text states, gradient end, text selection highlight |
aurora-violet | #8b5cf6 | Gradient accents, AuroraRibbon start color |
aurora-magenta | #d946ef | Gradient accents, AuroraRibbon end color |
space-900 | #03050d | Deepest background, mobile nav overlay |
space-800 | #050816 | Default <body> background, card surfaces |
space-700 | #0a1029 | Border accents, gradient stops, section dividers |
background-color: #14b8a64d (aurora-teal at 30% opacity) with color: #5eead4 (aurora-seafoam), set globally in main.css.
Typography
Observatory imports three typefaces from Google Fonts, each assigned a semantic role:| Family | Tailwind Class | Role |
|---|---|---|
| Space Grotesk | font-display | Headings, logotype, page titles |
| JetBrains Mono | font-mono | Nav labels, section tags, code, UI metadata |
| Inter | font-sans | Body copy, descriptions, paragraph text |
Animated Effects
Four ambient effects layer on top of all page content. They are always present and managed by theLayout component:
Starfield (Starfield.js) — A canvas element renders animated star particles that drift slowly across the deep-space background. It sits behind all content at z-index: 0.
AuroraRibbon (AuroraRibbon.js) — A large animated gradient element (violet → magenta) composited with mix-blend-mode: screen to produce the aurora glow on the home page. Uses Framer Motion for looping gradient animation.
CursorTrail (CursorTrail.js) — Tracks mousemove events and spawns small glowing particles that fade out behind the cursor. Adds tactile feedback to mouse interaction.
PageTransition (PageTransition.js) — Wraps each routed page in a Framer Motion AnimatePresence sequence. Handles fade-in on mount and fade-out on unmount when navigating between routes.