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 About component (internally function W) tells the human story behind the portfolio. It presents five narrative paragraphs in a vertical timeline layout — each entry slides in on scroll and is marked by an animated colored dot on a left-border rail.

​
What It Displays

The page is divided into three visual areas:
  1. TieDyeBackground — full-bleed canvas with variant="bullseye" and opacity={0.3}. The lower opacity keeps the background subtle so the text remains legible.
  2. Header block — the title “THE HUMAN BEHIND THE DYE” and subtitle “Mixing logic and liquid since 2018” sit at the top of the content column, both animated on mount.
  3. Story timeline — a vertical line runs down the left side of the content area. Each of the five story paragraphs is attached to the rail with a colored circular dot marker. Each paragraph and its dot animate in together as a single motion.div using whileInView.
The "bullseye" background variant contrasts nicely with the linear timeline layout — concentric rings versus a straight rail — reinforcing the hand-crafted, mixed-media theme.

​
Content Data

The five story paragraphs are stored in the V array inside the component: 
const V = [
  "I didn't start with code. I started with colors, fabrics, and the messy unpredictability of dye.",
  "Then I discovered the web. It felt like a new kind of canvas—one where the colors could move, respond, and connect.",
  "Now, I blend the organic chaos of art with the structured logic of engineering.",
  "I build interfaces that don't just function, they flow. They breathe.",
  "Some stains are intentional. Some bugs become features. It's all part of the pattern.",
];
The header strings are inline in the JSX: 
title:    "THE HUMAN BEHIND THE DYE"
subtitle: "Mixing logic and liquid since 2018"

​
Animation Details

ElementTechniqueDetails
Page title + header blockFramer Motion initial → animate on mountopacity: 0 → 1, x: -50 → 0
Dot markers + paragraphswhileInView combinedEach motion.div wraps both the dot and paragraph; y: 50 → 0, opacity: 0 → 1, rotate: -5 → 0; staggered by index × 0.1 s
Left border railCSS border-l-2Static left border on the container div
All whileInView triggers use { once: true } so paragraphs don’t re-animate on scroll back.

​
Customization

Edit or add story paragraphs Update the V array. Each string becomes one timeline entry. The dot and animation are generated automatically per index: 
const V = [
  "I didn't start with code. I started with colors, fabrics, and the messy unpredictability of dye.",
  "Then I discovered the web. It felt like a new kind of canvas—one where the colors could move, respond, and connect.",
  // Add a new paragraph here — a dot and animation are added automatically
  "Open source contributions keep me curious and connected.",
];
Change the title or subtitle Replace the inline strings in the JSX header block: 
<h1>"WHO MADE THIS?"</h1>
<p>"Crafting since the dial-up era"</p>
Adjust the background opacity The bullseye canvas opacity is set directly on the component prop. Lower values are more subtle: 
// Current
<TieDyeBackground variant="bullseye" opacity={0.3} />

// More visible
<TieDyeBackground variant="bullseye" opacity={0.5} />
Change dot marker color Each dot’s background color is set to bg-dye-primary (teal). To give individual entries different colors, pass a color property into each V array item and map it to the dot’s backgroundColor style.
The timeline layout uses a CSS left-border on the container div, not an absolutely positioned line element. If you increase the number of story items significantly, ensure the container has enough min-height to keep the rail from truncating before the last dot.

Build docs developers (and LLMs) love

Get started for freeTalk to us