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.

PeaceTimeline renders the portfolio’s experience or career history as a vertical timeline — a design motif straight from a 1970s protest zine. A centred vertical rule runs from top to bottom; work experience cards hang off it in alternating left/right positions. Each card springs into view as the user scrolls it into the viewport, starting from a slight rotation and offset, before settling to its natural position. A unique peace-sign SVG icon sits at each node, coloured according to the entry’s accent colour.

​
Configuration

PeaceTimeline accepts no props. Timeline data is defined in the hard-coded array i inside the component file. Each entry in i has the following shape: 
{
  year:        string,   // e.g. "2021 – 2023"
  title:       string,   // Job title
  company:     string,   // Employer name
  description: string,   // Role summary paragraph
  color:       string,   // Hex color for the peace-sign node and card accent
}
To add, remove, or edit timeline entries, modify the i array directly in PeaceTimeline.js.

​
Animation Model

Each card uses Framer Motion’s whileInView with a spring transition and a negative viewport.margin to trigger slightly before the card fully enters the viewport: 
// Per-card animation
initial:     { opacity: 0, y: 50, rotate: ±10 }  // even-index cards rotate -10, odd-index cards +10
whileInView: { opacity: 1, y: 0,  rotate: 0    }
viewport:    { once: true, margin: '-100px' }
transition:  { duration: 0.6, type: 'spring' }
The once: true flag means the entrance animation fires a single time per page load — scrolling back up will not replay it.
Even-indexed cards (0, 2, …) use rotate: -10 in their initial state; odd-indexed cards (1, 3, …) use rotate: +10. This creates a subtle tilt-to-upright motion that mirrors the physical feel of cards pinned to a corkboard coming to attention.

​
Peace-Sign Node

Each timeline node renders an inline SVG peace symbol (☮) sized at 32×32 px, filled with the entry’s color value. The node is absolutely positioned on the centre line, vertically centred with the card it corresponds to.

​
Usage

import PeaceTimeline from './components/PeaceTimeline';

function ExperiencePage() {
  return (
    <section className="py-24 px-4">
      <h2 className="text-4xl font-bold text-center mb-16">The Journey</h2>
      <PeaceTimeline />
    </section>
  );
}
The color field on each entry drives only the peace-sign node and the card’s left/right border accent — not the card’s background. Keep the card background neutral (cream or off-white) and reserve vivid hues for the color field so the timeline retains visual hierarchy without becoming overwhelming.

Build docs developers (and LLMs) love

Get started for freeTalk to us