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.

The Projects page adopts the Mission Catalog theme — each project is represented as a glowing planetary orb floating on a dark star-map grid. Visitors can hover over any orb to reveal a tooltip with the project name and a short description, and clicking an orb expands a detail panel. The overall layout evokes a celestial navigation chart where every project is a destination worth exploring.
All page components for this portfolio are inlined inside assets/main.js, which is the compiled Vite production bundle. Do not edit main.js directly. Instead, make changes to the source files before running the Vite build. Editing the pre-built bundle will be overwritten on the next build.

​
What the Page Displays

The /projects route renders:
  1. Star-map grid background — a Canvas 2D layer draws a sparse, static field of stars behind the orb layout.
  2. Five interactive project orbs — each orb is a motion.div with a radial gradient fill and a pulsing glow animation.
  3. Hover tooltip — floating label showing project name and one-line description appears on onHoverStart.
  4. Click-expand detail panel — clicking an orb opens an overlay card with the full project description.

​
Project Data Structure

All five projects are defined in a single PROJECTS array in main.js: 
// main.js
const PROJECTS = [
  {
    id: "nebula-db",
    name: "Nebula DB",
    description: "A distributed key-value database optimized for sparse, write-heavy workloads.",
    tech: ["Rust", "LMDB", "gRPC"],
    color: "#7c3aed",
    size: 90,
  },
  {
    id: "stellar-ui",
    name: "Stellar UI",
    description: "An accessible React component library with a dark-mode-first design system.",
    tech: ["React", "TypeScript", "Storybook"],
    color: "#0ea5e9",
    size: 75,
  },
  {
    id: "orbit-analytics",
    name: "Orbit Analytics",
    description: "Real-time analytics dashboard for tracking user engagement across distributed services.",
    tech: ["React", "D3.js", "WebSockets"],
    color: "#10b981",
    size: 80,
  },
  {
    id: "void-cache",
    name: "Void Cache",
    description: "An in-memory caching layer with TTL eviction and Redis-compatible protocol support.",
    tech: ["Rust", "Tokio", "Redis protocol"],
    color: "#f59e0b",
    size: 65,
  },
  {
    id: "pulsar-chat",
    name: "Pulsar Chat",
    description: "End-to-end encrypted real-time chat application with presence indicators.",
    tech: ["Node.js", "Socket.io", "React"],
    color: "#ec4899",
    size: 70,
  },
];

​
Field Reference

FieldTypePurpose
idstringUnique slug used as the React key and anchor href
namestringDisplay name shown in the tooltip and detail panel
descriptionstringOne-to-two sentence summary shown in tooltip and expanded panel
techstring[]Technology badges rendered in the detail panel
colorstringHex color for the orb’s radial gradient and glow effect
sizenumberOrb diameter in pixels — larger values = more visual prominence

​
The Five Projects

Nebula DB

Distributed key-value database in Rust. The largest orb on the map — featured in the Case Studies deep-dive.

Stellar UI

Dark-mode-first React component library with full TypeScript support and Storybook integration.

Orbit Analytics

Real-time analytics dashboard using D3.js and WebSockets for live data streaming.

Void Cache

Rust-powered in-memory cache with Redis-compatible protocol and TTL eviction policies.

Pulsar Chat

End-to-end encrypted real-time chat application with presence indicators, built with Node.js and Socket.io.

​
Adding a New Project Orb

1

Add an entry to PROJECTS

Append a new object to the PROJECTS array following the field reference above.
2

Pick a unique color

Choose a color hex that contrasts with existing orbs. The star map background is #050510, so mid-saturation colors read well.
3

Set a relative size

Use size between 55 (small, secondary project) and 95 (flagship project). Avoid making multiple orbs the same size.
4

Position the orb (optional)

If you want precise placement, add x and y percentage fields to the object and read them in the layout component. Without them, orbs are distributed automatically.
5

Verify the detail panel

Click the new orb in the browser to confirm the detail panel renders the name, description, and tech badges correctly.

​
Removing a Project

Delete the corresponding object from the PROJECTS array. The star-map layout will redistribute the remaining orbs automatically to fill the space.

​
Interactive Behaviors

​
Hover Effect

Each orb listens for onHoverStart and onHoverEnd Framer Motion events. On hover, two things happen simultaneously: 
// main.js — orb hover animation
<motion.div
  className="project-orb"
  whileHover={{ scale: 1.12, boxShadow: `0 0 40px ${project.color}` }}
  transition={{ type: "spring", stiffness: 300, damping: 20 }}
>
  1. The orb scales up to 1.12× its resting size with a spring transition.
  2. The glow radius expands and brightens using the project’s color value.

​
Click-to-Expand

Clicking an orb sets a selectedProject state variable. The detail overlay fades in via AnimatePresence: 
// main.js — detail panel
<AnimatePresence>
  {selectedProject && (
    <motion.div
      className="project-detail-panel"
      initial={{ opacity: 0, scale: 0.9 }}
      animate={{ opacity: 1, scale: 1 }}
      exit={{ opacity: 0, scale: 0.9 }}
    >
      <h2>{selectedProject.name}</h2>
      <p>{selectedProject.description}</p>
      {/* tech badges */}
    </motion.div>
  )}
</AnimatePresence>
Clicking anywhere outside the panel (or pressing Escape) clears selectedProject and closes the overlay.

​
Customization Tips

Add a url field to each project object (e.g., url: "https://github.com/you/nebula-db") and wire it up inside the detail panel as a “View Project” link. This turns the catalog into a functional portfolio with direct links to live demos or source repositories.
The size field controls visual hierarchy on the star map. Use larger values for your most significant or technically complex projects so visitor attention naturally gravitates there first.

​
Related Pages

Case Studies

In-depth breakdown of the Nebula DB project architecture and decisions.

Skills

The Star Chart showing the technologies used across all projects.

Build docs developers (and LLMs) love

Get started for freeTalk to us