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.

The Behind The Swirl page is Color Melt’s dedicated space for in-depth project stories. Where the Projects page shows what you built, this page explains how and why — the decisions you weighed, the constraints you navigated, and what the work taught you. Visitors land here ready to read carefully, so the layout uses the MagazineSpread component to give each case study room to breathe.

​
Purpose

Case studies are the most persuasive content in a technical portfolio. Hiring managers, clients, and collaborators who have already noticed your project gallery come here to find out whether you can articulate your process. A strong case study shows that you understand the problem you solved, made deliberate choices, and can reflect honestly on what worked and what you would change. This page works for any kind of structured project story — a product redesign, a full-stack build, a UX research sprint, a freelance engagement, or a side project with interesting technical trade-offs. The format suits anyone from early-career developers with one or two deep projects to seasoned practitioners who want to highlight select work in detail.

​
Components Used

The following Color Melt components are loaded by pages/CaseStudies.html:
ComponentFileRole on this page
Navigationcomponents/Navigation.jsSite-wide nav bar with the “Behind The Swirl” label highlighted in bg-dye-purple
CursorDropscomponents/CursorDrops.jsAdds the liquid-color cursor-drop trail effect across the page
PageTransitioncomponents/PageTransition.jsAnimates the entry and exit transitions when navigating between pages
TieDyeSpiralcomponents/TieDyeSpiral.jsProvides the theme-specific Tie Dye Spiral decorative element
LavaBlobcomponents/LavaBlob.jsProvides the theme-specific Lava Blob interface element
StickerSheetcomponents/StickerSheet.jsProvides the theme-specific Sticker Sheet interface element
ShirtRackcomponents/ShirtRack.jsProvides the theme-specific Shirt Rack interface element
RainbowArchcomponents/RainbowArch.jsProvides the theme-specific Rainbow Arch interface element
SpiralTimelinecomponents/SpiralTimeline.jsCreates timeline-style content presentation
MagazineSpreadcomponents/MagazineSpread.jsProvides the editorial-style layout used to display individual case study entries
PatchworkQuiltcomponents/PatchworkQuilt.jsProvides the theme-specific Patchwork Quilt interface element
SmileyFlowercomponents/SmileyFlower.jsProvides the theme-specific Smiley Flower interface element
LiquidFormcomponents/LiquidForm.jsProvides the themed form or contact interaction
MagazineSpread is the layout workhorse on this page. It arranges each project’s headline, supporting text, and imagery in a spread format that is visually distinct from the card grid used on the Projects page. The remaining components — Navigation, CursorDrops, PageTransition, TieDyeSpiral, LavaBlob, StickerSheet, ShirtRack, RainbowArch, SpiralTimeline, PatchworkQuilt, SmileyFlower, and LiquidForm — are loaded on every Color Melt page and do not require case-study-specific edits.

​
Content to Customize

Replace all starter content in the MagazineSpread data or markup with the details of your own projects. Work through each case study entry and update these fields:
1

Project name and headline

Replace the starter project title and the short headline that appears in the spread layout. The headline should capture the core problem or outcome in one line — for example, “Rebuilt a checkout flow that was losing 40% of users at step two” rather than “E-commerce project.”
2

Problem statement

Describe the situation before you started. Who had the problem, what was going wrong, and why did it matter? Keep this concise — two to four sentences is usually enough to set the context for a reader who knows nothing about the project.
3

Approach and decisions

Explain what you did and, more importantly, why you chose that approach over alternatives. Name the tools, methods, or frameworks you used and connect each choice to the problem. This section is where your thinking becomes visible.
4

Outcomes

State what changed as a result of the work. Use specific language — metrics, before-and-after comparisons, or a plain description of what now exists. Avoid vague phrases like “the project was successful.”
5

Screenshots and images

Replace placeholder images with your own project screenshots, diagrams, or mockups. Store image files in images/ and update the src paths in the spread markup accordingly. Use descriptive alt text on every image.
Case studies are where portfolio owners can explain their thinking process, not just show the finished work — include design decisions, trade-offs, and what you learned.

​
File Location

The case studies page is defined at: 
pages/CaseStudies.html
The static route is set by this script block inside the file: 
<script>
  window.__STATIC_PAGE_ROUTE__ = "/case-studies";
  if (!window.location.hash || window.location.hash === "#/" || window.location.hash === "#") {
    window.location.hash = "/case-studies";
  }
</script>
The hash-based routing (#/case-studies) allows Color Melt to function as a static site on GitHub Pages without any server-side routing configuration. The window.__STATIC_PAGE_ROUTE__ value tells the React app which page component to mount when this HTML file is loaded directly. The nav label “Behind The Swirl” is defined in components/Navigation.js and applies the bg-dye-purple background class (#6A4C93) to the active link when this route is current.

Build docs developers (and LLMs) love

Get started for freeTalk to us