Wassim Asraf | Motion Designer Portfolio

Overview

Washim Asraf is a motion designer and video editor working with brands globally, so the site was built to carry the same energy as his edits rather than read like a static résumé. The structure stays simple: a cinematic Home that opens with an animated intro and one clear CTA, a Work index that filters projects by Motion, Social, Video, and Campaigns, an About page that backs the craft with real numbers (5+ years, 50+ brands) and a tools/skill breakdown, and a Contact page built to pre-qualify leads rather than just collect emails. The Work section carries the site. Every project follows a reusable case-study template, Brief, Approach, Results, so visitors see the thinking and the outcome, not just a thumbnail. A drag-to-reveal interactive showcase gives a more playful way to browse categories before committing to a full case study. Technically, it runs on Next.js 14 with Tailwind for layout and styling, Framer Motion and GSAP handling scroll and transition choreography, and React Three Fiber adding the ambient depth behind the cinematic feel, tuned to stay fast despite being animation-heavy, deployed on Vercel. Stack: Next.js 14, Tailwind CSS, Framer Motion, GSAP, React Three Fiber, Vercel Features: Cinematic dark hero with animated entrance and a single primary CTA Filterable Work index (All / Motion / Social / Video / Campaigns) with dynamic project routes Reusable case-study template per project, Brief, Approach, quantified Results Interactive drag-to-reveal category showcase on the Work page About page with bio, experience stats, and a tools/skills proficiency breakdown Multi-option contact form with a service-type selector to qualify inbound leads Newsletter signup for new work drops and open slots Persistent footer with live timezone/availability status Scroll- and transition-based motion throughout, with ambient 3D depth via React Three Fiber.

Process

1. 1Translated the cinematic, brand direction into a Next.js 14 page and component structure.
2. 2Built the Home, Work, About, and Contact routes on a shared layout and footer.
3. 3Implemented category filtering on the Work index (All / Motion / Social / Video / Campaigns).
4. 4Designed the reusable Brief / Approach / Results case-study template and wired it to individual project routes.
5. 5Built the interactive drag-card showcase for browsing categories.
6. 6Choreographed page and scroll transitions with Framer Motion and GSAP, layering React Three Fiber for ambient depth.
7. 7Built the contact form with a service-type selector and the newsletter capture.
8. 8Tuned performance for the animation-heavy build and deployed on Vercel.