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.

TieDyeBackground is a decorative SVG/canvas layer that sits behind every page’s content, providing each section of the portfolio with its own distinct psychedelic texture without competing with text or interactive elements. The component renders as an absolute-positioned layer that fills its nearest positioned ancestor, and it is marked pointer-events-none so it is completely invisible to mouse and touch events. Four hand-crafted pattern variants are available — spiral, crumple, sunburst, and bullseye — each chosen to match the emotional tone of the pages it appears on.

​
Props

​
variant
string
required
Selects the pattern to render. Must be one of "spiral", "crumple", "sunburst", or "bullseye". Each variant is a distinct visual pattern described in detail below.
​
opacity
number
default:"0.2"
Controls the transparency of the background layer as a decimal between 0 and 1. In practice the project uses values between 0.1 and 0.4. Lower values (0.1–0.2) keep the pattern subtle on text-heavy pages; higher values (0.3–0.4) let the pattern breathe on simpler hero pages.

​
Variants

spiral

Pages: Home, Work, TestimonialsA swirling, circular tie-dye pattern that radiates outward from a central vortex. The spiral variant evokes the classic psychedelic poster art of the late 1960s and 1970s and is used on pages where personal identity and narrative are front and center — the landing page, work history, and testimonials.

crumple

Pages: About, Case StudiesAn organic, crinkled-paper texture that mimics the look of tie-dyed fabric that has been bunched and twisted before dyeing. The irregular, asymmetric quality of the crumple variant suits pages with dense, editorial content — the About biography and long-form Case Studies write-ups.

sunburst

Pages: Projects, ContactRadiating lines emanating from a central point, reminiscent of a vintage sunburst or starburst graphic motif. The sunburst variant has an energetic, outward-reaching quality that pairs well with the showcase-forward Projects grid and the call-to-action nature of the Contact page.

bullseye

Pages: Skills, BlogConcentric circles expanding from the center, like rings on a target or the cross-section of a tie-dyed shirt fresh off the dye bath. The bullseye’s ordered repetition provides a calm, structured backdrop for the Skills competency list and the Blog article index.

​
JSX Usage

The component is placed as the first child of each page’s root container. The container must have position: relative (or a Tailwind relative class) so the absolute-positioned background fills it correctly. 
import TieDyeBackground from "../components/TieDyeBackground";

// Home page — spiral variant at high opacity (hero-focused page)
export default function Home() {
  return (
    <div className="relative min-h-screen bg-cream overflow-hidden">
      <TieDyeBackground variant="spiral" opacity={0.4} />

      {/* All page content sits on top */}
      <main className="relative z-10">
        <HeroSection />
      </main>
    </div>
  );
}

// Skills page — bullseye variant at low opacity (text-heavy page)
export default function Skills() {
  return (
    <div className="relative min-h-screen bg-cream overflow-hidden">
      <TieDyeBackground variant="bullseye" opacity={0.1} />

      <main className="relative z-10">
        <SkillsGrid />
      </main>
    </div>
  );
}

​
Positioning and Stacking

The component renders with the following core styles so it always fills its container and stays behind content: 
// Inside TieDyeBackground.jsx (simplified)
<div
  aria-hidden="true"
  style={{ opacity }}
  className="absolute inset-0 w-full h-full pointer-events-none z-0"
>
  {/* SVG or canvas pattern for the selected variant */}
</div>
  • absolute inset-0 — stretches to all four edges of the nearest relative ancestor.
  • w-full h-full — fills the full width and height of that ancestor.
  • z-0 — sits at the bottom of the stacking context; page content uses z-10 or higher.
  • pointer-events-none — the layer never captures clicks, taps, or hover events.
TieDyeBackground is a purely decorative element and is always rendered with aria-hidden="true". It has pointer-events-none set so it will never interfere with links, buttons, form fields, or any other interactive element layered on top of it. You never need to worry about z-index conflicts as long as your content wrapper carries relative z-10 (or higher).

​
Opacity Guidelines

Keep opacity between 0.1 and 0.2 on pages with significant body text (About, Case Studies, Blog, Skills, Work, Testimonials) to ensure the pattern doesn’t reduce contrast against text-gray-800 body copy. On the Home page hero — where the background is the stage for a single large display element — push opacity up to 0.4 for a rich, immersive feel. When in doubt, check contrast ratios with the pattern visible using a tool like the Chrome DevTools accessibility panel.

​
Variant-to-Page Reference

The table below lists the exact opacity value used in source for each page — these are the values baked into the compiled output.
PageVariantOpacity
Homespiral0.4
Aboutcrumple0.2
Projectssunburst0.15
Skillsbullseye0.1
Workspiral0.1
Case Studiescrumple0.1
Blogbullseye0.15
Testimonialsspiral0.15
Contactsunburst0.2

Build docs developers (and LLMs) love

Get started for freeTalk to us