Barvado is a traditional-style barbershop offering classic cuts with a modern touch. The goal was to build a brand-new website from the ground up to reflect their vintage aesthetic, clearly display services and pricing, showcase their barbers, and streamline client communication through an integrated contact form. The site needed to be visually appealing, lightning-fast, and easy for the owners to manage internally without relying on developers for content updates.
static , ux/ui , frontend
Barvado Barbershop
Key Features
- Fully responsive Tailwind-based layout
- CMS integration with Decap for easy updates
- Service list with transparent pricing
- Contact form with validation
- Gallery and team presentation pages
- SEO-optimized structure and metadata
- WebP image handling and sharp-based optimization
- Vintage aesthetic with modern performance
Role/Services
static , ux/ui , frontend
Date
Nov 5, 2024
Barvado is a traditional-style barbershop offering classic cuts with a modern touch. The goal was to build a brand-new website from the ground up to reflect their vintage aesthetic, clearly display services and pricing, showcase their barbers, and streamline client communication through an integrated contact form. The site needed to be visually appealing, lightning-fast, and easy for the owners to manage internally without relying on developers for content updates.
I was hired on a freelance basis to design and develop the entire site (from layout to CMS configuration) and deliver a mobile-first, SEO-friendly site that would match the shop's personality while supporting business goals. The site had to be scalable, user-friendly, and optimized for discoverability and performance.
The site was built using Eleventy (11ty) with Nunjucks templates and styled using Tailwind CSS alongside daisyUI for components. Content is managed via Decap CMS, allowing the shop owner to update service prices, gallery images, and staff bios without technical help.
Key technical contributions:
- Full Layout & Page Development: Built all primary pages including Homepage, Services & Pricing, About, Gallery, and Contact — using modular Nunjucks layouts and reusable Tailwind components.
- CMS Configuration: Designed a clean, intuitive content model in Decap CMS for services, barbers, and gallery entries, enabling quick updates through a user-friendly editor.
- Accessibility & SEO Best Practices: Implemented semantic HTML markup, ARIA attributes, and responsive design. Added structured data and descriptive metadata to improve SEO.
- Image Optimization & Performance: Converted all images to WebP and used
sharpfor responsive image resizing. The site loads fast even on slower connections and earns top scores on Lighthouse. - Vintage-Inspired UI Execution: Used custom typography, subdued color palettes, and carefully structured spacing to deliver a modern site with a timeless barbershop feel.
The site was originally hosted live for the client, but I’ve also deployed a demo version under my own domain to ensure continued access in my portfolio, even if the client later changes platforms or hosting arrangements.
The business saw improved conversions and stronger lead generation after launch, largely due to increased transparency, customers could now clearly view services, prices, and contact details without friction. The client reported positive feedback from users and appreciated the ability to self-manage the site using Decap CMS. For my part, I’m proud of how the vintage brand personality was translated into a lightweight, modern, and easily maintainable static website.