landing and portfolio
This commit is contained in:
Ovidiu U
@@ -3,6 +3,159 @@ $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' => 'High-conversion landing page focused on local SEO and a single clear call-to-action.',
|
||||
'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' => 'Fast-loading landing page emphasising specialist credentials and emergency call-out service.',
|
||||
'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' => 'Complete digital overhaul: site, booking system, staff rota tool, and customer history log.',
|
||||
'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">
|
||||
@@ -11,135 +164,38 @@ require __DIR__ . '/../includes/header.php';
|
||||
<p class="hero-sub">Client projects and builds.</p>
|
||||
</header>
|
||||
|
||||
<!-- PROJECT INDEX -->
|
||||
<section class="section">
|
||||
<div class="section-label">001 — Projects</div>
|
||||
<?php
|
||||
$projects = [
|
||||
[
|
||||
'num' => '01',
|
||||
'title' => 'Thompson Service Centre',
|
||||
'type' => 'Website Redesign',
|
||||
'year' => '2025',
|
||||
'tags' => ['HTML', 'Tailwind CSS v4', 'GSAP'],
|
||||
'anchor' => 'thompson',
|
||||
],
|
||||
];
|
||||
foreach ($projects as $p): ?>
|
||||
<a href="#<?php echo $p['anchor']; ?>" class="project-card-link">
|
||||
<div class="service-item project-card-inner">
|
||||
<span class="service-num"><?php echo $p['num']; ?></span>
|
||||
<div class="project-card-head">
|
||||
<h3><?php echo htmlspecialchars($p['title']); ?></h3>
|
||||
<span class="project-card-year"><?php echo htmlspecialchars($p['year']); ?></span>
|
||||
<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>
|
||||
<p><?php echo htmlspecialchars($p['type']); ?></p>
|
||||
<div class="tags-row">
|
||||
<?php foreach ($p['tags'] as $tag): ?>
|
||||
<span class="tag"><?php echo htmlspecialchars($tag); ?></span>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<span class="project-card-cta">View Case Study →</span>
|
||||
</div>
|
||||
</a>
|
||||
<?php endforeach; ?>
|
||||
</section>
|
||||
|
||||
<!-- CASE STUDY: THOMPSON SERVICE CENTRE -->
|
||||
|
||||
<section id="thompson" class="section">
|
||||
<div class="section-label">Case Study — 01</div>
|
||||
<p class="large-text">Thompson<br>Service Centre</p>
|
||||
<div class="services-grid cs-meta-grid">
|
||||
<div class="service-item">
|
||||
<span class="service-num">Type</span>
|
||||
<h3>Website Redesign</h3>
|
||||
</div>
|
||||
<div class="service-item">
|
||||
<span class="service-num">Stack</span>
|
||||
<h3>HTML · Tailwind CSS v4 · GSAP</h3>
|
||||
</div>
|
||||
<div class="service-item">
|
||||
<span class="service-num">Client</span>
|
||||
<h3>Thompson Service Centre, Peterborough</h3>
|
||||
</div>
|
||||
<div class="service-item">
|
||||
<span class="service-num">Year</span>
|
||||
<h3>2025</h3>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">Project Overview</div>
|
||||
<div class="section-content">
|
||||
<p>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. Every element was designed to make a first-time visitor feel like they'd already found their mechanic.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">Homepage</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">thompsonservicecentre.co.uk</span>
|
||||
</div>
|
||||
<img
|
||||
src="/img/thompson/hero.png"
|
||||
alt="Thompson Service Centre — Homepage"
|
||||
class="screenshot-hero"
|
||||
loading="lazy"
|
||||
>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">Booking Flow</div>
|
||||
<div class="services-grid">
|
||||
<div class="service-item screenshot-card">
|
||||
<span class="service-num">Vehicle Lookup</span>
|
||||
<div class="browser-chrome browser-chrome--sm">
|
||||
<div class="browser-dots">
|
||||
<span></span><span></span><span></span>
|
||||
<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>
|
||||
<span class="browser-url">thompsonservicecentre.co.uk/book</span>
|
||||
</div>
|
||||
<img
|
||||
src="/img/thompson/booking-lookup.png"
|
||||
alt="Vehicle registration lookup"
|
||||
class="screenshot-screen"
|
||||
loading="lazy"
|
||||
>
|
||||
</div>
|
||||
<div class="service-item screenshot-card">
|
||||
<span class="service-num">Booking Form</span>
|
||||
<div class="browser-chrome browser-chrome--sm">
|
||||
<div class="browser-dots">
|
||||
<span></span><span></span><span></span>
|
||||
</div>
|
||||
<span class="browser-url">thompsonservicecentre.co.uk/book</span>
|
||||
</div>
|
||||
<img
|
||||
src="/img/thompson/booking-confirm.png"
|
||||
alt="Vehicle confirmed and booking form"
|
||||
class="screenshot-screen"
|
||||
loading="lazy"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">Craft & Execution</div>
|
||||
<div class="section-content">
|
||||
<p>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. Noise overlays, layered gradients, and spring-eased micro-interactions give it a tactile warmth that sets it apart from every other garage site in the postcode.</p>
|
||||
</a>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section-cta">
|
||||
<div class="section-label">005 — Contact</div>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user