Premier Automotive Paint Store
7-page automotive paint marketing site with HLS.js video gallery, lightbox with keyboard nav, requestAnimationFrame infinite brand carousel, custom scroll animation hook, session-aware splash screen, page transition system, and three JSON-LD schemas — zero UI libraries or animation frameworks.
Mobile
375px viewport
Two custom mobile nav variants
Default inline collapse and hero slide-in overlay with staggered child animation using CSS delays — no external menu library
HLS video gallery on mobile
Full-screen lightbox with HLS.js streaming, tap-to-navigate thumbnail strip, and swipe-friendly arrow controls — lazy-loaded only when needed
Scroll animations on mobile
useScrollAnimation() hook triggers directional fade-ins as content enters the viewport — smooth on any device, respects prefers-reduced-motion
Fast mobile-first build
AVIF images via next/image, lazy-loaded HLS.js, server components everywhere except interactive pages — lean bundle on every screen size
Pro Match Paints is a 7-page marketing and showcase site for a Bellflower, CA-based automotive paint and color matching supplier serving both professional collision centers and DIY enthusiasts. The Work section highlights 14 completed projects through a full-screen video and photo gallery with keyboard navigation and a thumbnail strip. The homepage features a 3-slide hero carousel, a live customer reviews section, and an infinite brand logo scroll. The Products page lets visitors explore the full catalog by category, and every page loads with a cinematic branded intro and smooth transitions between sections.
HLS Video Gallery + Lightbox
14-item gallery (10 HLS .m3u8 videos + 4 images) in a full-screen lightbox with arrow key/ESC navigation, thumbnail strip, and lazy-loaded HLS.js — only initialized when video content is detected.
Custom Scroll Animation System
useScrollAnimation() hook backed by IntersectionObserver supports directional fade-in (up/down/left/right) with configurable delay, duration, and one-time trigger — no GSAP or Framer Motion.
rAF Infinite Brand Carousel
requestAnimationFrame-driven infinite scrolling logo carousel with gradient edge fade and pause-on-hover — no external carousel library, no layout jank.
Session-Aware Splash Screen
Branded logo intro screen shown exactly once per session via sessionStorage — suppressed on repeat visits and page refreshes without any timing bugs.
Page Transition System
Detects route changes via usePathname(), fades content out, smooth-scrolls to top, then fades back in — consistent cinematic feel across all 7 pages with no flash.
Full SEO with Three JSON-LD Schemas
AutoPartsStore, WebSite, and SiteNavigationElement schema.org structured data baked in, alongside a generated sitemap.ts and robots.ts using Next.js App Router conventions.
Not sure where to start?
6-page personal brand site with custom bilingual EN/ES support (900+ line translations file, no i18n library), History API client-side routing, Intersection Observer scroll animations, floating orb background, live YouTube + Spotify API feeds, and a hero background video — zero UI component libraries.
Corporate site for a forward-thinking multifamily developer—sustainability and urban transformation focus.
Bilingual website for a 100% Mexican crane rental company established in 1984, featuring a fleet of hydraulic cranes and industrial equipment for construction, mining, and energy projects.
