bitstream/uovidiu.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Restructure portfolio to separate index and case study pages, extract projects array to shared data file

Browse Source
This commit is contained in:
Ovidiu U
2026-03-13 12:52:40 +00:00
parent 5bc807210d
commit f2d497db9a
10 changed files with 34 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
CLAUDE.md
View File

@@ -64,7 +64,8 @@ require __DIR__ . '/includes/header.php';
### Pages
- `index.php` — Homepage (hero, about, services, work CTA, contact)
- `portfolio/index.php` — Portfolio index + Thompson Service Centre case study
- `portfolio.php` — Portfolio index (project grid)
- `portfolio/{slug}/index.php` — Individual case study pages
- `404.php` — Custom error page
### CSS
@@ -80,7 +81,7 @@ require __DIR__ . '/includes/header.php';
### Adding portfolio projects
Edit the `$projects` array in `portfolio/index.php` and add a corresponding `<article id="…">` case study block below it. Project screenshots go in `img/{project-slug}/`.
Edit the `$projects` array in `portfolio.php` and add a corresponding `portfolio/{slug}/index.php` case study page (copy `portfolio/_template/`). Project screenshots go in `img/{project-slug}/`.
Case study image naming convention (see Thompson as reference):
- `hero.png` — full-page screenshot

8
css/portfolio.css
View File

@@ -313,6 +313,14 @@
padding: 2rem;
}
.screenshot-card__desc {
font-family: var(--sans);
font-size: 0.85rem;
color: var(--grey);
margin: 0.4rem 0 1.25rem;
line-height: 1.5;
}
.screenshot-screen {
display: block;
width: 100%;

BIN
img/lhbeng/admin.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 107 KiB

BIN
img/lhbeng/hero.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 233 KiB

BIN
img/thompson/booking-confirm.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 10 MiB

BIN
img/thompson/booking-lookup.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.1 MiB

BIN
img/thompson/hero.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 42 MiB

20
portfolio/_template/index.php
View File

@@ -9,7 +9,7 @@
* ──────────
* 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/index.php
* 3. Add the project to the $projects array in portfolio.php
* 4. Drop screenshots into /img/{slug}/
*
* IMAGES
@@ -42,7 +42,7 @@ $cs_domain = 'TODO'; // e.g. 'example.co.uk' (no https://)
?>
<div class="cs-breadcrumb">
<a href="/portfolio/" class="cs-back">← All Work</a>
<a href="/portfolio" class="cs-back">← All Work</a>
<span class="cs-breadcrumb-label">[<?= htmlspecialchars($cs_num) ?> / <?= htmlspecialchars($cs_code) ?>]</span>
</div>
@@ -58,18 +58,14 @@ $cs_domain = 'TODO'; // e.g. 'example.co.uk' (no https://)
</header>
<!-- ── PROJECT OVERVIEW ──────────────────────────────────────────── -->
<!-- ── HERO SCREENSHOT ───────────────────────────────────────────── -->
<section class="section">
<div class="section-label">Project Overview</div>
<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>
</section>
<!-- ── HERO SCREENSHOT ───────────────────────────────────────────── -->
<section class="section">
<div class="section-label">TODO Section label</div><!-- e.g. Homepage / Dashboard / Listings -->
<div class="screenshot-hero-wrap">
<div class="browser-chrome">
<div class="browser-dots">
@@ -90,11 +86,12 @@ $cs_domain = 'TODO'; // e.g. 'example.co.uk' (no https://)
<!-- ── 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="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>
@@ -111,6 +108,7 @@ $cs_domain = 'TODO'; // e.g. 'example.co.uk' (no https://)
<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>
@@ -143,7 +141,7 @@ $cs_domain = 'TODO'; // e.g. 'example.co.uk' (no https://)
<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>
<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>

84
portfolio/index.php
View File

@@ -1,83 +1 @@
<?php
$title = 'Portfolio — Ovidiu Ungureanu';
$description = 'Selected web development projects by Ovidiu Ungureanu.';
$extra_css = '/css/portfolio.css';
require __DIR__.'/../includes/header.php';
// Full 15-project version is in index.full.php — restore when ready.
$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,
],
];
?>
<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'; ?>
<?php require __DIR__ . '/../portfolio.php';

21
portfolio/thompson/index.php
View File

@@ -7,10 +7,13 @@
* Copy this file as a starting point for new case studies.
*
* Required: $title, $description, $extra_css before require header.
* Back link: always points to /portfolio/ via .cs-back anchor.
* Back link: always points to /portfolio via .cs-back anchor.
* Images: store in /img/{slug}/ — see naming convention in CLAUDE.md.
* ─────────────────────────────────────────────────────────────────
*/
require __DIR__.'/../../data/projects.php';
$p = $projects['thompson'];
$title = 'Thompson Service Centre — Case Study';
$description = 'How we built a trust-first digital presence for a 25-year Peterborough garage.';
$extra_css = '/css/portfolio.css';
@@ -18,16 +21,16 @@ require __DIR__.'/../../includes/header.php';
?>
<div class="cs-breadcrumb">
<a href="/portfolio/" class="cs-back">← All Work</a>
<span class="cs-breadcrumb-label">[01 / WEB_DEV]</span>
<a href="/portfolio" class="cs-back">← All Work</a>
<span class="cs-breadcrumb-label">[<?= htmlspecialchars($p['num']) ?> / <?= htmlspecialchars($p['code']) ?>]</span>
</div>
<header class="hero">
<div class="hero-label">Case Study — 01</div>
<div class="hero-label">Case Study — <?= htmlspecialchars($p['num']) ?></div>
<h1>Thompson<br>Service Centre</h1>
<p class="hero-sub">Website Redesign · 2025</p>
<p class="hero-sub">Website Redesign - 2025</p>
<ul class="cs-meta-bar">
<li>HTML · Tailwind CSS v4 · GSAP</li>
<li>HTML - Tailwind CSS v4 - GSAP</li>
<li>Thompson Service Centre, Peterborough</li>
<li>2025</li>
</ul>
@@ -38,7 +41,7 @@ require __DIR__.'/../../includes/header.php';
<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
landing page that puts credibility front and center: 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>
@@ -64,6 +67,7 @@ require __DIR__.'/../../includes/header.php';
<div class="services-grid">
<div class="service-item screenshot-card">
<span class="service-num">Vehicle Lookup</span>
<p class="screenshot-card__desc">Enter your registration plate to pull vehicle details automatically.</p>
<div class="browser-chrome browser-chrome--sm">
<div class="browser-dots">
<span></span><span></span><span></span>
@@ -79,6 +83,7 @@ require __DIR__.'/../../includes/header.php';
</div>
<div class="service-item screenshot-card">
<span class="service-num">Booking Form</span>
<p class="screenshot-card__desc">Confirm your vehicle and fill in the booking details in one clean step.</p>
<div class="browser-chrome browser-chrome--sm">
<div class="browser-dots">
<span></span><span></span><span></span>
@@ -107,7 +112,7 @@ require __DIR__.'/../../includes/header.php';
<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>
<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>