Unify label styling by replacing hero-label with section-label and comment out portfolio CTA section

Remove services heading and increase services section top padding
Redesign services section with bold typographic layout and update CTA copy across site
2026-03-14 07:45:23 +00:00 · 2026-03-14 07:29:07 +00:00 · 2026-03-14 07:18:24 +00:00 · 2026-03-13 13:39:55 +00:00 · 2026-03-13 12:52:40 +00:00 · 2026-03-13 11:37:34 +00:00
21 changed files with 539 additions and 294 deletions
--- a/.idea/deployment.xml
+++ b/.idea/deployment.xml
@@ -1,20 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="PublishConfigData" serverName="ionos - uovidiu.com" remoteFilesAllowedToDisappearOnAutoupload="false" confirmBeforeUploading="false">
-    <option name="confirmBeforeUploading" value="false" />
-    <serverData>
-      <paths name="ionos - uovidiu.com">
-        <serverdata>
-          <mappings>
-            <mapping deploy="/" local="$PROJECT_DIR$" web="/" />
-          </mappings>
-          <excludedPaths>
-            <excludedPath local="true" path="$PROJECT_DIR$/.claude" />
-            <excludedPath local="true" path="$PROJECT_DIR$/.idea" />
-            <excludedPath local="true" path="$PROJECT_DIR$/CLAUDE.MD" />
-          </excludedPaths>
-        </serverdata>
-      </paths>
-    </serverData>
-  </component>
-</project>
--- a/404.php
+++ b/404.php
@@ -22,7 +22,7 @@
    </nav>

    <header class="hero" style="text-align: center; align-items: center;">
-        <div class="hero-label">Error 404</div>
+        <div class="section-label">Error 404</div>
        <h1>Not<br>Found</h1>
        <p class="hero-sub" style="text-align: center;">This page doesn't exist. It probably never did.</p>
        <div class="hero-cta">
--- 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 `<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
--- a/css/portfolio.css
+++ b/css/portfolio.css
@@ -182,8 +182,8 @@
 .cs-meta-bar {
    list-style: none;
    display: flex;
-    flex-wrap: wrap;
-    gap: 0 2rem;
+    flex-direction: column;
+    gap: 0;
    padding: 0.75rem 1rem;
    background: var(--grey-dark);
    border-left: 6px solid var(--grey-text);
@@ -304,6 +304,37 @@
    border-bottom: 2px solid var(--accent);
 }

+.screenshot-hero-scroll {
+    position: relative;
+    max-height: 600px;
+    overflow-y: scroll;
+    scrollbar-width: thin;
+    scrollbar-color: var(--accent) #1a1a1a;
+}
+
+.screenshot-hero-scroll--no-hint::before {
+    display: none;
+}
+
+.screenshot-hero-scroll::before {
+    content: '↓ scroll to view whole page';
+    position: sticky;
+    top: 0;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    padding-top: 1.5rem;
+    height: 120px;
+    margin-bottom: -120px;
+    background: linear-gradient(to top, transparent, rgba(10, 10, 10, 0.9));
+    font-family: var(--mono);
+    font-size: 1rem;
+    letter-spacing: 0.12em;
+    color: var(--white);
+    pointer-events: none;
+    z-index: 1;
+}
+
 .screenshot-hero {
    display: block;
    width: 100%;
@@ -313,6 +344,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%;
--- a/css/style.css
+++ b/css/style.css
@@ -70,6 +70,12 @@ a {
    box-shadow: var(--shadow);
 }

+.nav-left {
+    display: flex;
+    align-items: center;
+    gap: 1.25rem;
+}
+
 .nav-logo {
    font-family: var(--mono);
    font-weight: 800;
@@ -78,6 +84,18 @@ a {
    color: var(--accent);
 }

+.nav-back {
+    font-family: var(--mono);
+    font-size: 1rem;
+    color: var(--white);
+    opacity: 0.5;
+    transition: opacity 0.15s;
+}
+
+.nav-back:hover {
+    opacity: 1;
+}
+
 .nav-links {
    display: flex;
    gap: 2rem;
@@ -101,22 +119,18 @@ a {
    display: flex;
    flex-direction: column;
    justify-content: center;
-    padding: 4rem 3rem 2rem;
+    padding: 7rem 3rem 2rem;
    border: var(--border-thick);
    background: var(--grey-light);
    margin-bottom: 2rem;
    box-shadow: var(--shadow);
 }

-.hero-label {
-    font-family: var(--mono);
-    font-size: 0.85rem;
-    text-transform: uppercase;
+.hero .section-label {
    background: var(--accent);
    color: var(--black);
-    display: inline-block;
+    font-size: 0.85rem;
    padding: 4px 12px;
-    font-weight: 900;
    margin-bottom: 2rem;
    width: fit-content;
 }
@@ -132,6 +146,10 @@ a {
    color: var(--white);
 }

+.hero h1 .h1-sub {
+    font-size: 0.6em;
+}
+
 .hero-sub {
    font-size: 1.25rem;
    color: var(--white);
@@ -223,51 +241,137 @@ a {
 }

 /* ========================================
-   SERVICES - GRID BLOCKS
+   SERVICES - LIST ROWS
   ======================================== */

-.services-grid {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 2rem;
-    background: transparent;
-}
-
-.service-item {
-    background: var(--black);
-    padding: 3rem;
-    border: var(--border-orange);
+.services-section {
+    background: var(--grey-light);
+    padding: 3rem 2.5rem 0;
+    margin-bottom: 2rem;
    box-shadow: var(--shadow);
-    transition: transform 0.2s;
 }

-.service-item:hover {
-    transform: scale(1.02);
-}
-
-.service-num {
+.services-section-label {
    font-family: var(--mono);
    font-size: 0.8rem;
-    color: var(--black);
-    background: var(--accent);
-    padding: 2px 8px;
-    display: inline-block;
-    margin-bottom: 1.5rem;
-    font-weight: 900;
-}
-
-.service-item h3 {
-    font-family: var(--mono);
-    font-size: 1.25rem;
-    font-weight: 800;
-    margin-bottom: 1rem;
-    color: var(--accent);
    text-transform: uppercase;
+    background: var(--black);
+    color: var(--accent);
+    padding: 5px 15px;
+    display: inline-block;
+    margin-bottom: 2rem;
+    font-weight: 900;
+    border: 1px solid rgba(255,255,255,0.15);
 }

-.service-item p {
+.services-heading {
+    font-family: 'Archivo Black', sans-serif;
+    font-size: clamp(4rem, 13vw, 13rem);
+    font-weight: 900;
+    text-transform: uppercase;
+    color: #ffffff;
+    line-height: 0.88;
+    letter-spacing: -0.02em;
+    margin-bottom: 3rem;
+}
+
+.services-list {
+    border-top: 1px solid rgba(255,255,255,0.2);
+}
+
+.service-row {
+    display: flex;
+    align-items: center;
+    padding: 2.5rem 1rem;
+    margin: 0 -1rem;
+    border-bottom: 1px solid rgba(255,255,255,0.2);
+    cursor: default;
+    overflow: hidden;
+    transition: background 0.15s ease;
+}
+
+.service-row:hover {
+    background: var(--black);
+}
+
+.service-row-body {
+    display: flex;
+    align-items: flex-start;
+    gap: 1.75rem;
+    flex: 1;
+    min-width: 0;
+}
+
+.service-row-num {
+    font-family: var(--mono);
    font-size: 1rem;
-    color: var(--grey-text);
+    font-weight: 700;
+    color: #ff4d00;
+    padding-top: 0.6rem;
+    white-space: nowrap;
+    flex-shrink: 0;
+}
+
+.service-row-content {
+    flex: 1;
+    min-width: 0;
+}
+
+.service-row-title {
+    font-family: var(--mono), serif;
+    font-size: clamp(3rem, 8vw, 8rem);
+    font-weight: 900;
+    text-transform: uppercase;
+    color: #ffffff;
+    line-height: 0.92;
+    letter-spacing: -0.02em;
+    margin-bottom: 1.25rem;
+    transition: color 0.15s ease;
+}
+
+.service-row:hover .service-row-title {
+    color: var(--accent);
+}
+
+.service-row-tags {
+    display: flex;
+    gap: 0.6rem;
+    flex-wrap: wrap;
+}
+
+.service-tag {
+    font-family: var(--mono);
+    font-size: 0.7rem;
+    text-transform: uppercase;
+    color: #ffffff;
+    border: 1px solid rgba(255,255,255,0.35);
+    border-radius: 100px;
+    padding: 5px 14px;
+    letter-spacing: 0.06em;
+    white-space: nowrap;
+}
+
+
+@media (max-width: 768px) {
+    .services-section {
+        padding: 2rem 1.5rem 0;
+    }
+
+    .service-row {
+        padding: 2rem 0;
+    }
+
+    .service-row-num {
+        padding-top: 0.3rem;
+    }
+
+    .service-row-arrow {
+        display: none;
+    }
+
+    .service-row-title {
+        font-size: clamp(2rem, 10vw, 3rem);
+    }
 }

 /* ========================================
--- a/data/projects.php
+++ b/data/projects.php
@@ -0,0 +1,38 @@
+<?php
+
+$projects = [
+
+	'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,
+		'h1' => ['Thompson', 'Service Centre'],
+		'sub' => 'Website Redesign · 2025',
+		'stack' => 'HTML · Tailwind CSS v4 · GSAP',
+		'location' => 'Thompson Service Centre, Peterborough',
+		'domain' => 'thompsonservicecentre.co.uk',
+		'page_title' => 'Thompson Service Centre — Case Study',
+		'page_desc' => 'How we built a trust-first digital presence for a 25-year Peterborough garage.',
+	],
+	'lhbeng' => [
+		'num' => '02',
+		'code' => 'WEB_DEV',
+		'title' => 'LHB Eng',
+		'desc' => 'Structural Engineers designing projects that build strong communities.',
+		'year' => '2022',
+		'thumb' => '/img/lhbeng/hero.jpg',
+		'live' => true,
+		'h1' => ['LHB', 'Lynch, Harrison & Brumleve, Inc.'],
+		'sub' => 'Website Redesign · 2022',
+		'stack' => 'HTML · CSS',
+		'location' => 'LHB Eng, Indianapolis',
+		'domain' => 'lhb-eng.com',
+		'page_title' => 'LHB Engineering — Case Study',
+		'page_desc' => 'Full website redesign for LHB Engineering with a self-service CMS for portfolio, team, and job listings.',
+	],
+
+];
--- a/img/lhbeng/admin.jpg
+++ b/img/lhbeng/admin.jpg
--- a/img/lhbeng/hero.jpg
+++ b/img/lhbeng/hero.jpg
--- a/img/thompson/booking-confirm.png
+++ b/img/thompson/booking-confirm.png
--- a/img/thompson/booking-lookup.png
+++ b/img/thompson/booking-lookup.png
--- a/img/thompson/hero.png
+++ b/img/thompson/hero.png
--- a/includes/cs_footer.php
+++ b/includes/cs_footer.php
@@ -0,0 +1,12 @@
+
+<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>
+		<p class="large-text">Got a project in mind?</p>
+		<a href="mailto:hello@uovidiu.com" class="btn">Let's Talk →</a>
+	</div>
+</section>
+
+<script src="/js/screenshot-scroll-hint.js"></script>
+<?php require __DIR__ . '/footer.php'; ?>
--- a/includes/cs_header.php
+++ b/includes/cs_header.php
@@ -0,0 +1,38 @@
+<?php
+
+/*
+ * Case Study Header Partial
+ * ─────────────────────────────────────────────────────────────────
+ * Requires the following variables set by the calling page BEFORE
+ * requiring this file:
+ *
+ *   $cs_slug   string   Key into $projects, e.g. 'thompson'
+ *
+ * Everything else ($title, $description, hero content) is read from
+ * $projects[$cs_slug] in data/projects.php.
+ * ─────────────────────────────────────────────────────────────────
+ */
+
+$extra_css   = '/css/portfolio.css';
+require __DIR__ . '/../data/projects.php';
+$p           = $projects[$cs_slug];
+$title       = $p['page_title'];
+$description = $p['page_desc'];
+require __DIR__ . '/header.php';
+?>
+
+<div class="cs-breadcrumb">
+	<a href="/portfolio" class="cs-back">← All Work</a>
+	<span class="cs-breadcrumb-label">[<?= htmlspecialchars($p['num']) ?> / <?= htmlspecialchars($p['code']) ?>]</span>
+</div>
+
+<header class="hero">
+	<div class="section-label">Case Study — <?= htmlspecialchars($p['num']) ?></div>
+	<h1><?= htmlspecialchars($p['h1'][0]) ?><br><span class="h1-sub"><?= htmlspecialchars($p['h1'][1]) ?></span></h1>
+	<p class="hero-sub"><?= htmlspecialchars($p['sub']) ?></p>
+	<ul class="cs-meta-bar">
+		<li><?= htmlspecialchars($p['stack']) ?></li>
+		<li><?= htmlspecialchars($p['location']) ?></li>
+		<li><?= htmlspecialchars($p['year']) ?></li>
+	</ul>
+</header>
--- a/includes/header.php
+++ b/includes/header.php
@@ -7,7 +7,7 @@
    <meta name="description" content="<?php echo htmlspecialchars($description); ?>">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=DM+Sans:wght@400;500&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700;900&family=DM+Sans:wght@400;500&family=Archivo+Black&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/css/style.css">
    <?php if (!empty($extra_css)): ?>
        <link rel="stylesheet" href="<?php echo htmlspecialchars($extra_css); ?>">
@@ -17,7 +17,12 @@

    <?php $current = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH); ?>
    <nav class="nav">
-        <a href="/" class="nav-logo">OU</a>
+        <div class="nav-left">
+            <a href="/" class="nav-logo">OU</a>
+            <?php if (str_starts_with($current, '/portfolio/')): ?>
+                <a href="/portfolio" class="nav-back">←(back)</a>
+            <?php endif; ?>
+        </div>
        <div class="nav-links">
            <a href="/#about">About</a>
            <a href="/#services">Services</a>
--- a/index.php
+++ b/index.php
@@ -6,12 +6,12 @@ require __DIR__.'/includes/header.php';
 ?>

 <header class="hero">
-	<div class="hero-label">Web Developer — UK</div>
+	<div class="section-label">Web Developer — UK</div>
 	<h1>Ovidiu<br>Ungureanu</h1>
 	<p class="hero-sub">I build web applications that work.<br>PHP, MySQL, clean code, no nonsense.</p>
 	<div class="hero-cta">
 		<a href="/portfolio" class="btn">View Work →</a>
-		<a href="#contact" class="btn btn-ghost">Get in Touch</a>
+		<a href="#contact" class="btn btn-ghost">Let's Talk</a>
 	</div>
 </header>

@@ -24,39 +24,71 @@ require __DIR__.'/includes/header.php';
 	</div>
 </section>

-<section id="services" class="section">
-	<div class="section-label">002 — Services</div>
-	<div class="services-grid">
-		<div class="service-item">
-			<span class="service-num">01</span>
-			<h3>Website Design & Development</h3>
-			<p>Clean, fast websites that look great on any device. Whether it's a refresh or a brand new site, built to make a good first impression.</p>
-		</div>
-		<div class="service-item">
-			<span class="service-num">02</span>
-			<h3>Custom Tools & Systems</h3>
-			<p>Need a booking page, job tracker, or customer portal? I'll build exactly what your business needs — no bloated templates.</p>
-		</div>
-		<div class="service-item">
-			<span class="service-num">03</span>
-			<h3>Booking & Scheduling Systems</h3>
-			<p>Let your customers book online, manage appointments, and cut down on phone tag. Perfect for garages, salons, and service businesses.</p>
-		</div>
-		<div class="service-item">
-			<span class="service-num">04</span>
-			<h3>Ongoing Support & Updates</h3>
-			<p>Already got a website that needs some love? I'll tidy it up, speed it up, and keep it running smoothly.</p>
-		</div>
+<section id="services" class="services-section">
+	<div class="services-section-label">002 — Services</div>
+	<div class="services-list">
+		<div class="service-row">
+			<div class="service-row-body">
+				<span class="service-row-num">(01)</span>
+				<div class="service-row-content">
+					<h3 class="service-row-title">Website Design<br>&amp; Development</h3>
+					<div class="service-row-tags">
+						<span class="service-tag">Design</span>
+						<span class="service-tag">Development</span>
+						<span class="service-tag">Responsive</span>
+					</div>
+				</div>
+			</div>
+			</div>
+		<div class="service-row">
+			<div class="service-row-body">
+				<span class="service-row-num">(02)</span>
+				<div class="service-row-content">
+					<h3 class="service-row-title">Custom Tools<br>&amp; Systems</h3>
+					<div class="service-row-tags">
+						<span class="service-tag">PHP</span>
+						<span class="service-tag">MySQL</span>
+						<span class="service-tag">Custom Builds</span>
+					</div>
+				</div>
+			</div>
+			</div>
+		<div class="service-row">
+			<div class="service-row-body">
+				<span class="service-row-num">(03)</span>
+				<div class="service-row-content">
+					<h3 class="service-row-title">Booking &amp;<br>Scheduling</h3>
+					<div class="service-row-tags">
+						<span class="service-tag">Bookings</span>
+						<span class="service-tag">Automation</span>
+						<span class="service-tag">Small Business</span>
+					</div>
+				</div>
+			</div>
+			</div>
+		<div class="service-row">
+			<div class="service-row-body">
+				<span class="service-row-num">(04)</span>
+				<div class="service-row-content">
+					<h3 class="service-row-title">Ongoing Support<br>&amp; Updates</h3>
+					<div class="service-row-tags">
+						<span class="service-tag">Maintenance</span>
+						<span class="service-tag">Performance</span>
+						<span class="service-tag">Support</span>
+					</div>
+				</div>
+			</div>
+			</div>
 	</div>
 </section>

-<section class="section section-cta">
-	<div class="section-label">003 — Work</div>
-	<div class="section-content">
-		<p class="large-text">A few recent builds.</p>
-		<a href="/portfolio" class="btn">View Work →</a>
-	</div>
-</section>
+<!--<section class="section section-cta">-->
+<!--	<div class="section-label">003 — Work</div>-->
+<!--	<div class="section-content">-->
+<!--		<p class="large-text">A few recent builds.</p>-->
+<!--		<a href="/portfolio" class="btn">View Work →</a>-->
+<!--	</div>-->
+<!--</section>-->

 <section id="contact" class="section">
 	<div class="section-label">004 — Contact</div>
--- a/js/screenshot-scroll-hint.js
+++ b/js/screenshot-scroll-hint.js
@@ -0,0 +1,13 @@
+document.querySelectorAll('.screenshot-hero-scroll').forEach(function (el) {
+    var img = el.querySelector('img');
+    function check() {
+        if (el.scrollHeight <= el.clientHeight) {
+            el.classList.add('screenshot-hero-scroll--no-hint');
+        }
+    }
+    if (img && !img.complete) {
+        img.addEventListener('load', check);
+    } else {
+        check();
+    }
+});
--- a/portfolio.php
+++ b/portfolio.php
@@ -0,0 +1,71 @@
+<?php
+
+$title = 'Portfolio — Ovidiu Ungureanu';
+$description = 'Selected web development projects by Ovidiu Ungureanu.';
+$extra_css = '/css/portfolio.css';
+require __DIR__.'/includes/header.php';
+
+require __DIR__ . '/data/projects.php';
+?>
+
+<header class="hero">
+	<div class="section-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 $slug => $p): ?>
+			<a href="/portfolio/<?php
+			echo htmlspecialchars($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">Let's Talk →</a>
+	</div>
+</section>
+
+<?php
+require __DIR__.'/includes/footer.php'; ?>
--- 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 an entry to $projects in data/projects.php (including page_title, page_desc)
 * 4. Drop screenshots into /img/{slug}/
 *
 * IMAGES
@@ -25,64 +25,39 @@
 * · Hero screenshot    — always include
 * · Feature section    — include if there's a flow / feature worth showing
 * · Craft & Execution  — include if the build has something worth saying
- * · CTA                — always include, do not change
+ * · CTA                — always include, comes from cs_footer.php
 * ═══════════════════════════════════════════════════════════════════
 */

-// ── Page config ───────────────────────────────────────────────────
-$title       = 'TODO Client Name — Case Study';   // e.g. 'Northgate Motors — Case Study'
-$description = 'TODO One sentence about what you built and for whom.';
-$extra_css   = '/css/portfolio.css';
-require __DIR__ . '/../../includes/header.php';
-
-// ── Project config (matches portfolio/index.php entry) ────────────
-$cs_num    = 'TODO';   // e.g. '02'
-$cs_code   = 'TODO';   // e.g. 'WEB_DEV' / 'E_COMMERCE' / 'BOOKING' / 'LANDING' / 'FULL_BUILD'
-$cs_domain = 'TODO';   // e.g. 'example.co.uk' (no https://)
+// ── Set the slug — everything else lives in data/projects.php ─────
+$cs_slug = 'TODO';   // e.g. 'northgate'
+require __DIR__ . '/../../includes/cs_header.php';
 ?>

-<div class="cs-breadcrumb">
-	<a href="/portfolio/" class="cs-back">← All Work</a>
-	<span class="cs-breadcrumb-label">[<?= htmlspecialchars($cs_num) ?> / <?= htmlspecialchars($cs_code) ?>]</span>
-</div>
-
-<header class="hero">
-	<div class="hero-label">Case Study — <?= htmlspecialchars($cs_num) ?></div>
-	<h1>TODO<br>Client Name</h1>                    <!-- break the name naturally across 2 lines -->
-	<p class="hero-sub">TODO Type · TODO Year</p>  <!-- e.g. Website Redesign · 2025 -->
-	<ul class="cs-meta-bar">
-		<li>TODO Stack</li>                         <!-- e.g. PHP · MySQL · Tailwind CSS -->
-		<li>TODO Client, Location</li>              <!-- e.g. Northgate Motors, Peterborough -->
-		<li>TODO Year</li>                          <!-- e.g. 2025 -->
-	</ul>
-</header>
-
-
-<!-- ── PROJECT OVERVIEW ──────────────────────────────────────────── -->
-<section class="section">
-	<div class="section-label">Project Overview</div>
-	<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="section-label">Project Overview</div>
+
+	<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>
+
 	<div class="screenshot-hero-wrap">
 		<div class="browser-chrome">
 			<div class="browser-dots">
 				<span></span><span></span><span></span>
 			</div>
-			<span class="browser-url"><?= htmlspecialchars($cs_domain) ?></span>
+			<span class="browser-url"><?= htmlspecialchars($p['domain']) ?></span>
+		</div>
+		<div class="screenshot-hero-scroll">
+			<img
+				src="/img/<?= htmlspecialchars($cs_slug) ?>/hero.jpg"
+				alt="TODO Client Name — TODO description"
+				class="screenshot-hero"
+				loading="lazy"
+			>
 		</div>
-		<img
-			src="/img/TODO-slug/hero.jpg"
-			alt="TODO Client Name — TODO description"
-			class="screenshot-hero"
-			loading="lazy"
-		>
 	</div>
 </section>

@@ -90,19 +65,20 @@ $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">TODO Section Label</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>
 				</div>
-				<span class="browser-url"><?= htmlspecialchars($cs_domain) ?>/TODO-path</span>
+				<span class="browser-url"><?= htmlspecialchars($p['domain']) ?>/TODO-path</span>
 			</div>
 			<img
-				src="/img/TODO-slug/feature-1.jpg"
+				src="/img/<?= htmlspecialchars($cs_slug) ?>/feature-1.jpg"
 				alt="TODO description"
 				class="screenshot-screen"
 				loading="lazy"
@@ -111,14 +87,15 @@ $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>
 				</div>
-				<span class="browser-url"><?= htmlspecialchars($cs_domain) ?>/TODO-path</span>
+				<span class="browser-url"><?= htmlspecialchars($p['domain']) ?>/TODO-path</span>
 			</div>
 			<img
-				src="/img/TODO-slug/feature-2.jpg"
+				src="/img/<?= htmlspecialchars($cs_slug) ?>/feature-2.jpg"
 				alt="TODO description"
 				class="screenshot-screen"
 				loading="lazy"
@@ -138,15 +115,4 @@ $cs_domain = 'TODO';   // e.g. 'example.co.uk' (no https://)
 	</div>
 </section>

-
-<!-- ── CTA — DO NOT CHANGE ───────────────────────────────────────── -->
-<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>
-		<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'; ?>
+<?php require __DIR__ . '/../../includes/cs_footer.php'; ?>
--- a/portfolio/index.php
+++ b/portfolio/index.php
@@ -1,83 +1 @@
-<?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'; ?>
+<?php require __DIR__ . '/../portfolio.php';
--- a/portfolio/lhbeng/index.php
+++ b/portfolio/lhbeng/index.php
@@ -0,0 +1,64 @@
+<?php
+$cs_slug = 'lhbeng';
+require __DIR__ . '/../../includes/cs_header.php';
+?>
+
+<!-- ── HERO SCREENSHOT ───────────────────────────────────────────── -->
+<section class="section">
+	<div class="section-label">Project Overview</div>
+	<div class="section-content">
+		<p>Full website redesign with a simple content manager — so you can update your portfolio, team profiles, and job listings yourself without needing a developer every time.</p>
+	</div>
+	<div class="screenshot-hero-wrap">
+		<div class="browser-chrome">
+			<div class="browser-dots">
+				<span></span><span></span><span></span>
+			</div>
+			<span class="browser-url"><?= htmlspecialchars($p['domain']) ?></span>
+		</div>
+		<img
+			src="/img/lhbeng/hero.jpg"
+			alt="LHB Engineering — Homepage"
+			class="screenshot-hero"
+			loading="lazy"
+		>
+	</div>
+</section>
+
+
+<!-- ── FEATURE / FLOW SCREENSHOTS (2-col) ────────────────────────── -->
+<section class="section">
+	<div class="section-label">Website CMS</div>
+	<div class="services-grid">
+
+		<div class="service-item screenshot-card">
+			<span class="service-num">Website CMS</span>
+			<p class="screenshot-card__desc">Full-fledged CMS for content.</p>
+			<div class="browser-chrome browser-chrome--sm">
+				<div class="browser-dots">
+					<span></span><span></span><span></span>
+				</div>
+				<span class="browser-url"><?= htmlspecialchars($p['domain']) ?>/admin</span>
+			</div>
+			<img
+				src="/img/lhbeng/admin.jpg"
+				alt="LHB Engineering CMS admin panel"
+				class="screenshot-screen"
+				loading="lazy"
+			>
+		</div>
+
+	</div>
+</section>
+
+
+<!-- ── CRAFT & EXECUTION ─────────────────────────────────────────── -->
+<section class="section">
+	<div class="section-label">Craft & Execution</div>
+	<div class="section-content">
+		<p>Built a full redesign for LHB Engineering, replacing their outdated site with a clean, modern layout that better reflects the scale and quality of their work. <br/>The new site is fast, fully responsive, and structured so visitors can quickly find services, past projects, and contact details. <br/>
+			Alongside the redesign, I built a simple CMS so the team can manage their portfolio, staff profiles, and job listings themselves — no developer needed for day-to-day updates.</p>
+	</div>
+</section>
+
+<?php require __DIR__ . '/../../includes/cs_footer.php'; ?>
--- a/portfolio/thompson/index.php
+++ b/portfolio/thompson/index.php
@@ -1,44 +1,14 @@
 <?php
-
-/*
- * CASE STUDY PAGE TEMPLATE
- * ─────────────────────────────────────────────────────────────────
- * Each project gets its own directory under portfolio/{slug}/
- * 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.
- * Images: store in /img/{slug}/ — see naming convention in CLAUDE.md.
- * ─────────────────────────────────────────────────────────────────
- */
-$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';
-require __DIR__.'/../../includes/header.php';
+$cs_slug = 'thompson';
+require __DIR__ . '/../../includes/cs_header.php';
 ?>

-<div class="cs-breadcrumb">
-	<a href="/portfolio/" class="cs-back">← All Work</a>
-	<span class="cs-breadcrumb-label">[01 / WEB_DEV]</span>
-</div>
-
-<header class="hero">
-	<div class="hero-label">Case Study — 01</div>
-	<h1>Thompson<br>Service Centre</h1>
-	<p class="hero-sub">Website Redesign · 2025</p>
-	<ul class="cs-meta-bar">
-		<li>HTML · Tailwind CSS v4 · GSAP</li>
-		<li>Thompson Service Centre, Peterborough</li>
-		<li>2025</li>
-	</ul>
-</header>
-
 <section class="section">

 	<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>
@@ -48,14 +18,16 @@ require __DIR__.'/../../includes/header.php';
 			<div class="browser-dots">
 				<span></span><span></span><span></span>
 			</div>
-			<span class="browser-url">thompsonservicecentre.co.uk</span>
+			<span class="browser-url"><?= htmlspecialchars($p['domain']) ?></span>
 		</div>
-		<img
+		<div class="screenshot-hero-scroll">
+			<img
 				src="/img/thompson/hero.jpg"
 				alt="Thompson Service Centre — Homepage"
 				class="screenshot-hero"
 				loading="lazy"
-		>
+			>
+		</div>
 	</div>
 </section>

@@ -64,11 +36,12 @@ 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>
 				</div>
-				<span class="browser-url">thompsonservicecentre.co.uk/book</span>
+				<span class="browser-url"><?= htmlspecialchars($p['domain']) ?>/book</span>
 			</div>
 			<img
 					src="/img/thompson/booking-lookup.jpg"
@@ -79,11 +52,12 @@ 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>
 				</div>
-				<span class="browser-url">thompsonservicecentre.co.uk/book</span>
+				<span class="browser-url"><?= htmlspecialchars($p['domain']) ?>/book</span>
 			</div>
 			<img
 					src="/img/thompson/booking-confirm.jpg"
@@ -104,14 +78,4 @@ require __DIR__.'/../../includes/header.php';
 	</div>
 </section>

-<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>
-		<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'; ?>
+<?php require __DIR__ . '/../../includes/cs_footer.php'; ?>
Author	SHA1	Message	Date
Ovidiu U	43ba520dae	Unify label styling by replacing hero-label with section-label and comment out portfolio CTA section	2026-03-14 07:45:23 +00:00
Ovidiu U	a4be60147d	Remove services heading and increase services section top padding	2026-03-14 07:29:07 +00:00
Ovidiu U	a4c8912b61	Redesign services section with bold typographic layout and update CTA copy across site	2026-03-14 07:18:24 +00:00
Ovidiu U	484066a80e	Add LHB Engineering case study with reusable header/footer partials and scrollable hero screenshots	2026-03-13 13:39:55 +00:00
Ovidiu U	f2d497db9a	Restructure portfolio to separate index and case study pages, extract projects array to shared data file	2026-03-13 12:52:40 +00:00
Ovidiu U	5bc807210d	Remove deployment.xml from tracking .idea/ is in .gitignore — this file was committed before the rule existed. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-03-13 11:37:34 +00:00