Product Requirements Document — Atelier Khelifi Portfolio Website

1. Project Overview

Yasmine Khelifi is a leather artisan who has been handcrafting luxury goods for fifteen years from her workshop in the medina of Tunis, Tunisia. She produces bags, wallets, belts, and custom pieces using vegetable-tanned leather and traditional techniques passed down from her grandmother. She sells through her workshop and two boutiques in Sidi Bou Said, but international customers who discover her work through word of mouth cannot find her online. She needs a portfolio website that showcases her craft and gives customers a way to reach her.

2. Goals

1. Showcase Yasmine's leather goods with large, high-quality photography that reveals texture, stitching, and finishing detail
2. Communicate her craft process — the vegetable tanning, hand-stitching, and traditional techniques that distinguish her work
3. Provide a direct contact channel for customers interested in commissioning or purchasing pieces
4. Deliver a responsive experience that works on mobile devices, where most international customers will discover the site

3. Target Audience

International customers — primarily in France, Italy, and the United States — who discovered Yasmine's work while visiting Tunisia and want to stay connected or place new orders. Also local customers who search online for handcrafted leather goods in Tunis. These are buyers who appreciate artisanal quality and are willing to pay premium prices for one-of-a-kind handmade pieces.

4. Site Structure

Three pages:

• index.html — Portfolio gallery. Displays 6-8 product photographs organized by category: bags, wallets, belts, and custom pieces. Each photograph is presented at large size within a <figure> element with a <figcaption> describing the piece, its materials, and its construction details.
• about.html — Process page. Long-form content about Yasmine's craft: the vegetable tanning process and why she refuses chrome tanning, her hand-stitching technique using traditional tools, and her grandmother's influence on her approach to leatherwork. Inline photographs of the workshop break up the text.
• contact.html — Contact form. Three fields: Name, Email, and Message. Yasmine prefers written communication over phone calls. No phone number displayed.

5. Design Direction

The full visual direction is documented in mockup-description.md. In summary: the site uses warm earth tones drawn from Tunisian leather and medina architecture — saddle brown, warm sand, burgundy accents on a cream background. Typography pairs a serif heading font with a clean sans-serif body font. Layout is mobile-first with three responsive breakpoints. Product photography is displayed large enough to show leather texture and stitch detail. The overall feel is warm, handmade, and personal — like stepping into the workshop.

6. Technical Requirements

• Static HTML and CSS — no JavaScript framework required
• Semantic HTML throughout: <nav>, <main>, <section>, <article>, <footer>, <figure>, <figcaption>
• Mobile-first responsive design with breakpoints at 375px (mobile), 768px (tablet), and 1280px (desktop)
• Google Fonts for typography (serif headings, sans-serif body, weights 400 and 700)
• Netlify Forms for the contact form — no backend server, no JavaScript form handling
• Deployment via Netlify CLI (netlify deploy --prod)
• HTML validation: html-validate must report 0 errors across all pages
• Lighthouse scores: Performance >= 90, Accessibility >= 90, Best Practices >= 90, SEO >= 90

7. Content Requirements

Portfolio page: 6-8 product photographs displayed at large size (minimum 600px wide on desktop, full width on mobile). Each image has descriptive alt text and a figcaption identifying the piece, its leather type, and notable construction details. Photos are organized by category: bags, wallets, belts, custom pieces.

Process page: Covers vegetable tanning (and why Yasmine refuses chrome tanning), hand-stitching technique with traditional tools, and her grandmother's influence on her craft. The tone is personal and warm — Yasmine describing her own work, not marketing copy. Inline images of the workshop break up the text.

Contact page: Simple form with three fields (Name, Email, Message) and a submit button. No phone number — Yasmine prefers written communication.

8. Out of Scope

No e-commerce functionality, shopping cart, or product pricing. No user accounts or authentication. No JavaScript interactivity beyond what Netlify Forms requires. No content management system. Yasmine's pieces are one-of-a-kind — customers see the work, reach out directly, and discuss purchases personally.