93 lines
4.2 KiB
Markdown
93 lines
4.2 KiB
Markdown
# 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.
|