04 / portfolio & experience

Work built for real teams and real users.

selected projects

2026IN DEVELOPMENT

Nike Concept Store (E-Commerce)

Dynamic E-Commerce Application

A highly interactive, performance-driven e-commerce storefront concept. This project pushes the boundaries of modern Front-End capabilities, focusing heavily on dynamic product displays, fluid motion design, and an immersive user experience designed to drive high conversion rates.

Key Features

  • ▹Immersive Motion Design: Implementing fluid state transitions, dynamic product scaling on hover, and smooth entrance animations.
  • ▹Complex State Management: Structuring robust logic for shopping cart operations, dynamic product variant selections (size/color), and instant UI feedback.
  • ▹Interactive Product Showcases: High-impact visual displays with interactive elements that respond to user interactions instantly.
ReactTailwind CSSFramer MotionReact Hooks
2026COMPLETED

Front-End Assistant Intern

Professional Internship

A two-month intensive software development internship within the software development department at Alam Al-Sadara Al-Raqmiya (Digital Leadership World). Worked as a Front-End assistant, focusing on building structured, responsive layouts and collaborating with a professional development team to significantly enhance production-level coding standards.

Key Features

  • ▹Structured Layouts: Engineered responsive, high-fidelity UI components ensuring cross-device compatibility.
  • ▹Database Integration: Handled SQL queries and integrated back-end data seamlessly into the front-end interfaces.
  • ▹Team Collaboration: Functioned within a professional software development department, utilizing industry-standard workflows.
ReactSQLHTML5/CSS3Tailwind CSS
2025COMPLETED

Al-Waha Corporate Website

B2B Corporate Platform

A fully bilingual (Arabic/English) professional corporate website developed for "Al-Waha Leading Company for Foodstuff and Livestock Import". The project focused strictly on an "Executive" and "Modern Minimalist" design language, delivering a high-end, trustworthy digital presence for a major commercial entity.

Key Features

  • ▹Bilingual Architecture: Seamless LTR/RTL layout switching and precise content localization without UI breakage.
  • ▹Executive UI/UX: A clean, distraction-free interface utilizing premium typography, strategic whitespace, and subtle micro-interactions to reflect corporate authority.
  • ▹Robust Architecture: Complex layout structuring using CSS Grid to present extensive corporate data elegantly across all devices.
ReactTailwind CSSi18nCSS GridFramer Motion
2025COMPLETED

Premium Hotel Booking Interface

Hospitality / UI Architecture

A luxurious and minimalist web application interface designed for the premium hospitality sector. This project was built by cleverly refactoring and adapting the highly modular components developed during the Al-Waha project. The strict design constraint was to eliminate traditional UI icons, relying entirely on superior typography, pure geometry, and perfect spacing to convey elegance.

Key Features

  • ▹Typography-Driven Design: Completely icon-less UI that relies on strong typographical hierarchies and pristine spatial alignment (Padding/Margin precision).
  • ▹Advanced Component Reusability: Successfully decoupled core structural components from a corporate context and restyled them for a high-end booking experience.
  • ▹Clean DOM Structure: Highly optimized rendering performance due to the intentional omission of external SVG/icon libraries.
ReactTailwind CSSContext APIFlexbox/Grid layouts
2024COMPLETED

Interactive Portfolio Architecture (Client Project)

Personal Branding / Interactive Web Presence

A bespoke, highly interactive personal portfolio designed and developed for a client to showcase their professional work. Engineered for maximum performance, scalability, and type safety, this project emphasizes complex spatial motion. The UI highlights a sophisticated layout featuring dynamic, animated elements (such as a fluid floating box) that interact seamlessly within the viewport, creating an engaging and modern visual experience.

Key Features

  • ▹Enterprise-Grade Architecture: Built with Next.js for superior server-side rendering (SSR) capabilities and performance optimization.
  • ▹Type-Safe Engineering: Implemented TypeScript to ensure high code reliability, maintainability, and fewer runtime errors.
  • ▹Spatial Motion Design: Developed fluid, physics-based animations (specifically dynamic floating elements) that interact intelligently within their containers without sacrificing performance.
Next.jsReactTypeScriptJavaScriptHTML5/CSS3Framer Motion