151 lines
6.5 KiB
PHP
151 lines
6.5 KiB
PHP
<?php
|
||
|
||
/*
|
||
* ═══════════════════════════════════════════════════════════════════
|
||
* CASE STUDY TEMPLATE
|
||
* ═══════════════════════════════════════════════════════════════════
|
||
*
|
||
* HOW TO USE
|
||
* ──────────
|
||
* 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
|
||
* 4. Drop screenshots into /img/{slug}/
|
||
*
|
||
* IMAGES
|
||
* ──────
|
||
* hero.jpg — full-page screenshot (used as grid thumbnail too)
|
||
* feature-1.jpg — first feature / flow screenshot
|
||
* feature-2.jpg — second feature / flow screenshot
|
||
* Add more as needed — duplicate the 2-col screenshot section below.
|
||
*
|
||
* SECTIONS (delete what you don't need)
|
||
* ──────────────────────────────────────
|
||
* · Project Overview — always include
|
||
* · 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
|
||
* ═══════════════════════════════════════════════════════════════════
|
||
*/
|
||
|
||
// ── 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://)
|
||
?>
|
||
|
||
<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-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>
|
||
</div>
|
||
<img
|
||
src="/img/TODO-slug/hero.jpg"
|
||
alt="TODO Client Name — TODO description"
|
||
class="screenshot-hero"
|
||
loading="lazy"
|
||
>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<!-- ── 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="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>
|
||
</div>
|
||
<img
|
||
src="/img/TODO-slug/feature-1.jpg"
|
||
alt="TODO description"
|
||
class="screenshot-screen"
|
||
loading="lazy"
|
||
>
|
||
</div>
|
||
|
||
<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>
|
||
</div>
|
||
<img
|
||
src="/img/TODO-slug/feature-2.jpg"
|
||
alt="TODO description"
|
||
class="screenshot-screen"
|
||
loading="lazy"
|
||
>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<!-- ── CRAFT & EXECUTION ─────────────────────────────────────────── -->
|
||
<!-- Delete this section if there's nothing distinctive about the build -->
|
||
<section class="section">
|
||
<div class="section-label">Craft & Execution</div>
|
||
<div class="section-content">
|
||
<p>TODO Anything worth saying about how it was built — a technical decision, a performance win, something that made the difference. If you can't think of anything specific, delete this section.</p>
|
||
</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'; ?>
|