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

Compare commits

base: bitstream:c06285d5203fffe358ff08527f714501449e1ca9
Branches Tags
bitstream:main bitstream:brutalist-01
...
compare: bitstream:main
Branches Tags
bitstream:brutalist-01 bitstream:main

6 Commits
c06285d520 ... main

Author SHA1 Message Date
Ovidiu U
43ba520dae Unify label styling by replacing hero-label with section-label and comment out portfolio CTA section 2026-03-14 07:45:23 +00:00
Ovidiu U
a4be60147d Remove services heading and increase services section top padding 2026-03-14 07:29:07 +00:00
Ovidiu U
a4c8912b61 Redesign services section with bold typographic layout and update CTA copy across site 2026-03-14 07:18:24 +00:00
Ovidiu U
484066a80e Add LHB Engineering case study with reusable header/footer partials and scrollable hero screenshots 2026-03-13 13:39:55 +00:00
Ovidiu U
f2d497db9a Restructure portfolio to separate index and case study pages, extract projects array to shared data file 2026-03-13 12:52:40 +00:00
Ovidiu U
5bc807210d Remove deployment.xml from tracking 
.idea/ is in .gitignore — this file was committed before the rule existed.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
 2026-03-13 11:37:34 +00:00
21 changed files with 539 additions and 294 deletions
Expand all files Collapse all files

20
.idea/deployment.xml generated
View File

@@ -1,20 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="PublishConfigData" serverName="ionos - uovidiu.com" remoteFilesAllowedToDisappearOnAutoupload="false" confirmBeforeUploading="false">
<option name="confirmBeforeUploading" value="false" />
<serverData>
<paths name="ionos - uovidiu.com">
<serverdata>
<mappings>
<mapping deploy="/" local="$PROJECT_DIR$" web="/" />
</mappings>
<excludedPaths>
<excludedPath local="true" path="$PROJECT_DIR$/.claude" />
<excludedPath local="true" path="$PROJECT_DIR$/.idea" />
<excludedPath local="true" path="$PROJECT_DIR$/CLAUDE.MD" />
</excludedPaths>
</serverdata>
</paths>
</serverData>
</component>
</project>

2
404.php
View File

@@ -22,7 +22,7 @@
</nav> </nav>
<header class="hero" style="text-align: center; align-items: center;"> <header class="hero" style="text-align: center; align-items: center;">
<div class="hero-label">Error 404</div> <div class="section-label">Error 404</div>
<h1>Not<br>Found</h1> <h1>Not<br>Found</h1>
<p class="hero-sub" style="text-align: center;">This page doesn't exist. It probably never did.</p> <p class="hero-sub" style="text-align: center;">This page doesn't exist. It probably never did.</p>
<div class="hero-cta"> <div class="hero-cta">

5
CLAUDE.md
View File

@@ -64,7 +64,8 @@ require __DIR__ . '/includes/header.php';
### Pages ### Pages
- `index.php` — Homepage (hero, about, services, work CTA, contact) - `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 - `404.php` — Custom error page
### CSS ### CSS
@@ -80,7 +81,7 @@ require __DIR__ . '/includes/header.php';
### Adding portfolio projects ### 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): Case study image naming convention (see Thompson as reference):
- `hero.png` — full-page screenshot - `hero.png` — full-page screenshot

43
css/portfolio.css
View File

@@ -182,8 +182,8 @@
.cs-meta-bar { .cs-meta-bar {
list-style: none; list-style: none;
display: flex; display: flex;
flex-wrap: wrap; flex-direction: column;
gap: 0 2rem; gap: 0;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
background: var(--grey-dark); background: var(--grey-dark);
border-left: 6px solid var(--grey-text); border-left: 6px solid var(--grey-text);
@@ -304,6 +304,37 @@
border-bottom: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
} }
.screenshot-hero-scroll {
position: relative;
max-height: 600px;
overflow-y: scroll;
scrollbar-width: thin;
scrollbar-color: var(--accent) #1a1a1a;
}
.screenshot-hero-scroll--no-hint::before {
display: none;
}
.screenshot-hero-scroll::before {
content: '↓ scroll to view whole page';
position: sticky;
top: 0;
display: flex;
justify-content: center;
align-items: flex-start;
padding-top: 1.5rem;
height: 120px;
margin-bottom: -120px;
background: linear-gradient(to top, transparent, rgba(10, 10, 10, 0.9));
font-family: var(--mono);
font-size: 1rem;
letter-spacing: 0.12em;
color: var(--white);
pointer-events: none;
z-index: 1;
}
.screenshot-hero { .screenshot-hero {
display: block; display: block;
width: 100%; width: 100%;
@@ -313,6 +344,14 @@
padding: 2rem; 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 { .screenshot-screen {
display: block; display: block;
width: 100%; width: 100%;

186
css/style.css
View File

@@ -70,6 +70,12 @@ a {
box-shadow: var(--shadow); box-shadow: var(--shadow);
} }
.nav-left {
display: flex;
align-items: center;
gap: 1.25rem;
}
.nav-logo { .nav-logo {
font-family: var(--mono); font-family: var(--mono);
font-weight: 800; font-weight: 800;
@@ -78,6 +84,18 @@ a {
color: var(--accent); color: var(--accent);
} }
.nav-back {
font-family: var(--mono);
font-size: 1rem;
color: var(--white);
opacity: 0.5;
transition: opacity 0.15s;
}
.nav-back:hover {
opacity: 1;
}
.nav-links { .nav-links {
display: flex; display: flex;
gap: 2rem; gap: 2rem;
@@ -101,22 +119,18 @@ a {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
padding: 4rem 3rem 2rem; padding: 7rem 3rem 2rem;
border: var(--border-thick); border: var(--border-thick);
background: var(--grey-light); background: var(--grey-light);
margin-bottom: 2rem; margin-bottom: 2rem;
box-shadow: var(--shadow); box-shadow: var(--shadow);
} }
.hero-label { .hero .section-label {
font-family: var(--mono);
font-size: 0.85rem;
text-transform: uppercase;
background: var(--accent); background: var(--accent);
color: var(--black); color: var(--black);
display: inline-block; font-size: 0.85rem;
padding: 4px 12px; padding: 4px 12px;
font-weight: 900;
margin-bottom: 2rem; margin-bottom: 2rem;
width: fit-content; width: fit-content;
} }
@@ -132,6 +146,10 @@ a {
color: var(--white); color: var(--white);
} }
.hero h1 .h1-sub {
font-size: 0.6em;
}
.hero-sub { .hero-sub {
font-size: 1.25rem; font-size: 1.25rem;
color: var(--white); color: var(--white);
@@ -223,51 +241,137 @@ a {
} }
/* ======================================== /* ========================================
SERVICES - GRID BLOCKS SERVICES - LIST ROWS
======================================== */ ======================================== */
.services-grid { .services-section {
display: grid; background: var(--grey-light);
grid-template-columns: repeat(2, 1fr); padding: 3rem 2.5rem 0;
gap: 2rem; margin-bottom: 2rem;
background: transparent;
}
.service-item {
background: var(--black);
padding: 3rem;
border: var(--border-orange);
box-shadow: var(--shadow); box-shadow: var(--shadow);
transition: transform 0.2s;
} }
.service-item:hover { .services-section-label {
transform: scale(1.02);
}
.service-num {
font-family: var(--mono); font-family: var(--mono);
font-size: 0.8rem; font-size: 0.8rem;
color: var(--black);
background: var(--accent);
padding: 2px 8px;
display: inline-block;
margin-bottom: 1.5rem;
font-weight: 900;
}
.service-item h3 {
font-family: var(--mono);
font-size: 1.25rem;
font-weight: 800;
margin-bottom: 1rem;
color: var(--accent);
text-transform: uppercase; text-transform: uppercase;
background: var(--black);
color: var(--accent);
padding: 5px 15px;
display: inline-block;
margin-bottom: 2rem;
font-weight: 900;
border: 1px solid rgba(255,255,255,0.15);
} }
.service-item p { .services-heading {
font-family: 'Archivo Black', sans-serif;
font-size: clamp(4rem, 13vw, 13rem);
font-weight: 900;
text-transform: uppercase;
color: #ffffff;
line-height: 0.88;
letter-spacing: -0.02em;
margin-bottom: 3rem;
}
.services-list {
border-top: 1px solid rgba(255,255,255,0.2);
}
.service-row {
display: flex;
align-items: center;
padding: 2.5rem 1rem;
margin: 0 -1rem;
border-bottom: 1px solid rgba(255,255,255,0.2);
cursor: default;
overflow: hidden;
transition: background 0.15s ease;
}
.service-row:hover {
background: var(--black);
}
.service-row-body {
display: flex;
align-items: flex-start;
gap: 1.75rem;
flex: 1;
min-width: 0;
}
.service-row-num {
font-family: var(--mono);
font-size: 1rem; font-size: 1rem;
color: var(--grey-text); font-weight: 700;
color: #ff4d00;
padding-top: 0.6rem;
white-space: nowrap;
flex-shrink: 0;
}
.service-row-content {
flex: 1;
min-width: 0;
}
.service-row-title {
font-family: var(--mono), serif;
font-size: clamp(3rem, 8vw, 8rem);
font-weight: 900;
text-transform: uppercase;
color: #ffffff;
line-height: 0.92;
letter-spacing: -0.02em;
margin-bottom: 1.25rem;
transition: color 0.15s ease;
}
.service-row:hover .service-row-title {
color: var(--accent);
}
.service-row-tags {
display: flex;
gap: 0.6rem;
flex-wrap: wrap;
}
.service-tag {
font-family: var(--mono);
font-size: 0.7rem;
text-transform: uppercase;
color: #ffffff;
border: 1px solid rgba(255,255,255,0.35);
border-radius: 100px;
padding: 5px 14px;
letter-spacing: 0.06em;
white-space: nowrap;
}
@media (max-width: 768px) {
.services-section {
padding: 2rem 1.5rem 0;
}
.service-row {
padding: 2rem 0;
}
.service-row-num {
padding-top: 0.3rem;
}
.service-row-arrow {
display: none;
}
.service-row-title {
font-size: clamp(2rem, 10vw, 3rem);
}
} }
/* ======================================== /* ========================================

38
data/projects.php Normal file
View File

@@ -0,0 +1,38 @@
<?php
$projects = [
'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,
'h1' => ['Thompson', 'Service Centre'],
'sub' => 'Website Redesign · 2025',
'stack' => 'HTML · Tailwind CSS v4 · GSAP',
'location' => 'Thompson Service Centre, Peterborough',
'domain' => 'thompsonservicecentre.co.uk',
'page_title' => 'Thompson Service Centre — Case Study',
'page_desc' => 'How we built a trust-first digital presence for a 25-year Peterborough garage.',
],
'lhbeng' => [
'num' => '02',
'code' => 'WEB_DEV',
'title' => 'LHB Eng',
'desc' => 'Structural Engineers designing projects that build strong communities.',
'year' => '2022',
'thumb' => '/img/lhbeng/hero.jpg',
'live' => true,
'h1' => ['LHB', 'Lynch, Harrison & Brumleve, Inc.'],
'sub' => 'Website Redesign · 2022',
'stack' => 'HTML · CSS',
'location' => 'LHB Eng, Indianapolis',
'domain' => 'lhb-eng.com',
'page_title' => 'LHB Engineering — Case Study',
'page_desc' => 'Full website redesign for LHB Engineering with a self-service CMS for portfolio, team, and job listings.',
],
];

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

12
includes/cs_footer.php Normal file
View File

@@ -0,0 +1,12 @@
<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>
<p class="large-text">Got a project in mind?</p>
<a href="mailto:hello@uovidiu.com" class="btn">Let's Talk →</a>
</div>
</section>
<script src="/js/screenshot-scroll-hint.js"></script>
<?php require __DIR__ . '/footer.php'; ?>

38
includes/cs_header.php Normal file
View File

@@ -0,0 +1,38 @@
<?php
/*
* Case Study Header Partial
* ─────────────────────────────────────────────────────────────────
* Requires the following variables set by the calling page BEFORE
* requiring this file:
*
* $cs_slug string Key into $projects, e.g. 'thompson'
*
* Everything else ($title, $description, hero content) is read from
* $projects[$cs_slug] in data/projects.php.
* ─────────────────────────────────────────────────────────────────
*/
$extra_css = '/css/portfolio.css';
require __DIR__ . '/../data/projects.php';
$p = $projects[$cs_slug];
$title = $p['page_title'];
$description = $p['page_desc'];
require __DIR__ . '/header.php';
?>
<div class="cs-breadcrumb">
<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="section-label">Case Study — <?= htmlspecialchars($p['num']) ?></div>
<h1><?= htmlspecialchars($p['h1'][0]) ?><br><span class="h1-sub"><?= htmlspecialchars($p['h1'][1]) ?></span></h1>
<p class="hero-sub"><?= htmlspecialchars($p['sub']) ?></p>
<ul class="cs-meta-bar">
<li><?= htmlspecialchars($p['stack']) ?></li>
<li><?= htmlspecialchars($p['location']) ?></li>
<li><?= htmlspecialchars($p['year']) ?></li>
</ul>
</header>

9
includes/header.php
View File

@@ -7,7 +7,7 @@
<meta name="description" content="<?php echo htmlspecialchars($description); ?>"> <meta name="description" content="<?php echo htmlspecialchars($description); ?>">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=DM+Sans:wght@400;500&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700;900&family=DM+Sans:wght@400;500&family=Archivo+Black&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/css/style.css"> <link rel="stylesheet" href="/css/style.css">
<?php if (!empty($extra_css)): ?> <?php if (!empty($extra_css)): ?>
<link rel="stylesheet" href="<?php echo htmlspecialchars($extra_css); ?>"> <link rel="stylesheet" href="<?php echo htmlspecialchars($extra_css); ?>">
@@ -17,7 +17,12 @@
<?php $current = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH); ?> <?php $current = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH); ?>
<nav class="nav"> <nav class="nav">
<a href="/" class="nav-logo">OU</a> <div class="nav-left">
<a href="/" class="nav-logo">OU</a>
<?php if (str_starts_with($current, '/portfolio/')): ?>
<a href="/portfolio" class="nav-back">←(back)</a>
<?php endif; ?>
</div>
<div class="nav-links"> <div class="nav-links">
<a href="/#about">About</a> <a href="/#about">About</a>
<a href="/#services">Services</a> <a href="/#services">Services</a>

96
index.php
View File

@@ -6,12 +6,12 @@ require __DIR__.'/includes/header.php';
?> ?>
<header class="hero"> <header class="hero">
<div class="hero-label">Web Developer — UK</div> <div class="section-label">Web Developer — UK</div>
<h1>Ovidiu<br>Ungureanu</h1> <h1>Ovidiu<br>Ungureanu</h1>
<p class="hero-sub">I build web applications that work.<br>PHP, MySQL, clean code, no nonsense.</p> <p class="hero-sub">I build web applications that work.<br>PHP, MySQL, clean code, no nonsense.</p>
<div class="hero-cta"> <div class="hero-cta">
<a href="/portfolio" class="btn">View Work →</a> <a href="/portfolio" class="btn">View Work →</a>
<a href="#contact" class="btn btn-ghost">Get in Touch</a> <a href="#contact" class="btn btn-ghost">Let's Talk</a>
</div> </div>
</header> </header>
@@ -24,39 +24,71 @@ require __DIR__.'/includes/header.php';
</div> </div>
</section> </section>
<section id="services" class="section"> <section id="services" class="services-section">
<div class="section-label">002 — Services</div> <div class="services-section-label">002 — Services</div>
<div class="services-grid"> <div class="services-list">
<div class="service-item"> <div class="service-row">
<span class="service-num">01</span> <div class="service-row-body">
<h3>Website Design & Development</h3> <span class="service-row-num">(01)</span>
<p>Clean, fast websites that look great on any device. Whether it's a refresh or a brand new site, built to make a good first impression.</p> <div class="service-row-content">
</div> <h3 class="service-row-title">Website Design<br>&amp; Development</h3>
<div class="service-item"> <div class="service-row-tags">
<span class="service-num">02</span> <span class="service-tag">Design</span>
<h3>Custom Tools & Systems</h3> <span class="service-tag">Development</span>
<p>Need a booking page, job tracker, or customer portal? I'll build exactly what your business needs — no bloated templates.</p> <span class="service-tag">Responsive</span>
</div> </div>
<div class="service-item"> </div>
<span class="service-num">03</span> </div>
<h3>Booking & Scheduling Systems</h3> </div>
<p>Let your customers book online, manage appointments, and cut down on phone tag. Perfect for garages, salons, and service businesses.</p> <div class="service-row">
</div> <div class="service-row-body">
<div class="service-item"> <span class="service-row-num">(02)</span>
<span class="service-num">04</span> <div class="service-row-content">
<h3>Ongoing Support & Updates</h3> <h3 class="service-row-title">Custom Tools<br>&amp; Systems</h3>
<p>Already got a website that needs some love? I'll tidy it up, speed it up, and keep it running smoothly.</p> <div class="service-row-tags">
</div> <span class="service-tag">PHP</span>
<span class="service-tag">MySQL</span>
<span class="service-tag">Custom Builds</span>
</div>
</div>
</div>
</div>
<div class="service-row">
<div class="service-row-body">
<span class="service-row-num">(03)</span>
<div class="service-row-content">
<h3 class="service-row-title">Booking &amp;<br>Scheduling</h3>
<div class="service-row-tags">
<span class="service-tag">Bookings</span>
<span class="service-tag">Automation</span>
<span class="service-tag">Small Business</span>
</div>
</div>
</div>
</div>
<div class="service-row">
<div class="service-row-body">
<span class="service-row-num">(04)</span>
<div class="service-row-content">
<h3 class="service-row-title">Ongoing Support<br>&amp; Updates</h3>
<div class="service-row-tags">
<span class="service-tag">Maintenance</span>
<span class="service-tag">Performance</span>
<span class="service-tag">Support</span>
</div>
</div>
</div>
</div>
</div> </div>
</section> </section>
<section class="section section-cta"> <!--<section class="section section-cta">-->
<div class="section-label">003 — Work</div> <!-- <div class="section-label">003 — Work</div>-->
<div class="section-content"> <!-- <div class="section-content">-->
<p class="large-text">A few recent builds.</p> <!-- <p class="large-text">A few recent builds.</p>-->
<a href="/portfolio" class="btn">View Work →</a> <!-- <a href="/portfolio" class="btn">View Work →</a>-->
</div> <!-- </div>-->
</section> <!--</section>-->
<section id="contact" class="section"> <section id="contact" class="section">
<div class="section-label">004 — Contact</div> <div class="section-label">004 — Contact</div>

13
js/screenshot-scroll-hint.js Normal file
View File

@@ -0,0 +1,13 @@
document.querySelectorAll('.screenshot-hero-scroll').forEach(function (el) {
var img = el.querySelector('img');
function check() {
if (el.scrollHeight <= el.clientHeight) {
el.classList.add('screenshot-hero-scroll--no-hint');
}
}
if (img && !img.complete) {
img.addEventListener('load', check);
} else {
check();
}
});

71
portfolio.php Normal file
View File

@@ -0,0 +1,71 @@
<?php
$title = 'Portfolio — Ovidiu Ungureanu';
$description = 'Selected web development projects by Ovidiu Ungureanu.';
$extra_css = '/css/portfolio.css';
require __DIR__.'/includes/header.php';
require __DIR__ . '/data/projects.php';
?>
<header class="hero">
<div class="section-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 $slug => $p): ?>
<a href="/portfolio/<?php
echo htmlspecialchars($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">Let's Talk →</a>
</div>
</section>
<?php
require __DIR__.'/includes/footer.php'; ?>

90
portfolio/_template/index.php
View File

@@ -9,7 +9,7 @@
* ────────── * ──────────
* 1. Copy this folder to portfolio/{slug}/ * 1. Copy this folder to portfolio/{slug}/
* 2. Fill in every TODO below — nothing should say TODO when live * 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 an entry to $projects in data/projects.php (including page_title, page_desc)
* 4. Drop screenshots into /img/{slug}/ * 4. Drop screenshots into /img/{slug}/
* *
* IMAGES * IMAGES
@@ -25,64 +25,39 @@
* · Hero screenshot — always include * · Hero screenshot — always include
* · Feature section — include if there's a flow / feature worth showing * · Feature section — include if there's a flow / feature worth showing
* · Craft & Execution — include if the build has something worth saying * · Craft & Execution — include if the build has something worth saying
* · CTA — always include, do not change * · CTA — always include, comes from cs_footer.php
* ═══════════════════════════════════════════════════════════════════ * ═══════════════════════════════════════════════════════════════════
*/ */
// ── Page config ─────────────────────────────────────────────────── // ── Set the slug — everything else lives in data/projects.php ─────
$title = 'TODO Client Name — Case Study'; // e.g. 'Northgate Motors — Case Study' $cs_slug = 'TODO'; // e.g. 'northgate'
$description = 'TODO One sentence about what you built and for whom.'; require __DIR__ . '/../../includes/cs_header.php';
$extra_css = '/css/portfolio.css';
require __DIR__ . '/../../includes/header.php';
// ── Project config (matches portfolio/index.php entry) ────────────
$cs_num = 'TODO'; // e.g. '02'
$cs_code = 'TODO'; // e.g. 'WEB_DEV' / 'E_COMMERCE' / 'BOOKING' / 'LANDING' / 'FULL_BUILD'
$cs_domain = 'TODO'; // e.g. 'example.co.uk' (no https://)
?> ?>
<div class="cs-breadcrumb">
<a href="/portfolio/" class="cs-back">← All Work</a>
<span class="cs-breadcrumb-label">[<?= htmlspecialchars($cs_num) ?> / <?= htmlspecialchars($cs_code) ?>]</span>
</div>
<header class="hero">
<div class="hero-label">Case Study — <?= htmlspecialchars($cs_num) ?></div>
<h1>TODO<br>Client Name</h1> <!-- break the name naturally across 2 lines -->
<p class="hero-sub">TODO Type · TODO Year</p> <!-- e.g. Website Redesign · 2025 -->
<ul class="cs-meta-bar">
<li>TODO Stack</li> <!-- e.g. PHP · MySQL · Tailwind CSS -->
<li>TODO Client, Location</li> <!-- e.g. Northgate Motors, Peterborough -->
<li>TODO Year</li> <!-- e.g. 2025 -->
</ul>
</header>
<!-- ── PROJECT OVERVIEW ──────────────────────────────────────────── -->
<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>
</section>
<!-- ── HERO SCREENSHOT ───────────────────────────────────────────── --> <!-- ── HERO SCREENSHOT ───────────────────────────────────────────── -->
<section class="section"> <section class="section">
<div class="section-label">TODO Section label</div><!-- e.g. Homepage / Dashboard / Listings --> <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="screenshot-hero-wrap">
<div class="browser-chrome"> <div class="browser-chrome">
<div class="browser-dots"> <div class="browser-dots">
<span></span><span></span><span></span> <span></span><span></span><span></span>
</div> </div>
<span class="browser-url"><?= htmlspecialchars($cs_domain) ?></span> <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>
<img
src="/img/TODO-slug/hero.jpg"
alt="TODO Client Name — TODO description"
class="screenshot-hero"
loading="lazy"
>
</div> </div>
</section> </section>
@@ -90,19 +65,20 @@ $cs_domain = 'TODO'; // e.g. 'example.co.uk' (no https://)
<!-- ── FEATURE / FLOW SCREENSHOTS (2-col) ────────────────────────── --> <!-- ── FEATURE / FLOW SCREENSHOTS (2-col) ────────────────────────── -->
<!-- Delete this section if you don't have feature screenshots --> <!-- Delete this section if you don't have feature screenshots -->
<section class="section"> <section class="section">
<div class="section-label">TODO Section label</div><!-- e.g. Booking Flow / Admin Panel / Listings --> <div class="section-label">TODO Section Label</div><!-- e.g. Booking Flow / Admin Panel / Listings -->
<div class="services-grid"> <div class="services-grid">
<div class="service-item screenshot-card"> <div class="service-item screenshot-card">
<span class="service-num">TODO Feature label</span><!-- e.g. Step 1 / Vehicle Lookup --> <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-chrome browser-chrome--sm">
<div class="browser-dots"> <div class="browser-dots">
<span></span><span></span><span></span> <span></span><span></span><span></span>
</div> </div>
<span class="browser-url"><?= htmlspecialchars($cs_domain) ?>/TODO-path</span> <span class="browser-url"><?= htmlspecialchars($p['domain']) ?>/TODO-path</span>
</div> </div>
<img <img
src="/img/TODO-slug/feature-1.jpg" src="/img/<?= htmlspecialchars($cs_slug) ?>/feature-1.jpg"
alt="TODO description" alt="TODO description"
class="screenshot-screen" class="screenshot-screen"
loading="lazy" loading="lazy"
@@ -111,14 +87,15 @@ $cs_domain = 'TODO'; // e.g. 'example.co.uk' (no https://)
<div class="service-item screenshot-card"> <div class="service-item screenshot-card">
<span class="service-num">TODO Feature label</span> <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-chrome browser-chrome--sm">
<div class="browser-dots"> <div class="browser-dots">
<span></span><span></span><span></span> <span></span><span></span><span></span>
</div> </div>
<span class="browser-url"><?= htmlspecialchars($cs_domain) ?>/TODO-path</span> <span class="browser-url"><?= htmlspecialchars($p['domain']) ?>/TODO-path</span>
</div> </div>
<img <img
src="/img/TODO-slug/feature-2.jpg" src="/img/<?= htmlspecialchars($cs_slug) ?>/feature-2.jpg"
alt="TODO description" alt="TODO description"
class="screenshot-screen" class="screenshot-screen"
loading="lazy" loading="lazy"
@@ -138,15 +115,4 @@ $cs_domain = 'TODO'; // e.g. 'example.co.uk' (no https://)
</div> </div>
</section> </section>
<?php require __DIR__ . '/../../includes/cs_footer.php'; ?>
<!-- ── CTA — DO NOT CHANGE ───────────────────────────────────────── -->
<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>
<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'; ?>

84
portfolio/index.php
View File

@@ -1,83 +1 @@
<?php <?php require __DIR__ . '/../portfolio.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'; ?>

64
portfolio/lhbeng/index.php Normal file
View File

@@ -0,0 +1,64 @@
<?php
$cs_slug = 'lhbeng';
require __DIR__ . '/../../includes/cs_header.php';
?>
<!-- ── HERO SCREENSHOT ───────────────────────────────────────────── -->
<section class="section">
<div class="section-label">Project Overview</div>
<div class="section-content">
<p>Full website redesign with a simple content manager — so you can update your portfolio, team profiles, and job listings yourself without needing a developer every time.</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>
<img
src="/img/lhbeng/hero.jpg"
alt="LHB Engineering — Homepage"
class="screenshot-hero"
loading="lazy"
>
</div>
</section>
<!-- ── FEATURE / FLOW SCREENSHOTS (2-col) ────────────────────────── -->
<section class="section">
<div class="section-label">Website CMS</div>
<div class="services-grid">
<div class="service-item screenshot-card">
<span class="service-num">Website CMS</span>
<p class="screenshot-card__desc">Full-fledged CMS for content.</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']) ?>/admin</span>
</div>
<img
src="/img/lhbeng/admin.jpg"
alt="LHB Engineering CMS admin panel"
class="screenshot-screen"
loading="lazy"
>
</div>
</div>
</section>
<!-- ── CRAFT & EXECUTION ─────────────────────────────────────────── -->
<section class="section">
<div class="section-label">Craft & Execution</div>
<div class="section-content">
<p>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. <br/>The new site is fast, fully responsive, and structured so visitors can quickly find services, past projects, and contact details. <br/>
Alongside the redesign, I built a simple CMS so the team can manage their portfolio, staff profiles, and job listings themselves — no developer needed for day-to-day updates.</p>
</div>
</section>
<?php require __DIR__ . '/../../includes/cs_footer.php'; ?>

62
portfolio/thompson/index.php
View File

@@ -1,44 +1,14 @@
<?php <?php
$cs_slug = 'thompson';
/* require __DIR__ . '/../../includes/cs_header.php';
* CASE STUDY PAGE TEMPLATE
* ─────────────────────────────────────────────────────────────────
* Each project gets its own directory under portfolio/{slug}/
* 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.
* Images: store in /img/{slug}/ — see naming convention in CLAUDE.md.
* ─────────────────────────────────────────────────────────────────
*/
$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';
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>
</div>
<header class="hero">
<div class="hero-label">Case Study — 01</div>
<h1>Thompson<br>Service Centre</h1>
<p class="hero-sub">Website Redesign · 2025</p>
<ul class="cs-meta-bar">
<li>HTML · Tailwind CSS v4 · GSAP</li>
<li>Thompson Service Centre, Peterborough</li>
<li>2025</li>
</ul>
</header>
<section class="section"> <section class="section">
<div class="section-label">Project Overview</div> <div class="section-label">Project Overview</div>
<div class="section-content"> <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 <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 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> their mechanic.</p>
</div> </div>
@@ -48,14 +18,16 @@ require __DIR__.'/../../includes/header.php';
<div class="browser-dots"> <div class="browser-dots">
<span></span><span></span><span></span> <span></span><span></span><span></span>
</div> </div>
<span class="browser-url">thompsonservicecentre.co.uk</span> <span class="browser-url"><?= htmlspecialchars($p['domain']) ?></span>
</div> </div>
<img <div class="screenshot-hero-scroll">
<img
src="/img/thompson/hero.jpg" src="/img/thompson/hero.jpg"
alt="Thompson Service Centre — Homepage" alt="Thompson Service Centre — Homepage"
class="screenshot-hero" class="screenshot-hero"
loading="lazy" loading="lazy"
> >
</div>
</div> </div>
</section> </section>
@@ -64,11 +36,12 @@ require __DIR__.'/../../includes/header.php';
<div class="services-grid"> <div class="services-grid">
<div class="service-item screenshot-card"> <div class="service-item screenshot-card">
<span class="service-num">Vehicle Lookup</span> <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-chrome browser-chrome--sm">
<div class="browser-dots"> <div class="browser-dots">
<span></span><span></span><span></span> <span></span><span></span><span></span>
</div> </div>
<span class="browser-url">thompsonservicecentre.co.uk/book</span> <span class="browser-url"><?= htmlspecialchars($p['domain']) ?>/book</span>
</div> </div>
<img <img
src="/img/thompson/booking-lookup.jpg" src="/img/thompson/booking-lookup.jpg"
@@ -79,11 +52,12 @@ require __DIR__.'/../../includes/header.php';
</div> </div>
<div class="service-item screenshot-card"> <div class="service-item screenshot-card">
<span class="service-num">Booking Form</span> <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-chrome browser-chrome--sm">
<div class="browser-dots"> <div class="browser-dots">
<span></span><span></span><span></span> <span></span><span></span><span></span>
</div> </div>
<span class="browser-url">thompsonservicecentre.co.uk/book</span> <span class="browser-url"><?= htmlspecialchars($p['domain']) ?>/book</span>
</div> </div>
<img <img
src="/img/thompson/booking-confirm.jpg" src="/img/thompson/booking-confirm.jpg"
@@ -104,14 +78,4 @@ require __DIR__.'/../../includes/header.php';
</div> </div>
</section> </section>
<section class="section section-cta"> <?php require __DIR__ . '/../../includes/cs_footer.php'; ?>
<div class="section-label">— Next</div>
<div class="section-content">
<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>
</section>
<?php
require __DIR__.'/../../includes/footer.php'; ?>