Day 4 — Case Study: Palette Generator

⏱️ Time needed: 45–60 minutes

🎯 Goal: Build a full case study page for your Color Palette Generator project.

📍 What’s Happening Today

This is where you tell the story of your first project. A case study isn’t just screenshots — it’s a narrative. Why did you build it? What decisions did you make? What did you learn?

Think of it like presenting a project in a portfolio review. You’re walking someone through your process.

🧠 The Concept

A strong case study typically follows this structure:

Overview — what it is, in one sentence
The Problem — why it exists, what need it fills
The Solution — what you built
Key Features — the highlights, with visuals
Process — how you built it (your vibe coding journey)
Outcome — the result, what you learned, link to live project

🚀 Let’s Go

Build the case study page for my Palette Generator (projects/palette-generator.html). Start with:
- The same navigation as all other pages
- A large hero/header area with:
  - Project title: "Palette Generator"
  - Subtitle: "A color tool for designers who move fast"
  - Tags/metadata: "Web Tool • HTML/CSS/JS • 1 Week Build"
  - A large screenshot or preview of the tool (use a placeholder for now)
- Use the full width of the page for the header image/screenshot area

Link to global.css and project.css.

Prompt 2: Overview & Problem

Below the header, add the case study content. Use a narrower content width (about 700-800px max) for readability — like a blog post layout:

Section: "Overview"
"A browser-based tool that generates random color palettes with one click. Lock colors you love, shuffle the rest, copy hex codes, and save your favorites — all without leaving the browser."

Section: "The Problem"
"Picking colors is one of the most common tasks in design, but most palette tools are either too complex or too random. I wanted something fast, focused, and frictionless — generate, lock, copy, done."

Style these as clean paragraphs with clear section headings. Use generous line-height (1.6-1.8) for readability.

Prompt 3: Key Features with Visuals

Add a "Key Features" section with 4 items, each showing:
- A small screenshot or visual (placeholder for now)
- A feature title
- A one-sentence description

Features:
1. "One-Click Generation" — "Hit the button, get a fresh palette. Every combination is unique."
2. "Lock & Shuffle" — "Keep the colors you love, randomize the rest."
3. "Click to Copy" — "Tap any swatch to copy its hex code to your clipboard."
4. "Save Favorites" — "Build a collection of palettes that persists between sessions."

Layout: alternate between image-left/text-right and image-right/text-left for visual variety. On mobile, stack them vertically (image on top, text below).

Prompt 4: Process Section

This is unique to your story — you built this with vibe coding:

Add a "Process" section that tells the story of how I built this:

Heading: "How I Built It"
Content (write this as 2-3 short paragraphs):
- I built this in one week using vibe coding — describing what I wanted in plain language and letting AI generate the code
- Each day I added one feature, starting with static swatches and ending with a fully deployed tool
- The process felt more like creative direction than traditional coding — I focused on what I wanted, not how to implement it

Add a small callout or highlighted box that says:
"Built in 7 sessions • ~30-45 min each • Zero prior coding experience"

Prompt 5: Outcome & Link

Add a final section:

Heading: "The Result"
- A large, prominent button/link: "Try the live tool →" that opens my deployed palette generator in a new tab
- Below it: "View the landing page →" linking to my Phase 2 landing page
- A short reflection: "This was my first-ever coding project. It taught me that building for the web isn't about memorizing syntax — it's about describing what you want clearly and iterating until it's right."

End with the same footer as all other pages.

🎨 Design Thinking: Case Study Layout

The best portfolio case studies:

Use generous whitespace — don’t cram content
Alternate between text and visuals — keep the eye moving
Keep text blocks short — no one reads walls of text in a portfolio
Show, don’t just tell — screenshots, GIFs, or embedded demos beat paragraphs
End with a clear link to the live work — let people experience it themselves

🎁 Bonus: Before/After or Progress Shots

Add a small "Progress" section showing how the project evolved:
- Day 1: basic swatches (simple colored rectangles)
- Day 4: with lock feature and interactions
- Day 7: final polished version

Display these as a horizontal timeline or a simple 3-image row with captions. This shows growth and process — interviewers love this.

💡 What You Learned Today

How to structure a case study page with a narrative arc (problem → solution → process → outcome)
How to create a readable long-form content layout (narrow max-width, generous line-height)
How to alternate image/text layouts for visual variety
That your vibe coding process is the story — it’s what makes your case study unique

⏭️ Tomorrow

You’ll build the second case study page — for your landing page project.

🎯 Checkpoint: Your palette generator case study page should have a hero header, overview, problem statement, key features with alternating layouts, a process section, and a link to the live project. If the content feels too wide and hard to read, try: “The text content is stretching too wide. Can you add a max-width of about 750px to the content area and center it on the page?”

Day 4 — Case Study: Palette Generator