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
$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'; ?>

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.

4.2 KiB Raw Blame History