Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/colorful/llms.txt

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

The Case Studies page is where you go beyond the summary cards of the Projects page and tell the full story of your best work. Each case study walks through a project in depth: the problem you were handed, the process you followed to solve it, and the outcome you delivered. This page is especially valuable for demonstrating your thinking and decision-making to potential clients or employers. The route path is /case-studies and the Navigation component labels this page Long Story Short, styled with accent color #a855f7.
The HTML file for this page is named casestudies.html (no hyphen), but the React Router route path is /case-studies (with a hyphen). This is intentional — the file name follows the flat naming convention used across the theme, while the route path follows URL best practices. Both refer to the same page.

​
Purpose

Use the Case Studies page to provide detailed, narrative-driven breakdowns of projects you are most proud of. Where the Projects page gives visitors a headline and a link, a case study gives them the full picture: your role, the constraints you faced, the decisions you made, and what you achieved. This depth of detail builds credibility and differentiates you from portfolios that only show finished outputs.

​
Suggested Structure for Each Case Study

A consistent structure makes case studies easier to write and easier to read. For each project, consider organizing your content around three questions:
  1. Problem — What was the challenge or brief? What constraints existed? Who was the audience or user?
  2. Process — How did you approach the problem? What research, design decisions, or technical choices did you make along the way? What did you try that did not work?
  3. Outcome — What did you ship? What was the impact? What would you do differently next time?
You can adapt this structure to fit your discipline — a developer’s case study will look different from a designer’s, and both will differ from a writer’s — but the underlying arc of problem → process → outcome works across all fields.

​
How to Update the Page

Open casestudies.html and replace the placeholder content with your own case studies. For each entry:
  • Write a clear, descriptive title for the project
  • Add an introduction paragraph that sets context quickly
  • Work through the problem, process, and outcome sections with enough detail to be useful
  • Include images, screenshots, or diagrams where they clarify your process or show the finished work
  • Add a link to the live project or a related Projects page entry where appropriate

​
Navigation Integration

When a visitor is on the Case Studies page, the Long Story Short label in the floating navigation menu is highlighted with #a855f7. The route definition in Navigation.js is: 
{ path: '/case-studies', label: 'Long Story Short', color: '#a855f7' }

​
Related Docs

Projects

The summary view of your portfolio work — link from there to your case studies.

Pages Overview

Full table of all ten pages with routes, nav labels, and purposes.

Build docs developers (and LLMs) love

Get started for freeTalk to us