Skip to main content

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.

ConstellationNav is the primary navigation surface of the Aurora Borealis portfolio. It renders a horizontal top bar whose links are decorated with animated star nodes and connecting lines styled to evoke a constellation map. The component is entirely self-contained: it bundles React Router DOM, Framer Motion, and the React DOM production runtime internally and re-exports all of those primitives for consumption by the rest of the app — which means you must not install or import those libraries separately.

​
Usage

import {
  C as ConstellationNav,
  H as BrowserRouter,
  R as Routes,
  a as Route,
} from './components/ConstellationNav.js';

export default function App() {
  return (
    <BrowserRouter>
      <ConstellationNav />
      <Routes>
        <Route path="/" element={<Home />} />
        {/* … */}
      </Routes>
    </BrowserRouter>
  );
}
ConstellationNav accepts no props. Active-route highlighting, animation state, and link targets are all managed internally by the component.

​
Navigation links

The component renders links to the seven primary routes of the portfolio:
LabelRouteNotes
Home/Root landing page
About/aboutBiography and background
Projects/projectsPortfolio project grid
Skills/skillsTechnology and skill matrix
Writing/writingBlog / article index
Missions/case-studiesDeep-dive project write-ups
Contact/contactContact form
Each link is implemented with React Router’s Link component. Active-route detection is handled by comparing useLocation().pathname against each link’s path, so the component does not rely on NavLink’s built-in active class mechanism.

​
Active-route detection

ConstellationNav calls React Router’s useLocation hook internally to read the current pathname from the router context. When the pathname matches a link’s to value, Framer Motion drives the star decoration from its idle state (small, dim) to its active state (larger, fully opaque): 
// Conceptual logic inside ConstellationNav
const location = useLocation();
const isActive = location.pathname === route.to;
Because useLocation requires a live router context, you must render ConstellationNav inside a <BrowserRouter> (or equivalent) wrapper. Import BrowserRouter via its alias H from ConstellationNav’s bundle (import { H as BrowserRouter } from './components/ConstellationNav.js') rather than from a separately installed package.

​
Constellation decorations

Each navigation link is paired with:
  • Star node — a small animated circle rendered as a motion.div. On hover and on active routes it scales up and brightens.
  • Connecting line — a motion.div or inline SVG line drawn between adjacent star nodes. Line opacity and length animate on route change using Framer Motion’s layout animations.
The decorations use the same mix-blend-mode: screen technique as AuroraBackground, so they glow naturally over the dark sky backdrop rather than painting as flat shapes.

​
Bundled dependencies and re-exports

ConstellationNav.js is a self-contained bundle. It embeds minified copies of react-dom.production.min.js, scheduler.production.min.js, React Router DOM, and Framer Motion. Importing those libraries separately from node_modules will create two conflicting React roots and break routing and animation state across the app.
All primitives you need are available as named exports from the bundle:

​
React Router DOM re-exports

The following React Router primitives are available as aliased named exports:
Export aliasPrimitive
HBrowserRouter
RRoutes
aRoute
uuseLocation
import {
  H as BrowserRouter,
  R as Routes,
  a as Route,
  u as useLocation,
} from './components/ConstellationNav.js';

​
Framer Motion re-exports

Only AnimatePresence is re-exported from the bundle (as alias A). The motion object, useScroll, and other Framer Motion hooks are not separately exported — they are used internally by ConstellationNav only. 
import { A as AnimatePresence } from './components/ConstellationNav.js';
Set up a path alias (e.g. @nav) pointing to ./components/ConstellationNav.js in your bundler config. Every file in the project can then do import { A as AnimatePresence, u as useLocation } from '@nav' without repeating the relative path.

​
Full recommended import pattern

// Any page or component in the app
import {
  C as ConstellationNav,
  A as AnimatePresence,
  H as BrowserRouter,
  R as Routes,
  a as Route,
  u as useLocation,
} from './components/ConstellationNav.js';

​
Implementation notes

Single React root

Bundling react-dom internally ensures the navigation bar and every page it renders share a single React root, which is required for React context (including the Router context) to propagate correctly.

Scheduler included

The React Scheduler (scheduler.production.min.js) is bundled alongside react-dom because the production build of React DOM requires it as a peer. You do not need to reference it directly.

No external router import

Because React Router DOM is embedded in the bundle, you should remove any standalone react-router-dom package from package.json. A duplicate installation wastes bytes and risks version mismatches.

Framer Motion tree

All Framer Motion layout IDs and shared animation contexts must live under the same motion instance. Because motion is used internally by this bundle’s embedded Framer Motion copy, avoid installing a separate Framer Motion package to prevent conflicting instances.

​
Stacking and z-index

ConstellationNav positions itself above the AuroraBackground and StarField canvas layers. Ensure your layout provides a z-index context that keeps the nav above z-0: 
// Recommended wrapper
<header className="fixed top-0 inset-x-0 z-50">
  <ConstellationNav />
</header>
The component itself does not set a z-index so you retain full control over how it stacks relative to modals, drawers, or other overlays in your layout.

Build docs developers (and LLMs) love

Get started for freeTalk to us