From zero web presence
to local heavyweight.
Harvey launched with the tools, the van, and the 5-star reviews — but no website. We built a fully customised one-page engine that proved small sites deserve full engineering treatment.
The Visibility Void: From Logo to Lead Generation
Meet Harvey Thomas Martin Ross. In June 2023, he launched Harvey T Ross LTD — a Gas Safe registered plumbing and heating company serving Newport and South East Wales. He had the qualifications, the tools, the van, and a growing list of satisfied customers leaving 5-star reviews on Facebook.
What he didn't have: a website.
Harvey's entire online presence was a logo and a Facebook page. No portfolio. No service breakdown. No way for a potential customer Googling "plumber Newport" at 11pm with a leaking boiler to find him, trust him, or contact him. In a trade where credibility is everything, invisibility is commercial death.
This wasn't about fear or embarrassment — it was simpler than that. Harvey needed to exist online. Properly.
What was holding him back
- ✗Zero web presence beyond a Facebook page
- ✗No way to showcase completed bathroom transformations
- ✗No trust signals (Gas Safe badge, reviews) visible to search engines
- ✗Losing enquiries to competitors with professional sites
- ✗No structured contact flow — relying on Facebook Messenger
- ✗Invisible to "plumber near me" searches
The Soul: Small Site, Full Craft
"We've never done a small website which is fully customised." Most agencies would template this. We don't work like that.
The Same Stack
Custom Tailwind configuration, bespoke animation system, responsive image pipeline built with Sharp, vanilla JavaScript, PHP + PHPMailer for contact security. The same stack we'd use for a £15k application — applied to a one-page build.
No Templates, No Exceptions
Most agencies would grab a Wix theme, swap the logo, and ship it in an afternoon. We wrote 120 lines of vanilla JavaScript for a bespoke modal gallery because that's what Harvey's customers needed. Every interaction engineered from scratch.
Engineered, Not Assembled
Every byte is intentional. Zero framework bloat — no React, no Bootstrap, no jQuery. Custom-built HTML5, custom Tailwind JIT build, vanilla ES6, Sharp image pipeline, twin honeypots, rate limiting, SMTP fallback. This is a one-page site built like it mattered.
The Fix: The One-Page Engine
Building a one-page site isn't about doing less — it's about doing everything in a single scroll. Every section engineered to convert.
The Hero: Everything at a Glance
Animated gradient background with floating orbs generated dynamically in vanilla JavaScript. Clear value proposition, dual CTAs, trust badges (Gas Safe, 5-star rating, operating hours) front and centre. Harvey's photo with a subtle hover reveal. One screen, everything a potential customer needs.
The Services Grid
Six service cards — Boiler Services, Central Heating, Gas Safety, Bathroom Installations, Emergency Plumbing, General Plumbing — each with a Lucide icon, breakdown, and hover animations. Single column mobile, two columns tablet, three columns desktop. No carousels. No hidden content. Immediate clarity.
The Project Gallery
Four featured bathroom transformation projects with before/after images, descriptions, and embedded video walkthroughs. Click a card: bespoke modal opens with full gallery and lightbox. Keyboard-accessible, focus-trapped, ARIA-compliant. Lazy-loaded WebP images at three responsive breakpoints — no layout shift, no jank.
The Contact Flow
Multi-layer anti-spam: honeypot field, time-based honeypot (submissions under 3s rejected), session-driven rate limiting (60s minimum, 5-per-hour cap), spam pattern detection. PHPMailer with SMTP + TLS, fallback to PHP mail(). All errors logged, never displayed. Built like a vault.
The Refined Component: The Modal Gallery System
When you click "View Project" on one of Harvey's bathroom transformations, you're not opening a lightbox plugin or a third-party gallery widget. You're activating a bespoke modal system we built from scratch — 120 lines of vanilla JavaScript.
How It Works
- Click the project card — or press Enter/Space if navigating by keyboard
- Modal slides in with project title, description, and image grid
- Tabbing is trapped within the modal — you can't accidentally focus behind it
- Click an image: lightbox opens with full-size view and navigation arrows
- Press Escape or click outside: modal closes, focus returns to the trigger
Why It Matters
Most gallery plugins are 50KB+ of JavaScript you don't control, with accessibility as an afterthought and performance as a distant third. We wrote 120 lines of vanilla JS that does exactly what Harvey's customers need: view bathroom transformations clearly, navigate intuitively, and close when done. No bloat. No third-party dependencies. Just clean code that works. This is what "fully customised" means.
A modal gallery isn't impressive technology. What's impressive is writing it in 120 lines with full keyboard navigation, focus trapping, ARIA roles, and zero dependencies — then realising most agencies would have shipped a 50KB plugin for the same result. This is the discipline that separates "built" from "assembled."
The One-Page Engine in Full
A one-page site where every section is custom-built, every image is served at the right size, and every interaction is intentional. No templates. No page builders. Just proper engineering.
Desktop: the full one-page engine
Mobile: trade-worthy on every screen
Visibility Delivered
Harvey went back to doing what he does best: plumbing. After the site launched, he stopped responding to emails. Not because something was wrong — because everything was working.
The site exists. Google can find it. Customers can see his Gas Safe badge, his 5-star reviews, his bathroom transformations. They can call him or submit the contact form. The enquiries come in. He responds. He books the jobs. That's the outcome — not a dramatic transformation story, just professional visibility, delivered.
Sometimes the best result is when a client forgets they needed you in the first place.
The work speaks for itself
Harvey T Ross LTD doesn't have a client quote for us. He went silent after launch — a recurring pattern with tradespeople who just need a site that works and don't want to spend time writing testimonials. And honestly? That's fine.
This is a one-page brochure site that scores 92 on PageSpeed Performance, 100 on SEO, 100 on Best Practices, and loads in under 2 seconds. It has a bespoke modal gallery system, military-grade contact form security, responsive WebP images served at three breakpoints, and zero framework bloat. It's custom-built from the HTML up. No templates. No page builders. No shortcuts.
Most agencies would have templated this. We built it like it mattered.
How We Built It
HTML5. Tailwind CSS. Vanilla JavaScript. PHP + PHPMailer. Sharp image pipeline. The same stack we'd use for a £15k application.
The Modal & Contact Vault
The hardest technical hurdle: multi-layer contact form security that blocks bots without alienating humans, plus a bespoke modal gallery in 120 lines of vanilla JS with full keyboard navigation, focus trapping, and ARIA compliance. All on shared hosting. No database. No plugin fallback.
The SEO Foundation
LocalBusiness schema with geo-coordinates, opening hours, and service area. FAQPage schema for People Also Ask targeting. Individual Review entities with 5-star ratings. Semantic HTML5 with full WCAG 2.1 accessibility compliance. Every trust signal surfaced to search engines.
The Image Pipeline
Sharp generates WebP versions at three breakpoints (400px, 800px, 1200px) from original images. Each is served via <picture> elements with media queries and lazy loading. Explicit width/height attributes prevent CLS. Three breakpoints, one clean pipeline.
Restraint as Speed
Local Tailwind JIT build producing a single minified CSS file. Custom animation keyframes compiled to CSS, not run at render time. IntersectionObserver with 15% threshold handles scroll reveals — no scroll event listeners. All scripts deferred. Lazy loading below the fold. Video with preload="metadata" and poster frames. Zero framework bloat.
The Tech Specs
For the nerds
project: Harvey T Ross LTD
type: One-page brochure site (custom-built)
html: HTML5 (semantic, WCAG 2.1 compliant)
css: Tailwind CSS 3.4.17 (local JIT, PostCSS + Autoprefixer)
javascript: Vanilla ES6 (zero frameworks)
backend: PHP 5.5+ with PHPMailer 6.12.0
icons: Lucide (self-hosted)
images: Sharp 0.33.2 for WebP + 3 responsive breakpoints
mail: PHPMailer with SMTP + TLS, fallback to mail()
key_features:
- Hero animations (floating orbs, gradient overlay)
- Bespoke modal gallery + lightbox system (120 lines vanilla JS)
- Contact: honeypot, time gate, rate limiting, spam detection
- Responsive images: WebP, 3 breakpoints, lazy loading
- IntersectionObserver scroll animations (15% threshold)
- Structured data: LocalBusiness, FAQPage, Reviews
performance:
pagespeed: 92 Desktop Performance
accessibility: 93
best_practices: 100
seo: 100
load_time: < 2 seconds
image_format: WebP (400px/800px/1200px)
bloat_level: 0% (vs 100% template approach)Ready to turn your logo into a digital heavyweight?
If you want a site that's actually engineered — not assembled from blocks — even if your empire starts with a van, a Gas Safe card, and a Facebook page.
More case studies
See what else we've built — hand-coded, no templates.