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