Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/sys-core/llms.txt

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

HudNav is the primary navigation component for sys-core. It renders a fixed overlay bar styled as a spacecraft heads-up display panel, overlaying the entire viewport with corner-bracket decorations, a live stardate readout, status telemetry, and a centred pill-style nav rail linking to all seven portfolio pages. On large screens the nav rail is always visible; on smaller viewports it collapses behind a hamburger toggle labelled NAV_ARRAY. Each link is defined as an entry in the internal links array, carrying a human-readable label, a route path, and a two-character channel code displayed in the mobile drawer.
LabelHash pathChannel code
HOME#/CH_00
ABOUT#/aboutCH_01
PROJECTS#/projectsCH_02
SKILLS#/skillsCH_03
WRITING#/writingCH_04
CASE STUDIES#/case-studiesCH_05
CONTACT#/contactCH_06
sys-core uses HashRouter from React Router, so all navigation paths are prefixed with # in the browser URL bar (e.g. /#/about). The path values in the links array are the bare React Router paths (/, /about, …) — the hash prefix is handled automatically by the router.

​
Usage

Place HudNav once at the application root, outside the router outlet so it persists across page transitions. In the default sys-core setup it sits alongside the cosmic background layers and wraps the AnimatePresence-driven route tree: 
import HudNav from './components/layout/HudNav';
import PageTransition from './components/layout/PageTransition';

function App() {
  return (
    <div className="relative min-h-screen bg-space-black text-off-white">
      {/* Cosmic background layers */}
      <Starfield />
      <NebulaBackground />

      {/* HUD overlay — fixed to the viewport, z-index 50 */}
      <HudNav />

      {/* Routed page content */}
      <main className="relative z-10">
        <Routes />
      </main>
    </div>
  );
}
HudNav positions itself with position: fixed; inset: 0 and a z-index of 50, so it floats above all page content without affecting document flow. All interactive regions use pointer-events-auto selectively, keeping the underlying canvas and page scrollable.

​
Active State

HudNav reads the current location with React Router’s useLocation hook and compares each link’s path to location.pathname. The matching algorithm is path-prefix aware:
  • The HOME link (/) only matches when pathname is exactly /.
  • All other links match when pathname.startsWith(path), so nested sub-routes stay highlighted correctly.
When a link is active it receives the text-cyan-signal colour class. A shared-layout motion.span with layoutId="nav-active-pill" animates a glowing cyan pill smoothly between buttons as the active route changes — a Framer Motion layout animation driven by a spring (damping: 22, stiffness: 260). 
// Excerpt — active-pill indicator inside each nav button
{isActive && (
  <motion.span
    layoutId="nav-active-pill"
    className="absolute inset-0 rounded-full bg-cyan-signal/15 border border-cyan-signal/50 shadow-[0_0_15px_rgba(6,182,212,0.3)]"
    transition={{ type: 'spring', damping: 22, stiffness: 260 }}
  />
)}
Navigating with useNavigate (via React Router’s navigate helper) also closes the mobile drawer automatically through a useEffect that watches location.pathname.

​
HUD Overlay Elements

Beyond the nav rail, HudNav renders several static telemetry readouts that reinforce the spacecraft HUD aesthetic:
PositionContent
Top-leftPulsing cyan dot + live STARDATE (YYYY.DDD format, refreshed hourly)
Top-rightALL SYSTEMS NOMINAL in mint-comms; UPLINK: SECURE beneath it in off-white/50
Bottom-left> Currently Debugging Reality_ flavour text in violet-glow
Bottom-rightLOC: + the current route as an uppercase identifier — ORBITAL_STATION on /, or the path segment uppercased and hyphen-replaced (e.g. LOC: ABOUT, LOC: CASE_STUDIES)
All four cornersL-bracket corner decorations in cyan-signal/30

​
Mobile Drawer

On viewports narrower than the lg Tailwind breakpoint, the centred pill rail is hidden and replaced by a NAV_ARRAY toggle button. Tapping it reveals a Framer Motion-animated drawer (initial: { y: -20, opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: -20, opacity: 0 }) overlaid on a blurred backdrop, driven by a spring (damping: 24, stiffness: 260). Each link in the drawer shows its label on the left and channel code (CH_00–CH_06) on the right, making the sci-fi aesthetic consistent at all screen sizes. 
// Mobile toggle button (Lucide icons from lucide-react v0.522.0)
<button
  onClick={() => setMenuOpen(prev => !prev)}
  aria-expanded={menuOpen}
  aria-label={menuOpen ? 'Close navigation' : 'Open navigation'}
>
  {menuOpen ? <X className="w-4 h-4" /> : <Menu className="w-4 h-4" />}
  NAV_ARRAY
</button>

​
Customisation

Nav destinations are defined in a single array at the top of HudNav.js. To add, remove, or rename a route, edit that array: 
// components/layout/HudNav.js
const links = [
  { label: 'HOME',        path: '/',            code: 'CH_00' },
  { label: 'ABOUT',       path: '/about',        code: 'CH_01' },
  { label: 'PROJECTS',    path: '/projects',     code: 'CH_02' },
  { label: 'SKILLS',      path: '/skills',       code: 'CH_03' },
  { label: 'WRITING',     path: '/writing',      code: 'CH_04' },
  { label: 'CASE STUDIES',path: '/case-studies', code: 'CH_05' },
  { label: 'CONTACT',     path: '/contact',      code: 'CH_06' },
  // Add new entries here — remember to create the corresponding route
  // { label: 'RESUME', path: '/resume', code: 'CH_07' },
];
After adding an entry, register a matching <Route> in your router and create the page component. The active-state logic and mobile drawer will pick up the new link automatically.
Keep nav labels short — four to eight characters sit best inside the rounded pill rail without overflowing on medium-width viewports. Capitalised monospaced text (ALL_CAPS with underscores instead of spaces) matches the HUD aesthetic and keeps widths predictable. If a label must be longer, verify it still renders cleanly at 1024 px before shipping.

​
Dependencies

DependencyRole
react-router-domuseLocation, useNavigate for active-state detection and navigation
framer-motionLayout animation for the active pill; entrance/exit for the mobile drawer
lucide-react v0.522.0Menu and X icons in the mobile toggle button

Build docs developers (and LLMs) love

Get started for freeTalk to us