Yara

About Me

Hi, I'm Yara 👋

A front-end developer 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.

💡

Creative Thinker

I turn fuzzy ideas into polished, intentional interfaces.

⚡

Performance Focused

Fast by default — every millisecond and kilobyte counts.

🎨

UI Enthusiast

Obsessed with spacing, motion, and the little details.

Tech Stack

Tools of the craft

The technologies I reach for to build modern, performant interfaces.

Frontend

01

HTMLCSSJavaScriptTypeScript

Frameworks

02

ReactNext.js

Styling

03

Tailwind CSSSass

Animation

04

Framer MotionGSAP

3D

05

Three.jsReact Three FiberDrei

Tools

06

GitGitHubFigma

Developer Dashboard

The stats behind the work

A self-assessment of where my strengths sit today — and where I'm leveling up.

Frontend Power0%

UI/UX Sense0%

Performance0%

Accessibility0%

Problem Solving0%

Featured Projects

Things I've shipped

A few projects where design, performance, and interaction came together.

WhiteHawk

WhiteHawk Security Platform

A live, multi-tenant B2B cybersecurity SaaS platform spanning offensive and defensive security workflows, built from scratch for 1000+ active users.

Next.js 15React 19TypeScriptZustandReact QueryECharts

Live Demo GitHub

WhiteHawk

WhiteHawk Marketing Website

The public face of WhiteHawk — design-to-launch on a 7-page, 70+ component B2B site with custom Three.js visuals, now live at whitehawk.io.

Next.jsTypeScriptTailwind CSSThree.jsDocker

Live Demo GitHub

EAISchools

EAISchools Management Platform

A role-based school management platform built freelance for a Cairo-based education client.

Next.jsTypeScriptTailwind CSSREST APIs

Live Demo GitHub

Praxis

Praxis Am Ring Booking Site

An appointment reservation website for a German medical practice, replacing phone-only scheduling.

React.jsNode.jsMongoDB

Live Demo GitHub

Case Studies

How I think through problems

Every project follows the same honest arc: the problem, the approach, the hard parts, and the measurable outcome.

Problem

WhiteHawk needed a multi-tenant B2B platform for offensive/defensive security workflows built from scratch, serving a growing number of enterprise tenants and 1000+ active users.

Solution

Led frontend development end-to-end on Next.js 15, React 19, and TypeScript: a ticketing system spanning 7 ticket types, 5 role-based 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.

Challenges

Owning an admin core — user, project, subscription-plan, role/permission, notification, integration, 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.

Impact

Cut manual reporting and ticket-triage time by 70% across a growing base of enterprise tenants and 1000+ active users.

Results

70% less triage time1000+ active users5 role-based dashboards

Frontend Architecture

How I structure a platform

A layer-by-layer read of the WhiteHawk cybersecurity SaaS platform — what each layer owns, and why it's separated the way it is.

01
- 5 role-based dashboards with real-time ECharts visualizations, heatmaps, and SLA tracking.
- A ticketing system spanning 7 ticket types across offensive/defensive security tracks.
- A drag-and-drop workflow builder (React Flow) for ticket-lifecycle automation.

Frontend Design Systems

Design systems, not just design

The real process behind whitehawk.io — choosing a system before touching a single page — and the tokens/components this very site is built from.

01
Competitor analysis
Audited how other B2B security sites structure trust, pricing, and product explanation before drawing anything.
02
Design system
Chose the type scale, color system, spacing, and component patterns the whole site would be built from — once, not per page.
03
Wireframes & UI/UX
Structured all 7 pages as wireframes first, then designed the UI on top of the agreed system.
04
Build
70+ TypeScript components in Next.js and Tailwind, plus custom Three.js 3D visuals and animation.
05
SEO & launch
SEO strategy baked in before launch, not bolted on after — then shipped live at whitehawk.io at a 98 Lighthouse score.

This site's tokens

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

Built from the same system

Every button, badge, and field on this page shares one set of primitives.

Buttons

Badges & input

LiveBetav1.2.0

Interactive Lab

Not just demos — the code behind them

Four small patterns I reach for often, each with a real 'view source' — so it's obvious there's no trick behind the interaction.

3D tilt + cursor-tracking spotlight, one pointer handler.

Move your cursor

Career Journey

The road so far

From first lines of code to where I'm headed next.

College
Computer Science foundations & first lines of code.
First Project
Shipped a real product and got hooked on the web.
Internship
Learned to build inside a real team and codebase.
Mid-Level Front-End Developer
Where I am now — owning features end to end.
Senior Front-End DeveloperGoal
The goal: leading craft, mentoring, and architecture.