● Frontend Engineer @ WhiteGuardI design and build fast, accessible, interface-obsessed web products — dashboards, storefronts, and 3D-driven experiences.
A Mid-senior front-end engineer who cares as much about how things feel as how they work. I love translating ideas into interfaces that are fast, accessible, and a little bit delightful.
I turn fuzzy ideas into polished, intentional interfaces.
Fast by default — every millisecond and kilobyte counts.
Obsessed with spacing, motion, and the little details.
The technologies I reach for to build modern, performant interfaces.
A self-assessment of where my strengths sit today — and where I'm leveling up.
A few projects where design, performance, and interaction came together.
A live, multi-tenant B2B cybersecurity SaaS platform spanning offensive and defensive security workflows, built from scratch for 100+ active users with customizable dashboards and permission-based RBAC.
A role-based school management platform built freelance for a Cairo-based education client.
Every project follows the same honest arc: the problem, the approach, the hard parts, and the measurable outcome.
WhiteHawk needed a multi-tenant B2B platform for offensive/defensive security workflows built from scratch, serving a growing number of enterprise tenants and 100+ active users.
Led frontend development end-to-end on Next.js 15, React 19, and TypeScript: a ticketing system spanning 7dynamic ticket types, 5 role-based customizable dashboards with real-time ECharts visualizations and SLA tracking, OTP-based 2FA with a custom PermissionGuard RBAC system, real-time WebSocket notifications with auto-reconnect, and a drag-and-drop workflow builder in React Flow for ticket-lifecycle automation.
Owning an admin core — users, projects, subscription-plan, role/permission, notification, integrations, and workflow management across 7 sub-modules — that stayed consistent for a dynamic number of roles and tenants, plus wiring third-party cloud/security/IAM integrations for asset scanning.
Cut manual reporting and ticket-triage time by 70% across a growing base of enterprise tenants and 100+ active users.
A layer-by-layer read of the WhiteHawk cybersecurity SaaS platform — what each layer owns, and why it's separated the way it is.
The real process behind whitehawk.io — choosing a system before touching a single page — and the tokens/components this very site is built from.
Audited how other B2B security sites structure trust, pricing, and product explanation before drawing anything.
Chose the type scale, color system, spacing, and component patterns the whole site would be built from — once, not per page.
Structured all 7 pages as wireframes first, then designed the UI on top of the agreed system.
70+ TypeScript components in Next.js and Tailwind, plus custom Three.js 3D visuals and animation.
SEO strategy baked in before launch, not bolted on after — then shipped live at whitehawk.io at a 98 Lighthouse score.
Live, not a screenshot — swap the theme in the navbar and these update in real time.
Background
--bg
Surface
--surface
Elevated
--elevated
Text
--text
Muted
--muted
Accent
--accent
Accent 2
--accent2
Every button, badge, and field on this page shares one set of primitives.
Buttons
Badges & input
Four small patterns I reach for often, each with a real 'view source' — so it's obvious there's no trick behind the interaction.
From first lines of code to where I'm headed next.
BSc Computer Science, Faculty of Computers and Artificial Intelligence. Graduation project graded Excellent.
A patient booking flow for a German clinic, then a school management platform with role-scoped dashboards.
Joined to build WhiteHawk, a multi-tenant cybersecurity SaaS platform, and owned features end to end.
Where I am now — owning the frontend architecture and design system for a live B2B platform across ~15 feature domains.
The goal: leading craft, mentoring, and architecture at a larger scale.
Years Experience
Less manual triage time
Lighthouse score shipped
Git Commits
I'm open to front-end roles and freelance work. The fastest way to reach me is email — I reply quickly.
Let's Build Something Together