Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/dev.void/llms.txt

Use this file to discover all available pages before exploring further.

AuroraNav is the primary navigation component for dev.void. It renders a full-width sticky header at the top of every page, providing links to all nine sections of the portfolio. On desktop viewports the links sit in a horizontal row; on smaller screens they collapse into a full-screen overlay menu toggled by a hamburger icon. The component must always be rendered inside a BrowserRouter because it reads the current path with React Router’s useLocation hook.

​
What it renders

The header contains three logical zones:
  1. Logo / wordmark — a Rocket icon followed by the Dev.Void brand text, both wrapped in a React Router <Link to="/">.
  2. Desktop navigation (hidden lg:flex) — a <nav> element containing one <Link> per route. The currently active link is identified by comparing useLocation().pathname to each route’s path. When a link is active, a motion.div with layoutId="nav-indicator" slides an animated aurora-teal underline beneath it using a spring transition (stiffness: 300, damping: 30).
  3. Mobile hamburger (lg:hidden) — a <button> that toggles the mobile menu open state. It shows a Menu icon when closed and an X icon when open, both from lucide-react.
A second useEffect watches location.pathname and collapses the mobile menu automatically whenever the user navigates to a new route.

​
Scroll-aware background

A scroll event listener tracks whether the page has scrolled past 50 px. While at the top, the header background is bg-transparent. After scrolling, it transitions to bg-space-950/80 backdrop-blur-md border-b border-aurora-teal/20 with a reduced vertical padding, creating a condensed, frosted-glass effect.

​
Navigation links

The full route table, in source order:
LabelPathSpace-themed alias in source
Home/Home
Stellar Cartography/aboutAbout
Probes & Payloads/projectsProjects
Telemetry/skillsSkills
Mission Log/workWork Experience
Anomalies/case-studiesCase Studies
Field Notes/blogBlog
Crew Voices/testimonialsTestimonials
Hailing Freq/contactContact
The labels rendered in the nav are the space-themed aliases (e.g. “Stellar Cartography” for About). The route paths themselves are conventional slugs (/about, /projects, etc.).

​
Mobile menu

On viewports narrower than lg (1024 px), the desktop <nav> is hidden and the hamburger button appears. Tapping it mounts a motion.div that covers the screen below the header (fixed inset-0 top-[60px]) with a near-opaque deep-space background (bg-space-950/95 backdrop-blur-xl). The overlay animates in with opacity: 0 → 1 and y: -20 → 0 over 300 ms. Inside it, all nine links are stacked vertically and centred. The active link is highlighted in text-aurora-teal with a glow effect; inactive links are text-slate-400. 
// Mobile menu motion.div config (from source)
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: isOpen ? 1 : 0, y: isOpen ? 0 : -20, pointerEvents: isOpen ? "auto" : "none" }}
transition={{ duration: 0.3 }}
The mobile menu uses pointerEvents toggling rather than a conditional render or AnimatePresence, so the DOM node is always present and the animation can run both ways without unmounting.

​
App integration

AuroraNav must sit inside the BrowserRouter provider (exported from the same module as H). In the app entry point, BrowserRouter wraps the entire application, with AuroraNav rendered as a direct sibling to the main content wrapper: 
import { H as BrowserRouter, A as AuroraNav } from "./components/AuroraNav";
import { StarfieldBackground } from "./components/StarfieldBackground";
import { CometCursor } from "./components/CometCursor";

function App() {
  return (
    <BrowserRouter>
      <div className="relative min-h-screen bg-space-950 text-slate-200">
        <StarfieldBackground />
        <CometCursor />
        <AuroraNav />
        <main className="relative z-10">
          {/* Route content rendered here */}
        </main>
      </div>
    </BrowserRouter>
  );
}
Because AuroraNav is position: fixed with z-index: 50, all page content must include pt-24 (6 rem) top padding to prevent it from being hidden behind the bar. The app wraps each page’s content in an animated motion.div with className="pt-24 min-h-screen relative z-10" to apply this offset consistently.

​
Customisation

​
Changing link labels or routes

All nine nav items are defined in a single array near the top of AuroraNav.js. Edit the label or path fields to rename or re-route any entry: 
const navLinks = [
  { path: "/",            label: "Home" },
  { path: "/about",       label: "Stellar Cartography" },
  { path: "/projects",    label: "Probes & Payloads" },
  { path: "/skills",      label: "Telemetry" },
  { path: "/work",        label: "Mission Log" },
  { path: "/case-studies",label: "Anomalies" },
  { path: "/blog",        label: "Field Notes" },
  { path: "/testimonials",label: "Crew Voices" },
  { path: "/contact",     label: "Hailing Freq" },
];
1

Add a new route

Push a new object into the navLinks array: { path: "/labs", label: "Deep Space Labs" }.
2

Register the route

Add a matching <Route path="/labs" element={...} /> inside the <Routes> block in main.js.
3

Create the page component

Build your page component and import it into main.js alongside the other page components.

​
Adjusting the scroll threshold

The header transitions from transparent to frosted-glass when window.scrollY > 50. Change the 50 in the scroll listener inside the useEffect to any pixel value that suits your hero section height.

​
Swapping the active-link indicator style

The sliding underline is a motion.div with layoutId="nav-indicator". You can replace the teal bar with any element — for example, a glowing dot or a background highlight — by changing its className. The layoutId prop is what drives the shared-layout animation across links; keep it unique within the nav.

Build docs developers (and LLMs) love

Get started for freeTalk to us