Hirfa Barber — حِرفة
A cinematic, bilingual luxury barbershop website for a 15-year-old Bethlehem institution — built with animated page transitions, scroll-driven storytelling, and a full AR/EN experience.
Year
2026
Role
Full-Stack Developer & Creative Interface Designer
Platform
Web
Status
In Progress
Stack
Technologies used
| Technology | Category | Purpose |
|---|
| Next.js | Framework | App Router, locale-based routing, SSR/SSG for all pages |
| TypeScript | Language | Full type safety across components, data layer, and i18n keys |
| GSAP 3 + ScrollTrigger | UI/UX | All entrance animations, scroll-pinned carousels, parallax, counters |
| Tailwind CSS | UI/UX | Utility spacing helpers; design tokens live in globals.css |
| next-intl | Frontend | Bilingual AR/EN routing, message files, RTL direction management |
| Framer Motion | UI/UX | Supplemental motion for React-state-driven micro-interactions |
| Swiper | Frontend | Touch-enabled slider/carousel for gallery and testimonial sections |
| Prisma | Backend | ORM for database schema, migrations, and data queries |
| PostgreSQL | Database | Relational data store for services, products, bookings, and content |
| Uploadthing | Cloud | File and image upload handling for product/gallery assets |
| Socket.io | API | Real-time channel — used for live booking or notification features |
| Zustand | Frontend | Lightweight global state for UI state (locale, cursor, cart) |
| Nodemailer | Backend | Contact form email dispatch from the server |
| bcryptjs | Auth | Password hashing for any admin/staff authentication layer |
| jose | Auth | JWT signing and verification for session tokens |
| Cormorant Garamond | UI/UX | Display typeface for hero titles and large editorial headings |
| Bebas Neue | UI/UX | Label / caps typeface for section tags, nav, and UI labels |
| Vercel | DevOps | Deployment target for Next.js App Router with edge functions |
What was built
Key features
Full Arabic/English bilingual support with automatic RTL/LTR layout switching via next-intl and locale-aware routing.
Cinematic page-transition system using a GSAP pixel-block shatter overlay that reveals the brand name حِرفة between every route change.
Scroll-driven horizontal service card carousel that pins the section and tracks finger/wheel scrub with GSAP ScrollTrigger.
Animated stats counters (3,000+ clients, 15 years, 8 craftsmen, 500+ products) that tick up on scroll intersection with floating gold dust particles.
Custom magnetic gold cursor that replaces the native pointer and reacts to interactive elements site-wide.
Hero entrance choreography: curtain clip-path wipe → word stagger reveal → gold divider draw → CTA fade — all sequenced in a single GSAP timeline.
Luxury dark design system with tokenized gold/cream palette, grain overlay, ghost numbers, and zero rounded corners for an editorial feel.
Full service catalog, shop with product detail pages, gallery, contact form, and legal pages — all bilingual.
More work
Related projects
M1720 – Shop Center
A production-grade multi-vendor e-commerce platform with real-time chat, AI-powered recommendations, Stripe payments, and a full microservices backend — all in one Nx monorepo.
Cancer Reports Management System
A secure, role-based medical portal for Khaled Al-Hassan Cancer Hospital — enabling staff to manage research reports, categories, and events with granular access control.
Super Al-Balad
Bilingual Arabic/English grocery e-commerce platform with a full admin CMS, real-time order notifications, and RTL-first design — built for conversion and speed. Year: 2025