Haithem Mustafa
Loading
Back to projects
The Studio · 2025

The Studio · Website

Agency marketing site, design to deploy

Visit site
Overview

The Studio's company website: a fast, animated marketing site for a creative agency, with 3D scenes, scroll-driven motion, and a bilingual (EN / AR) experience. Built as a React 19 + Vite SPA, styled with Tailwind.

RoleFull Stack Developer
Year2025
Stack
  • React 19
  • Vite
  • TypeScript
  • Tailwind CSS
  • Three.js / R3F
  • GSAP
  • Framer Motion
  • Lenis
  • i18n / RTL
The build
  1. 01Built the site as a React 19 + Vite single-page app with the React Compiler enabled, styled with Tailwind CSS and themed via CSS variables.
  2. 02Built 3D scenes with Three.js and React Three Fiber: a particle field and an animated 3D logo whose accent colors shift between sections.
  3. 03Drove the motion with GSAP ScrollTrigger for section reveals and Framer Motion for component transitions, with Lenis smooth scrolling throughout.
  4. 04Made it bilingual (English / Arabic) with full RTL support via react-i18next and lazy-loaded translation namespaces.
  5. 05Built the pages — home, services, work, and per-project case studies — with lazy-loaded routes (React Router) and static data ready to swap for a CMS/API.
  6. 06Added light / dark / system theming persisted with Zustand, SEO via React Helmet, and a contact form with React Hook Form + Zod.
  7. 07Deployed to production on nginx alongside the separate admin CMS and API domains.
Highlights
Back to projects