Selected Work

A collection of production projects demonstrating architectural thinking, technical problem-solving, and attention to both system design and user experience.

RestoLink

Morocco Restaurant Supply Marketplace
2025
ReactReactViteViteTypeScriptTypeScriptExpressExpressTanStackTanStack QueryTailwind CSSTailwind

Built custom server-side rendering architecture instead of Next.js to optimize performance for Morocco's inconsistent connectivity. Achieved 47% improvement in time to first contentful paint through strategic architectural decisions.

Custom SSR implementation for fine-grained rendering control
Multi-vendor catalog architecture with dynamic routing
Advanced state management with TanStack Query caching strategies
View Case Study

3D E-commerce Platform

Interactive Product Visualization
2025
ReactReactViteViteThree.jsThree.jsGreenSockGSAPTailwind CSSTailwind

Engineered interactive 3D product customization platform that increased user engagement by 80%. Recognized by Three.js official Twitter account with 3.8K+ views. Optimized WebGL rendering pipeline for 60fps on mid-range devices.

Real-time 3D model customization with material switching
Progressive texture loading and geometry optimization
State synchronization between React UI and Three.js scene graph
View Case Study

Dija Tours

Tourism Website
2025
HTML5HTMLCSSCSSjQueryjQueryPHPPHP

Transformed Figma designs into pixel-perfect responsive web pages with micro-interactions. Production website serving Morocco tourism market with focus on performance and accessibility.

Figma-to-code implementation with design precision
Micro-animations and interactive elements with jQuery
Responsive layouts optimized for mobile tourism browsing
View Case Study

Acapela

Text-to-Podcast Platform Interface
2025
HTML5HTML5CSSCSS3JavaScriptJavaScriptjQueryjQuery

Pixel-perfect transformation of Figma designs into a responsive web interface for a text-to-podcast platform. Focused on flawless responsive design and smooth jQuery animations.

Transformed Figma designs into pixel-perfect code with 100% design fidelity
Implemented advanced responsive design patterns across all device breakpoints
Created smooth, performant animations using jQuery for enhanced user experience
Mastered responsive design principles and cross-browser compatibility
View Case Study

Interactive GSAP Portfolio

Figma to React with Advanced Animations
2025
ReactReactGSAPGSAPJavaScriptJavaScript

Figma-to-React conversion featuring advanced GSAP animations. Deep dive into timeline orchestration, scroll-triggered animations, and performant motion design.

Converted Figma designs into React components with component-driven architecture
Mastered GSAP Timeline API for complex, sequenced animation orchestration
Implemented scroll-triggered animations with ScrollTrigger plugin
Achieved 60fps animations through GPU-accelerated transforms and proper animation techniques
View Case Study