diff --git a/CLAUDE.md b/CLAUDE.md index 957f3a9..6133cce 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -64,7 +64,8 @@ require __DIR__ . '/includes/header.php'; ### Pages - `index.php` — Homepage (hero, about, services, work CTA, contact) -- `portfolio/index.php` — Portfolio index + Thompson Service Centre case study +- `portfolio.php` — Portfolio index (project grid) +- `portfolio/{slug}/index.php` — Individual case study pages - `404.php` — Custom error page ### CSS @@ -80,7 +81,7 @@ require __DIR__ . '/includes/header.php'; ### Adding portfolio projects -Edit the `$projects` array in `portfolio/index.php` and add a corresponding `
` case study block below it. Project screenshots go in `img/{project-slug}/`. +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 diff --git a/css/portfolio.css b/css/portfolio.css index bb8c0de..219ce97 100644 --- a/css/portfolio.css +++ b/css/portfolio.css @@ -313,6 +313,14 @@ padding: 2rem; } +.screenshot-card__desc { + font-family: var(--sans); + font-size: 0.85rem; + color: var(--grey); + margin: 0.4rem 0 1.25rem; + line-height: 1.5; +} + .screenshot-screen { display: block; width: 100%; diff --git a/img/lhbeng/admin.jpg b/img/lhbeng/admin.jpg new file mode 100644 index 0000000..048ddc9 Binary files /dev/null and b/img/lhbeng/admin.jpg differ diff --git a/img/lhbeng/hero.jpg b/img/lhbeng/hero.jpg new file mode 100644 index 0000000..2583116 Binary files /dev/null and b/img/lhbeng/hero.jpg differ diff --git a/img/thompson/booking-confirm.png b/img/thompson/booking-confirm.png deleted file mode 100644 index 8a7b747..0000000 Binary files a/img/thompson/booking-confirm.png and /dev/null differ diff --git a/img/thompson/booking-lookup.png b/img/thompson/booking-lookup.png deleted file mode 100644 index 0fdf176..0000000 Binary files a/img/thompson/booking-lookup.png and /dev/null differ diff --git a/img/thompson/hero.png b/img/thompson/hero.png deleted file mode 100644 index 2d46cd2..0000000 Binary files a/img/thompson/hero.png and /dev/null differ diff --git a/portfolio/_template/index.php b/portfolio/_template/index.php index 296c90d..ec3f5e1 100644 --- a/portfolio/_template/index.php +++ b/portfolio/_template/index.php @@ -9,7 +9,7 @@ * ────────── * 1. Copy this folder to portfolio/{slug}/ * 2. Fill in every TODO below — nothing should say TODO when live - * 3. Add the project to the $projects array in portfolio/index.php + * 3. Add the project to the $projects array in portfolio.php * 4. Drop screenshots into /img/{slug}/ * * IMAGES @@ -42,7 +42,7 @@ $cs_domain = 'TODO'; // e.g. 'example.co.uk' (no https://) ?>
- ← All Work + ← All Work [ / ]
@@ -58,18 +58,14 @@ $cs_domain = 'TODO'; // e.g. 'example.co.uk' (no https://) - +
-
Project Overview
+
Project Overview
+

TODO What problem did the client have and what did you build to fix it? Keep it to 2–3 sentences. Be specific — name the feature, the constraint, the outcome.

-
- - -
-
TODO Section label
@@ -90,11 +86,12 @@ $cs_domain = 'TODO'; // e.g. 'example.co.uk' (no https://)
-
TODO Section label
+
Project Overview
TODO Feature label +

TODO Feature description.

@@ -111,6 +108,7 @@ $cs_domain = 'TODO'; // e.g. 'example.co.uk' (no https://)
TODO Feature label +

TODO Feature description.

@@ -143,7 +141,7 @@ $cs_domain = 'TODO'; // e.g. 'example.co.uk' (no https://)
— Next
- ← Back to All Work + ← Back to All Work

Got a project in mind?

Get in Touch →
diff --git a/portfolio/index.php b/portfolio/index.php index b786652..5b0c18b 100644 --- a/portfolio/index.php +++ b/portfolio/index.php @@ -1,83 +1 @@ - 'thompson', - 'num' => '01', - 'code' => 'WEB_DEV', - 'title' => 'Thompson Service Centre', - 'desc' => 'Trust-first redesign for a 25-year Peterborough garage. Bold credibility signals, booking flow, zero clichés.', - 'year' => '2025', - 'thumb' => '/img/thompson/hero.jpg', - 'live' => true, - ], -]; -?> - -
-
Portfolio — Selected Work
-

Selected
Work

-

Client projects and builds.

-
- -
-
001 — Projects -
-
- - - -
- [ / ] - - <?php - echo htmlspecialchars($p['title']); ?> - -
- -
-

-

-
- - → -
-
- - - -
-
- -
-
002 — Contact
-
-

Got a project in mind?

- Get in Touch → -
-
- - +
- ← All Work - [01 / WEB_DEV] + ← All Work + [ / ]
-
Case Study — 01
+
Case Study —

Thompson
Service Centre

-

Website Redesign · 2025

+

Website Redesign - 2025

    -
  • HTML · Tailwind CSS v4 · GSAP
    • +
  • HTML - Tailwind CSS v4 - GSAP
  • Thompson Service Centre, Peterborough
  • 2025
@@ -38,7 +41,7 @@ require __DIR__.'/../../includes/header.php';
Project Overview

Thompson Service Centre needed more than a website — they needed a digital presence that matched 25 years of earned trust. We built a high-fidelity - landing page that puts credibility front and centre: a bold hero section, a trust bar loaded with real credentials, and service cards that + landing page that puts credibility front and center: a bold hero section, a trust bar loaded with real credentials, and service cards that communicate competence without the usual garage-site clichés. Every element was designed to make a first-time visitor feel like they'd already found their mechanic.

@@ -64,6 +67,7 @@ require __DIR__.'/../../includes/header.php';
Vehicle Lookup +

Enter your registration plate to pull vehicle details automatically.

@@ -79,6 +83,7 @@ require __DIR__.'/../../includes/header.php';
Booking Form +

Confirm your vehicle and fill in the booking details in one clean step.

@@ -107,7 +112,7 @@ require __DIR__.'/../../includes/header.php';
— Next
- ← Back to All Work + ← Back to All Work

Got a project in mind?

Get in Touch →