Skip to main content

Documentation Index

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

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

The MissionLogTimeline component (MissionLogTimeline.js) renders your professional work history as a vertically scrolling timeline. A central spine animates its fill as you scroll down the page, and each role card animates into view when it enters the viewport. On md-and-above screen widths, cards alternate left and right of the spine automatically. All of the content lives in a single array called We at the top of the file.

​
The Work History Data Array

Each role is a plain object in the We array: 
// MissionLogTimeline.js — work history data array
const We = [
  {
    year: "2023 - Present",              // Date range — rendered in aurora-mint mono font above the title
    title: "Senior Frontend Architect",  // Job title — bold heading inside the card
    company: "Stellar Dynamics",         // Company name — italic serif text below the title
    desc: "Leading a crew of 5 developers building the next-generation orbital tracking interface. Reduced load times by 40% through strategic code-splitting and WebGL optimizations.",
                                         // Role description — body text inside the card
  },
  // ... more entries
];

​
Existing Entries

The three default work history entries are:
#YearTitleCompany
12023 - PresentSenior Frontend ArchitectStellar Dynamics
22020 - 2023UI EngineerNebula Corp
32018 - 2020Web DeveloperVoid Technologies
Full descriptions from the source:

Senior Frontend Architect — Stellar Dynamics (2023 - Present)

Leading a crew of 5 developers building the next-generation orbital tracking interface. Reduced load times by 40% through strategic code-splitting and WebGL optimizations.

UI Engineer — Nebula Corp (2020 - 2023)

Developed the core component library used across 12 different internal tools. Implemented complex data visualization dashboards for telemetry data.

Web Developer — Void Technologies (2018 - 2020)

Maintained and upgraded legacy systems. Migrated monolithic architecture to micro-frontends, improving deployment velocity.

​
Editing an Existing Entry

Find the object in We whose year and company match the role you want to change and update the relevant fields: 
// MissionLogTimeline.js — editing the most recent role
const We = [
  {
    year: "2022 - Present",                  // ← updated date range
    title: "Lead Frontend Engineer",         // ← updated title
    company: "Acme Corp",                    // ← updated company name
    desc: "Building a white-label design system adopted by 30+ product teams. Owns the full component lifecycle from Figma token to npm publish.",
                                             // ← updated description
  },
  // ... remaining entries unchanged
];

​
Adding a New Entry

Push a new object onto the array. The timeline renders entries in array order — index 0 appears at the top. To add your most recent role at the top, unshift onto the array or place the new object first: 
// MissionLogTimeline.js — adding a fourth (older) role at the bottom
const We = [
  {
    year: "2023 - Present",
    title: "Senior Frontend Architect",
    company: "Stellar Dynamics",
    desc: "Leading a crew of 5 developers...",
  },
  {
    year: "2020 - 2023",
    title: "UI Engineer",
    company: "Nebula Corp",
    desc: "Developed the core component library...",
  },
  {
    year: "2018 - 2020",
    title: "Web Developer",
    company: "Void Technologies",
    desc: "Maintained and upgraded legacy systems...",
  },

  // ↓ new older role appended at the bottom
  {
    year: "2016 - 2018",
    title: "Junior Developer",
    company: "Photon Studios",
    desc: "Shipped pixel-perfect landing pages and e-commerce storefronts. First professional exposure to React and component-driven architecture.",
  },
];
The alternating left-right layout is automatic — you never need to specify a side. Even-indexed entries (0, 2, 4…) render their card on the right of the spine; odd-indexed entries (1, 3, 5…) render on the left. Adding or removing entries will shift the alternation of all entries below the change, so review the visual balance after any structural edit.

​
Removing an Entry

Delete the entire object literal from the array. Remaining entries reflow and re-alternate automatically: 
// Remove the 2018-2020 Web Developer role
const We = [
  {
    year: "2023 - Present",
    title: "Senior Frontend Architect",
    company: "Stellar Dynamics",
    desc: "...",
  },
  {
    year: "2020 - 2023",
    title: "UI Engineer",
    company: "Nebula Corp",
    desc: "...",
  },
  // { year: "2018 - 2020", ... }  ← deleted
];

​
How the Timeline Spine Animates

The vertical spine is a two-layer element: a static dark background track and a Framer Motion div that grows from 0% to 100% height as scrollYProgress advances through the section: 
// MissionLogTimeline.js — spine fill (read-only reference)
<motion.div
  className="absolute top-0 left-0 w-full bg-gradient-to-b from-aurora-teal via-aurora-pink to-transparent"
  style={{ height: useTransform(scrollYProgress, [0.2, 0.8], ["0%", "100%"]) }}
/>
The transform maps the scroll range of 0.2 to 0.8 (i.e. 20%–80% of the section’s scroll travel) to a height of 0%–100%. You do not need to adjust this when adding entries — the section’s scroll length grows automatically.

​
How the Card Entrance Animations Work

Each card uses whileInView with a viewport margin of -100px at the bottom edge: 
// MissionLogTimeline.js — per-card entrance animation (read-only reference)
<motion.div
  initial={{ opacity: 0, y: 50 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true, margin: "-100px" }}
  transition={{ duration: 0.6 }}
>
  {/* card content */}
</motion.div>
The -100px bottom margin means the animation fires when the card is 100px above the bottom of the viewport — giving a slight early reveal. Cards animate once (once: true) so they stay visible after entering; scrolling back up will not reset them to invisible.
There is no stagger delay between cards. Because they are vertically spaced far apart (space-y-24), each card naturally enters the viewport at a different moment as the user scrolls, creating an organic cascading effect without needing explicit delays.

​
Mobile vs Desktop Layout

On screens smaller than the md breakpoint (768px), the spine moves to the left edge of the section (left-[27px]) and all cards stack in a single column to the right of it. On md+, the spine sits in the centre (md:left-1/2) and the flex-direction of even-indexed rows is reversed (md:flex-row-reverse) to push their card to the right side. You do not need to change anything to support this — the responsive behaviour is built into the component’s className logic.
Avoid setting very short desc strings (under ~100 characters). On desktop, cards on opposite sides of the spine need roughly similar heights to keep the pulsing node at the correct vertical midpoint. Very short descriptions can make the node float noticeably off-centre relative to the card it belongs to.

Build docs developers (and LLMs) love

Get started for freeTalk to us