Projects / Experience

Modern marketing website built with Next.js, TailwindCSS, and Framer Motion. Features animated page transitions, responsive design, and clean UI with optimized font loading.

PowerShell 7 profile configuration and Windows Terminal settings backup utility. Provides custom PowerShell profile setup and terminal settings management scripts for Windows development environment.

Collection of 2,053 n8n automation workflows with a high-performance documentation system. Features instant full-text search via SQLite FTS5, Mermaid diagram visualization, and dark and light theme with sub-100ms response times.

Web scraper with dynamic product variant detection built with Python and Firebase. Automatically detects product attributes like color and size with dynamic pricing and smart availability checking.

3D product viewer built with React, Three.js, and React Three Fiber. Features camera orbit controls, material manipulation, lighting sliders, click-to-focus, and accessibility support for 3D model inspection.

Google News mobile reader app built with React Native and Expo. Fetches and displays news articles from GNews API with search, category filtering, and article detail views.

OLX classified ads demo app built with React Native and Expo. Features file-based routing, i18n support for English and Arabic, dark and light theme, and full classified ads browsing interface.

Juice and fuel tracking web app built with Next.js, Supabase, and Drizzle ORM. Features authentication with NextAuth, custom TailwindCSS components, and search domain setup for data management.

Expo React Native demo application for Sowlutions cross-platform mobile solution. Built with Expo framework for iOS and Android with modern navigation patterns.

Markdown to DOCX document converter built with Python. Transforms Markdown files into formatted Word documents preserving structure and styling for easy sharing.

YouTube Music downloader with automatic lyrics and cover art embedding built with Python. Downloads audio from YouTube and tags files with metadata including lyrics and album artwork.

Dotfiles synchronization setup using GNU Stow and Zsh with Antidote plugin manager. Manages shell configuration across Linux distributions for consistent development environment.

Animated sidebar navigation built with React and TailwindCSS. Features smooth open and close transitions, icon support, and responsive layout adapting to screen size.

Meal search and recipe discovery app built with React and CSS. Fetches meal data from an API with search, category filtering, and detailed recipe views.

Layout animation experiments using GSAP FLIP plugin for smooth transitions. Demonstrates advanced JavaScript animation techniques for layout shifts with CSS and HTML.

Stock trading dashboard built with React, Bootstrap, and ApexCharts. Features real-time stock data via FinnHub API with interactive charts and portfolio tracking interface.

Frontend Mentor Manage landing page built with TailwindCSS V3.1. A responsive marketing page featuring testimonial slider, call-to-action sections, and mobile navigation.

Multi-step form built with React and TypeScript for guided user input. Guides users through sequential form steps with validation, progress tracking, and state management across steps.

Frontend Mentor intro section with dropdown navigation solution. Features responsive dropdown menus for desktop and mobile with hover interactions and accessible navigation patterns.

Modern banking landing page built with React and TailwindCSS. A sleek marketing site showcasing modern UI design patterns with gradient styling and responsive sections.

Quiz application built with React as a Scrimba solo project. Fetches trivia questions from API, tracks user scores, and provides interactive quiz experience with answer validation.

Responsive sidebar navigation built with React and TailwindCSS. Adapts layout across mobile and desktop breakpoints with smooth toggle interactions.

Admin dashboard and landing page built with React 18, TailwindCSS, and Framer Motion. Features form handling with react-hook-form, data grids with Material UI, and animated page transitions.

Multi-select dropdown component built with React and TypeScript. Demonstrates custom select UI with multiple selection capabilities, keyboard navigation, and accessible design.

Team member allocation and budget management app built with React and Bootstrap. A freeCodeCamp project study for managing team assignments and resource allocation.

Space tourism multi-page website built as a Frontend Mentor challenge. Features responsive layout, tab navigation for destinations, and interactive crew and technology pages.

Text search application built with React and TypeScript for Coderbyte challenge. Provides real-time text filtering and search functionality with clean component architecture.

YouTube clone built with React and Material UI fetching video data via RapidAPI. Features search, video playback with React Player, and responsive layout mimicking YouTube interface.

Collaborative Kanban board with drag-and-drop, optimistic updates, and conflict resolution. Built with React, TypeScript, TanStack Query, and dnd-kit simulating real-time team collaboration with error rollbacks.

Multi-tenant analytics dashboard built with React, TypeScript, TanStack Query, and TailwindCSS. Features routing, virtualized tables, and modern frontend architecture with scalable data handling.

Zomato landing page challenge recreated with React for frontend practice. Replicates popular food delivery platform UI focusing on component composition and layout.

Discord-style animated sidebar built with React and TailwindCSS. Features tooltips, icons, and smooth navigation animations with responsive design patterns.

CSS and SCSS button hover effect animation with creative transitions. Showcases advanced hover interactions using SCSS for smooth and engaging UI feedback.

CSS and SCSS button loading animation effect with visual feedback. A reusable loading state animation demonstrating SCSS mixins and keyframe animations for UI elements.

Frontend Mentor order summary card component challenge solution. Built with CSS focusing on clean layout, responsive design, and pixel-perfect implementation of a UI card.

Collection of reusable custom React hooks for common patterns. Provides tested hooks ready to clone and integrate into any React project for cleaner component logic.

Upload loading animation built with JavaScript and Rive. Demonstrates interactive animation integration with a simple file upload visual feedback loop.

Starbucks landing page clone built with TailwindCSS V3.1. Showcases responsive design and modern CSS utility framework for building brand landing pages with mobile-first layout.