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 Home component (internally function G) is the first thing visitors see. It renders a full-viewport hero section that communicates the portfolio’s handcrafted aesthetic through layered motion — drifting color blobs, an SVG gradient headline, and a spiral tie-dye canvas backdrop.

​
What It Displays

The layout stacks four visual layers from back to front:
  1. TieDyeBackground — a full-bleed canvas element rendered with variant="spiral" and opacity={0.6}, giving the page its signature swirling texture.
  2. Animated blobs — three absolutely-positioned div elements (dye-light, dye-magenta, dye-ocean) that slowly drift in the background using the global CSS animate-blob keyframe animation. Each blob has a staggered animationDelay (0 s, 2 s, 4 s).
  3. Headline — the large text “DYED IN / THE WOOL” is rendered with an SVG linearGradient overlay that transitions from teal → magenta → ocean, clipped over the “DYED IN” span. The entire headline animates in as one unit via a scale + opacity spring.
  4. Tagline + CTA — the subheading “Hand-dyed code, made in small batches” fades in above the headline, followed by a “Dive In” button that navigates to /projects.
The headline uses an SVG <linearGradient> clipped to the text — not a CSS gradient — which enables smooth cross-browser color stops without -webkit-background-clip hacks.

​
Content Data

The copy lives inline inside the component. To update it, locate the strings directly in the component body: 
// Tagline (renders above the headline)
"Hand-dyed code, made in small batches"

// Headline (split across two lines)
"DYED IN / THE WOOL"

// Body copy (paragraph below the headline)
"I weave liquid logic and vibrant interfaces. A developer portfolio that feels like scrolling through a beautiful piece of tie-dyed fabric come alive."

// CTA button
"Dive In"  // navigates to /projects

​
Animation Details

ElementTechniqueDetails
Blob 1 (dye-light)CSS animate-blob keyframeDrifts on an infinite CSS animation cycle
Blob 2 (dye-magenta)CSS animate-blob keyframeanimationDelay: "2s" for offset phase
Blob 3 (dye-ocean)CSS animate-blob keyframeanimationDelay: "4s", slower feel
Headline (h1)Framer Motion initial → animatescale: 0.9 → 1, opacity: 0 → 1 via spring with bounce: 0.4
SVG gradientStatic SVG linearGradientFixed color stops — teal #2dd4bf, magenta #db2777, ocean #0369a1; no animation
TaglineFramer Motion initial → animateopacity: 0 → 1, y: 20 → 0, delayed 200 ms
Body copyFramer Motion initial → animateopacity: 0 → 1, delayed 600 ms
CTA buttonFramer Motion initial → animateopacity: 0 → 1, y: 20 → 0, delayed 800 ms; whileHover: scale 1.05, whileTap: scale 0.95

​
Customization

Change the tagline or body copy Locate the string literals in the component and replace them directly: 
// Before
"Hand-dyed code, made in small batches"

// After
"Pixel-perfect since day one"
Change the CTA destination The button calls navigate('/projects') via React Router. Update the path string to redirect elsewhere: 
// Change /projects to any route
navigate('/contact')
Change the background variant TieDyeBackground accepts a variant prop. The Home page uses "spiral" — switch to "bullseye" or "crumple" for a different texture: 
<TieDyeBackground variant="bullseye" opacity={0.5} />
Adjust blob animation speed Each blob’s speed is controlled by the global animate-blob CSS keyframe. Adjust the animation-duration in the stylesheet to slow or speed up the drift: 
.animate-blob {
  animation-duration: 18s;  /* increase to slow down */
}
The three blob colors (dye-light, dye-magenta, dye-ocean) are CSS custom-property utility classes. Their base colors are defined in the global stylesheet — changing them there will update the blobs on every page that uses them.

Build docs developers (and LLMs) love

Get started for freeTalk to us