Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/dyed-in-the-wool/llms.txt

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

The Work component (internally function Q) presents the portfolio’s employment history as a woven tapestry — each role is a thread in the timeline, rendered as an alternating left/right card layout centred around a vertical spine. Colored accent dots anchor each entry to the rail.

​
What It Displays

The page is structured as:
  1. Section header — the title “THE TAPESTRY” animates in from the left on mount.
  2. Central timeline rail — a vertical line runs down the center of the content area from top to bottom.
  3. Work entry cards — three cards, alternating left and right of the rail. Each card shows:
    • The year range (e.g., 2023 - Present)
    • The role/title
    • The company name
    • A short description paragraph
  4. Colored dot markers — a circular dot, colored with the entry’s color value, sits on the central rail at each card’s attachment point.

​
Content Data

Work entries are stored in the Z array: 
const Z = [
  {
    year: "2023 - Present",
    company: "Creative Tech Co.",
    role: "Senior Frontend Engineer",
    color: "#0d9488",
    description:
      "Leading the UI architecture for a suite of creative tools. Introduced Framer Motion and WebGL to the core stack.",
  },
  {
    year: "2020 - 2023",
    company: "Digital Agency X",
    role: "Creative Developer",
    color: "#1e3a8a",
    description:
      "Built award-winning marketing sites with heavy emphasis on scroll-driven animations and custom SVG interactions.",
  },
  {
    year: "2018 - 2020",
    company: "Startup Y",
    role: "Frontend Developer",
    color: "#db2777",
    description:
      "First engineering hire. Built the MVP from scratch using React and established the initial design system.",
  },
];
Entries are rendered in array order — most recent first by convention.

​
Animation Details

ElementTechniqueDetails
Section titleinitial → animate on mountx: -20 → 0, opacity: 0 → 1
Timeline railCSS div with fixed positioningStatic vertical bar; no CSS scaleY animation
Dot markersInline style with backgroundColorEach dot is colored per entry; no separate scale animation
All cardswhileInView fade + slidey: 50 → 0, opacity: 0 → 1, duration: 0.6 s; fires once per card
Card layout alternationCSS flex directionEven-indexed entries use md:flex-row-reverse to swap card to the left side
Card hoverwhileHover elevationBox shadow deepens; subtle y: -2 lift
All whileInView animations use { once: true } — they do not replay on scroll-back.

​
Customization

Add a new work entry Append an object to the Z array. Entries render in the order they appear, so prepend for most-recent-first: 
{
  year: "2024 - Present",
  company: "New Studio",
  role: "Lead Creative Engineer",
  color: "#7c3aed",
  description:
    "Architecting a real-time collaborative design tool for distributed teams.",
},
Change an entry’s accent color Update the color field — it controls the dot on the timeline rail and the year badge background: 
color: "#f59e0b"  // amber
Edit role or company text Directly update the company, role, or description strings in the Z array. No other changes are needed. Adjust the alternating direction Card direction is determined by index % 2. Even-indexed entries use md:flex-row-reverse (card on the left). To flip this convention, swap the condition: 
className={`... ${index % 2 !== 0 ? "md:flex-row-reverse" : ""}`}
The central timeline rail is drawn with a thin div, not an SVG line. If you significantly increase the number of entries, ensure the parent container does not have a fixed max-height that would truncate the rail before the final dot.
Adding a fourth or fifth entry requires no structural changes — the alternating logic and dot generation are driven entirely by the Z array map, so new items inherit layout and animation automatically.

Build docs developers (and LLMs) love

Get started for freeTalk to us