Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/observatory/llms.txt

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

​
Work Page

The Work page (/work) is accessed via the navigation label “Expeditions”. It uses the OrbitalPath component to present career history as a series of missions on an elliptical orbit. Each role is a node positioned around the ellipse at a specific angle, with a connecting line leading to a detail card.

​
OrbitalPath Component

OrbitalPath (components/aurora/OrbitalPath.js) renders an SVG ellipse and places role nodes around its circumference. Key behaviours:
  • The ellipse rotates slowly on a CSS animation to give the impression of an object in motion.
  • Each node glows in its assigned color and pulses on hover.
  • Clicking a node expands a detail panel showing company, title, period, and description.
  • Nodes are ordered chronologically — the most recent role (smallest angle from the top) is visually prominent.

​
Angle Field

The angle field places a role node on the ellipse in degrees, measured clockwise from the top (12 o’clock position): 
         0° (top / most recent)
          │
   270°───┼───90°
          │
        180° (bottom / oldest)
The four demo roles span the ellipse at 30°, 90°, 150°, and 210°, distributing them evenly across the visible arc.

​
Work History Data

The full roles array used by the page: 
// components/aurora/OrbitalPath.js
const roles = [
  {
    id: 'r1',
    company: 'Nova Systems',
    title: 'Senior Systems Engineer',
    period: '2022 - Present',
    description: 'Architecting distributed microservices for high-throughput telemetry data processing. Reduced latency by 40%.',
    angle: 30,
    color: '#2dd4bf',
  },
  {
    id: 'r2',
    company: 'Starlight Dynamics',
    title: 'Frontend Architect',
    period: '2019 - 2022',
    description: 'Led a team of 6 to rebuild the core visualization dashboard. Implemented complex WebGL rendering pipelines.',
    angle: 90,
    color: '#14b8a6',
  },
  {
    id: 'r3',
    company: 'AeroTech',
    title: 'Full Stack Developer',
    period: '2016 - 2019',
    description: 'Developed internal tools for flight path analysis. Migrated legacy monolith to containerized services.',
    angle: 150,
    color: '#5eead4',
  },
  {
    id: 'r4',
    company: 'Orbital Inc',
    title: 'Junior Developer',
    period: '2014 - 2016',
    description: 'Maintained legacy PHP systems and slowly introduced React to the frontend stack.',
    angle: 210,
    color: '#8b5cf6',
  },
];

​
Data Shape Reference

FieldTypeDescription
idstringUnique identifier for the role node (e.g. 'r1').
companystringEmployer name shown in the detail card header.
titlestringJob title displayed beneath the company name.
periodstringEmployment period as a human-readable string (e.g. '2022 - Present').
descriptionstringShort summary of responsibilities and achievements shown in the expanded detail panel.
anglenumberPosition on the orbit ellipse in degrees (0–360), measured clockwise from the top.
colorstringHex colour for the node glow and connecting line. Use site palette colours for consistency.

​
Role Timeline

RoleCompanyPeriodAngle
Senior Systems EngineerNova Systems2022 – Present30°
Frontend ArchitectStarlight Dynamics2019 – 202290°
Full Stack DeveloperAeroTech2016 – 2019150°
Junior DeveloperOrbital Inc2014 – 2016210°

​
Adding a New Role

1

Open OrbitalPath.js

The roles array is near the top of components/aurora/OrbitalPath.js.
2

Add a new entry

Prepend your latest role at the top of the array. Choose an angle close to 0° (12 o’clock) to position the newest role at the most prominent point on the orbit.
3

Reassign existing angles

Shift each existing role’s angle clockwise by roughly 60° to maintain even spacing when you add a fifth entry. For example: 30° → 60°, 90° → 120°, etc.
4

Pick a colour

Use one of the site’s aurora palette values (#2dd4bf, #14b8a6, #5eead4, #8b5cf6, #a78bfa) for visual consistency.
Keep descriptions concise — two sentences maximum. Lead with an action verb (“Architected…”, “Led…”, “Reduced…”) and include at least one concrete metric to give the entry measurable weight.

Build docs developers (and LLMs) love

Get started for freeTalk to us