Mobile car detailingMay 2026

Black Ice Detailing

A mobile detailer's 16 services on one page, dark photography that looks premium, and a call one tap away on every screen.

Designed and built solo for the owner.

LiveDesign and buildVisit Black Ice Detailing

Astro 6
TypeScript
Tailwind CSS 4
Astro Assets with Sharp
Responsive AVIF and WebP
Pre-rendered static HTML
Vite
Vercel CDN
Node 22

blackicefl.com

The services page: the heading Premium Detailing Services Tailored to Your Vehicle, its intro and the Exterior Services section with the first service cards, under the sticky header with its Call button.

The home page on a phone: the sticky header with the menu button, the headline Premium Mobile Detailing, Done at Your Door, and a tap-to-call Call for a Free Quote button.

Client: Black Ice Detailing
Industry: Mobile car detailing
My role: Design and build
Timeline: May 2026
Stack: 9 technologies
Status: Live

The problem

Black Ice Detailing is a mobile detailer in Central Florida. There is no shop to walk into, so the website is the showroom, and most customers will open it on a phone. A premium detail is a considered purchase: a customer wants to see the standard of work, know exactly which services are offered, and then reach the owner without friction. Every slow photo, missing answer or form between interest and a call is a booking that goes to the next detailer in the search results.

What I built

I designed and built a four-page site: home, services, gallery and contact. The home page opens on dark, close-up detailing photography, the headline Premium Mobile Detailing, Done at Your Door, and a Call for a Free Quote button. The services page is the menu: 7 exterior and 9 interior services, each on its own card, plus a packages panel for mixing and matching. The gallery shows three before-and-after jobs, and the contact page pairs Call and Email cards with a short list of what to have ready. The call button repeats in the sticky header, the phone menu and every closing section, and the pre-rendered pages open fast on a phone with nothing for the owner to keep running.

What it does

Features that pay for themselves

Each one in terms of what it does for the business, not what it is made of.

A services menu customers read before they call
Seven exterior services and nine interior ones, from Full Exterior, Headlight Restoration and Engine Bay to Carpet and Seat Shampoo, Leather Conditioning, Pet Hair Removal and Odor Removal, each on its own card. A Custom Detailing Packages panel invites customers to mix and match, with Call for a Custom Quote and Schedule Appointment buttons. A customer arrives at the call already knowing what they want, so the conversation is about when, not what.
blackicefl.com
Seven exterior and nine interior services, each on its own card.
Photography that looks like the finished car
The home page is dark and close-up: a gloved hand brushing a tire beside the headline Premium Mobile Detailing, Done at Your Door, and a gleaming white wheel further down. It sets the premium expectation before a word is read. The gallery backs it up with three before-and-after jobs, a Hyundai rear bumper, a Jeep interior floor and a Kia wheel and fender, each with its Before and After photos side by side.
blackicefl.com
The home page opens on dark detailing photography and a free-quote call button.
A call one tap away on every screen
The sticky header keeps a call button with the phone number in view, the phone menu ends in a full-width call button, and every hero and closing section repeats it: Call for a Free Quote, Schedule Your Detail Today, Call Now. The contact page adds Call and Email cards with a Helpful Details list, your vehicle, detailing preferences, location and timing, so the owner can quote from the first call. There is no form to check and nothing between a customer's interest and a ringing phone.
blackicefl.com
Call and Email cards, plus what to have ready when you call.

Engineering

Under the hood

For the partner who reads code.

Sixteen services and three jobs as typed data
The services menu is two typed arrays, seven exterior and nine interior entries, that render into cards, so adding or renaming a service is a one-line edit and a missing field fails the type check. The gallery works the same way: each job is a typed entry whose Before and After photos are looked up by file name at build time, and a name that matches no photo throws and fails the build instead of shipping a broken card. One shared layout takes each page's title and description and writes its own meta and Open Graph tags.
Pre-rendered pages, about twenty lines of script
There is no backend, database, form service or analytics script. The whole site is nine source files that build into static HTML served from Vercel's CDN, and the only JavaScript the browser receives is a roughly twenty-line typed toggle for the phone menu that keeps its expanded state and label in sync for screen readers. The call buttons are plain tel: links, so they work with scripts off. Every photo passes through Astro's asset pipeline with Sharp and comes out as AVIF and WebP at several widths with a sizes hint. The 3024 by 4032 hero photo loads eagerly as the largest thing on screen while the gallery photos lazy-load, so the dark photography does not cost the page its speed.

Gallery