Move portfolio case studies to data-driven template system and archive old individual files
This commit is contained in:
Ovidiu U
222
_portfolio/index.full.php
Normal file
222
_portfolio/index.full.php
Normal file
@@ -0,0 +1,222 @@
|
||||
<?php
|
||||
|
||||
$title = 'Portfolio — Ovidiu Ungureanu';
|
||||
$description = 'Selected web development projects by Ovidiu Ungureanu.';
|
||||
$extra_css = '/css/portfolio.css';
|
||||
require __DIR__.'/../includes/header.php';
|
||||
|
||||
$projects = [
|
||||
[
|
||||
'slug' => 'thompson',
|
||||
'num' => '01',
|
||||
'code' => 'WEB_DEV',
|
||||
'title' => 'Thompson Service Centre',
|
||||
'desc' => 'Trust-first redesign for a 25-year Peterborough garage. Bold credibility signals, booking flow, zero clichés.',
|
||||
'year' => '2025',
|
||||
'thumb' => '/img/thompson/hero.jpg',
|
||||
'live' => true,
|
||||
],
|
||||
[
|
||||
'slug' => 'northgate-motors',
|
||||
'num' => '02',
|
||||
'code' => 'E_COMMERCE',
|
||||
'title' => 'Northgate Motors',
|
||||
'desc' => 'Parts and accessories e-commerce with Stripe checkout and stock management backend.',
|
||||
'year' => '2025',
|
||||
'thumb' => null,
|
||||
'live' => false,
|
||||
],
|
||||
[
|
||||
'slug' => 'fenland-tyres',
|
||||
'num' => '03',
|
||||
'code' => 'BOOKING',
|
||||
'title' => 'Fenland Tyres',
|
||||
'desc' => 'Online booking system with real-time slot availability and automated confirmation emails.',
|
||||
'year' => '2025',
|
||||
'thumb' => null,
|
||||
'live' => false,
|
||||
],
|
||||
[
|
||||
'slug' => 'stamford-autocare',
|
||||
'num' => '04',
|
||||
'code' => 'LANDING',
|
||||
'title' => 'Stamford Autocare',
|
||||
'desc' => 'Local SEO-focused landing page with one job: turn a Google search into a phone call.',
|
||||
'year' => '2024',
|
||||
'thumb' => null,
|
||||
'live' => false,
|
||||
],
|
||||
[
|
||||
'slug' => 'heron-storage',
|
||||
'num' => '05',
|
||||
'code' => 'WEB_DEV',
|
||||
'title' => 'Heron Self Storage',
|
||||
'desc' => 'Full site rebuild with unit availability checker and online reservation management.',
|
||||
'year' => '2024',
|
||||
'thumb' => null,
|
||||
'live' => false,
|
||||
],
|
||||
[
|
||||
'slug' => 'ely-clutch',
|
||||
'num' => '06',
|
||||
'code' => 'LANDING',
|
||||
'title' => 'Ely Clutch & Brake',
|
||||
'desc' => 'Landing page built around their specialist credentials and emergency call-out. Loads in under a second.',
|
||||
'year' => '2024',
|
||||
'thumb' => null,
|
||||
'live' => false,
|
||||
],
|
||||
[
|
||||
'slug' => 'wisbech-auto',
|
||||
'num' => '07',
|
||||
'code' => 'FULL_BUILD',
|
||||
'title' => 'Wisbech Auto Centre',
|
||||
'desc' => 'Full-stack build: service menu, booking, customer portal, and GSAP scroll animations.',
|
||||
'year' => '2024',
|
||||
'thumb' => null,
|
||||
'live' => false,
|
||||
],
|
||||
[
|
||||
'slug' => 'march-mot',
|
||||
'num' => '08',
|
||||
'code' => 'BOOKING',
|
||||
'title' => 'March MOT Station',
|
||||
'desc' => 'Streamlined MOT booking with DVLA vehicle lookup and reminder SMS integration.',
|
||||
'year' => '2024',
|
||||
'thumb' => null,
|
||||
'live' => false,
|
||||
],
|
||||
[
|
||||
'slug' => 'peterborough-panels',
|
||||
'num' => '09',
|
||||
'code' => 'PORTFOLIO',
|
||||
'title' => 'Peterborough Panels',
|
||||
'desc' => 'Before/after portfolio site for a bodywork specialist. Gallery-first layout, zero clutter.',
|
||||
'year' => '2023',
|
||||
'thumb' => null,
|
||||
'live' => false,
|
||||
],
|
||||
[
|
||||
'slug' => 'huntingdon-haulage',
|
||||
'num' => '10',
|
||||
'code' => 'WEB_DEV',
|
||||
'title' => 'Huntingdon Haulage',
|
||||
'desc' => 'Fleet services website with route coverage map and driver recruitment section.',
|
||||
'year' => '2023',
|
||||
'thumb' => null,
|
||||
'live' => false,
|
||||
],
|
||||
[
|
||||
'slug' => 'chatteris-cars',
|
||||
'num' => '11',
|
||||
'code' => 'LISTINGS',
|
||||
'title' => 'Chatteris Cars',
|
||||
'desc' => 'Used car listings with dynamic search, filter by make/model, and finance enquiry form.',
|
||||
'year' => '2023',
|
||||
'thumb' => null,
|
||||
'live' => false,
|
||||
],
|
||||
[
|
||||
'slug' => 'ramsey-recovery',
|
||||
'num' => '12',
|
||||
'code' => 'LANDING',
|
||||
'title' => 'Ramsey Recovery',
|
||||
'desc' => '24/7 roadside recovery landing page built for speed — sub-2s load, click-to-call hero.',
|
||||
'year' => '2023',
|
||||
'thumb' => null,
|
||||
'live' => false,
|
||||
],
|
||||
[
|
||||
'slug' => 'soham-services',
|
||||
'num' => '13',
|
||||
'code' => 'FULL_BUILD',
|
||||
'title' => 'Soham Service Station',
|
||||
'desc' => 'Full rebuild from scratch — site, booking system, staff rota, and customer history. One login, everything in one place.',
|
||||
'year' => '2023',
|
||||
'thumb' => null,
|
||||
'live' => false,
|
||||
],
|
||||
[
|
||||
'slug' => 'downham-diesel',
|
||||
'num' => '14',
|
||||
'code' => 'LANDING',
|
||||
'title' => 'Downham Diesel',
|
||||
'desc' => 'Specialist diesel landing page targeting commercial vehicle operators in the Fens.',
|
||||
'year' => '2022',
|
||||
'thumb' => null,
|
||||
'live' => false,
|
||||
],
|
||||
[
|
||||
'slug' => 'kings-lynn-kustoms',
|
||||
'num' => '15',
|
||||
'code' => 'PORTFOLIO',
|
||||
'title' => "King's Lynn Kustoms",
|
||||
'desc' => 'Custom builds portfolio for a one-man fabrication shop. Dramatic full-screen imagery.',
|
||||
'year' => '2022',
|
||||
'thumb' => null,
|
||||
'live' => false,
|
||||
],
|
||||
];
|
||||
?>
|
||||
|
||||
<header class="hero">
|
||||
<div class="hero-label">Portfolio — Selected Work</div>
|
||||
<h1>Selected<br>Work</h1>
|
||||
<p class="hero-sub">Client projects and builds.</p>
|
||||
</header>
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">001 — <?php
|
||||
echo count($projects); ?> Projects
|
||||
</div>
|
||||
<div class="portfolio-grid">
|
||||
<?php
|
||||
foreach ($projects as $p): ?>
|
||||
<a href="/portfolio/<?php
|
||||
echo htmlspecialchars($p['slug']); ?>/"
|
||||
class="project-card<?php
|
||||
echo $p['live'] ? '' : ' project-card--wip'; ?>">
|
||||
|
||||
<div class="project-card__thumb">
|
||||
<span class="project-card__label">[<?php
|
||||
echo htmlspecialchars($p['num']); ?> / <?php
|
||||
echo htmlspecialchars($p['code']); ?>]</span>
|
||||
<?php
|
||||
if ($p['thumb']): ?>
|
||||
<img src="<?php
|
||||
echo htmlspecialchars($p['thumb']); ?>"
|
||||
alt="<?php
|
||||
echo htmlspecialchars($p['title']); ?>"
|
||||
loading="lazy">
|
||||
<?php
|
||||
endif; ?>
|
||||
</div>
|
||||
|
||||
<div class="project-card__body">
|
||||
<h3 class="project-card__title"><?php
|
||||
echo htmlspecialchars($p['title']); ?></h3>
|
||||
<p class="project-card__desc"><?php
|
||||
echo htmlspecialchars($p['desc']); ?></p>
|
||||
<div class="project-card__footer">
|
||||
<span class="project-card__year"><?php
|
||||
echo htmlspecialchars($p['year']); ?></span>
|
||||
<span class="project-card__arrow">→</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</a>
|
||||
<?php
|
||||
endforeach; ?>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section-cta">
|
||||
<div class="section-label">002 — Contact</div>
|
||||
<div class="section-content">
|
||||
<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'; ?>
|
||||
1
_portfolio/index.php
Normal file
1
_portfolio/index.php
Normal file
@@ -0,0 +1 @@
|
||||
<?php require __DIR__ . '/../portfolio.php';
|
||||
85
_portfolio/lhbeng/index.php
Normal file
85
_portfolio/lhbeng/index.php
Normal file
@@ -0,0 +1,85 @@
|
||||
<?php
|
||||
$cs_slug = 'lhbeng';
|
||||
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">
|
||||
Full website redesign with a simple content manager — so the team can update their portfolio, staff profiles, and job listings without needing a developer every time. Clean, modern layout that reflects the scale and quality of their structural engineering work.
|
||||
</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/lhbeng/hero.jpg" alt="LHB Engineering — Homepage">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="screenshots-label">
|
||||
<span class="section-label">Website CMS</span>
|
||||
</div>
|
||||
|
||||
<div class="screenshot-grid">
|
||||
|
||||
<div>
|
||||
<span class="screenshot-card-label">Content Manager</span>
|
||||
<p class="screenshot-card-desc">A full-featured CMS lets the team manage portfolio items, team profiles, and job listings without touching code. Day-to-day updates handled entirely in-house.</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']); ?>/admin</span>
|
||||
</div>
|
||||
<img src="/img/lhbeng/admin.jpg" alt="LHB Engineering — CMS admin panel">
|
||||
</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 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. The new site is fast, fully responsive, and structured so visitors can quickly find services, past projects, and contact details. Alongside the redesign, a custom PHP/MySQL CMS gives the team full control over content — no developer needed for day-to-day updates.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<?php require __DIR__ . '/../../includes/cs_footer.php'; ?>
|
||||
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'; ?>
|
||||
101
_portfolio/thompson/index.php
Normal file
101
_portfolio/thompson/index.php
Normal file
@@ -0,0 +1,101 @@
|
||||
<?php
|
||||
$cs_slug = 'thompson';
|
||||
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