Skip to main content

Documentation Index

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

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

The Work page presents Alex Groovy’s employment history through the PeaceTimeline component — a vertically scrolling timeline where each job entry is marked with a peace-sign icon instead of the typical bullet or dot. The heading “Where I’ve Grooved” and subtitle “A trip down memory lane” set a nostalgic, reflective tone before the timeline unfolds. Three positions are listed in reverse chronological order, each with a distinct accent colour that visually separates one role from the next while contributing to the overall rainbow-palette feel of the portfolio.

​
Route

PropertyValue
Path/work
React componentS
Router typeHashRouter — accessed as /#/work

​
Current work history

Senior Frontend Engineer — Cosmic Web Co.

2022 – Present · Leading a team of far-out devs building React applications that scale across the universe. Accent colour: #d946ef

UI Developer — Groove Tech

2019 – 2022 · Crafted pixel-perfect interfaces and implemented complex animations using Framer Motion. Accent colour: #2dd4bf

Junior Web Designer — Lava Lamp Studios

2017 – 2019 · Started my journey slicing PSDs and writing vanilla JS. Good times, man. Accent colour: #fde047

​
Work entry object shape

Each item in the jobs array rendered by PeaceTimeline must follow this schema:
​
year
string
required
A human-readable date range string displayed as the timeline label. Use the format "YYYY - YYYY" for past roles or "YYYY - Present" for current employment.
"2022 - Present"
​
title
string
required
The job title. Displayed prominently in the timeline card heading. No length restriction, but titles over eight words may wrap awkwardly on mobile — consider abbreviating.
"Senior Frontend Engineer"
​
company
string
required
The employer name rendered beneath the job title. Displayed in a slightly smaller, secondary style.
"Cosmic Web Co."
​
description
string
required
A short paragraph describing responsibilities and achievements in that role. One to three sentences is ideal — the timeline card does not scroll internally, so long descriptions overflow the card bounds.
"Leading a team of far-out devs building react applications that scale across the universe."
​
color
string (hex)
required
The accent hex colour applied to the peace-sign timeline marker and the card’s left border for this entry. Use visually distinct values across entries so each role has its own identity.
"#d946ef"

​
Full jobs array (as defined in source)

const jobs = [
  {
    year: "2022 - Present",
    title: "Senior Frontend Engineer",
    company: "Cosmic Web Co.",
    description:
      "Leading a team of far-out devs building react applications that scale across the universe.",
    color: "#d946ef",
  },
  {
    year: "2019 - 2022",
    title: "UI Developer",
    company: "Groove Tech",
    description:
      "Crafted pixel-perfect interfaces and implemented complex animations using Framer Motion.",
    color: "#2dd4bf",
  },
  {
    year: "2017 - 2019",
    title: "Junior Web Designer",
    company: "Lava Lamp Studios",
    description:
      "Started my journey slicing PSDs and writing vanilla JS. Good times, man.",
    color: "#fde047",
  },
];

​
Adding a new work entry

Insert a new object at the beginning of the jobs array (most recent first). Choose a color that hasn’t been used by adjacent entries: 
{
  year: "2024 - Present",
  title: "Staff Engineer",
  company: "Nebula Labs",
  description:
    "Architecting micro-frontend systems and mentoring a 12-person engineering team across three time zones.",
  color: "#fb923c",
}
To keep the colour sequence from looking random as the timeline grows, follow the portfolio’s existing warm–cool–warm pattern: fuchsia (#d946ef) → teal (#2dd4bf) → yellow (#fde047) → orange (#fb923c) → violet (#a78bfa). This creates a natural flow down the timeline that mirrors the rainbow arc on the Skills page.

​
Related components

PeaceTimeline Component

Full props reference and animation configuration for the PeaceTimeline.

Case Studies Page

Deeper project narratives that complement the high-level work history shown here.

Build docs developers (and LLMs) love

Get started for freeTalk to us