Restructure portfolio to separate index and case study pages, extract projects array to shared data file

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 `<article id="…">` 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

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%;

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://)
 ?>
 
 <div class="cs-breadcrumb">
-	<a href="/portfolio/" class="cs-back">← All Work</a>
+	<a href="/portfolio" class="cs-back">← All Work</a>
 	<span class="cs-breadcrumb-label">[<?= htmlspecialchars($cs_num) ?> / <?= htmlspecialchars($cs_code) ?>]</span>
 </div>
 
@@ -58,18 +58,14 @@ $cs_domain = 'TODO';   // e.g. 'example.co.uk' (no https://)
 </header>
 
 
-<!-- ── PROJECT OVERVIEW ──────────────────────────────────────────── -->
+<!-- ── HERO SCREENSHOT ───────────────────────────────────────────── -->
 <section class="section">
-	<div class="section-label">Project Overview</div>
+	<div class="section-label">Project Overview</div><!-- e.g. Homepage / Dashboard / Listings -->
+
 	<div class="section-content">
 		<p>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.</p>
 	</div>
-</section>
 
-
-<!-- ── HERO SCREENSHOT ───────────────────────────────────────────── -->
-<section class="section">
-	<div class="section-label">TODO Section label</div><!-- e.g. Homepage / Dashboard / Listings -->
 	<div class="screenshot-hero-wrap">
 		<div class="browser-chrome">
 			<div class="browser-dots">
@@ -90,11 +86,12 @@ $cs_domain = 'TODO';   // e.g. 'example.co.uk' (no https://)
 <!-- ── FEATURE / FLOW SCREENSHOTS (2-col) ────────────────────────── -->
 <!-- Delete this section if you don't have feature screenshots -->
 <section class="section">
-	<div class="section-label">TODO Section label</div><!-- e.g. Booking Flow / Admin Panel / Listings -->
+<div class="section-label">Project Overview</div><!-- e.g. Booking Flow / Admin Panel / Listings -->
 	<div class="services-grid">
 
 		<div class="service-item screenshot-card">
 			<span class="service-num">TODO Feature label</span><!-- e.g. Step 1 / Vehicle Lookup -->
+			<p class="screenshot-card__desc">TODO Feature description.</p>
 			<div class="browser-chrome browser-chrome--sm">
 				<div class="browser-dots">
 					<span></span><span></span><span></span>
@@ -111,6 +108,7 @@ $cs_domain = 'TODO';   // e.g. 'example.co.uk' (no https://)
 
 		<div class="service-item screenshot-card">
 			<span class="service-num">TODO Feature label</span>
+			<p class="screenshot-card__desc">TODO Feature description.</p>
 			<div class="browser-chrome browser-chrome--sm">
 				<div class="browser-dots">
 					<span></span><span></span><span></span>
@@ -143,7 +141,7 @@ $cs_domain = 'TODO';   // e.g. 'example.co.uk' (no https://)
 <section class="section section-cta">
 	<div class="section-label">— Next</div>
 	<div class="section-content">
-		<a href="/portfolio/" class="cs-back cs-back--lg">← Back to All Work</a>
+		<a href="/portfolio" class="cs-back cs-back--lg">← Back to All Work</a>
 		<p class="large-text">Got a project in mind?</p>
 		<a href="mailto:hello@uovidiu.com" class="btn">Get in Touch →</a>
 	</div>

portfolio/index.php

@@ -1,83 +1 @@
-<?php
+<?php require __DIR__ . '/../portfolio.php';
-
-$title = 'Portfolio — Ovidiu Ungureanu';
-$description = 'Selected web development projects by Ovidiu Ungureanu.';
-$extra_css = '/css/portfolio.css';
-require __DIR__.'/../includes/header.php';
-
-// Full 15-project version is in index.full.php — restore when ready.
-$projects = [
-		[
-				'slug' => '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,
-		],
-];
-?>
-
-<header class="hero">
-	<div class="hero-label">Portfolio — Selected Work</div>
-	<h1>Selected<br>Work</h1>
-	<p class="hero-sub">Client projects and builds.</p>
-</header>
-
-<section class="section">
-	<div class="section-label">001 — <?php
-		echo count($projects); ?> Projects
-	</div>
-	<div class="portfolio-grid">
-		<?php
-		foreach ($projects as $p): ?>
-			<a href="/portfolio/<?php
-			echo htmlspecialchars($p['slug']); ?>/"
-			   class="project-card<?php
-			   echo $p['live'] ? '' : ' project-card--wip'; ?>">
-
-				<div class="project-card__thumb">
-					<span class="project-card__label">[<?php
-						echo htmlspecialchars($p['num']); ?> / <?php
-						echo htmlspecialchars($p['code']); ?>]</span>
-					<?php
-					if ($p['thumb']): ?>
-						<img src="<?php
-						echo htmlspecialchars($p['thumb']); ?>"
-							 alt="<?php
-							 echo htmlspecialchars($p['title']); ?>"
-							 loading="lazy">
-					<?php
-					endif; ?>
-				</div>
-
-				<div class="project-card__body">
-					<h3 class="project-card__title"><?php
-						echo htmlspecialchars($p['title']); ?></h3>
-					<p class="project-card__desc"><?php
-						echo htmlspecialchars($p['desc']); ?></p>
-					<div class="project-card__footer">
-						<span class="project-card__year"><?php
-							echo htmlspecialchars($p['year']); ?></span>
-						<span class="project-card__arrow">→</span>
-					</div>
-				</div>
-
-			</a>
-		<?php
-		endforeach; ?>
-	</div>
-</section>
-
-<section class="section section-cta">
-	<div class="section-label">002 — Contact</div>
-	<div class="section-content">
-		<p class="large-text">Got a project in mind?</p>
-		<a href="mailto:hello@uovidiu.com" class="btn">Get in Touch →</a>
-	</div>
-</section>
-
-<?php
-require __DIR__.'/../includes/footer.php'; ?>

portfolio/thompson/index.php

@@ -7,10 +7,13 @@
  * Copy this file as a starting point for new case studies.
  *
  * Required: $title, $description, $extra_css before require header.
- * Back link: always points to /portfolio/ via .cs-back anchor.
+ * Back link: always points to /portfolio via .cs-back anchor.
  * Images: store in /img/{slug}/ — see naming convention in CLAUDE.md.
  * ─────────────────────────────────────────────────────────────────
  */
+require __DIR__.'/../../data/projects.php';
+$p = $projects['thompson'];
+
 $title = 'Thompson Service Centre — Case Study';
 $description = 'How we built a trust-first digital presence for a 25-year Peterborough garage.';
 $extra_css = '/css/portfolio.css';
@@ -18,16 +21,16 @@ require __DIR__.'/../../includes/header.php';
 ?>
 
 <div class="cs-breadcrumb">
-	<a href="/portfolio/" class="cs-back">← All Work</a>
+	<a href="/portfolio" class="cs-back">← All Work</a>
-	<span class="cs-breadcrumb-label">[01 / WEB_DEV]</span>
+	<span class="cs-breadcrumb-label">[<?= htmlspecialchars($p['num']) ?> / <?= htmlspecialchars($p['code']) ?>]</span>
 </div>
 
 <header class="hero">
-	<div class="hero-label">Case Study — 01</div>
+	<div class="hero-label">Case Study — <?= htmlspecialchars($p['num']) ?></div>
 	<h1>Thompson<br>Service Centre</h1>
-	<p class="hero-sub">Website Redesign · 2025</p>
+	<p class="hero-sub">Website Redesign - 2025</p>
 	<ul class="cs-meta-bar">
-		<li>HTML · Tailwind CSS v4 · GSAP</li>
+		<li>HTML - Tailwind CSS v4 - GSAP</li>
 		<li>Thompson Service Centre, Peterborough</li>
 		<li>2025</li>
 	</ul>
@@ -38,7 +41,7 @@ require __DIR__.'/../../includes/header.php';
 	<div class="section-label">Project Overview</div>
 	<div class="section-content">
 		<p>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.</p>
 	</div>
@@ -64,6 +67,7 @@ require __DIR__.'/../../includes/header.php';
 	<div class="services-grid">
 		<div class="service-item screenshot-card">
 			<span class="service-num">Vehicle Lookup</span>
+			<p class="screenshot-card__desc">Enter your registration plate to pull vehicle details automatically.</p>
 			<div class="browser-chrome browser-chrome--sm">
 				<div class="browser-dots">
 					<span></span><span></span><span></span>
@@ -79,6 +83,7 @@ require __DIR__.'/../../includes/header.php';
 		</div>
 		<div class="service-item screenshot-card">
 			<span class="service-num">Booking Form</span>
+			<p class="screenshot-card__desc">Confirm your vehicle and fill in the booking details in one clean step.</p>
 			<div class="browser-chrome browser-chrome--sm">
 				<div class="browser-dots">
 					<span></span><span></span><span></span>
@@ -107,7 +112,7 @@ require __DIR__.'/../../includes/header.php';
 <section class="section section-cta">
 	<div class="section-label">— Next</div>
 	<div class="section-content">
-		<a href="/portfolio/" class="cs-back cs-back--lg">← Back to All Work</a>
+		<a href="/portfolio" class="cs-back cs-back--lg">← Back to All Work</a>
 		<p class="large-text">Got a project in mind?</p>
 		<a href="mailto:hello@uovidiu.com" class="btn">Get in Touch →</a>
 	</div>