Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/cosmic-developer/llms.txt

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

The Work page (/work) reframes a developer’s career history as a series of recorded flight missions. Rendered under the section heading “Mission Log”, it presents three chronological work entries along a timeline, complete with year badges, role descriptions, and thematic status indicators. The page introduces itself with a TeletypeText prompt and rewards patient scrollers with staggered whileInView entrance animations on every card.

​
Layout Overview

The page uses a PageTransition wrapper and is divided into two major sections: Header
  • A TeletypeText component types out "Accessing flight logs..." in aurora-violet mono font
  • An H1 reads “Mission Log” with "Log" highlighted in text-aurora-violet
Timeline The timeline adapts between desktop and mobile viewports:
ViewportLayout
Desktop (md:)Horizontal flex row. A full-width h-0.5 line in star-dim/20 runs through the vertical midpoint. Cards alternate above and below using negative top-margin offsets.
MobileVertical flex column. Cards stack naturally, no alternating offset.
Each entry is a motion.div with initial={{ opacity: 0, y: 50 }} and whileInView={{ opacity: 1, y: 0 }} (once). A small w-4 h-4 circle marker with border-aurora-violet sits at the timeline midpoint for each card. On hover, the marker scales up 1.5× via group-hover:scale-150. Even-indexed entries (0, 2…) are positioned above the line with md:-mt-48; odd-indexed entries (1, 3…) are positioned below with md:mt-48.

​
Work History Data

The timeline is driven by the workHistory array defined in vt (the Work page component): 
const workHistory = [
  {
    year: '2024',
    role: 'Senior Frontend Engineer',
    company: 'Stellar Dynamics',
    desc: 'Leading the UI architecture for next-gen orbital mechanics software. Reduced load times by 40%.',
    status: 'Active Orbit',
  },
  {
    year: '2021',
    role: 'UI Developer',
    company: 'Nebula Creative',
    desc: 'Built interactive marketing sites for aerospace clients using React and Three.js.',
    status: 'Mission Complete',
  },
  {
    year: '2019',
    role: 'Junior Web Developer',
    company: 'LaunchPad Agency',
    desc: 'Cut my teeth building responsive landing pages and managing CMS platforms.',
    status: 'Mission Complete',
  },
]

​
Entry Card Anatomy

Each glass-panel card contains:
ElementDetails
Year badgefont-mono text-aurora-violet text-xl font-bold
Status badgefont-mono text-xs bg-cosmic-navy rounded-full — icon + label
Roletext-xl font-heading font-bold text-star-white
Companytext-star-dim subtitle
Descriptiontext-sm text-star-dim/80 leading-relaxed

​
Status Badges

The status badge branches on the entry’s status value:
StatusIconColor
Active OrbitRadio (Lucide) — pulsing via animate-pulsetext-aurora-teal
Mission CompleteMapPin (Lucide)text-star-dim
The Radio icon for the Active Orbit badge animates with a continuous pulse via the animate-pulse Tailwind utility class, reinforcing the idea that this is a live, ongoing engagement.

​
Animation Details

Each card uses Framer Motion’s whileInView to create a staggered reveal as the user scrolls: 
<motion.div
  initial={{ opacity: 0, y: 50 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true }}
  transition={{ delay: index * 0.2 }}
>
  • Entry 0 (2024): delay 0s
  • Entry 1 (2021): delay 0.2s
  • Entry 2 (2019): delay 0.4s
viewport={{ once: true }} means the animation fires only the first time each card enters the viewport, preventing re-triggering on scroll-back.

​
Customization

Adding a new role — append an object to workHistory: 
{
  year: '2017',
  role: 'Intern Developer',
  company: 'Orbit Labs',
  desc: 'Maintained internal tooling and contributed to UI component library.',
  status: 'Mission Complete',
}
Changing the timeline accent color — the violet used for year badges, the header TeletypeText, and the dot markers is aurora-violet. To switch to teal, replace every instance of aurora-violet in the vt component. Adjusting vertical card offset — the md:-mt-48 / md:mt-48 values control how far above or below the line each alternating card appears. Increase the value to widen the gap.
To add a third status type (e.g. "On Hold"), update the status badge conditional in the card render to include a new icon branch and color — for example a PauseCircle icon in text-aurora-magenta.

Build docs developers (and LLMs) love

Get started for freeTalk to us