Dyed in the Wool is a creative developer portfolio built with React 18 and Vite. This page covers what the project is, the design philosophy behind it, the pages and visual components it ships with, and the brand color palette that drives the entire aesthetic.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.
What Is Dyed in the Wool?
Dyed in the Wool is a single-page portfolio application that runs on the following core stack:| Technology | Role |
|---|---|
| React 18 | UI component model and rendering |
| Vite | Build tooling and local dev server |
| Framer Motion | Page transitions, scroll animations, and layout animations |
| React Router v6 | Client-side routing with nested route support |
| Tailwind CSS | Utility-first styling with a custom design token layer |
pages/ (e.g., pages/About.html, pages/Projects.html), and a .nojekyll file is present at the repo root so GitHub Pages serves the assets correctly.
Design Philosophy
“Hand-dyed code, made in small batches.”The guiding idea behind Dyed in the Wool is that front-end engineering and textile art share the same underlying tension — organic unpredictability constrained by intentional craft. Tie-dye fabric never looks exactly the same twice, yet every piece is deliberately made. That principle shows up technically through:
- SVG
feTurbulence/feDisplacementMapfilters applied to project cards and backgrounds, producing the warped, dye-bleed texture effect without any raster images. - Framer Motion layout animations (e.g., the project card expand/collapse, the navigation active indicator) that feel fluid and alive rather than snapping between states.
- Blob animations on the homepage that slowly drift using CSS keyframe animations and
mix-blend-multiply, mimicking dye spreading through wet fabric.
Pages
The portfolio ships with six routes, each a full-page experience:| Route | Component | Theme |
|---|---|---|
/ | Home | Spiral fold background; hero tagline; “Dive In” CTA |
/about | About | Bullseye tie-dye pattern; scrolling timeline of paragraphs |
/projects | Projects | Three project cards with SVG noise overlays and a Framer Motion modal |
/skills | Skills | Interactive dye-bottle visualization with animated fill levels |
/work | Work | Alternating timeline of work history entries (“The Tapestry”) |
/contact | Contact | Glassmorphism form with an SVG dye-burst success animation |
Visual Components
Three reusable components handle the signature aesthetic across every page:TieDyeBackground
Renders an SVG-based animated background. Accepts a variant prop ("spiral", "bullseye", "crumple") that switches between three distinct pattern algorithms, and an opacity prop to tune intensity per page.
DyeDropCursor
A custom cursor component that replaces the default pointer with a dye-drop animation trail. As the user moves the mouse, colored dye-drop blobs spawn and fade out behind the cursor. The same file also exports an AnimatePresence wrapper that is used for modal and page-transition lifecycle management on the Projects and Skills pages.
Layout
The top-level shell component wrapping every route. It renders:
- A fixed navigation header with animated
NavLinkindicators (Framer MotionlayoutId) - An
Outletwrapped inAnimatePresencefor blur-fade page transitions - A full-viewport SVG fractal noise grain overlay (opacity
0.03,mix-blend-overlay) that gives the screen the tactile feel of paper or cloth
Brand Colors
All colors are surfaced as Tailwind CSS custom tokens (dye-*) and used consistently across components and page data:
| Token | Hex | Usage |
|---|---|---|
dye-primary | #0d9488 | Teal — primary accents, glows, border highlights |
dye-light | #2dd4bf | Light teal — gradient stops, skill fill color, nav indicator |
dye-magenta | #db2777 | Magenta — hover fill on CTA buttons, About headline |
dye-indigo | #1e3a8a | Indigo — headings, nav text, work timeline entries |
dye-ocean | #0369a1 | Ocean blue — blob animations, SVG gradient stop |
Getting Started
Clone the repo, install dependencies, and run the dev server in under five minutes.
Architecture Overview
Understand the routing structure, build pipeline, and GitHub Pages deployment setup.
Layout Component
Deep-dive into the Layout shell, navigation, and page-transition system.
Color Palette
Swap out brand colors and update the Tailwind config to match your own identity.