Frontend Web Developer
Kerolos Adel
I turn complex ideas into clean, fast, and accessible web experiences — from pixel-perfect UIs to full production deployments.
Who I Am
I'm Kerolos Adel, a frontend web developer based in Egypt. I specialize in building modern, performant web applications using React, Next.js, and Flutter. I care deeply about clean code, thoughtful UX, and shipping products that actually work.
What I Know
What I Do
01
Frontend Web Development
With 5+ years of experience, I build dynamic, user-focused websites and web apps using React and Next.js. Clean code, fast load times, accessible markup — production-ready from day one.
02
Mobile App Development
Cross-platform mobile apps with Flutter targeting iOS and Android from a single, maintainable codebase. Real-time features, complex state management, Firebase integration, and smooth 60fps UIs.
03
Portfolio Websites
Professional portfolio websites with a built-in content management system — update your projects, skills, and info without touching a single line of code. Built to impress clients and recruiters alike.
04
UI/UX Implementation
Pixel-perfect translation of Figma designs into working, animated, responsive code. Every hover state, every micro-interaction, every spacing detail — exactly as designed, nothing lost in translation.
05
Photo Editing
Two years mastering Adobe Photoshop and Canva — product photo retouching, social media visuals, creative compositions, and brand-consistent imagery that actually converts.
06
Logo & Brand Identity
Over three years crafting distinctive logos and brand identities with Adobe Illustrator and Canva. From concept sketches to final vector assets — a brand identity that speaks before you say a word.
What I've Built
Daktoorak — Smart Doctor Booking Platform
A full-featured cross-platform mobile app built with Flutter that reimagines how patients connect with doctors in Egypt. Supports real-time chat powered by Firebase, HD video consultations via Agora SDK, seamless Paymob payment integration, smart appointment scheduling, and instant push notifications. Clean architecture with Riverpod state management ensures a scalable and maintainable codebase.
Amonious Mourad — Cinematic Photography Portfolio
A bespoke portfolio website crafted for professional photographer Amonious Mourad. Features a full-screen cinematic dark theme, smooth parallax scrolling gallery, lazy-loaded high-resolution images, and a clean contact flow — all optimized for Core Web Vitals to ensure the photography takes center stage without any performance compromise.
Nevin Assad — Creative Designer Portfolio
An elegant, modern portfolio built for graphic designer and HR professional Nevin Assad. Showcases her design work through a curated grid layout, animated project reveals, and a light/dark mode toggle. Includes a CMS-ready structure so Nevin can update her portfolio content independently without developer help.
Dawa2i — Smart Medication Manager
A Flutter mobile app designed to eliminate missed medication doses. Features intelligent reminder scheduling, dosage history tracking, refill alerts, and a clean minimal UI that feels intuitive even for non-tech-savvy users. All data is stored locally via SQLite — fully offline-capable with zero server dependency.
KeroDev CLI — Project Scaffolding Tool
A developer CLI tool published on npm that scaffolds production-ready Next.js, React, and Flutter projects in seconds. Comes pre-configured with TypeScript, ESLint, Prettier, Tailwind CSS, folder structure best practices, and Git hooks — eliminating days of boring boilerplate setup from every new project.
CineTrack — Movie Discovery App
A sleek movie browsing and discovery app powered by the TMDB API. Search across thousands of titles, filter by genre and rating, view full cast & crew details, save watchlists, and get personalized recommendations — all wrapped in a dark cinematic UI that feels as premium as the content it showcases.
Kero Resume Builder — PDF Resume Generator
A real-time drag-and-drop resume builder that outputs professionally formatted PDFs instantly. Choose from multiple ATS-friendly templates, customize colors and typography, and preview every change live before exporting. Built for job seekers who want a polished resume without paying for expensive SaaS subscriptions.
Hilink — Adventure Travel Landing Page
A visually stunning travel app marketing page that showcases destinations through full-bleed hero imagery, interactive map sections, smooth scroll-triggered animations, and a mobile-first responsive layout. Every section is designed to convert visitors into app downloads through compelling visual storytelling.
Globe — Interactive Trip Planner
A modern trip planning web app where users can browse destinations, build day-by-day itineraries, and visualize routes on an interactive map. Features a clean card-based UI, search and filter functionality, and a shareable itinerary link — making group travel planning effortless.
YC Directory — Startup Discovery Platform
A faithful clone of Y Combinator's startup directory, rebuilt with Next.js and Tailwind CSS. Browse and search thousands of YC-backed companies by industry, batch year, and location. Demonstrates advanced Next.js patterns including dynamic routing, ISR, and server-side filtering for a snappy, SEO-friendly experience.
Dynamic Island — Apple UI Animation Clone
An interactive, browser-based recreation of Apple's Dynamic Island notification system. Demonstrates advanced CSS animations, state-driven layout transitions, and real-time interaction handling — all without any animation library. A technical deep-dive into what makes Apple's micro-interactions so satisfying.
Linear — Minimal Auth UI System
A polished authentication UI kit inspired by Linear's world-class design system. Includes login, signup, and password recovery screens — all featuring micro-animated form interactions, accessible form validation, and a razor-sharp typographic hierarchy that balances minimalism with clarity.
Glassmorphism Login — Blur Effect UI
A visually striking login screen built around the glassmorphism design trend — frosted-glass card layered over a vibrant gradient background. Explores advanced CSS backdrop-filter techniques, smooth focus animations, and a fully accessible form structure. A perfect showcase of modern aesthetic possibilities with pure CSS.
Apple Web — Premium Product Showcase
A Next.js recreation of Apple's product marketing aesthetic — featuring bold oversized typography, full-bleed imagery, smooth scroll-snap sections, and that signature Apple sense of space and restraint. Demonstrates how deliberate whitespace and typography hierarchy can sell a product without a single word of marketing copy.
Facebook Clone — Social Feed UI
A faithful UI recreation of Facebook's core feed experience — responsive sidebar navigation, stories row, post composer, news feed with like/comment interactions, and friend suggestions panel. An in-depth study of component composition and state management at the scale of a major social platform.
Smart Calculator — Keyboard-First App
A clean, fully functional calculator app that prioritizes keyboard accessibility — every operation is reachable without touching the mouse. Features expression parsing, calculation history, keyboard shortcut mapping, and smooth button animations. Proves that even a 'simple' UI component deserves thoughtful engineering.
Portfolio Design #1 — CSS Grid Mastery
A comprehensive responsive portfolio built with modern HTML, CSS, and JavaScript. Showcases mastery of CSS Grid for complex two-dimensional layouts, CSS Flexbox for component-level alignment, and scroll-behavior API for smooth anchor navigation — all without a single framework.
Portfolio Design #2 — Flexbox & UX Patterns
A sleek responsive portfolio demonstrating advanced Flexbox patterns and UX-focused navigation patterns — including smooth scroll-to-section and a sticky back-to-top button that appears contextually. Built with semantic HTML, accessible CSS, and vanilla JavaScript scroll event handling.
Portfolio Design #3 — Glassmorphism & Grid BG
A minimal, eye-catching portfolio built with pure HTML and CSS, featuring a gradient grid background and glassmorphism card components. Demonstrates how powerful visual results are achievable without JavaScript — through strategic use of CSS backdrop-filter, gradient masking, and Flexbox composition.
Portfolio Design #4 — Transitions & Color System
A vibrant portfolio with a carefully crafted color system and smooth CSS transitions throughout. Every interactive element — buttons, cards, nav links — responds with a deliberate, branded animation. Built entirely with HTML and CSS, demonstrating that great UX doesn't require JavaScript.
Portfolio Design #5 — Full Sections with Testimonials
A complete multi-section portfolio featuring a hero, projects showcase, skills overview, and a customer feedback/testimonials section — everything a real freelancer needs. Demonstrates how to structure a professional portfolio for maximum client conversion using only HTML and CSS.
Portfolio Design #6 — JS-Powered Multi-Section
The most advanced in the portfolio series — a fully responsive, JavaScript-enhanced portfolio with animated section entrances triggered by the Intersection Observer API, a sticky header with active link highlighting, and a CSS Grid + Flexbox hybrid layout for complex responsive behavior across all screen sizes.
Where I've Worked
Jan 2022 — Present
Frontend & Mobile Developer
Freelance
Designing and shipping production-grade web and mobile applications for clients across Egypt and the Arab world. Specializing in React, Next.js, and Flutter — handling everything from UI design and architecture decisions to final deployment and performance optimization.
Jun 2022 — Present
Content Creator & Coding Instructor
YouTube – Kerolos Adel Web Masterpieces
Creating in-depth Arabic frontend tutorials covering HTML, CSS, JavaScript, React, Next.js, and Tailwind CSS. Helping Arabic-speaking developers build real-world projects, master responsive design, and develop professional portfolios.
Jan 2019 — Dec 2021
Graphic Designer
Self-Employed – Photo & Logo Design
Two years of professional photo editing with Adobe Photoshop and Canva, followed by a year specializing in logo and brand identity design using Adobe Illustrator. Delivered creative visual work for Egyptian businesses and individuals.
What I Teach
Next.js — The Complete Production Guide
Master Next.js App Router from scratch to deployment. Covers Server Components, Server Actions, ISR, authentication with NextAuth, PostgreSQL integration, and deployment to Vercel — everything you need to ship real products.
View CourseFlutter Production Apps — From Zero to Google Play
Build and ship real Flutter apps to Google Play and the App Store. Deep coverage of Riverpod state management, Firebase Auth & Firestore, REST API integration, push notifications, and UI polish that makes your app feel native and premium.
View CourseTailwind CSS v4 — CSS-First Masterclass
The definitive Arabic guide to Tailwind CSS v4. Learn the new CSS-first configuration, @theme directive, oklch color system, dark mode, animations, and real production component patterns that make your UI stand out.
View CourseWhat People Say
Kerolos delivered a polished, production-ready portfolio well ahead of schedule. His attention to detail — from pixel-level alignment to loading performance — and his proactive communication made the entire process seamless. He doesn't just write code; he thinks like a product owner.
Nevin Assad
Graphic Designer & HR Specialist
Working with Kerolos was genuinely one of the best professional experiences I've had. He took the time to deeply understand my vision as a photographer, then built a portfolio that exceeded every expectation — fast, visually stunning, and a perfect reflection of my work. Highly recommended.
Amonious Mourad
Professional Photographer
Built With
What I Write
Open Source
What I'm Up To
A snapshot of what I'm currently working on, learning, and thinking about.
Shipping production Flutter apps for clients across Egypt
Deep-diving into Next.js 15 Server Actions and caching
Recording Arabic tutorials on React, Next.js, and Tailwind
Studying system design to sharpen my architecture decisions
Open to freelance projects and long-term collaborations
Let's Work Together
Have a project in mind? Let's build something great together.