Ahmed Fayyad — Creative Full-Stack Engineer · Portfolio

Wedding invitations
GLARA Vanity storefront
Academic OS

2026 Edition

Freelance · Remote · EN / AR

Building products through design, motion and code

AhmedFayyad

Creative Full-Stack Engineer

Interface & Motion Design
Full-Stack Development
WebGL & 3D Experiences

Next.jsReactThree.jsGSAPWebGLNestJSSupabasePostgreSQLArabic / RTL

DesignMotionCodeLaunchDesignMotionCodeLaunchDesignMotionCodeLaunch

Portfolio 02 — About 20(26)

Portrait of Ahmed Fayyad — Egypt · Remote --:--

Hi! I’m Ahmed

About Me

I’m a creative full-stack engineer who designs and builds web products end to end — from the first wireframe and motion study to the database, the deploy and the SEO. I care about the invisible details: how a page loads, how a button presses, how Arabic reads right-to-left.

Recently I shipped a luxury digital-invitation studio, a bilingual furniture store with a live customisation lab, and an academic operating system with its own AI agent.

01 / Design & motion

Interfaces that feel inevitable

Figma → code
Design systems
GSAP
Lenis
Motion
Micro-interactions

02 / Frontend

Fast, accessible, typed

React 19
Next.js 15 / 16
TypeScript
Tailwind v4
Vite
i18n

03 / Creative dev

WebGL with taste

three.js
React Three Fiber
GLSL shaders
Post-processing
Particles

04 / Backend & data

Products, not prototypes

NestJS
Prisma
PostgreSQL
Supabase
Redis · BullMQ
Socket.IO

01
Landing pages & brand sites
Award-level motion that still loads fast and ranks.
02
Full-stack web apps & SaaS
Auth, dashboards, databases, admin — shipped to production.
03
E-commerce
Catalogues, carts, checkout and product configurators.
04
WebGL & interactive 3D
Shaders, particles and product viewers that feel physical.
05
Bilingual Arabic / English
Real right-to-left design — not a mirrored afterthought.
06
Polish & rescue
Performance, accessibility and animation audits for live products.

01 / 03 Scroll to flip the file

Portfolio 03 — Approach 20(26)

Strategy first, code second.

I learn your brand, audience and goals before I open the editor.
Every screen is designed for the device, the language and the person in front of it.
Motion, performance and SEO are part of the build — not a phase after it.

My approach makes every pixel, every millisecond and every line of copy earn its place — so the product feels obvious to the people using it.

My Approach

Portfolio 04 — Selected Work 20(26)

Selected Work

Three products, designed and engineered end to end — interface, motion, backend and launch, plus the brand for Dulaxa and Ciiircle.

(03)

dulaxa.com

Issue No. 01 — Digital Wedding Invitations

Built for one couple.
Never used again.

01Brand · Web · Full-stack2026

Dulaxa

Luxury digital wedding experiences

A studio that turns an invitation into a private, film-like website — music, motion and RSVP in a single link. I built the brand, the editorial marketing site, the invitation engine and the admin behind it.

One-off invitation worlds — film, sound & motion
Arabic / English with editorial RTL typography
Supabase auth, CMS-driven copy & admin dashboard
SEO: structured data, OG images, sitemap

Next.js 16
React 19
GSAP
Lenis
three.js
Supabase
Tailwind v4

dulaxa.com

glara.shop

Made in Egypt · Floating vanity systems

Designed to
float.

Open lab →

Step 2 / 4 · Finish

02E-commerce · Full-stack2026

Glara

Floating vanity systems — storefront

A bilingual store for an Egyptian bathroom-furniture brand, built from its Figma source of truth: catalogue, a four-step customisation lab, cart, checkout, customer accounts and an admin back office.

Four-step customisation lab with live pricing
Prices computed on the server — never trusted from the client
Full English / Arabic with RTL, sitemap from the catalogue
Prisma + Neon Postgres, deployed on Vercel

Next.js 15
TypeScript
Prisma
PostgreSQL
R3F
zod
Tailwind v4

glara.shop

ciiircle.com

دايرة فيها كل اللي تحتاجه

The operating system for academic growth

Tasks
Quizzes
Files
Chat
Neo AI

03Product · AI · Platform2026

Ciiircle

An academic operating system

Circles where teachers, centres and learning communities keep everything in one place — tasks, quizzes, files, chat, calendar and an academic passport — with Neo, an AI agent that works with each person’s own permissions.

Neo — a Gemini agent that calls tools and reads PDF, Word & PowerPoint files
Circles inside circles, quizzes and an append-only academic passport
NestJS API: 18 modules, 130+ endpoints, real-time Socket.IO
Arabic-first RTL, k6 load tests, Prometheus & Grafana, CI with e2e

React 19
Vite
Motion
NestJS 11
PostgreSQL
Redis
Socket.IO

ciiircle.com

04 — 20(26)

Your project
could be next.

Start a project

Portfolio 05 — Expertise 20(26)

Everything a product needs. One person.

From the first sketch to the server logs — one point of contact, one standard of craft.

Frontend & motion engineering

Motion with a reason.

Movement here is built on one signature curve, picked on purpose. Interfaces respond within 300ms, never start slow, and respect reduced-motion.

React 19
Next.js
TypeScript
GSAP
Lenis
Motion

WebGL & 3D

The background is live.

fBm noise, domain warping, a ping-pong mouse trail and curl-noise particles — move your cursor.

three.js
R3F
GLSL
Post-processing

Bilingual

Arabic & English, natively.

ابدأ تجربتك — Start your experience

Backend & data

Real products, real data.

circles ──┬── circle_members
          ├── tasks
          └── ledger_entries

NestJS
Prisma
Postgres
Supabase

Performance & SEO

Found, then fast.

Web-vitals monitoring, structured data, OG images, sitemaps and hreflang for EN / AR.

AI features

AI where it helps.

Neo, Ciiircle’s AI agent on Gemini, uses tools within each person’s own permissions and reads the files shared in the circle. I also bring hands-on deep learning: LSTMs and CNN classifiers.

Ship & operate

Launch is the middle, not the end.

Vercel
Docker
GitHub Actions
Prometheus
Grafana
k6

Portfolio 06 — Results 20(26)

Result & Range

03Products live

18API modules — Ciiircle

02Languages, one codebase

04Steps in Glara’s configurator

Consistent craft across design, engineering and launch — every project ships live, bilingual and built to be maintained.

Portfolio 07 — Process 20(26)

Research

Your brand, audience, competitors and goals — before any pixels.
Planning

Sitemap, wireframes, motion language and a scope we both agree on.
Execution

Design and build in reviewable milestones on a live preview link.
Optimization

Launch, then tune speed, SEO and conversion with real data.

See my work

Portfolio 08 — Contact 20(26)

Work
with
Me!

I’d love to help build your product through design, motion and code.

Contact me!