Safer Electric
Client: 30+ year licensed contractor · ESA Licence #7008996 · WSIB Insured · ESA Connection Authorization Holder
Safer Electric had three decades of credibility offline and almost nothing online when they came to us. We needed to build them a multi-page site that ranked in search, read like a $50K agency build, and converted the 20-to-40-year-old homeowners, property managers, and general contractor decision-makers they actually wanted to land.
The brand needed to land somewhere between a 50-year-old electrical firm and a premium tech company. Trustworthy, but never stuffy.
Built on Next.js 15 + RSC
App Router, React Server Components, TypeScript strict (no any). generateStaticParams pre-renders every service and city page at build for the fastest possible TTFB. Bun as the package manager and dev runtime.
Glassmorphism design system
Tailwind v4 with a custom design-token layer in CSS variables. shadcn/ui (New York style) as the primitive base, customized everywhere it shows. Backdrop-blur cards over deep navy. Gold accent borders that warm on hover. Hand-tuned, not template-stamped.
Three typefaces, one DNA
Cormorant Garamond on display (italic for emphasis). Plus Jakarta Sans for body and UI. JetBrains Mono for numbers, licence numbers, and technical metadata. Same trio across Safer Lighting and Safer Inventory. Three properties, one brand.
Motion that feels expensive
Framer Motion for scroll-triggered fades and staggered card entrances. Spring config at damping 20, stiffness 180. Not bouncy, not mechanical. A hand-rolled canvas particle system in the hero (30 to 40 gold particles drifting up at low opacity, no library).
AI chatbot, streamed
Anthropic Claude Sonnet via the Anthropic API. Streams responses in real time. System prompt carries Safer's brand voice, ESA licensing context, and routing rules for emergencies vs quotes vs general questions. Triages off-hours leads while the human team sleeps.
SEO that actually ranks
Per-page generateMetadata. JSON-LD on every route (LocalBusiness site-wide, Service schemas on service pages, BlogPosting on articles, FAQPage on service detail pages). Auto-generated sitemap.ts and robots.ts. Recently trimmed from 85 city pages to 25 hand-curated ones to dodge Google's thin-content penalty.
- ✓React Hook Form + Zod schemas (centralized in src/lib/validations.ts). Fully typed end to end, no runtime surprises.
- ✓Multi-step booking form with progress indicator and Server Actions. No exposed API keys, no client-side surface.
- ✓Resend API for transactional email delivered to info@saferelectric.ca
- ✓Buttondown API for newsletter list management
- ✓Custom cursor on desktop only. Gold dot plus a trailing ring, lerped with requestAnimationFrame, scales on hover, hidden on touch.
- ✓2px gold scroll progress indicator pinned to the top of the viewport
- ✓IntersectionObserver-based section reveals. GPU-composited and memoized.
- ✓next/image with proper width/height attributes everywhere. Zero CLS.
- ✓next/font for subset and preload optimization
- ✓Vercel hosting with edge functions, automatic preview deploys on every PR
- ✓Vercel Analytics + Google Analytics (GA4 G-R35LZSXXH5) for traffic and Core Web Vitals
- ✓Lighthouse 95+ across Performance, Accessibility, Best Practices, SEO
// Why this build is portfolio-worthy
This is a live production site that has been indexed and generating leads for a 30-year-old business since the day we shipped it. The CNIB Pedestrian Bridge and the GO Transit bus depots on the project pages are real Safer jobs we photographed ourselves. There's no stock photography anywhere on the site.
The visual language is somewhere between an editorial magazine and a premium electrical contractor. Restrained gold on warm navy, cream over navy instead of pure white on black, glassmorphism that doesn't scream. Most of the work is done by typography, spacing, and motion, none of which is shouting for your attention.