A fun 1-hour challenge to create a simple website for a barbershop that includes a mock booking system for appointments. The objective is not to finish the project but to assess what you can deliver in one hour of work
Built a responsive barbershop website featuring:
Three.js animated background with floating Chair model Modern UI with dramatic typography Responsive booking form Time constraint: One coding session
Development Timeline
Created base file structure: HTML, CSS (split into base and sections), and JS Established color scheme using CSS variables for easy theming Set up responsive breakpoints
Added canvas element for Three.js background Created floating scissors model animation Implemented smooth camera movements Added ambient lighting for depth Ensured performance optimization for mobile devices
Built full-height sections for clean scrolling Implemented hero section with dramatic headline
Added transparency effects Created thick outline using text-shadow Set up responsive text scaling
Hours of Operation
Centered layout Clean typography
About Section
Added high-resolution image (1920x2876) Implemented responsive image handling Created two-column layout for desktop