Learn by Directing AI
All materials

CLAUDE.md

Atelier Khelifi — Portfolio Website

Client

Yasmine Khelifi, owner and sole artisan at Atelier Khelifi. Handcrafted leather goods — bags, wallets, belts, and custom pieces. Workshop in the Medina of Tunis, Tunisia. Fifteen years of craft using vegetable-tanned leather and traditional techniques passed down from her grandmother. Sells from her workshop and through two boutiques in Sidi Bou Said. International customers find her through word of mouth but can't find her online.

What you're building

A portfolio website that displays Yasmine's leather goods with large photographs, explains her craft and process, and gives customers a way to contact her. This is not an online shop — her pieces are one-of-a-kind and she handles orders personally. The site exists so people can see the work, understand the craft, and get in touch.

Tech stack

  • Static HTML and CSS — no JavaScript framework
  • Semantic HTML (<nav>, <main>, <section>, <article>, <footer>, <figure>, <figcaption>)
  • Mobile-first responsive design (375px → 768px → 1280px)
  • Google Fonts for typography
  • Netlify Forms for the contact form (no backend)
  • Netlify CLI for deployment (netlify deploy --prod)

Color palette

Role Hex Notes
Primary #8B4513 Saddle brown — the leather
Secondary #D2B48C Warm sand — medina walls
Accent #6B1C23 Deep burgundy — dyed leather
Background #FDF5E6 Cream / off-white — never pure white
Text #3E2723 Dark brown — warm, readable

File structure

index.html              # portfolio gallery page
about.html              # process page — Yasmine's craft
contact.html            # contact form
css/
  styles.css            # all styles, mobile-first
images/                 # Yasmine's product photos (web-optimized)
photos/                 # original high-res photos (reference only)
CLAUDE.md               # this file — project governance
prd.md                  # product requirements (reference)
mockup-description.md   # design direction (reference)

Verification targets

Check Target
html-validate 0 errors across all HTML files
Lighthouse Performance >= 90
Lighthouse Accessibility >= 90
Lighthouse Best Practices >= 90
Lighthouse SEO >= 90

Commit convention

Commit after completing each ticket. Reference the ticket ID in the message. Example: T3: Add portfolio gallery with responsive grid.

Tickets

Work through tickets in order. Each ticket has acceptance criteria — verify them before moving on.

T0: Project Setup

Initialize the project, set up version control, and create the project management infrastructure.

  • Create a Git repository (git init)
  • Create a GitHub repo and push initial commit
  • Break out all tickets below into backlog.md with T-prefixed IDs, descriptions, and acceptance criteria
  • Create GitHub issues for each ticket (T1-T7)
  • Create a GitHub project board and add all issues to it
  • Copy the product photos from photos/ into images/ (web-optimized versions)

Acceptance criteria:

  • Git repo initialized and pushed to GitHub
  • backlog.md exists with all tickets broken out
  • GitHub issues created for T1-T7
  • GitHub project board created with all issues
  • images/ directory contains web-optimized product photos

T1: Site Structure

Build the HTML skeleton for the site with semantic elements and shared navigation.

  • Create index.html, about.html, contact.html
  • Shared navigation bar linking all three pages
  • Use semantic HTML throughout: <nav>, <main>, <section>, <article>, <footer>, <figure>, <figcaption>
  • No <div> where a semantic element belongs

Acceptance criteria:

  • All three pages load without errors
  • Navigation links work between all pages
  • Semantic elements used throughout — no <div> soup
  • Valid HTML structure (doctype, lang, head, body)

T2: Responsive CSS

Implement mobile-first CSS with the color palette and typography.

  • Base styles for 375px mobile viewport
  • Media queries for tablet (768px) and desktop (1280px)
  • Color palette from the table above — saddle brown, warm sand, burgundy accent, cream background
  • Google Fonts loaded with appropriate weights (400, 700)
  • Body text 16-18px with 1.5-1.6 line height

Acceptance criteria:

  • Layout usable at 375px, 768px, and 1280px
  • No horizontal scrolling at any width
  • Color palette matches the spec
  • Typography loaded from Google Fonts
  • Body text readable at all viewport widths

T3: Portfolio Gallery

Build the portfolio gallery displaying Yasmine's leather goods at large size.

  • Responsive grid layout — single column on mobile, multi-column on desktop
  • Each image in a <figure> with <figcaption> describing the piece
  • Images minimum 600px wide on desktop, full width on mobile
  • Gallery organized by category: bags, wallets, belts, custom pieces
  • Use the photos from images/

Acceptance criteria:

  • 6-8 product photos displayed
  • Images minimum 600px wide on desktop
  • Images scale proportionally on mobile (no cropping, no distortion)
  • Every image has descriptive alt text (not "image" or "photo")
  • <figure> and <figcaption> used for each image

T4: Process Page

Build the "About My Process" page with content about Yasmine's craft.

  • Vegetable tanning process and why she refuses chrome tanning
  • Hand-stitching technique and traditional tools
  • Her grandmother's influence
  • Inline images of the workshop breaking up the text
  • Tone: personal and warm — Yasmine describing her own work, not marketing copy

Acceptance criteria:

  • Content covers vegetable tanning, hand-stitching, tools, grandmother's influence
  • Semantic heading hierarchy (h2 for sections, h3 for subsections, no skipped levels)
  • Inline images break up the text
  • Tone reads like a craftsperson talking about their work

T5: Contact Form

Build the contact form using Netlify Forms.

  • Three fields: Name (text), Email (email), Message (textarea)
  • Netlify Forms attribute on the form element
  • Submit button styled with burgundy accent color
  • All fields have associated <label> elements
  • No backend, no JavaScript form handling

Acceptance criteria:

  • Form contains Name, Email, and Message fields
  • Form includes netlify attribute
  • Submit button uses burgundy accent #6B1C23
  • All fields have <label> elements
  • Form submits without requiring a backend server

T6: Final Verification

Run verification tools and fix every issue they find.

  • Run npx html-validate against all HTML files — fix every error
  • Run Lighthouse in Chrome DevTools — read audit findings and fix issues until all four categories meet target
  • Every fix addresses a specific finding — no blind generic fixes

Acceptance criteria:

  • html-validate reports 0 errors
  • Lighthouse Performance >= 90
  • Lighthouse Accessibility >= 90
  • Lighthouse Best Practices >= 90
  • Lighthouse SEO >= 90

T7: Deploy to Netlify

Deploy the finished site to production.

  • Install Netlify CLI if needed (npm install -g netlify-cli)
  • Connect to Netlify account (netlify login)
  • Deploy to production (netlify deploy --prod)
  • Verify the live site works — all pages load, navigation works, form submits, images display

Acceptance criteria:

  • Site deployed to a live Netlify URL
  • All three pages accessible via the live URL
  • Navigation works between pages
  • Contact form submits successfully
  • Images display at correct sizes
  • No console errors in browser DevTools