Scrap Calculators
Free real-time precious metals calculator and educational resource — built for everyday people who want to know what their gold, silver, or platinum is worth before selling.
Home
Works
Services
Resources
Contact
Responsive Design
Mobile
375px viewport
Pro Match Paints
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.
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
About
Pro Match Paints is an automotive paint and color-matching supplier based in Bellflower, CA. They serve both professional collision centers and DIY enthusiasts with an extensive catalog of paints, primers, and finishing products — with a focus on precision color matching.
Highlights
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.
Tags
AutomotivePaint SupplyShowcaseNext.jsReactTypeScriptTailwind CSSBellflower, CA
Not sure where to start?
Other Projects
Maaz Roofing Inc
Full marketing and lead generation website for Maaz Roofing Inc — a licensed, BBB Accredited A+ roofing contractor with 30+ years of craftsmanship across Southern California. Built in Next.js 15 with a drone video hero, bilingual EN/ES support, interactive services accordion, and a 10-project portfolio carousel.
Apex Build
Full multi-page marketing website for a fictional Texas-based general contracting company, built with a bilingual UX targeting the Austin construction market.