Color Melt is organized as a flat, self-contained static project. Every folder has a single clear responsibility — pages live inDocumentation 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.
pages/, components live in components/, styles and scripts live in assets/, and images live in images/. That separation makes the theme straightforward to navigate whether you are replacing text content, adjusting a stylesheet, or inspecting an individual component. The sections below explain what each part of the project contains and what you should (and should not) change inside it.
Directory Tree
All internal file paths are relative, so the theme works at any GitHub Pages project URL without configuration changes.
index.html
index.html is the homepage and the GitHub Pages entry point. When GitHub Pages loads the site it looks for this file first, so it must remain at the repository root — never inside a subfolder. This file loads all the compiled assets and component modules via <script type="module"> and <link rel="modulepreload"> tags, bootstrapping the React application into the <div id="root"> element.
Start your customization here. Replace the starter name, headline, and homepage introduction before editing anything else. Getting the identity content right first means the site communicates who it belongs to from the moment someone opens it.
pages/
The pages/ folder contains the individual portfolio section pages, each as a standalone HTML file:
| File | Purpose |
|---|---|
About.html | Biography, background, and personal introduction |
Articles.html | Article archive or writing collection |
CaseStudies.html | Detailed project and technical breakdowns |
Contact.html | Contact details and communication links |
Projects.html | Featured project portfolio |
Skills.html | Skills, technologies, and capabilities |
Testimonials.html | Testimonials and feedback |
Work.html | Professional experience and work history |
components/
The components/ folder contains the thirteen reusable animated and decorative React components that define Color Melt’s visual identity:
| Component | Purpose |
|---|---|
CursorDrops.js | Adds theme-specific liquid cursor drop behavior |
LavaBlob.js | Provides the animated lava blob interface element |
LiquidForm.js | Provides the themed contact form interaction |
MagazineSpread.js | Provides the magazine-spread layout element |
Navigation.js | Provides shared navigation behavior across all pages |
PageTransition.js | Adds animated page transition behavior |
PatchworkQuilt.js | Provides the patchwork quilt interface element |
RainbowArch.js | Provides the rainbow arch decorative element |
ShirtRack.js | Provides the shirt rack interface element |
SmileyFlower.js | Provides the smiley flower decorative element |
SpiralTimeline.js | Creates timeline-style content presentation |
StickerSheet.js | Provides the sticker sheet decorative element |
TieDyeSpiral.js | Provides the tie-dye spiral visual element |
index.html and the HTML pages in pages/ using <link rel="modulepreload"> tags. Renaming a component file without updating every reference to it will break the component silently on the live site.
Decorative effects are intentionally kept separate from the written portfolio content. This means you can update text, projects, and contact information in the HTML files without accidentally touching the visual structure.
assets/
The assets/ folder contains the compiled styles and scripts generated by the Vite build:
| File | Purpose |
|---|---|
main.css | Main stylesheet — controls all visual presentation |
main.js | Main site script — bootstraps the React application |
index.js | Shared supporting JavaScript used by the static build |
index2.js | Shared supporting JavaScript used by the static build |
proxy.js | Shared supporting script generated with the static build |
main.css. Make targeted edits rather than rewriting the stylesheet wholesale. The theme uses a rainbow dye palette (Dye Yellow #FFCA3A, Dye Blue #1982C4, Dye Red #FF595E, Dye Green #8AC926, Dye Pink #FF99C8, Dye Orange #FF924C, Dye Purple #6A4C93, Turquoise #40E0D0, Teal #008080) on a Cream (#FDFBF7) background with Ink (#1A1A24) text. If you change colors, recheck contrast ratios to keep the text readable.
Do not rename or reorganize the files in assets/. Their paths are referenced directly in index.html.
images/screenshots/
The images/screenshots/ folder stores the repository preview images used in the README and portfolio pages. The screenshot naming pattern for this theme is:
images/ or a clearly named subfolder. After replacing screenshots, open the README preview and confirm that every image loads correctly.
.nojekyll
.nojekyll is an empty file stored beside index.html at the repository root. Its filename is the instruction — it tells GitHub Pages to publish the files directly without running Jekyll processing. Without this file, GitHub Pages may fail to serve the JavaScript modules in assets/ and components/ correctly, breaking the theme’s styles and interactive behavior.
The file is supposed to be empty. If it appears blank when you open it, that is correct. Make sure it is named exactly .nojekyll with no file extension, no capitalization changes, and no extra characters.