Aurora Borealis is a portfolio interface themed around northern lights, atmospheric gradients, and quiet night-sky exploration. This page introduces the project’s visual concept, technology stack, key features, and the night-sky metaphor that shapes every page title and interaction in the interface.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/aurora-borealis/llms.txt
Use this file to discover all available pages before exploring further.
What Is Aurora Borealis?
Aurora Borealis is a single-page React application that doubles as a personal portfolio. Every visual element — the layered aurora gradient animations drifting behind the content, the Canvas 2D star field twinkling across the viewport, the constellation-style navigation bar — is designed to evoke standing beneath an open arctic sky. The interface is built on React 18, driven by Framer Motion for all animations, and laid out with Tailwind CSS. Vite handles the build pipeline, and React Router DOM provides hash-based routing so the portfolio can be deployed as a fully static bundle on any host without server-side configuration.All seven routes are pre-built as static HTML entry points under
pages/. Each file sets window.__STATIC_PAGE_ROUTE__ before the app mounts, which lets the hash router resolve the correct view even on a direct URL load.Visual Concept
The interface layers three distinct visual systems on top of each other:-
Aurora gradient backdrop — Three
framer-motiondivelements, each carrying a radial gradient in a different hue (teal#2DD4BF, cyan/violet#22D3EE / #8B5CF6, pink#EC4899), animate independently in slow, looping paths with heavy Gaussian blur (60 px, 80 px, and 100 px respectively). A fourth SVG wave path fills the lower portion of the viewport with an undulating aurora ribbon that morphs continuously via Framer Motion’sdattribute animation. -
Canvas star field — A
<canvas>element fills the entire viewport behind the interface. Stars are procedurally placed at a density of one star per 4 000 pixels of screen area. Each star twinkles by incrementally adjusting its opacity, and a separate pool of up to three shooting stars streaks diagonally at randomised speeds, fading out as they travel. The canvas re-sizes on everywindow.resizeevent and cancels its animation frame on unmount. -
Constellation navigation — The top navigation bar renders route links styled as constellation points connected by faint lines, using Framer Motion and React Router DOM’s
<NavLink>to highlight the active destination.
Technology Stack
| Technology | Role |
|---|---|
| React 18 | UI rendering and component model |
| Framer Motion | All animations — aurora layers, page transitions, micro-interactions |
| React Router DOM | Hash-based client-side routing (HashRouter) |
| Tailwind CSS | Utility-first responsive layout and typography |
| Vite | Development server and production bundler |
Key Features
Animated Aurora Background
Three independent Framer Motion radial gradient layers drift across the viewport in overlapping loops, with blur radii from 60 px to 100 px. An SVG wave path morphs continuously along the bottom edge, blending teal, cyan, violet, and pink into a living aurora curtain.
Canvas Star Field
A full-viewport Canvas 2D renderer places stars at viewport-proportional density. Each star twinkles via per-frame opacity interpolation, and up to three shooting stars arc diagonally with a gradient-faded tail before fading out.
Constellation Navigation
The top navigation bar is built with
ConstellationNav.js, combining React Router DOM links with Framer Motion hover and active state animations. The active route glows like a constellation point.Hash-Based SPA Routing
React Router DOM’s
HashRouter keeps the portfolio deployable on any static host. Each of the seven pages/*.html files sets window.__STATIC_PAGE_ROUTE__ and redirects bare paths to the appropriate hash route on first load.Framer Motion Page Transitions
Every page mounts with
initial: { opacity: 0, y: 20, scale: 0.9, filter: "blur(10px)" } and animates to its natural state, then exits with a subtle scale-down and re-blur — giving the feel of moving between star systems.Seven Portfolio Pages
The portfolio covers Home, About, Projects, Skills, Writing, Case Studies, and Contact — each with its own thematic label drawn from the night-sky metaphor (Observatory, Star Chart, Signal Transmitter, and more).
Responsive Tailwind Layout
Every page uses Tailwind CSS utility classes for responsive typography and layout. The fixed-position aurora and star-field layers use
pointer-events-none so they never intercept scroll or click events on content above them.ES Module Architecture
Components are distributed as individual ES modules (
AuroraBackground.js, StarField.js, ConstellationNav.js) preloaded from each HTML entry. The application bundle (assets/main.js) ships all page components and the router in a single optimised file.Design Philosophy
Aurora Borealis uses a consistent night-sky metaphor to title every section of the portfolio, replacing conventional labels with more evocative names that match the atmospheric theme:| Portfolio Section | Night-Sky Name |
|---|---|
| About | Observatory |
| Projects | Mission Catalog |
| Skills | Star Chart |
| Writing | Flight Log |
| Case Studies | Transmission Archive |
| Contact | Signal Transmitter |
The thematic labels appear in the
ConstellationNav navigation bar and are used as headings within individual page components in assets/main.js.