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.

The Projects page presents every shipped project as a node in an orbital diagram alongside a card-based catalogue. Each card shows the project name, tagline, technology stack, and a data source status badge that indicates whether the project’s live data comes from a real API, a mock data layer, or a placeholder sample. The route is #/projects and the static entry point is pages/Projects.html.

​
Components Used

ComponentRole
OrbitalDiagramInteractive map plotting each project by its coordinates
HudFrameDecorative panel wrapper around each project card
StarfieldFull-viewport animated background
NebulaBackgroundAtmospheric depth layer
HudNavPersistent top navigation
PageTransitionEnter/exit animation wrapper

​
All Five Projects

NEXUS_CORE

Real-time telemetry dashboard. Monitors distributed systems with WebSocket data streaming, custom WebGL visualisations, and an alerting engine. Stack: React, TypeScript, WebGL, Node.js, WebSockets. Status: LIVE. Coordinates: x 20, y 30.

AETHER_SYNC

Conflict-free offline storage. Local-first database wrapper with automatic syncing and CRDT-based conflict resolution for progressive web apps in low-connectivity environments. Stack: TypeScript, IndexedDB, CRDT, WebRTC. Status: MOCKED. Coordinates: x 60, y 20.

STELLAR_ROUTER

Intelligent API gateway. Edge-deployed gateway routing requests by geographic proximity and server load, with built-in rate limiting and analytics. Stack: Rust, Cloudflare Workers, Redis. Status: SAMPLE. Coordinates: x 80, y 60.

VOID_CANVAS

Infinite collaborative whiteboard. Spatial canvas with infinite panning, real-time cursors, and vector drawing tools. Stack: React, Canvas API, Socket.io, Zustand. Status: LIVE. Coordinates: x 30, y 70.

PULSAR_UI

Component design system. Accessible, themeable React component library built on Radix UI primitives and Tailwind CSS. Used across 4 internal tools. Stack: React, Tailwind CSS, Radix UI, Storybook. Status: SAMPLE. Coordinates: x 50, y 50.

​
Data Source Status

Every project entry carries a dataSource field that communicates how its demo data is sourced. The Projects page renders this as a coloured status badge on each card.
ValueMeaning
LIVEConnected to a real, running API or back-end service
MOCKEDData is generated locally by a mock layer — no live server required
SAMPLEStatic placeholder data hard-coded directly into the project entry

​
OrbitalDiagram Coordinate System

The OrbitalDiagram component renders project nodes at positions defined by the coordinates.x and coordinates.y fields. Both values are percentages (0 – 100) of the diagram’s rendered width and height respectively.
  • x: 0 = left edge, x: 100 = right edge
  • y: 0 = top edge, y: 100 = bottom edge
This means { x: 50, y: 50 } places a node at the exact centre, while { x: 20, y: 30 } places it in the upper-left quadrant.

​
Project Data Shape

Each entry in data/projects.js follows this schema: 
{
  id: "p1",                         // unique identifier
  name: "NEXUS_CORE",               // display name (ALL_CAPS convention)
  tagline: "Real-time telemetry dashboard", // one-line description
  description: "Full paragraph...", // shown in the expanded project card
  stack: ["React", "TypeScript"],   // array of technology names
  demoUrl: "#",                     // live demo link (omit if unavailable)
  sourceUrl: "#",                   // GitHub / source link (omit if private)
  readmeUrl: "#",                   // README link (omit if unavailable)
  dataSource: "LIVE",               // "LIVE" | "MOCKED" | "SAMPLE"
  coordinates: { x: 20, y: 30 }    // OrbitalDiagram position (0–100)
}
demoUrl, sourceUrl, and readmeUrl are all optional. The card component renders only the link buttons whose keys are present on the entry. Omit any field you don’t want to display.

​
Adding a New Project

  1. Open data/projects.js.
  2. Push a new object into the exported array using the schema above.
  3. Choose coordinates that don’t overlap an existing node — check the table in the Home page docs for current positions.
  4. Set dataSource to "LIVE", "MOCKED", or "SAMPLE" as appropriate.
// Example new entry
{
  id: "p6",
  name: "QUASAR_API",
  tagline: "Self-healing REST micro-service",
  description: "A Node.js service that detects degraded dependencies and reroutes requests automatically.",
  stack: ["Node.js", "TypeScript", "Redis", "Docker"],
  sourceUrl: "https://github.com/you/quasar-api",
  dataSource: "LIVE",
  coordinates: { x: 70, y: 40 }
}
The OrbitalDiagram on the Home page and the card list on the Projects page both update automatically — no component changes required.

Projects Data

Full schema reference and field descriptions for data/projects.js.

Orbital Diagram

Component reference for the interactive project map.

Home

The Home page also renders the OrbitalDiagram with the same project data.

Case Studies

Deep-dive mission reports for selected projects.

Build docs developers (and LLMs) love

Get started for freeTalk to us