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.

This page walks you through everything you need to get Dyed in the Wool running locally and making your first content changes — from cloning the repository to editing your project data, skills, and work history.

​
Prerequisites

Before you begin, make sure the following are available on your machine:
  • Node.js 18 or later — Vite and the project’s dependencies require Node 18+. Run node -v to check.
  • Git — needed to clone the repository.
  • A terminal — any shell (bash, zsh, PowerShell) will work.

​
Installation

1

Clone the repository

Run the following command in the directory where you want to store the project:
git clone https://github.com/apursley2012/dyed-in-the-wool.git
Then move into the project folder:
cd dyed-in-the-wool
2

Install dependencies

Install the project’s packages using your preferred package manager:
npm install
3

Start the development server

npm run dev
Vite will start a local server at http://localhost:5173. The terminal will confirm the URL. Hot module replacement (HMR) is enabled by default, so the browser refreshes instantly as you edit files.
4

Open the portfolio

Navigate to http://localhost:5173 in your browser. You should see the Home page with the tie-dye spiral background, animated headline, and the “Dive In” call-to-action button. Use the navigation links at the top to explore all six pages.
The repository includes a .nojekyll file at the root and pre-generated static HTML files under pages/ (e.g., pages/About.html, pages/Projects.html). These are already in place so that GitHub Pages serves every route correctly without any additional configuration. Do not delete them if you plan to deploy to GitHub Pages.

​
Customizing Your Content

All portfolio content — projects, skills, and work history — is stored as plain JavaScript arrays directly inside the page component functions in assets/main.js (the compiled output of the source components). To edit content, locate the relevant array in the source, update the objects, and the dev server will hot-reload the change.

​
Project Data

The Projects page (/projects) reads from an array of project objects. Each entry follows this shape: 
{
  id: 1,                          // Unique numeric identifier
  title: "Liquid UI Library",     // Display name shown on the card and in the modal
  type: "Spiral Fold",            // Tie-dye technique label shown above the title
  color: "#0d9488",               // Card background and SVG noise overlay color
  description: "A React component library...", // Paragraph shown in the expanded modal
  tags: ["React", "Framer Motion", "SVG"]      // Pill labels in the modal
}
Add, remove, or edit entries in this array to update the projects grid. The color field accepts any valid CSS hex color — it directly drives the card’s SVG noise texture, so saturated values produce the most striking tie-dye effect.

​
Skills Data

The Skills page (/skills) reads from a skills array. Each entry drives one of the interactive dye-bottle visualizations: 
{
  name: "React",      // Label shown beneath the bottle
  color: "#0d9488",   // Fill color of the liquid in the bottle
  level: 90           // Fill height as a percentage (0–100)
}
Adjust level to change how full each bottle appears. The animated fill uses a Framer Motion spring, so even small numerical changes produce a satisfying visual transition.

​
Work History Data

The Work page (/work) — titled “The Tapestry” — reads from a work history array. Each entry becomes one node on the alternating timeline: 
{
  year: "2023 - Present",               // Date range shown in the colored pill badge
  company: "Creative Tech Co.",         // Company name shown below the role
  role: "Senior Frontend Engineer",     // Large display-font heading for the entry
  color: "#0d9488",                     // Color of the timeline dot and year badge
  description: "Leading the UI architecture..." // Body paragraph for the entry
}
Entries are rendered in array order from top to bottom. The layout automatically alternates each card left and right on wider screens.

Build docs developers (and LLMs) love

Get started for freeTalk to us