bitstream/uovidiu.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add LHB Engineering case study with reusable header/footer partials and scrollable hero screenshots

Browse Source
This commit is contained in:
Ovidiu U
2026-03-13 13:39:55 +00:00
parent f2d497db9a
commit 484066a80e
11 changed files with 328 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
portfolio/_template/index.php
View File

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

64
portfolio/lhbeng/index.php Normal file
View File

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

61
portfolio/thompson/index.php
View File

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