The Projects page is where the portfolio owner showcases the work that defines their skills and experience. Labeled “Far-Out Work” in the navigation bar (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.
bg-dye-yellow), it presents featured projects in a visual, sticker-infused layout that makes each piece of work feel like its own artifact rather than a row in a table.
Purpose
The Projects page is typically the most important section of a developer or designer portfolio. Visitors — especially hiring managers and collaborators — come here to evaluate what the creator has actually built, what problems they solved, and how they think about craft and execution. This page should represent the creator’s strongest work. Each project entry gives the visitor enough context to understand what was built, why it mattered, and how to explore it further. A clear screenshot, a specific description, and working links to a live demo and source code are the minimum useful content for each project card. The StickerSheet component gives the projects section a distinctive visual rhythm that fits the Color Melt aesthetic without reducing the information density of the entries themselves.Components Used
| Component | Role on This Page |
|---|---|
TieDyeSpiral | Preloaded theme component available to the page’s React app bundle |
LavaBlob | Preloaded theme component available to the page’s React app bundle |
StickerSheet | Renders the visual project cards in a sticker-style grid layout, each card carrying a screenshot, title, description, and links |
ShirtRack | Preloaded theme component available to the page’s React app bundle |
RainbowArch | Preloaded theme component available to the page’s React app bundle |
SpiralTimeline | Preloaded theme component available to the page’s React app bundle |
MagazineSpread | Preloaded theme component available to the page’s React app bundle |
PatchworkQuilt | Preloaded theme component available to the page’s React app bundle |
SmileyFlower | Preloaded theme component available to the page’s React app bundle |
LiquidForm | Preloaded theme component available to the page’s React app bundle |
Navigation | Renders the shared top navigation bar; the “Far-Out Work” pill is highlighted as the active route |
CursorDrops | Maintains the theme-specific cursor trail effect, consistent with all other pages |
PageTransition | Wraps the page content in the animated entrance transition triggered when navigating to /projects |
Content to Customize
Replace project titles
Update each project card’s title with the real name of the project. Use the name you would use when describing the work in a conversation — not a file name or commit message.
Write specific project descriptions
Replace the placeholder descriptions with one to three sentences explaining what the project does, what problem it solves, and what technologies or approaches were used. Avoid generic filler. Specific detail is what makes a project description useful to a visitor.
Add project screenshots
Replace the default screenshots with images of the actual project. Store screenshots in the Include descriptive
images/screenshots/ folder and update each card’s image src path to match. Use the same naming pattern as the existing screenshots:alt text for each image so the content is accessible when the image cannot load.Update live demo links
Replace the placeholder demo URLs with the actual deployed URL for each project. If a project does not have a live demo, remove the demo link rather than leaving a broken or placeholder URL.
Update repository links
Replace the placeholder repository URLs with the real GitHub (or other hosting platform) links for each project’s source code. If a project is private, either omit the link or note that the repository is private.
Add or remove project cards
Add new project entries by duplicating an existing card block and updating its content. Remove placeholder cards that do not correspond to real work. Aim to include three to six projects — enough to show range without overwhelming the page.
File Location
The Projects page template ispages/Projects.html inside the pages/ folder.
window.__STATIC_PAGE_ROUTE__ script tag that sets the active route when this page is opened directly:
pages/Projects.html directly — for example, via a shared link or a navigation click. Do not remove or modify this script tag.
Screenshot images are stored in
images/screenshots/ relative to the repository root. Make sure the full images/ folder is uploaded when deploying to GitHub Pages, or all project images will return 404 errors on the live site.