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
13 changed files with 517 additions and 182 deletions
--- 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/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%;
--- 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/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.php
+ * 3. Add an entry to $projects in data/projects.php (including page_title, page_desc)
 * 4. Drop screenshots into /img/{slug}/
 *
 * IMAGES
@@ -25,42 +25,19 @@
 * · 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>
-

 <!-- ── HERO SCREENSHOT ───────────────────────────────────────────── -->
 <section class="section">
-	<div class="section-label">Project Overview</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>
@@ -71,14 +48,16 @@ $cs_domain = 'TODO';   // e.g. 'example.co.uk' (no https://)
 			<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>

@@ -86,7 +65,7 @@ $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">Project Overview</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">
@@ -96,10 +75,10 @@ $cs_domain = 'TODO';   // e.g. 'example.co.uk' (no https://)
 				<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"
@@ -113,10 +92,10 @@ $cs_domain = 'TODO';   // e.g. 'example.co.uk' (no https://)
 				<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"
@@ -136,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/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,41 +1,8 @@
 <?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.
- * ─────────────────────────────────────────────────────────────────
- */
-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';
-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">[<?= htmlspecialchars($p['num']) ?> / <?= htmlspecialchars($p['code']) ?>]</span>
-</div>
-
-<header class="hero">
-	<div class="hero-label">Case Study — <?= htmlspecialchars($p['num']) ?></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>
@@ -51,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>

@@ -72,7 +41,7 @@ require __DIR__.'/../../includes/header.php';
 				<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"
@@ -88,7 +57,7 @@ require __DIR__.'/../../includes/header.php';
 				<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"
@@ -109,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