Move portfolio case studies to data-driven template system and archive old individual files
This commit is contained in:
Ovidiu U
132
_portfolio/project/index.php
Normal file
132
_portfolio/project/index.php
Normal file
@@ -0,0 +1,132 @@
|
||||
<?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 = 'project'; // e.g. 'northgate'
|
||||
require __DIR__ . '/../../includes/cs_header.php';
|
||||
?>
|
||||
|
||||
<main>
|
||||
|
||||
<section class="cs-overview">
|
||||
<div class="cs-overview-label">
|
||||
<span class="section-label">Project Overview</span>
|
||||
</div>
|
||||
<div class="cs-overview-body">
|
||||
<p class="cs-overview-text">
|
||||
Thompson Service Centre needed more than a website — they needed a digital presence that matched 25 years of earned trust. We built a high-fidelity landing page that puts credibility front and centre: a bold hero section, a trust bar loaded with real credentials, and service cards that communicate competence without the usual garage-site clichés.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="category-divider">
|
||||
<h2>Screenshots</h2>
|
||||
</div>
|
||||
|
||||
<section class="screenshots-section">
|
||||
|
||||
<div class="screenshot-hero">
|
||||
<div class="browser-frame">
|
||||
<div class="browser-bar">
|
||||
<div class="browser-dots">
|
||||
<span class="browser-dot browser-dot--red"></span>
|
||||
<span class="browser-dot browser-dot--beige"></span>
|
||||
<span class="browser-dot browser-dot--green"></span>
|
||||
</div>
|
||||
<span class="browser-url"><?php echo htmlspecialchars($p['domain']); ?></span>
|
||||
</div>
|
||||
<div class="browser-scroll-wrap">
|
||||
<div class="browser-scroll">
|
||||
<img src="/img/thompson/hero.jpg" alt="Thompson Service Centre — Homepage">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="screenshots-label">
|
||||
<span class="section-label">Booking Flow</span>
|
||||
</div>
|
||||
|
||||
<div class="screenshot-grid">
|
||||
|
||||
<div>
|
||||
<span class="screenshot-card-label">Vehicle Lookup</span>
|
||||
<p class="screenshot-card-desc">Registration plate lookup pulls vehicle details instantly — reducing form friction and building user confidence from the first interaction.</p>
|
||||
<div class="browser-frame">
|
||||
<div class="browser-bar">
|
||||
<div class="browser-dots">
|
||||
<span class="browser-dot browser-dot--red"></span>
|
||||
<span class="browser-dot browser-dot--beige"></span>
|
||||
<span class="browser-dot browser-dot--green"></span>
|
||||
</div>
|
||||
<span class="browser-url"><?php echo htmlspecialchars($p['domain']); ?>/book</span>
|
||||
</div>
|
||||
<img src="/img/thompson/booking-lookup.jpg" alt="Thompson Service Centre — vehicle lookup step">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span class="screenshot-card-label">Booking Form</span>
|
||||
<p class="screenshot-card-desc">A clean, single-column booking form with service selection and date picker. Designed for speed on mobile — no unnecessary steps, no dead ends.</p>
|
||||
<div class="browser-frame">
|
||||
<div class="browser-bar">
|
||||
<div class="browser-dots">
|
||||
<span class="browser-dot browser-dot--red"></span>
|
||||
<span class="browser-dot browser-dot--beige"></span>
|
||||
<span class="browser-dot browser-dot--green"></span>
|
||||
</div>
|
||||
<span class="browser-url"><?php echo htmlspecialchars($p['domain']); ?>/book</span>
|
||||
</div>
|
||||
<img src="/img/thompson/booking-confirm.jpg" alt="Thompson Service Centre — booking confirmation step">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="category-divider">
|
||||
<h2>Execution</h2>
|
||||
</div>
|
||||
|
||||
<section class="cs-overview">
|
||||
<div class="cs-overview-label">
|
||||
<span class="section-label">Craft & Execution</span>
|
||||
</div>
|
||||
<div class="cs-overview-body">
|
||||
<p class="cs-overview-text">
|
||||
Built with vanilla HTML, Tailwind CSS v4, and GSAP-powered scroll animations, the page loads fast and feels premium on every device. The design system — rooted in Workshop Navy and Safety Orange — draws from real automotive heritage rather than off-the-shelf templates.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<?php require __DIR__ . '/../../includes/cs_footer.php'; ?>
|
||||
Reference in New Issue
Block a user