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.

OrbitalDiagram renders the sys-core home page’s central navigation as a living solar system. Each major section of the site — Projects, About, Skills, Writing, Case Studies, and Contact — is represented as a glowing planet orbiting a central star at its own orbital radius and speed. Clicking any planet navigates to that section. Hovering over a planet reveals a floating HUD tooltip with the section’s label and tagline. The entire diagram is 1000 × 1000 px and designed to be the focal point of the home page, conveying the “mission control” identity of the portfolio at a glance.

​
Visual Role

The orbital diagram translates site navigation into a physical metaphor: the developer is the central star, and each area of their work — projects, skills, writing — is a satellite in orbit. This framing reinforces the cosmic theme while making navigation spatially memorable. Planets are sized proportionally to their importance (Projects is the largest at 64 px; Writing is the smallest at 16 px), and each orbit ring is a faint border-nebula-purple/30 circle. Each planet has a coloured glow shadow matching its associated site colour:
SectionColour classGlowOrbit radiusPeriod
Projectsbg-violet-glowViolet, 30 px spread180 px60 s
Aboutbg-cyan-signalCyan, 20 px spread100 px40 s
Skillsbg-mint-commsMint, 15 px spread260 px80 s
Writingbg-magenta-flareMagenta, 15 px spread320 px100 s
Case Studiesbg-off-whiteOff-white, 25 px spread400 px120 s
Contactbg-cyan-signalCyan, 15 px spread480 px150 s
The central star is a 64 px off-white sphere with a 50 px glow and a pulsing cyan core (animate-pulse).

​
Usage

OrbitalDiagram is a zero-prop component that internally sources all planet definitions and uses React Router’s useNavigate hook for navigation. Place it in a centred container on the home page. 
import OrbitalDiagram from "../../components/cosmic/OrbitalDiagram.js";

export default function HomePage() {
  return (
    <section className="flex items-center justify-center min-h-screen">
      <OrbitalDiagram />
    </section>
  );
}
OrbitalDiagram calls useNavigate() from React Router internally. It must be rendered inside a React Router <BrowserRouter> (or equivalent) provider — rendering it outside a router context will throw a runtime error.

​
Props

OrbitalDiagram is a zero-configuration component and accepts no props. Planet definitions — including labels, paths, sizes, orbit radii, speeds, start angles, and colour classes — are all declared in a static planets array inside the component itself.

​
Planet Data Shape

Each orbital body is described by an internal configuration object with the following shape: 
{
  id: "projects",            // Unique identifier
  label: "PROJECTS",         // Display label shown in the HUD tooltip
  tagline: "Mission Archives", // Subtitle shown in the HUD tooltip
  path: "/projects",         // React Router path navigated to on click
  size: 64,                  // Planet diameter in px
  orbitRadius: 180,          // Distance from the central star in px
  colorClass: "bg-violet-glow shadow-[0_0_30px_rgba(139,92,246,0.6)]",
  speed: 60,                 // Full orbit duration in seconds
  startAngle: 0,             // Initial rotation offset in degrees
}
The OrbitalDiagram is a section navigator, not a project browser. For the coordinate-plotted project map used in the Projects section, see the coordinates field on each project entry in data/projects.js and refer to the Projects Data reference.

​
Projects Data and Coordinates

Individual projects in data/projects.js each carry a coordinates field placing them on a 2D orbital grid (0–100 scale on both axes). This data is consumed by the Projects section to plot project nodes on a spatial map: 
// data/projects.js — example project entry
{
  id: "p1",
  name: "NEXUS_CORE",
  tagline: "Real-time telemetry dashboard",
  description: "A high-performance dashboard for monitoring distributed systems...",
  stack: ["React", "TypeScript", "WebGL", "Node.js", "WebSockets"],
  demoUrl: "#",
  sourceUrl: "#",
  dataSource: "LIVE",
  coordinates: { x: 20, y: 30 },  // 0–100 percent of the map canvas
}
All five projects and their coordinates:
ProjectxyTagline
NEXUS_CORE2030Real-time telemetry dashboard
AETHER_SYNC6020Conflict-free offline storage
STELLAR_ROUTER8060Intelligent API gateway
VOID_CANVAS3070Infinite collaborative whiteboard
PULSAR_UI5050Component design system

​
Implementation Notes

​
CSS spin animation

Each planet’s orbit is implemented using a CSS spin keyframe applied to a full-circle wrapper <div> sized to the orbit diameter. The planet is absolutely positioned at the top-centre of this wrapper (top: -size/2, left: 50%), so as the wrapper spins, the planet traces the circular orbit path. The HUD tooltip counter-rotates via a spin-reverse animation at the same speed, with an animationDelay offset derived from the planet’s startAngle, ensuring the tooltip text always reads horizontally regardless of the planet’s orbital position.

​
startAngle for visual distribution

Each planet’s startAngle staggers its initial position around the orbit ring, so at page load the planets are distributed visually rather than all starting at the 12 o’clock position. This is achieved by setting transform: rotate(startAngleDeg) as the initial state of the spinning wrapper before the CSS animation takes over.
To add a new section to the orbital diagram, append a new entry to the internal planets array in OrbitalDiagram.js. Choose an orbitRadius that leaves adequate spacing from existing orbits (the outermost is currently at 480 px) and pick a speed proportionally slower than its neighbours to maintain the natural sense of Keplerian orbital mechanics.

Build docs developers (and LLMs) love

Get started for freeTalk to us