Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/color-melt/llms.txt

Use this file to discover all available pages before exploring further.

Color Melt includes a fixed top navigation bar with nine color-coded pills, one for each page in the theme. Each pill uses a different dye color from the 11-color palette, giving the navigation its signature rainbow effect. The bar stays visible as visitors scroll, so the page structure is always one click away no matter how far down a visitor has read.

​
Navigation Labels

The navigation labels and their associated routes are defined inside components/Navigation.js. Each entry maps a URL path to a display label and a background color class: 
// Route data compiled into components/Navigation.js
{ path: "/",             label: "The Studio",       color: "bg-dye-red"    },
{ path: "/about",        label: "Who Dyed This?",   color: "bg-dye-orange" },
{ path: "/projects",     label: "Far-Out Work",     color: "bg-dye-yellow" },
{ path: "/skills",       label: "Bag of Tricks",    color: "bg-dye-green"  },
{ path: "/work",         label: "The Journey",      color: "bg-dye-blue"   },
{ path: "/case-studies", label: "Behind The Swirl", color: "bg-dye-purple" },
{ path: "/articles",     label: "Long Reads",       color: "bg-dye-pink"   },
{ path: "/testimonials", label: "Good Vibes",       color: "bg-turquoise"  },
{ path: "/contact",      label: "Holler At Me",     color: "bg-teal"       },
These labels are part of the theme’s personality. You can leave them as-is or update them in components/Navigation.js to match your preferred wording. If you change a label, make sure the path it references still points to the correct HTML file so the link does not break.

​
Case-Sensitive Paths

GitHub Pages is case-sensitive. A file named Projects.html and a file named projects.html are treated as two completely different files. This matters because a link that works correctly on your local machine — where many file systems are case-insensitive — can produce a 404 on the live GitHub Pages site if the capitalization does not match exactly. The HTML files in Color Melt follow title-case naming. Every internal link you write must match that capitalization precisely: 
<!-- Correct -->
<a href="pages/Projects.html">Projects</a>

<!-- Incorrect — will 404 on GitHub Pages -->
<a href="pages/projects.html">Projects</a>
The same rule applies to image paths, stylesheet references, and script sources. If a file is named main.css, a reference to Main.css will fail on GitHub Pages even though it loads fine locally.

​
Linking Between Pages

Internal links in Color Melt use relative paths. The correct path depends on where the file containing the link is located in the folder structure. From index.html at the repository root, link to pages inside the pages/ folder using the folder name as a prefix:
From index.html
<a href="pages/About.html">About</a>
<a href="pages/Projects.html">Projects</a>
From a page inside pages/, link back to the homepage using ../ to step up one level, and link to sibling pages using just the filename:
From pages/About.html
<a href="../index.html">Home</a>
<a href="Projects.html">Projects</a>
The ../ prefix tells the browser to go up one directory level before resolving the rest of the path. Without it, a link to index.html from inside pages/ would look for pages/index.html, which does not exist, and the link would fail. The same relative-path logic applies to images and assets referenced from inside page files. A stylesheet linked as assets/main.css from index.html should be linked as ../assets/main.css from any file inside pages/.
Test every navigation link after editing. A single wrong path produces a 404 that visitors won’t know how to fix.

Build docs developers (and LLMs) love

Get started for freeTalk to us