Mohamed Elfeky

The web never stops evolving and honestly, neither do I.
Always learning, always sharing what I pick up along the way.

My Resume LinkedIn Profile

About Me

Hello! I'm Mohamed Elfeky, a frontend developer who loves building immersive, pixel-perfect web experiences. I recently graduated from the Information Technology Institute (ITI) class of 2026, where I learned how to turn ideas into real projects used by many people.

I have experience building solid web apps using modern tools, and I'm passionate about giving back to the community. I created react-pro-image, an open-source npm package that handles lazy loading, AVIF/WebP auto-format negotiation, and progressive placeholders — all in a single React component. I'm always learning new things and pushing to stay current with the latest web technologies.

Available for new opportunities

Technical Stack

My core technologies and tools

React

Component-based UI library.

Next.js

React framework for production.

JavaScript

High-level, often just-in-time compiled language.

TypeScript

Strongly typed programming language.

TanStack

High-quality open-source software tools.

Redux Toolkit

State management toolset.

HTML

Standard markup language for documents.

CSS

Style sheet language.

Tailwind CSS

Utility-first CSS framework.

Bootstrap

Powerful and extensible frontend toolkit.

Git & GitHub

Version control and code collaboration.

Jira

Issue and project tracking software.

react-pro-image

Open Source

A production-ready React component that handles the image loading work most apps repeat by hand — lazy loading, AVIF/WebP auto-format negotiation, progressive placeholders, and graceful error fallbacks.

One single <OptimizedImage /> component, a few props, and you get everything — out of the box.

Terminal

$npm install react-pro-image

Lazy LoadingAVIF / WebPPlaceholder CrossfadeError FallbacksTypeScript ReadyZero Config

View on npm GitHub Docs

Hero.tsx

1import { OptimizedImage } from "react-pro-image";

3function Hero() {

4 return (

5 <OptimizedImage

6 autoSrc="https://cdn.example/hero.jpg"

7 autoFormat={{ formatKey: "fm" }}

8 autoPlaceholder="https://cdn.example/hero.jpg?w=20&blur=10"

9 autoFallback="https://cdn.example/hero.jpg"

10 alt="Sunlit valley"

11 width={800}

12 height={400}

13 />

14 );

15}

react-pro-image

v1.1.8 · MIT License · TypeScript

OSS

npm

Awwab Life

Track Prayers & Azkar

Your all-in-one companion for spiritual growth. Build lifelong habits with precise tracking for your daily prayers and azkar.

Experience a smarter way to connect with the Quran through an organized Khutma tracker, and stay fully motivated with our interactive streak system.

Visit Awwab Life

Awwab Life Web App

Your smart companion for prayers, azkar, and Khutma.

Tech Tutorials

My top educational videos and walkthroughs

▶ YouTube

JavaScript Core Concepts: TDZ, Hoisting & Execution Context

A comprehensive guide to the most essential JavaScript concepts — Temporal Dead Zone, Hoisting, and Execution Context — to understand how the JS engine works under the hood.

▶ YouTube

Padding vs Margin & Margin Collapse Explained

A detailed breakdown of the difference between Padding and Margin in CSS, along with an explanation of Margin Collapse and how to handle it to avoid common layout issues.

1 / 2

Explore More Projects

Get in Touch

Whether you have a great idea or just want to say hi, my inbox is always open. Let's create something amazing together.

mohamedelfeky.dev@gmail.com