init

2026-03-13 09:23:15 +00:00
commit 55ae54d2c5
21 changed files with 1071 additions and 0 deletions
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -0,0 +1,91 @@
+# 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 localhost:** `node screenshot.mjs http://localhost:3000`
+- Screenshots save automatically to `./temporary screenshots/screenshot-N.png` (auto-incremented, never overwritten).
+- Optional label suffix: `node screenshot.mjs http://localhost:3000 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/index.php` — Portfolio index + Thompson Service Centre case study
+- `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/index.php` and add a corresponding `<article id="…">` case study block below it. 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.