Delivery snapshot
Record date: August 1, 2025. Technology and screenshots describe the delivered version documented on this date. Any performance observations belong to the same point-in-time record. The linked live site may include later changes made by the client or other providers.
Mr Fade Barbershop needed a premium digital presence that mirrored the in-shop experience and could serve both English and Spanish speaking clients. I led the end-to-end build of a bilingual marketing site focused on trust, storytelling, and frictionless booking. The experience is powered by a cinematic hero, audience-specific CTAs, and a living gallery of recent cuts that updates straight from cloud storage.
- Increase bookings by making contact options obvious and available everywhere
- Deliver a bilingual experience that feels native in both languages
- Showcase the breadth of services and craft through a high-impact gallery
- Preserve brand personality with a bold dark aesthetic while supporting light mode
- Immersive hero with parallax motion, floating portfolio bubbles fed by live gallery data, and bilingual storytelling that adjusts copy and interactions instantly.
- Conversion-first CTAs such as a persistent Call/WhatsApp dialer, mobile bottom nav, and a tactile booking modal with haptic-ready gestures, swipe-to-dismiss, and accessibility-first keyboard support.
- Service catalog featuring 25+ offerings grouped by category, popularity badges, and mobile lazy loading using Intersection Observer so the page stays snappy on slower devices.
- Our Work gallery that pulls the newest high-resolution photos from cloud storage, renders them in a Masonry layout, and ships an animated lightbox with swipe and keyboard navigation.
- Trust-building content across team bios, testimonials, and FAQs surfaced via accordions, all translated through a single language context.
- Next.js App Router + TypeScript for a component-driven architecture, route-based layouts, and zero-runtime metadata via the app/ directory.
- Tailwind CSS design system with custom tokens, glassmorphism surfaces, and responsive typography tuned for both dark and light palettes.
- LanguageContext + next-themes to manage instant EN/ES toggles and theme switching while persisting user preferences in localStorage.
- Framer Motion powering scroll parallax, staggered reveals, lightbox transitions, and modal micro-interactions with reduced-motion fallbacks.
- Serverless image API (app/api/images/route.ts) that connects to a Backblaze B2 S3 bucket, filters media assets, and returns signed URLs for hero bubbles and the gallery.
- Component library including a floating CTA button, mobile nav rail, booking modal, and accordion system, all written as client components for rich interactivity.
Accessibility and Performance
- Honors system preferences for reduced motion, safe-area insets, and dark/light themes.
- Implements semantic landmarks, descriptive alt text, and keyboard-friendly lightbox and modal controls.
- Optimizes media with Next.js Image, prioritized hero assets, and Masonry lazy loading to keep LCP low despite large visuals.
- Adds mobile haptic feedback, momentum gestures, and viewport-aware animations that pause on constrained devices.
Delivery and Collaboration
- Partnered directly with the shop owner to align brand voice, photography curation, and service pricing.
- Deployed to Vercel with preview branches for rapid stakeholder feedback and QA.
- Documented content entry and image upload workflows so the team can maintain the gallery without touching code.
The launch gives Mr Fade Barbershop a high-converting marketing site that reflects their craft, streamlines inquiries, and speaks to the Miami audience in two languages. Since going live the team uses the gallery and booking tools daily, and the site now anchors their social campaigns with a reliable destination that looks and feels like the shop.
View Project
