Color Melt organizes images into a dedicated folder at the repository root. Keeping images in a consistent location makes paths predictable, prevents broken references when files are moved, and makes it easy to audit what is included in the repository before publishing. Whether you are adding project screenshots, a profile photo, or decorative assets, following the same folder structure the theme already uses will save you from debugging path errors later.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.
Where to Store Images
Put any images you add to your portfolio inside theimages/ folder. If you have several categories of images — project previews, a profile photo, icons, or decorative assets — you can organize them into clearly named subfolders:
images/screenshots/. This path is what the README references by default, so keeping screenshots there means you do not have to rewrite any README paths when replacing the starter images.
Screenshot Naming Convention
Color Melt uses a numbered naming pattern for its repository preview screenshots. Following the same pattern when you add your own screenshots keeps the README easy to maintain and prevents broken image references:Referencing Images in HTML
Image paths in HTML files are relative to the location of the file that contains the<img> tag, not relative to the repository root. The correct path depends on which file you are editing.
From index.html at the repository root, reference images using the path from the root:
index.html
pages/, step up one directory level first using ../:
pages/Projects.html
../ prefix, a reference to images/screenshots/project-preview.png from inside the pages/ folder would look for pages/images/screenshots/project-preview.png, which does not exist. The image would fail to load both locally and on the live GitHub Pages site.
Updating README Screenshots
After personalizing Color Melt, replace the README’s screenshot references to show your own site instead of the original theme preview. The README uses this pattern for each preview image:images/screenshots/ while keeping the same filenames, or update the filenames in the README src values to point to your new screenshot files. Both approaches work — the important thing is that the filenames in the README and the filenames in the folder match exactly, including capitalization.
After making changes, open the README on GitHub and confirm that every preview image loads. A missing preview image in the README is often the first sign of a path or capitalization mismatch.
Image Tips
Use descriptive alt text
Every
<img> tag should include an alt attribute that describes what the image shows. Alt text is read by screen readers and displayed when an image fails to load. alt="My project preview" is more useful than alt="image" or an empty string.Choose the right format
Use PNG for screenshots that contain text, UI elements, or sharp edges — PNG handles these without artifacts. Use JPEG for photographs or images with gradients where a slightly lossy format is acceptable and the smaller file size helps.
Keep filenames clean
Use lowercase letters, hyphens instead of spaces, and no special characters in filenames.
project-preview.png is safer than Project Preview (final).png. Spaces and special characters in filenames can cause broken paths on some systems and on GitHub Pages.GitHub has a 100 MB file size limit per file. For large portfolio images, consider hosting on an image CDN and linking them instead of committing to the repository.