WebsiteTradesConstructionLocal BusinessPerthPhotographyDrone2026
Sharp Bricklaying
A premium Perth bricklayer's digital home — built from the ground up with licensed drone aerials, a multi-job gallery system, and copy that earns the standard.
Client note
I couldn't recommend Caleb from C4 highly enough. From the very beginning, the entire process of creating our company website was seamless. They took the time to understand our business, brought our vision to life, and delivered a website that exceeded our expectations in both design and functionality. What really sets them apart, though, is the ongoing support after the website was completed. They've continued to manage our website, make updates whenever needed, and are always incredibly quick to respond. No request is ever too much trouble, and every change is handled professionally and efficiently. Their communication is outstanding, and it's clear they genuinely care about their clients and the success of their businesses. It's rare to find someone who's not only highly skilled but also so reliable, proactive, and easy to work with.
Luke Sharp
Sharp Bricklaying
ClientLuke Sharp
LocationPerth, Western Australia
Timeline9 days (25 Apr – 3 May 2026)
Budget$2.5k – $5k
RoleSolo (design, development, deployment, photography, drone, video)
01
Overview
Luke Sharp had over 15 years in the trade and a genuine premium standard — but no digital presence to match. Sharp Bricklaying was founded in 2016 and had grown steadily through word of mouth and relationships with high-end Perth builders, yet the business had no website at all. C4 Studios came in as the full-stack partner: designing and building the site from scratch, conducting on-site and drone photography across multiple active job sites, capturing GoPro POV footage, and deploying the finished product on Netlify with a serverless Resend email backend. The result is a gallery-first, single-page site anchored by an aerial drone hero carousel, a tabbed five-job portfolio system, two before-and-after transformation galleries, and brand copy written to hold its own next to the highest-end builders in Perth. The site shipped in nine days — from first commit to final polish — and positions Sharp Bricklaying as exactly what it is: the sharpest bricklaying crew in Western Australia.
02
Screenshots
03
What I Delivered
- Full custom single-page website — design, development, and Netlify deployment
- Custom 404 error page
- Privacy Policy page (/privacy.html)
- Web App Manifest (PWA-ready — installable, standalone display mode)
- Schema.org LocalBusiness structured data (JSON-LD)
- SEO meta tags (title, description, keywords, canonical URL)
- Open Graph + Twitter Card tags (og:image, og:title, og:description)
- XML sitemap (/sitemap.xml)
- robots.txt with /uploads/ disallow
- Security headers (_headers + netlify.toml — X-Frame-Options, HSTS, CSP-equivalent, Referrer-Policy, Permissions-Policy)
- HTTPS redirect rules + www→apex redirect (_redirects)
- Cache-Control headers for images (1yr immutable), CSS/JS (1wk)
- Favicon set (16×16, 32×32, apple-touch-icon, 192×192, 512×512)
- Netlify serverless function for contact form email delivery (send-email.js)
- Resend API integration (server-side email to [email protected])
- Contact form with honeypot spam protection, client-side + server-side validation
- C4 Studios animated footer credit (JS module)
- On-site photography — Custom Window Design stages 1–3 (Cottesloe circular window)
- On-site photography — Stairs & Steps (Nedlands retaining mass brick stairs)
- On-site photography — Feature Brickwork / hit-and-miss boundary wall (Subiaco)
- On-site photography — Luke Sharp and crew in action (about section portrait)
- On-site photography — finished brickwork detail shots (corners, coursing, face brick, feature walls)
- Before/After photography — Branksome Gardens City Beach (brick to full render)
- Before/After photography — Broome St Cottesloe (curved brickwork, before + after sets)
- Licensed aerial drone photography — 11 hero aerials deployed (13+ stills in asset library)
- Licensed aerial drone photography — Header Aerial Shots series (12 additional aerials)
- Licensed aerial drone photography — Rhonda Ave Willeton job site (7 aerial stills)
- Drone video — Rhonda Ave Willeton (2 × MP4 drone flyover videos)
- GoPro / POV site footage — Huon St Willeton (2 × MP4 POV videos)
- Site video — Avonmore Terrace Cottesloe (2 × MP4 on-site videos)
- Tabbed job gallery system — 5 jobs: Rhonda Ave Willeton, Huon St Willeton, Branksome Gardens City Beach, Waller St Lathlain, Avonmore Terrace Cottesloe
- Per-job photo grid — portrait/landscape-aware layout with custom object-position per shot
- Per-job video section — self-hosted MP4 with poster frames, preload=metadata, playsinline
- Gallery service groups — Custom Window Design, Stairs & Steps, Feature Brickwork
- Instagram and Facebook social media integration (links + footer icons)
- Responsive mobile-first layout (single-column mobile, two-column desktop throughout)
04
Key Features
- Animated brick canvas loader — Canvas API renders brick-by-brick from bottom to top, each row slides in from alternating sides, with mortar joints, brick colour variants, and a percentage counter. On completion, a CSS wipe-up reveals the site. Skipped for returning visitors (sessionStorage) and prefers-reduced-motion users.
- 11-image aerial drone hero carousel — full-viewport crossfade slideshow cycling through hero-aerial-01 through hero-aerial-11 at 6-second intervals (first slide held for 8 seconds to account for loader). Preload="eager" on slide 1, lazy on remainder.
- Hero parallax scroll effect — background offset on desktop using passive scroll listener (disabled on mobile <900px and prefers-reduced-motion)
- "Built to a Higher Standard" brand headline — Barlow Condensed 900 weight, clamp(56px, 8vw, 104px), white on dark green gradient overlay
- Hero eyebrow + subheadline + dual CTA buttons (See Our Work → gallery, Get in Touch → contact)
- Sticky navigation — transparent-to-white transition at 60px scroll (with green border + shadow), logo swap state
- Active nav link highlighting — IntersectionObserver tracks which section is in view, adds .active class with animated underline
- Full-screen mobile menu overlay — forest green background, Barlow Condensed 900 links, slides open/closes with opacity + visibility transition, body scroll locked while open
- Hamburger to X animation — three-span CSS transform; full keyboard accessibility (Escape closes, focus management)
- Services section — 2-column card grid (Residential New Builds, Renovations & Extensions) with custom SVG icons, descriptive copy, and enquiry CTAs
- Service-to-form pre-fill — clicking "Enquire Now" smooth-scrolls to the contact section, pre-selects the matching project type, and injects a message starter into the textarea
- About / Luke's Story section — 2-column layout (photo + text), floating "15+ Yrs Experience" badge, decorative brick watermark, pullquote block, founding story from 2016
- Service gallery groups — numbered sections (01–03): Custom Window Design 3-stage progression with arrow connectors, 3-column and 2-column photo grids
- ARIA-compliant tabbed job gallery — tablist/tab/tabpanel roles, 5 job tabs, full keyboard navigation (ArrowLeft/Right, ArrowUp/Down, Home/End), aria-selected state management
- Per-job masonry-style photo grid — portrait/landscape variants (job-media-item--portrait, job-media-item--contain) with custom object-position per shot
- Per-job video section — self-hosted MP4 (no external CDN), preload="metadata", playsinline, controls, poster frames from stills
- Gallery lightbox — full-screen image expand (click or Enter/Space), focus trap, Escape to close, focus returns to trigger on close, accessible dialog role
- "From First Course to Final Finish" before/after section — stacked image pairs with location pin labels and directional arrow dividers (Branksome Gardens City Beach + Broome St Cottesloe)
- Contact/enquiry form — Name, Phone, Email, Project Type select (New Home / Extension / Renovation / Feature Wall / Other), Message
- Form honeypot — hidden _gotcha input prevents basic bot submissions (client-side + server-side check)
- Netlify serverless function backend — POSTs to Resend API, server-side validation, input sanitisation with length caps, reply-to set to submitter's email
- Animated form status messages — success (auto-clears after 8 seconds) and error states, aria-live="polite"
- Footer 3-column grid — brand/logo, Navigate links, Connect col with email + social; "Built to a Higher Standard. Built Sharp." tagline
- Dynamic footer year — JS sets current year automatically
- C4 Studios animated footer credit — custom JS module (c4-footer-credit.js)
- Footer legal strip — ABN listing for both entities (Sharp Bricklaying + Sharp Bricklaying Pty Ltd)
- Scroll-reveal animations — IntersectionObserver reveals all non-hero sections with fade/transform (threshold 0.08), disabled for prefers-reduced-motion
- Back-to-top button — appears after 600px scroll, smooth-scrolls to top (instant for reduced-motion)
- Skip to main content link (keyboard-accessible, visible on focus)
- Prefers-reduced-motion support — disables Canvas loader, hero carousel transitions, parallax, scroll reveals; content shown immediately
- ARIA labels on all interactive elements (buttons, links, dialogs, nav)
- No-JS fallback — <noscript> override makes all sections visible if JS disabled
- Progressive Web App (PWA) — Web App Manifest, theme-color, standalone display mode, maskable icon, AU locale
- Schema.org LocalBusiness structured data — JSON-LD with address, areaServed, openingHours, priceRange, sameAs social links
05
Stack & Tooling
- HTML5 (static, no framework or SPA)
- CSS3 (vanilla, custom properties, no preprocessor)
- Vanilla JavaScript (ES5 + ES6, IIFE-wrapped, no bundler)
- Canvas API (brick loader animation)
- IntersectionObserver API (scroll reveal, active nav, stat counter trigger)
- Google Fonts — Barlow Condensed (600–900), Lato (300–400–700)
- GSAP v3.15.0 (installed, local vendor files; reserved for future animations)
- Netlify (hosting, build processing — CSS/JS/HTML/image optimisation, CDN)
- Netlify Functions (Node.js serverless runtime for contact form)
- Resend API (transactional email delivery)
- Web App Manifest (PWA)
- Schema.org JSON-LD (LocalBusiness structured data)
- npm (package management)
- Git (version control)
06
Integrations & Backend
- Resend — transactional email API (form enquiries delivered to [email protected] via serverless function; API key stored in Netlify environment variables, never exposed to browser)
- Instagram — social link (@sharpbricklaying) in contact section and footer
- Facebook — social link in contact section and footer
- Google Fonts — Barlow Condensed + Lato via fonts.googleapis.com CDN (preconnect hints in <head>)
- Netlify CDN — all static assets (images, CSS, JS) served via Netlify edge network
- Schema.org — LocalBusiness markup for Google rich results (business name, address, area, hours, price range, social profiles)
07
Performance / SEO / Accessibility
- Image lazy loading — loading="lazy" on all non-critical images; hero slide 1 uses loading="eager" with <link rel="preload">
- Decoding async — decoding="async" on all job gallery images to avoid blocking the main thread
- Image compression — Netlify build processing (compress: true) applied at deploy time
- Self-hosted video — all MP4 videos served via Netlify CDN; preload="metadata" avoids full video preload; no external CDN dependency
- CSS/JS minification — Netlify build processing minifies and bundles at deploy time
- Deferred scripts — main.js and lightbox.js use defer; c4-footer-credit.js uses type="module" (auto-deferred)
- Reduced-motion loader skip — returning visitors (sessionStorage flag) and prefers-reduced-motion users bypass the Canvas loader for instant paint
- Passive scroll listeners — all scroll event listeners use { passive: true }
- Security headers — X-Frame-Options DENY, X-Content-Type-Options nosniff, Referrer-Policy strict-origin-when-cross-origin, Permissions-Policy (camera/mic/geo denied), Strict-Transport-Security (1yr, includeSubDomains, preload)
- Long-lived caching — images 1 year (immutable), CSS/JS 1 week, HTML 1 hour
- HTTPS-only — _redirects forces all HTTP and www traffic to https://sharpbricklaying.com.au/ via 301 permanent redirect
- Accessibility — skip link, ARIA roles and labels throughout, focus management in lightbox and mobile menu, full ARIA keyboard pattern for gallery tabs, aria-live="polite" on form status
- No-JS fallback — <noscript> stylesheet override renders all sections visible if JavaScript is blocked
08
Challenges & Constraints
- Media volume management — ~100+ photos and 6 videos sourced from WhatsApp (raw filenames, mixed portrait/landscape orientations). Required systematic cataloguing into named job folders, custom object-position tuning per image, and portrait/landscape variant CSS classes to handle aspect ratio diversity without cropping important content.
- Canvas brick loader — building a convincing brick-laying animation from scratch with proper row-by-row English bond construction, mortar joints, per-brick colour variance, and a smooth directional slide-in per row. The animation had to complete at ~2600ms, capture as a JPEG texture, then perform a full-height wipe-upwards reveal — all without a library.
- Hero aerial carousel timing — the loader runs for ~3 seconds before the hero becomes visible. The first hero slide needed an 8-second hold to give the opening aerial a full 5 seconds of visible dwell time after the reveal, requiring careful coordination between loader and carousel timing.
- Job gallery tabs accessibility — implementing a fully ARIA-compliant tablist with correct role, aria-selected, aria-controls, tabindex management, and the complete ARIA keyboard pattern (ArrowLeft/Right, ArrowUp/Down, Home, End) in vanilla JavaScript without a UI library.
- Representing a premium trades business without generic templates — bricklaying sites typically look rough. The challenge was building something architecturally considered: extreme-weight display type, a dark forest green that reads premium not tradesman-green, detailed brand copywriting ("Built to a Higher Standard"), and treating site photography with the same curation as a luxury residential architect would.
- Before/after UX without a slider — rather than a drag-slider (which works poorly on mobile), the design uses stacked image pairs per transformation with directional arrows — giving equal prominence to multiple stages and working across all screen sizes.
- Mobile video performance — six self-hosted MP4 files embedded in-page. Used preload="metadata" to limit bandwidth on mobile, playsinline to prevent iOS fullscreen takeover, and poster images from stills to ensure non-blank video placeholders.
09
What I'd Improve Next
- CMS integration — a headless CMS (e.g. Sanity) to let Luke self-manage job gallery photos and add new jobs without code changes
- Additional job galleries — Branksome Gardens City Beach and Waller St Lathlain have no video yet; drone/site footage would complete those tabs
- Google Reviews widget — dynamic star-rating and review feed embedded in the About or Contact section
- Instagram feed embed — live @sharpbricklaying feed pulled into the site
- Enquiry form file upload — attach site plans or reference images with an initial enquiry
- Online quoting / project brief tool — multi-step form capturing project type, budget, suburb, timeline before routing to Luke
- Google Analytics or Plausible — no analytics currently deployed; adding privacy-respecting analytics would give Luke visibility into traffic sources and form conversion