أحمد فياض — مهندس فول ستاك إبداعي · أعمالي

إصدار 2026

عمل حر · عن بُعد · عربي / EN

أبني منتجات رقمية بالتصميم والحركة والكود

أحمدفياض

مهندس فول ستاك إبداعي

  • تصميم الواجهات والحركة
  • تطوير فول ستاك
  • تجارب WebGL ثلاثية الأبعاد
ملف الأعمال 02 — نبذة 20(26)
صورة أحمد فياض Ahmed Fayyad
مصر · عن بُعد --:--

أهلًا! أنا أحمد

عنّي

أنا مهندس فول ستاك إبداعي، أصمّم منتجات الويب وأبنيها من الألف إلى الياء — من أول مخطط ودراسة للحركة، حتى قاعدة البيانات والنشر والظهور في محركات البحث. يهمّني ما لا يلاحظه أحد: كيف تُحمَّل الصفحة، وكيف يستجيب الزر حين تضغطه، وكيف تُقرأ العربية من اليمين إلى اليسار.

مؤخرًا أطلقت استوديو فاخرًا للدعوات الرقمية، ومتجرًا ثنائي اللغة للأثاث بمعمل تفصيل تفاعلي، ونظام تشغيل أكاديميًا بوكيل ذكاء اصطناعي خاص به.

01 / التصميم والحركة

واجهات تبدو بديهية

  • من Figma إلى الكود
  • أنظمة تصميم
  • GSAP
  • Lenis
  • Motion
  • تفاعلات دقيقة

02 / الواجهة الأمامية

سريعة، ومتاحة للجميع، وبأنواع صارمة

  • React 19
  • Next.js 15 / 16
  • TypeScript
  • Tailwind v4
  • Vite
  • تعدد اللغات

03 / تطوير إبداعي

WebGL بذوق رفيع

  • three.js
  • React Three Fiber
  • شيدرز GLSL
  • Post-processing
  • جسيمات

04 / الواجهة الخلفية والبيانات

منتجات حقيقية، لا نماذج تجريبية

  • NestJS
  • Prisma
  • PostgreSQL
  • Supabase
  • Redis · BullMQ
  • Socket.IO
  1. 01

    صفحات هبوط ومواقع للعلامات التجارية

    حركة بمستوى المواقع الحائزة على جوائز، مع تحميل سريع وظهور قوي في البحث.

  2. 02

    تطبيقات ويب متكاملة ومنصات SaaS

    تسجيل دخول، ولوحات تحكم، وقواعد بيانات، وإدارة — جاهزة للتشغيل الفعلي.

  3. 03

    متاجر إلكترونية

    كتالوج، وسلة مشتريات، وإتمام الشراء، وأدوات لتخصيص المنتجات.

  4. 04

    WebGL وتجارب ثلاثية الأبعاد

    شيدرز وجسيمات ومعاينات تفاعلية للمنتجات تكاد تلمسها بيدك.

  5. 05

    منتجات بالعربية والإنجليزية

    تصميم حقيقي من اليمين إلى اليسار — لا مجرد نسخة معكوسة.

  6. 06

    صقل المنتجات وإنقاذها

    مراجعة الأداء وإمكانية الوصول والحركة لمنتجات تعمل بالفعل.

01 / 03 مرّر لتقليب الملف
ملف الأعمال 03 — المنهج 20(26)

الاستراتيجية أولًا، ثم الكود.

  • أفهم علامتك التجارية وجمهورك وأهدافك قبل أن أفتح المحرّر.
  • كل شاشة مصمَّمة للجهاز، وللغة، وللشخص الذي يستخدمها.
  • الحركة والأداء والظهور في البحث جزء من البناء — لا مرحلة تأتي بعده.

منهجي يجعل كل بكسل، وكل جزء من الثانية، وكل سطر من النص يستحق مكانه — حتى يبدو المنتج بديهيًا لمن يستخدمه.

منهجي

ملف الأعمال 04 — أعمال مختارة 20(26)

أعمال مختارة

ثلاثة منتجات صمّمتها وبنيتها من الألف إلى الياء — الواجهة، والحركة، والخادم، والإطلاق، والهوية أيضًا في Dulaxa وCiiircle.

(03)
dulaxa.com
The ArchiveProcessPricing Start Your Invitation

Issue No. 01 — Digital Wedding Invitations

Built for one couple.
Never used again.

01هوية · ويب · فول ستاك2026

Dulaxa

تجارب زفاف رقمية فاخرة

استوديو يحوّل الدعوة إلى موقع خاص بطابع سينمائي — موسيقى وحركة وتأكيد حضور في رابط واحد. بنيت الهوية، والموقع التسويقي التحريري، ومحرّك الدعوات، ولوحة الإدارة التي تشغّل كل ذلك.

  • عوالم دعوات تُصمَّم لمرة واحدة — فيلم وصوت وحركة
  • عربي وإنجليزي بتنسيق طباعي تحريري من اليمين إلى اليسار
  • تسجيل دخول عبر Supabase، ونصوص تُدار من نظام إدارة المحتوى، ولوحة تحكم
  • الظهور في البحث: بيانات منظَّمة، وصور مشاركة، وخريطة موقع
  • Next.js 16
  • React 19
  • GSAP
  • Lenis
  • three.js
  • Supabase
  • Tailwind v4
dulaxa.com
glara.shop
UnitsCustomizeSupport عربي

Made in Egypt · Floating vanity systems

Designed to
float.

Open lab →
Step 2 / 4 · Finish
02تجارة إلكترونية · فول ستاك2026

Glara

وحدات حمّام معلّقة — متجر إلكتروني

متجر ثنائي اللغة لعلامة مصرية لأثاث الحمّامات، مبنيّ على ملفات Figma المرجعية: كتالوج، ومعمل تفصيل من أربع خطوات، وسلة، ودفع، وحسابات للعملاء، ولوحة إدارة.

  • معمل تفصيل من أربع خطوات بتسعير لحظي
  • الأسعار تُحسب على الخادم — ولا يُعتمد على ما يرسله المتصفح
  • عربي وإنجليزي بالكامل مع RTL، وخريطة موقع من الكتالوج
  • Prisma مع Neon Postgres، ومنشور على Vercel
  • Next.js 15
  • TypeScript
  • Prisma
  • PostgreSQL
  • R3F
  • zod
  • Tailwind v4
glara.shop
ciiircle.com
CirclesPassportNeo Get started

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

The operating system for academic growth

  • Tasks
  • Quizzes
  • Files
  • Chat
  • Neo AI
03منتج · ذكاء اصطناعي · منصة2026

Ciiircle

نظام تشغيل أكاديمي

دوائر يجمع فيها المعلّمون والمراكز ومجتمعات التعلّم كل شيء في مكان واحد — المهام والاختبارات والملفات والمحادثات والتقويم والجواز الأكاديمي — مع Neo، وكيل ذكاء اصطناعي يعمل في حدود صلاحيات كل مستخدم.

  • Neo — وكيل Gemini يستخدم الأدوات ويقرأ ملفات PDF وWord وPowerPoint
  • دوائر داخل دوائر، واختبارات، وجواز أكاديمي لا يُعدَّل ولا يُحذف
  • خادم NestJS بـ18 وحدة وأكثر من 130 مسارًا، وتحديث لحظي عبر Socket.IO
  • العربية أولًا، واختبارات حِمل k6، وPrometheus وGrafana، وCI مع e2e
  • React 19
  • Vite
  • Motion
  • NestJS 11
  • PostgreSQL
  • Redis
  • Socket.IO
ciiircle.com
ملف الأعمال 05 — الخبرات 20(26)

كل ما يحتاجه منتجك. شخص واحد.

من أول رسم مبدئي حتى سجلات الخادم — جهة تواصل واحدة، ومعيار واحد للإتقان.

هندسة الواجهات والحركة

حركة لها سبب.

الحركة هنا مبنية على منحنى أساسي واحد اختير بعناية. الواجهات تستجيب خلال 300 ملّي ثانية، لا تبدأ ببطء أبدًا، وتحترم إعداد تقليل الحركة.

  • React 19
  • Next.js
  • TypeScript
  • GSAP
  • Lenis
  • Motion

WebGL والأبعاد الثلاثية

الخلفية حيّة.

ضوضاء fBm، وتشويه للإحداثيات (domain warping)، وأثر للمؤشر بتقنية ping-pong، وجسيمات تسبح في تيار curl noise — حرّك المؤشر.

  • three.js
  • R3F
  • GLSL
  • Post-processing

ثنائي اللغة

عربي وإنجليزي، من الأساس.

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

الواجهة الخلفية والبيانات

منتجات حقيقية، وبيانات حقيقية.

  • NestJS
  • Prisma
  • Postgres
  • Supabase

الأداء والظهور في البحث

يظهر أولًا، ويفتح بسرعة.

  • LCP
  • INP
  • CLS

مراقبة Web Vitals، وبيانات منظَّمة، وصور مشاركة، وخرائط موقع، وhreflang للعربية والإنجليزية.

ميزات الذكاء الاصطناعي

ذكاء اصطناعي حيث يفيد.

Neo، وكيل Ciiircle المبني على Gemini، يستخدم الأدوات في حدود صلاحيات كل مستخدم ويقرأ الملفات المشتركة في الدائرة. ولديّ أيضًا خبرة عملية في التعلّم العميق: شبكات LSTM ومصنِّفات CNN.

الإطلاق والتشغيل

الإطلاق منتصف الطريق، لا نهايته.

  • Vercel
  • Docker
  • GitHub Actions
  • Prometheus
  • Grafana
  • k6
ملف الأعمال 06 — النتائج 20(26)

نتائج
ونطاق

03منتجات منشورة
18وحدة في خادم Ciiircle
02لغتان بقاعدة كود واحدة
04خطوات في معمل تفصيل Glara

إتقان ثابت في التصميم والهندسة والإطلاق — كل مشروع يُطلَق فعليًّا، بلغتين، ومبنيًّا ليسهل تطويره وصيانته.

ملف الأعمال 07 — طريقة العمل 20(26)

مراحل العمل

  1. البحث

    علامتك وجمهورك ومنافسوك وأهدافك — قبل أي بكسل.

  2. التخطيط

    خريطة الموقع، والمخططات، ولغة الحركة، ونطاق عمل نتفق عليه معًا.

  3. التنفيذ

    تصميم وبناء على مراحل قابلة للمراجعة، عبر رابط معاينة مباشر.

  4. التحسين

    الإطلاق، ثم ضبط السرعة والظهور في البحث ونسبة التحويل ببيانات حقيقية.

شاهد أعمالي
ملف الأعمال 08 — تواصل 20(26)

لنبنِ
شيئًا
معًا!

يسعدني أن أساعدك في بناء منتجك بالتصميم والحركة والكود.

تواصل معي!

ابدأ مشروعك