Smart Geeks — Full Case Study

A 35-page static website for a Surrey BC tech-repair business, built with Cloudflare Pages + Workers, deployed to 3 CDNs for redundancy, and rendered in 5 different visual styles for this showcase.

35
Pages
888
KB total
5.0
Quality score
200+
Reviews
01 — THE BUSINESS

What we built

Smart Geeks is a trusted independent tech-repair shop in Surrey, British Columbia. They've been fixing phones, laptops, consoles, and PCs for 10+ years. The brief was simple: rebuild the marketing site to (a) match the quality of their work, (b) be fast, (c) be SEO-strong, and (d) be maintainable by non-developers.


We chose static HTML over a CMS or framework. No build step. No npm. Just HTML, CSS, and a small Cloudflare Worker for the contact form. The result: 888 KB total across 35 pages, served from Cloudflare's global edge, with cache headers that ensure repeat visits land in under 50ms.

02 — THE STACK

What powers it

Frontend

  • Static HTML5 (no framework)
  • Hand-written CSS (Space Grotesk + Inter + JetBrains Mono)
  • ~30KB CSS per page
  • Zero JS dependencies on most pages
  • Vanilla JS for contact form + FAQ accordion

Backend

  • Cloudflare Workers (contact form, lead capture)
  • D1-compatible KV for spam protection
  • Schema.org LocalBusiness JSON-LD
  • AggregateRating + Review schema
  • Open Graph + Twitter Cards

Infrastructure

  • Cloudflare Pages (primary)
  • Netlify (redundancy)
  • Vercel (redundancy)
  • Custom domain: smartgeeks.ca
  • DNS via Cloudflare, edge caching enabled

Content

  • 35 HTML pages (Home, About, Services, Blog, Contact, etc.)
  • 6 long-form blog posts (1,500–3,000 words each)
  • 6 service-area pages (Surrey, Delta, Langley, etc.)
  • Schema markup on every page
  • Sitemap.xml + robots.txt
03 — METRICS

How it performs

5.0
Site quality score
<50ms
Cached TTFB
100
Lighthouse SEO
100
Lighthouse Best Practices
95+
Lighthouse Performance
100
Lighthouse Accessibility
04 — REDUNDANCY

Three CDN deploys

If one CDN goes down, the site stays online via the other two.

05 — THIS SHOWCASE

The variant exercise

Same content, five visual languages.

This showcase takes the Smart Geeks content (about, services, business, contact, testimonials) and renders it in five radically different visual styles. The goal is to demonstrate how the same information architecture can be dressed in any design language without changing the underlying copy, structure, or business value.


Each variant is a single self-contained HTML file with no external dependencies except Google Fonts. Open them side-by-side to see how dramatically the same content can feel depending on the chosen aesthetic.

View variants → Live embed Visit live site ↗