Client Work
A responsive one-page website for Sandy Barber Shop in East Elmhurst, Queens, helping customers explore services and prices, meet the barbers, view recent cuts, call the shop, and get directions in English or Spanish.
01 / Overview
The completed site gives customers one focused place to understand what the shop offers before they visit. Services, published prices, barber profiles, recent haircut work, weekly hours, live shop status, phone actions, and directions are organized as a single customer journey that works across desktop and mobile.
02 / The challenge
Sandy Barber Shop did not have a dedicated website. The project needed to establish a practical online presence for a neighborhood business whose essential information, team, work, and location had not previously been brought together in one customer-facing experience.
03 / The approach
The engagement began with a small HTML, CSS, and JavaScript preview created as part of a cold pitch. After the shop chose to move forward, the preview was expanded into the complete customer-facing page.
The content order moves from the shop proposition and current status to services, barber profiles, examples of recent work, shop photography, and visit information. Calls and directions remain available as the primary customer actions.
The interface was designed responsively for customers checking the site on a phone. English and Spanish content was added because the owner and many customers use Spanish, with the selected language saved for later visits.
04 / Visual direction
The visual direction uses the shop’s red and navy theme together with real photography of the storefront, interior, barbers, tools, and recent haircut work. Light service and gallery surfaces keep information easy to scan, while the dark hero and barber section give the client identity a stronger presence without changing the Baghbanpura portfolio shell.
05 / Color palette
The values below are taken directly from the Sandy Barber Shop website. Explanations describe how each color functions in the interface.
#d92332Carries primary calls to action and the main client accent.
#ff6b76Keeps labels and links visible on the darkest backgrounds.
#c91f2dProvides a darker interactive state for red controls.
#0c2872Adds depth to prices, borders, and supporting brand details.
#101827Forms the dark section and footer backgrounds.
#121317Provides high-contrast headings and body copy on light surfaces.
#626875Separates supporting information from primary content.
#f2f4f7Creates a quiet background behind cards and photography.
#ffffffKeeps cards, controls, and text on dark sections crisp.
06 / Typography
The website uses the same Arial and Helvetica system stack for display copy, body content, and interface labels.
Sharp cuts, clean fades.
Large, heavy headings create a direct hierarchy that remains legible across responsive sizes.
Services, prices, hours, and directions.
The same system sans-serif stack keeps service details, prices, navigation, and controls consistent and quick to read.
07 / Features
Seven published services and add-ons are organized in a scannable price menu.
The full interface switches languages and remembers a visitor’s selection when browser storage is available.
Three barber profiles and six recent haircut examples help customers understand the team and its work.
Direct phone actions and a Google Maps link keep the main customer paths simple.
An open or closed message is calculated against the published hours in the New York time zone.
Navigation, service cards, galleries, profiles, and visit details adapt for compact screens.
08 / Website showcase
Each capture keeps its original proportion so interface text and photography remain readable.
Service prices and barber profiles are presented as structured cards so customers can compare the essentials without leaving the page.
The mobile layout keeps the storefront, primary actions, shop status, and language-specific copy readable on a compact screen.
Recent haircut photographs provide examples of the barbers’ work, while storefront, interior, and tool photography grounds the site in the real business.
The visit section brings the address, phone number, hours, directions, and a nearby street landmark together at the end of the page.
09 / Development and delivery
The original HTML, CSS, and JavaScript delivery was later migrated to Next.js, React, and TypeScript to create a typed, component-based foundation for future changes.
The site is configured as a static export and deployed from GitHub to Cloudflare Pages. Eass guided the client through purchasing sandybarber.org from Namecheap, receiving the required Cloudflare access, connecting the repository, and attaching the custom domain.
The implementation uses no database, backend, booking system, or content management system. Customer actions remain focused on phone calls and Google Maps directions.
10 / Outcome
The completed website gave Sandy Barber Shop a dedicated, mobile-friendly online presence where customers can view services, prices, barber work, directions, and contact information in English or Spanish. The shop accepted the completed work; measurable business impact has not yet been established.
End of case study