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 About page tells the developer’s origin story — not as a traditional biography, but as a mission log. Each career milestone is expressed as a stardate entry, rendered in chronological order inside a HudFrame. A secondary OrbitalDiagram panel sits alongside the timeline, reinforcing the spatial navigation metaphor that runs through the whole portfolio. The route is #/about and the static entry point is pages/About.html.

​
Components Used

ComponentRole
HudFrameDecorative border and corner-chrome wrapper that frames the timeline content
OrbitalDiagramAmbient project map shown alongside the bio for visual continuity
StarfieldFull-viewport animated background
NebulaBackgroundLayered atmospheric texture
HudNavPersistent top navigation
PageTransitionEnter/exit animation wrapper

HUD Frame

The decorative corner-chrome panel wrapper used throughout sys-core.

Orbital Diagram

Secondary orbital map rendered on the About page for visual structure.

​
Timeline Data

The full career timeline lives in data/timeline.js and is exported as the t array. Each entry has four fields:
FieldTypeDescription
idstringUnique identifier, e.g. "t1"
datestringStardate string, e.g. "STARDATE 2019.034"
titlestringShort milestone name
contentstringOne- or two-sentence narrative for that entry

​
All Six Timeline Entries

#StardateTitleSummary
1STARDATE 2019.034Enrolled in Nursing ProgramNoticed the patient-portal UI was suspiciously bad. Started wondering how these systems were actually built.
2STARDATE 2020.112The Retail Sector AnomalyWorked in high-volume retail. Learned more about human-computer interaction watching cashiers fight with POS systems than in any textbook.
3STARDATE 2021.245First Contact with CodeWrote the first line of JavaScript. Built a terrible calculator. Felt like a wizard.
4STARDATE 2022.088Bootcamp TrajectoryCommitted fully to the dev trajectory. 80-hour weeks learning React, Node, and the fundamentals of web architecture.
5STARDATE 2023.156Junior Engineer CommissionLanded first role at a mid-sized agency. Shipped 4 client projects in the first year. Learned that naming things is the hardest problem.
6STARDATE 2025.010Current OrbitSpecialising in high-performance front-ends and complex state management. Building tools that don’t make users want to pull their hair out.
Stardates follow the format YYYY.DDD where DDD is the approximate day of the year. This is a stylistic choice — you are free to use any consistent date format that fits your own narrative.

​
Adding a New Timeline Entry

Open data/timeline.js and append a new object to the exported array. The page renders entries in the order they appear in the array, so place the new entry at the position it should appear chronologically. 
// data/timeline.js  — add a new entry at the end
{
  id: "t7",
  date: "STARDATE 2026.045",
  title: "Staff Engineer Promotion",
  content: "Moved into a staff role leading architecture decisions across three product teams."
}
No other changes are required — the About page component iterates the full array automatically.

​
Customising the Narrative

Each content field accepts a plain string. Keep entries concise (one to two sentences) to maintain the log-entry aesthetic. The title field appears as the primary heading for each milestone, so use action-oriented language that reads well at a glance.

Timeline Data

Full schema reference for data/timeline.js.

HUD Frame

The decorative panel wrapper used on the About page.

Home

The entry point that links visitors through to About via HudNav.

Architecture

How pages/About.html bootstraps the React SPA at the correct hash route.

Build docs developers (and LLMs) love

Get started for freeTalk to us