Back to All Projects

Mr. Xtractor Auto Detailing

Custom single-page site for a Northern VA mobile detailing business featuring dual 3D carousels, stacked before/after gallery, and OrbisX scheduling integration.

HTML5Bulma CSSSCSSJavaScriptGSAP 3.xOrbisX
Visit Live Site
Mr. Xtractor Auto Detailing Screenshot
🎯
Business/Service / Auto Detailing
Project Type
âš¡
6
Technologies Used
📦
10
Deliverables

Case Study

💡The Challenge

Mr. Xtractor Auto Detailing needed a professional web presence to establish credibility in the competitive Northern Virginia mobile detailing market. As a mobile service, they needed to clearly communicate service areas and pricing tiers while making booking frictionless. The site also needed to showcase their work quality through compelling before/after imagery.

Key Challenges

  • Building two distinct 3D carousels with different interaction patterns
  • Creating a stacked before/after image display that works on all screen sizes
  • Implementing time-based UI elements (call button visibility)
  • Optimizing 28 high-resolution images for fast gallery performance

🎨The Solution

A bold single-page website built around their red-and-black brand identity. Two custom 3D CSS carousels—one rotating customer reviews, another showcasing before/after image pairs in a unique stacked layout. Six detailed service packages with clear pricing breakdowns. An embedded OrbisX booking system eliminates friction, while a floating call button (visible during business hours only) provides instant contact.

Technologies & Approach

HTML5 with semantic markup and AutoRepair schema.org
Bulma CSS 1.0.4 via npm with custom Sass compilation
SCSS for custom theming and advanced styling (900+ lines)
Vanilla JavaScript for carousels, gallery, scroll effects
GSAP 3.13.0 for scroll-triggered animations
CSS 3D Transforms (perspective, rotateY, translateZ)
OrbisX booking platform integration (iframe embed)
Font Awesome 6.5.1 + Google Fonts (Inter, Poppins)

🚀The Result

The site serves as both a booking hub and credibility builder. The review carousel surfaces social proof immediately, the gallery demonstrates work quality across vehicle types, and integrated scheduling converts visitors directly into appointments. The responsive mobile-first design matches how most customers discover and book detailing services.

Project Deliverables

Responsive single-page website (mobile-first)
Fixed navigation with mobile hamburger drawer
Hero section with responsive background scaling
3D CSS review carousel (6 reviews, auto-rotation, controls)
Before/after gallery carousel (14 stacked image pairs)
Fullscreen image viewer with keyboard navigation
6 detailed service cards with scroll-triggered animations
OrbisX booking integration
Floating call button with time-based visibility (6AM-9PM)
SEO implementation (schema.org, sitemap, robots.txt, meta tags)
"
I hired Yaser to build the website for my detailing business, Mr. Xtractor Auto Detailing, and I couldn’t be happier with the results. He took the time to understand my services, branding, and goals. The website is professional, easy to navigate, and helps my business stand out in the Alexandria area. He was responsive, made revisions quickly, and guided me through the process step by step. If you’re a small business or want to revamp your website and are looking for someone reliable and skilled to build your website, Yaser is the guy to go to.
👤
Nery H.
Owner, Mr. Xtractor Auto Detailing

Ready for Similar Results?

Let's talk about your project — no commitment, no pressure.