The Home page is the first thing a visitor sees when they arrive at sys-core. It acts as the mission control hub — establishing the space-operations aesthetic with an animated star field, a softly glowing nebula layer, and a central orbital diagram that maps every deployed project as a node in space. All navigation to other sections originates from the persistentDocumentation 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 component rendered on this page.
Route
The home page lives at the hash route#/ (the root). Because the site deploys to GitHub Pages with hash-based routing, the entry HTML file is index.html and the React router matches the / path to the Home component.
Components Used
| Component | Role |
|---|---|
Starfield | Animated canvas of drifting stars layered behind all content |
NebulaBackground | Slow-panning, semi-transparent nebula texture giving depth to the background |
OrbitalDiagram | SVG/canvas map that plots each project node at its coordinates position |
HudNav | Persistent top navigation bar with links to every section |
PageTransition | Wraps the page body and applies the enter/exit animation between routes |
Starfield
Procedurally animated star canvas rendered behind all page content.
Nebula Background
Layered, slow-drifting nebula texture that adds atmospheric depth.
Orbital Diagram
SVG map that positions project nodes using x/y coordinate pairs.
HUD Nav
Persistent navigation bar rendered across all pages.
What the Visitor Sees
On arrival the visitor is greeted by:- Starfield + Nebula — the full-viewport animated background establishes the space-operations atmosphere immediately.
- Hero copy — a short designation block (callsign, role, status line) rendered in the monospace HUD typeface.
- OrbitalDiagram — the centrepiece of the home view. Five project nodes are plotted across the diagram using the
coordinatesvalues fromdata/projects.js. Hovering a node reveals the project name and tagline; clicking navigates to the Projects section. - HudNav — always visible, linking to About, Projects, Skills, Writing, Case Studies, and Contact.
OrbitalDiagram and data/projects.js
Each entry in data/projects.js carries a coordinates object with x and y values expressed as percentages of the diagram’s width and height (0 – 100). The OrbitalDiagram component reads the exported projects array and renders one node per entry at the specified position.
Current project coordinates at a glance:
| Project | x | y |
|---|---|---|
NEXUS_CORE | 20 | 30 |
AETHER_SYNC | 60 | 20 |
STELLAR_ROUTER | 80 | 60 |
VOID_CANVAS | 30 | 70 |
PULSAR_UI | 50 | 50 |
data/projects.js immediately repositions that node on the home diagram without any other code changes.
Navigation Flow
HudNav is the sole navigation mechanism. All route links point to hash paths (#/about, #/projects, etc.) so the site works correctly when deployed to a GitHub Pages subdirectory without server-side routing support.
The Home page does not have a dedicated
pages/Home.html static entry point. Direct deep-links to the root URL rely on the index.html file at the repo root. All other sections have their own pages/*.html entry files that bootstrap the same React bundle and redirect the hash to the correct route.Related Pages
Projects
Full project catalogue with tech stack details and data source status.
Architecture
How hash routing, static HTML entry points, and the React SPA fit together.
Projects Data
Reference for the
data/projects.js schema including coordinates.Page Transition
The enter/exit animation wrapper applied to every page including Home.