Al Nasser E-Commerce Landing Page

Key Features & Technical Architecture: - High-Performance Animations: Opted for lightweight AOS over Framer Motion to drastically reduce bundle size and protect frame rates during smooth scrolling. - Immersive WebGL Backgrounds: Engineered a custom FloatingLines environment in Three.js, deferring context loading to guarantee ultra-fast Largest Contentful Paint (LCP) times. - Complete Localization: Fully integrated i18n supporting both English and Arabic with robust Right-to-Left (RTL) capability for the GCC market. - Custom Theme Engine: Developed a lightweight useThemeMode hook to manage light/dark mode transitions mapped natively to OS preferences.

My Role & Implementation: I architected and built the entire front-end of this project from scratch using React 18, establishing our team's first step into level-A corporate systems. I strictly enforced performance best practices-utilizing React.memo, aggressive code splitting for below-the-fold content via Suspense, and modern asset optimizations-resulting in a flawless 100/100 performance and SEO score across all Google Lighthouse tests.

Project Status & Scale: This successfully completed Phase One serves a brand with 2+ million active cross-platform followers. It anchors the ecosystem before the rollout of the full e-commerce module, management dashboard, and mobile applications.