119 lines
4.9 KiB
PHP
119 lines
4.9 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 an entry to $projects in data/projects.php (including page_title, page_desc)
|
||
* 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, comes from cs_footer.php
|
||
* ═══════════════════════════════════════════════════════════════════
|
||
*/
|
||
|
||
// ── Set the slug — everything else lives in data/projects.php ─────
|
||
$cs_slug = 'TODO'; // e.g. 'northgate'
|
||
require __DIR__ . '/../../includes/cs_header.php';
|
||
?>
|
||
|
||
|
||
<!-- ── HERO SCREENSHOT ───────────────────────────────────────────── -->
|
||
<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>
|
||
|
||
<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>
|
||
<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>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<!-- ── 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="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($p['domain']) ?>/TODO-path</span>
|
||
</div>
|
||
<img
|
||
src="/img/<?= htmlspecialchars($cs_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($p['domain']) ?>/TODO-path</span>
|
||
</div>
|
||
<img
|
||
src="/img/<?= htmlspecialchars($cs_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>
|
||
|
||
<?php require __DIR__ . '/../../includes/cs_footer.php'; ?>
|