Reach me from anywhere on Earth — send one message
and watch it land.
Tech Stack
The tools I ship with — from UI to backend, data,
and infra.
AI integration & training
Bringing AI into your products—and teaching teams
how to use it.
What you will get
Hover each cell to reveal what working together
looks like.
Pixel perfect
Precision in every interaction — a crosshair that
tracks your every move.
DigitalCraftsmanship
PRESENCE,PERFORMANCE,SMARTTECHNOLOGY—builtforyou
Solutionsthatscale,experiencesthatstay
Know About Me
Full-Stack Developer and a little bit of everything
I'm a
full-stack developer with 3+ years of experience building modern digital solutions — from SaaS platforms
and interactive apps to tailored systems that help brands and individuals elevate their online presence.
I focus on clarity, clean engineering, and creating products that actually solve something. Every
product is unique, fresh, up-to-date, aligned with today's standards, and wherever you need AI, you'll
find it integrated.
When I'm
not building, I'm exploring new tools, contributing to open-source, or documenting what I learn. I
believe in shipping work that makes a real impact — and enjoying the process along the way.
Kathy — Full-Stack Developer & Digital
Solutions Architect
About Me
press here to meet me!
About Me
1
The Journey
I'm a full-stack developer with 3+ years of
experience building modern
digital solutions that help brands and individuals elevate their online presence. My work goes far
beyond websites — I design and engineer systems, platforms, and experiences that are
structured, intentional, and built to last.
2
3
Education
I graduated with a Bachelor of Science in
Computer Information Technology
and Business Administration (BSc Business & IT) from IU International University of Applied
Sciences in Germany, where I developed a strong foundation in both technical engineering and
business-driven problem solving. This dual background shaped the way I build: every product must
be functional, scalable, and aligned with real business needs.
4
5
What I Build
Over the years, I've worked on SaaS platforms,
interactive applications,
custom dashboards, automation tools, and tailored digital systems. I focus on clarity, clean
engineering, and creating products that actually solve something. Every solution I build is
unique, fresh, up-to-date, and aligned with today's standards — and wherever AI genuinely
adds value, you'll find it seamlessly integrated.
6
7
My Approach
My approach is simple: Take an idea — even
if it's raw, vague, or
still forming — and turn it into a structured, modern, beautifully executed digital
experience. From defining requirements, designing workflows, and planning architecture, to
delivering a polished, secure, and effortless product… I bring ideas to life with
precision, creativity, and intention.
8
9
Beyond Code
When I'm not building, I'm exploring new tools,
contributing to
open-source, or documenting what I learn. I believe in shipping work that makes a real impact
— and enjoying the process along the way.
10
The End
press here to read
What I Excel At
Short, sharp, and powerful.
scroll to explore
Architecture & System Design
System Architecture — I design the
“skeleton” of your
product — the part nobody sees but everyone depends on. Clean, scalable, and built so future
developers don’t cry when they open the repo.
API Architecture — Think of APIs as
the highways of your system.
I make sure they’re fast, organized, and not the chaotic kind where you miss the exit and end up
in another city.
Database Schema Design — Your data
deserves a home that’s
tidy, structured, and not a digital junk drawer. I design schemas that make sense today and still make
sense a year from now.
Clean Architecture — Layers,
boundaries, separation…
basically the “Marie Kondo” of software. Everything in its place, everything with a
purpose.
Data Modeling — Turning messy
real-world information into neat
digital shapes your system can actually understand. Like translating chaos into logic.
Authentication & Authorization Flows
— Who can enter? What
can they touch? I build secure flows that keep the bad guys out and let the right people in —
without making them solve a puzzle every login.
Scalability Planning — Your system
shouldn’t panic when
your user base grows. I plan ahead so your app handles growth like a champ, not like a server having a
meltdown.
MVC / MVVM / Modular Design — Fancy
acronyms that basically mean:
I write code that’s organized, predictable, and doesn’t collapse when you add new
features.
🧠 Project Delivery, Business & System
Thinking
Requirements Engineering — You tell
me the idea — even if
it’s vague — and I turn it into clear, actionable requirements. No guessing, no confusion,
no “what did we mean by this?” moments.
System Structuring — I organize the
entire project so everything
connects logically. Think of it as building a digital city with roads that actually make sense.
Workflow Design — I map out how users
move through your product.
Smooth, intuitive, and without any “wait… what do I click now?” moments.
MVP Planning — I help you launch the
smartest version of your
product — not the biggest, not the smallest, but the one that gets you results fast.
Product Thinking — I don’t just
build features. I build
solutions that make sense for your business, your users, and your long-term goals.
Technical Documentation — Clear,
human-friendly documentation
that future developers will thank you for. No cryptic notes or missing steps.
Client Communication — I translate
tech into human language. No
jargon storms. No confusion. Just clarity.
🎨 Frontend Engineering (Advanced)
Component-Based Architecture — I
build UI like Lego —
reusable pieces that fit together perfectly and make your product easy to maintain.
State Management (Context API) — I
keep your app’s brain
organized so it always knows what’s happening. No memory lapses, no weird glitches.
UI Animation (Framer Motion) —
Smooth, cinematic animations that
make your interface feel alive — not like a PowerPoint slide.
Responsive Layout Engineering — Your
product looks great on every
screen: laptop, phone, tablet, fridge (if it has a browser).
Reusable UI Components — Buttons,
cards, modals — built
once, used everywhere. Clean, consistent, and efficient.
Accessibility-Friendly UI — I make
sure everyone can use your
product comfortably — because good design includes everyone.
🛠️ Backend Logic & Data Handling
Secure Authentication Systems — I
build login systems that are
safe, fast, and user-friendly. No complicated rituals required.
Role-Based Access Control (RBAC) —
Admins get admin powers. Users
get user powers. Nobody gets accidental superpowers.
CRUD Operations — The essential
“create, read, update,
delete” backbone of every app — implemented cleanly and reliably.
Data Validation & Sanitization —
I make sure your system only
accepts clean, safe data. No weird inputs. No surprises.
Error Handling Architecture — Errors
happen — but they
shouldn’t break your app. I build systems that catch issues gracefully and explain what went
wrong.
API Integration & Consumption — I
connect your app to
external services smoothly, without breaking anything or causing digital drama.
🤖 AI Integration & Intelligent Systems
AI-Powered Features — I integrate AI
where it actually helps
— not just because it’s trendy. If it adds value, it goes in. If not, it stays out.
Prompt Engineering — Crafting precise
instructions that make AI
behave, respond accurately, and not hallucinate its way into chaos.
AI-Driven Personalization — Smart
experiences that adapt to users
— recommendations, insights, and tailored interactions.
LLM-Based Tools & Assistants —
Building assistants that help
users do more with less effort. Think of them as tiny digital coworkers.
AI Workflow Automation — Automating
repetitive tasks so your team
can focus on the important stuff — and your product feels smarter.
Data-Enhanced AI Decisions — Using
real data to make AI outputs
more accurate, reliable, and aligned with your product’s goals.
Avianta began with a simple question — why is
searching for private jets
still so fragmented, slow, and unclear? Every operator had its own website, every broker its own system.
The answer is a single, elegant search engine that brings private charters and premium commercial
flights together with real-time data and a luxury aviation feel.
The frontend — React, Vite, TypeScript, and Tailwind — carries
a clean luxury
aviation aesthetic: dark gradients, gold accents, and smooth motion that matches the world of
private travel. A lightweight Node.js + Express backend connects to RapidAPI’s Skyscanner
endpoints and delivers normalized, real-time flight data. Vercel hosts the frontend, Railway
powers the backend, and together they form a seamless, production-ready pipeline.
RapidAPI’s rate limits demanded careful fallback logic and smart
response shaping to keep
the experience smooth. Airport inputs had to be validated and normalized, because users type
city names instead of IATA codes. The luxury UI had to stay consistent across laptop, tablet,
and mobile — every gradient, shadow, and motion intentional — while CORS,
environment variables, and production API stability all needed solving.
One-way, roundtrip, and multi-city searches return results that feel like
products: aircraft
category, seat count, range, operator, availability window, and indicative pricing. A compact
mobile card layout keeps browsing effortless on small screens. Fast, elegant, and ready to
evolve — a clear proof of concept for investors, operators, and premium travelers who want
clarity in a space that rarely offers it.
Student evaluations, profiles, dashboards, and
structured psychological data
collection — a complete mental-health management platform built for a PhD research project, with
an exhibition version for conferences and a secure production version for real use.
Two deployments of one identity. The Exhibition Version is a visually
polished, frontend-only
build for academic presentations and conferences, running on mock data to demonstrate the full
flow without exposing any real student information. The Production Version is the real-world
implementation: Firebase Authentication, Firestore real-time data, protected dashboards, and
role-based access for students, counselors, and parents.
One system had to serve two completely different deployment contexts while
keeping identical UI
and user flow. The exhibition build had to look fully functional using mock data, and the
production build required real authentication, encrypted data storage, and role-based access
controls — without the two ever drifting apart.
A dual-version architecture sharing the same React codebase, switched by
environment-based
feature flags. Exhibition mode runs realistic mock data with believable loading states for
conference demos; production mode integrates Firebase Authentication, Firestore, and role-based
routing. Structured psychological data models were designed in collaboration with the PhD
researcher to capture every required metric and evaluation criterion.
Raw inputs become a complete professional profile
— personality, cognitive
style, and the career paths that fit, explained rather than guessed. AI reasoning made personal.
Kevo transforms raw user inputs into a complete professional profile and
delivers personalized,
data-driven career recommendations. It helps users analyze their personality and cognitive
style, discover career paths that match their strengths, and understand why certain roles fit
them better — making AI guidance accessible and meaningful for students, professionals,
and career changers.
Building an AI reasoning engine that felt intelligent and personalized
— not like a
generic quiz — required careful prompt engineering and structured output parsing. Input
validation, rate limiting, and a secure contact system were also required to make the platform
production-ready.
React + Vite for fast performance, Framer Motion for cinematic animation,
and TailwindCSS for
clean styling. Structured prompts analyze user inputs and generate detailed career
recommendations with explanations, while a secure Nodemailer contact system — protected by
rate limiting and input validation — lets companies reach out directly. Intelligence,
turned into action.
Most local gyms have no real online presence. This
concept site gives one a
strong brand, clean UI, and smooth motion with a heartbeat that feels like home.
A modern fitness landing page designed specifically for the Lebanese /
Baalbek market —
bold, energetic, and culturally aligned with the identity of local gym owners. The goal was a
concept website that demonstrates strong branding, clean UI/UX, smooth animations, and a theme
inspired by local fitness culture.
The design had to feel globally modern and locally relevant at once
— meeting
contemporary web standards for animation, responsiveness, and branding, while still appealing to
gym owners who may never have had a digital presence before.
A fully responsive React website: hero with strong branding, class
categories, trainers,
pricing plans, contact, and smooth scroll animations. Bold typography and energetic gradients
carry gym culture while keeping professional polish — commercial-ready branding and UI/UX
direction for a specific audience.
Habits, streaks, and progress analytics with zero UI
framework — just
disciplined architecture and functional programming behind a terminal.
A fully structured command-line habit tracking system built in Python. The
focus is clean
architecture, functional programming, and reproducible behavior — a strong demonstration
of backend logic and software design principles, managing habits, tracking progress, and
analyzing streaks without any UI framework.
Most habit-tracking tools are visual and heavy. This one had to be
lightweight and
architecture-driven — every feature implemented through disciplined terminal I/O with
robust data handling underneath.
Clean architecture separating concerns into distinct layers, functional
programming for
predictable, testable behavior, habit creation with configurable periods, check-in tracking with
streak calculation, progress analytics, and persistent SQLite storage. Real logic, not just
interfaces.
2000+ sensor readings, three AI providers, and one
dashboard that tells you what
will fail — before it does.
A full-stack predictive maintenance platform that monitors industrial
machines, detects
anomalies, and predicts failures from real-time sensor data. Mock sensor data — 2000+
readings across temperature, vibration, pressure, humidity, operating hours, and load —
simulates realistic industrial IoT and can be replaced with live data from any company.
Simulating realistic industrial IoT data while classifying machine status
into ok, warning, and
critical thresholds; orchestrating Gemini, DeepSeek, and Groq with careful fallback handling;
and triggering alerts the moment failure probability passes 0.7 — all behind a
security-hardened backend with Helmet, CORS, rate limiting, and input validation.
A RandomForestClassifier with 200 estimators and IsolationForest anomaly
detection, served
through a Node.js + Express API with cached lookups. A React + Tailwind + Framer Motion frontend
with lazy loading and code splitting, Supabase storage, SendGrid alerting, and a containerized
AI service running Gunicorn with 4 Uvicorn workers — deployed on Railway and Vercel.
A floating 3D portrait that never clips, duplicates,
or misaligns — on any
device, at any width.
A complete rebuild of a 3D-driven hero section designed to deliver a
cinematic first impression
through precise alignment, responsive behavior, and a clean visual hierarchy — a centered,
single-line heading paired with a floating 3D portrait that remains fully visible, never
clipped, duplicated, or misaligned across devices.
Preventing text wrapping on large screens, maintaining consistent spacing,
and making the 3D
portrait adapt smoothly without breaking the theme or color system at every viewport size.
Precise CSS and component architecture. Every breakpoint was tested and
tuned, the 3D
integration carefully aligned, and the color system enforced consistently — a
pixel-perfect, production-ready interface that preserves the cinematic original while
demonstrating strong debugging, design-system enforcement, and responsive skills.
A full-stack prototype that simulates a garage powered
by an offline AI agent.
Customers type a car problem in English, Arabic, German or French — the agent diagnoses it,
suggests parts, explains its reasoning trace, lets the mechanic schedule an appointment, and generates a
mock invoice the customer can “pay”.
The project is built 100% from scratch — no external AI APIs. The
brain is local NLP (keyword
matching + fuzzy similarity) plus Retrieval-Augmented Generation (RAG) over mock JSON knowledge
data. A hybrid search bridge reaches the real web through the free Wikipedia API (no key, no
payment) when the local knowledge base has no confident answer.
The boot-time knowledge base indexes issues.json (76 issues); symptom
phrases, keywords and fuzzy
misspellings (battey to battery) all vote for the top candidate. Every diagnosis returns a
step-by-step trace — detected language, normalized text, matched keywords, candidates,
top pick and parts — while detection covers EN / AR / DE / FR automatically.
The workflow runs from describe issue to diagnose to schedule appointment
to generate invoice to
pay in the client portal — with a mechanic dashboard (stats, fleet of 48 cars, AI quick
diagnoses, appointment CRUD) and a client portal for invoices with parts/labor/tax and a fake
payment button. All wrapped in a cinematic UI with a video background, animated fallback,
glassmorphism, and Framer Motion transitions.
Four tabs — Projects, Income, Expenses,
Statistics — and one workspace
that turns everyday accounting into a story worth watching. Finora was built for freelancers,
consultants, and founders who want their money to feel as good as it looks.
The concept was simple — make finance feel premium and alive, where
every number tells a
story. A cinematic landing page with a full-screen video background and scroll-driven
storytelling leads into a four-tab dashboard — Projects, Income, Expenses, Statistics
— with full CRUD, animated modals, and transitions that feel like scene changes. A demo
account ships preloaded with realistic mock data, so every chart is alive from the first
login.
The challenge was making analytics feel effortless and luxurious at once.
Total income,
expenses, net profit, monthly and yearly growth, and expense ratio had to be auto-calculated in
real time; charts had to export to PNG, SVG, or multi-page PDF reports; and suggestions had to
react to real data — like “Save 20% of profits” or “Income dipped X%
— chase overdue invoices.” All on a Node.js + Express backend with SQLite or Turso,
JWT auth, and bcryptjs.
Deep charcoal tones, gold gradients, and Cormorant Garamond + Inter
typography carry the
identity. Count-up KPIs and smooth scroll reveals turn the Statistics tab into a storytelling
canvas — dynamic charts and gauges that visualize income, expenses, and growth. Deployed
entirely on Vercel with serverless functions and Turso as the hosted SQLite database: zero
configuration, instant scalability, and free hosting for demos or portfolios.
ResQLink is an offline emergency communication
network for war zones, disaster
areas, and remote missions — a fully decentralized mesh where devices exchange messages directly,
with no internet, no cell towers, and no central server.
ResQLink was built for the places where communication dies first —
war zones, disaster
areas, and remote missions. It uses a decentralized mesh architecture on ESP32 boards with LoRa
modules, so devices exchange messages directly through multi-hop routing even when internet and
cellular networks are completely unavailable.
The challenge was building a network that needs no infrastructure at all.
AES 128-bit
encryption secures every message, ESP-MESH or BATMAN-adv handles multi-hop routing, and a
minimal text-based interface keeps the flow fast and reliable. Messages must survive: peer
discovery finds nearby nodes automatically, while store-and-forward caches messages and
delivers them when connectivity resumes.
The result is a lifeline for search-and-rescue teams, field medics, and
military or civilian
crews during network outages — with emergency priority so critical alerts and medical
messages jump the queue. Built in C++ (Arduino) with PlatformIO and verified through Python
simulations, ResQLink demonstrates offline edge autonomy: devices that think and act
independently in critical situations.
What data this site collects, why, and how it is protected.
No selling, no tracking
without consent, no surprises.
01
What we collect
Contact & booking forms — your name,
email, and the message or meeting
details you submit.
Guestbook — your name, avatar, and message,
shared publicly on the wall when
you sign in with Google or GitHub.
Preferences — theme, last page, and search
state, remembered via cookies.
Anonymous analytics — a visit count and your
country, only if you accept.
Greeting & suggestions — your IP
address and time zone are used and stored anonymously, only to greet you at the right time of day and
to pre-select your time zone when booking a call.
02
Why we collect it
To reply to your messages and confirm your bookings.
To power the guestbook wall and send you post confirmations.
To remember your preferences between visits.
To understand, in general, where visitors come from — never who they
are.
03
Your rights
Ask for a copy or correction of your data at any time.
Request deletion of your guestbook entries or submitted forms.
Withdraw consent for analytics by declining cookies in the banner.
Sign out of the guestbook and clear cookies from your browser anytime.
04
Retention
Guestbook posts stay on the wall until removed.
Form submissions are kept only as long as needed to serve you.
Cookies expire automatically — most within a year, some within days.
No IP addresses are stored. Location is country-level only.
05
Contact
Questions about your data? Reach out anytime and we
will respond within 24
hours.
A plain-language guide to every cookie this site uses and
how you control them.
01
What are cookies?
Cookies are tiny files your browser stores so the
site can remember you. They
make the experience smoother — keeping your theme, your place on the page, and your preferences.
02
Essential cookies (always on)
These are the small helpers that keep the site
working smoothly and remember
your preferences. They don't track you and never store anything personal — just your choices,
saved privately on your own device.
Your light or dark theme choice, so the site always opens the way you like
it.
Whether you have already seen the welcome greeting.
Which page, menu, and search you last used, so nothing resets when you
come back.
A short pause between messages that quietly stops spam bots.
Your cookie choice, so we never ask you twice.
03
Analytics cookies (only with your consent)
These are only switch on after you press
Accept on the banner. They are
completely anonymous — we can't identify you, and we don't want to.
How many times the site has been visited.
When you first arrived and when you last came back.
Which country you are visiting from — nothing more precise, and no
IP address is ever
stored.
04
How to control cookies
Tap Accept or Decline in the consent banner anytime.
Declining only stops anonymous analytics — the site works fully
either way.
Clear cookies anytime in your browser settings (all major browsers support
this).
You can change your mind by clearing the site’s cookies in your
browser.
05
Questions?
If anything here is unclear, email us and we will
explain in plain language.
We use essential cookies to remember your preferences. With
your permission we also
count visits anonymously — no IP addresses, no personal data. You can accept, decline, or read more.
React
Vite
TypeScript
Tailwind
Node.js
Express
RapidAPI
Vercel
Railway
