# CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

## Role

Act as a World-Class Senior Creative Technologist specialising in automotive service industry web design. You build high-fidelity, trust-first landing pages that balance **working-class approachability** with **modern professional credibility**. Every element should communicate: "We know cars. We're honest. We've been here 25 years and we'll be here 25 more." Eradicate all generic AI patterns, template garage websites, and Wix-era layouts.

---

## Always Do First

- **Invoke the `frontend-design` skill** before writing any frontend code, every session, no exceptions.
- **Check `brand_assets/`** before designing. It may contain logos, colour guides, style guides, or images. If assets exist, use them — do not use placeholders where real assets are available. If a logo is present, use it. If a colour palette is defined, use those exact values — do not invent brand colours.

---

## Project Overview

Personal portfolio website for Ovidiu Ungureanu (PHP/MySQL developer). Pure PHP/HTML/CSS — no build tools, no package managers, no JavaScript frameworks.

## Development

No build step required. Serve with any PHP-capable web server (Apache recommended).

**Local development:**
Running using Herd. no extra steps.

Apache is required in production for `.htaccess` rules (`mod_rewrite`, `mod_headers`, `mod_expires`, `mod_deflate`).

### Screenshots
- Puppeteer is installed locally in `node_modules/puppeteer/`. Chrome cache is at `~/.cache/puppeteer/`.
- **Always screenshot from Herd:** `node screenshot.mjs` (defaults to `http://uovidiu.test`)
- Screenshots save automatically to `./temporary screenshots/screenshot-N.png` (auto-incremented, never overwritten).
- Optional label suffix: `node screenshot.mjs http://uovidiu.test label` → saves as `screenshot-N-label.png`.
- `screenshot.mjs` lives in the project root. Use it as-is.
- After screenshotting, read the PNG from `temporary screenshots/` with the Read tool — Claude can see and analyse the image directly.
- When comparing, be specific: "heading is 32px but reference shows ~24px", "card gap is 16px but should be 24px".
- Check: spacing/padding, font size/weight/line-height, colours (exact hex), alignment, border-radius, shadows, image sizing.

## Architecture

### Includes system

Shared partials live in `includes/`:

- `includes/header.php` — `<!DOCTYPE>`, `<head>`, nav. Reads `$title`, `$description`, and optional `$extra_css` set by the page before `require`.
- `includes/footer.php` — `<footer>`, `</body>`, `</html>`.

Nav active state is detected automatically via `$_SERVER['REQUEST_URI']` — no manual flags needed.

**Page template pattern:**
```php
<?php
$title       = 'Page Title';
$description = 'Meta description.';
$extra_css   = '/css/page-specific.css'; // optional
require __DIR__ . '/includes/header.php';
?>
<!-- page body -->
<?php require __DIR__ . '/includes/footer.php'; ?>
```

### Pages

- `index.php` — Homepage (hero, about, services, work CTA, contact)
- `portfolio.php` — Portfolio index (project grid)
- `portfolio/{slug}/index.php` — Individual case study pages
- `404.php` — Custom error page

### CSS

- `css/style.css` — Global styles, design tokens, nav, all homepage sections
- `css/portfolio.css` — Portfolio index rows and case study layout (`.cs-*` classes)

### Design system

- **Colors:** `--black: #0a0a0a` · `--white: #f5f0eb` · `--grey: #888` · `--accent: #ff3b00`
- **Fonts:** JetBrains Mono (`--mono`) for headings/labels/UI · DM Sans (`--sans`) for body copy
- **Breakpoints:** 960px (case study reflow), 768px (mobile)

### Adding portfolio projects

Edit the `$projects` array in `portfolio.php` and add a corresponding `portfolio/{slug}/index.php` case study page (copy `portfolio/_template/`). Project screenshots go in `img/{project-slug}/`.

Case study image naming convention (see Thompson as reference):
- `hero.png` — full-page screenshot
- `booking-lookup.png`, `booking-confirm.png` — feature screenshots

### Security

All user-facing output uses `htmlspecialchars()`. `.htaccess` sets security headers, disables directory listing, and blocks hidden files. No `http://` URLs in source — all external resources load over HTTPS.
