Web Design & Development

Ricardu's Barbershop

Barbershop website (est. 2010) showcasing premium services through elegant pricing table with 10 services, experienced team of three barbers, interactive photo gallery, customer testimonials with 5-star ratings, and Google Maps integration for easy location access.

Built with React 19, TypeScript, and Framer Motion featuring sophisticated monochrome palette (black, white, zinc shades), custom Rumble Brave font for distinctive branding, scroll-triggered animations, and fully responsive mobile-first layout.

Completed Date: May 2026
Visit Live Site
Project Details

Overview

Industry

Personal Care & Grooming

Scope

Complete website design and development with custom branding, interactive components, Google Maps integration, and Firebase hosting

Timeline

3 weeks from design to production deployment

The Problem

Challenge

Ricardu's Barbershop, a well-established business with 15+ years of experience and over 5,000 clients in Lisbon, lacked a modern online presence to match their premium service quality. They needed a website that would showcase their team's expertise, communicate their extensive service offerings with transparent pricing, and make it easy for new clients to find them. The challenge was to create a sophisticated digital experience that reflected their blend of traditional craftsmanship and contemporary style, while ensuring accessibility across all devices and age groups.

Our Approach

Solution

We designed and developed a sleek, single-page website that puts their strengths front and center through strategic content sections: an engaging hero with social proof (4.9 Google stars, 5000+ clients), an interactive team showcase highlighting each barber's experience, and a comprehensive pricing table with all 10 services clearly detailed. The site leverages Framer Motion for smooth scroll animations that create visual interest without sacrificing performance, while the custom Rumble Brave typography and monochrome color palette establish a distinctive, premium brand identity. Google Maps integration with a one-click directions button eliminates friction for first-time visitors, and the mobile-first responsive design ensures the experience is equally polished on smartphones—where most potential clients will discover the business.

What's Included

Key Features

Fully Responsive Design
Smooth Scroll Animations
Custom Typography & Branding
Interactive Photo Gallery
Google Maps Integration
Service Pricing Table
Team Profile Showcase
Mobile-First Design
Performance

Results

95/100
Performance Score
Google Lighthouse performance with optimized assets
100/100
Mobile Responsiveness
Perfect mobile compatibility across all devices
< 1.2s
First Contentful Paint
Fast initial page load with optimized fonts
98/100
SEO Score
Excellent SEO with semantic HTML and proper meta tags
Technology

Tech Stack

React 19
TypeScript 5.x
Vite 7.x
Tailwind CSS 3.x
Framer Motion 12.x
Lucide React
Firebase Hosting
Google Maps API
Get Started

Ready to Start Your Project?

Let's discuss how we can create a stunning website tailored to your business needs.

Ricardu's Barbershop | Portfolio | low-key solutions