إنشاء، اختبار، تحسين

تطوير كامل لمنصة ويب شركة لـ GM Microcementos، شركة متخصصة في تطبيق الأسمنت الميكروي. موقع ويب مهني مع 15 صفحة محسنة، مع التركيز على الأداء وتحسين محركات البحث وتجربة مستخدم استثنائية. يتضمن حاسبة الميزانية، معرض مشاريع قابل للترشيح، نماذج متقدمة ونظام تصميم بسيط. هيكل معياري مع أكثر من 100 مكون قابل للإعادة الاستخدام وتحسين Core Web Vitals.

منصة ويب لـ Academia CEJ، أكاديمية متخصصة في امتحانات العدل التنافسية في مالقة. موقع ويب متجاوب بالكامل مع مدونة، حرم جامعي افتراضي، نظام اختبار المعرفة، نظام التسجيل وإدارة البرامج. مطور بـ Next.js 14، React 18، Tailwind CSS، Framer Motion و Docker.

تطوير الموقع المؤسسي لشركة Dimap، وهو تطبيق حديث مبني باستخدام Next.js 15 وReact 19 وRedux Toolkit وTailwindCSS، يهدف إلى تقديم أداء مثالي وتجربة سلسة. يشمل المشروع صفحات الخدمات والمدونة والأقسام المؤسسية والنماذج مع تتبع العملاء المحتملين، وكل ذلك مبني على بنية معيارية مع تحميل عالي التحسين باستخدام SSG وLazy Loading وClientLoader.

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

DevCrate منصة لاكتشاف موارد التطوير (الأدوات، والمكتبات، والأصول، والتوثيق، والتحديات). ألم يحدث لك أنك احتجت مورداً لمشروعك، أو مجرد إلهام، وانتهى بك الأمر بالتنقّل بين عدد لا نهائي من الصفحات؟ لهذا أنشأت هذه المنصة: لتنظيم كل الموارد التي اكتشفتها عبر السنوات وعدم فقدان أيٍ منها، والقدرة على العثور عليها بسرعة من دون الاعتماد على إشارات مرجعية مبعثرة. تتضمن بحثاً متقدماً، وفلاتر حسب الوسوم، ومنطقة إدارة للتحكم في كل المحتوى. كما تتيح اقتراحات المجتمع لمواصلة جمع الأدوات المفيدة. بُنيت باستخدام Next.js وReact وTypeScript وMongoDB، مع مصادقة آمنة وواجهة حديثة مبنية على shadcn/ui.

إعادة إنشاء قسم البطل الرسمي من موقع Apple لـ AirPods Pro 2، مع التركيز على إتقان الرسوم المتقدمة باستخدام GSAP وScrollTrigger. قمت بتنفيذ تسلسل من 65 صورة يتم عرضها عبر Canvas ومتزامنة مع التمرير، إضافةً إلى انتقالات سلسة وملاحة ديناميكية وتأثيرات مستوحاة من تجربة Apple الأصلية. مشروع يهدف إلى تحسين مهاراتي في الرسوميات عالية الأداء على الويب.

تطوير تطبيق PWA لاكتشاف الكائنات في الوقت الفعلي باستخدام Angular 19 وTensorFlow.js. يتضمن إعداد PWA، دمج TensorFlow.js لاكتشاف الكائنات، التقاط ومعالجة الصور المباشرة، تحسين الأداء باستخدام Web Workers وLazy Loading، التخزين دون اتصال عبر IndexedDB، ونشره على الأجهزة المحمولة.

نسخة من صفحة الهبوط Grand Theft Auto VI، تم إنشاؤها حصرًا لأغراض تعليمية وعرض مهارات تطوير الويب. موقع ويب حديث بتصميم متجاوب محسَّن لجميع دقة شاشات سطح المكتب (1024px - 4K). يتضمن قائمة منسدلة مع رسوم متحركة متقدمة باستخدام GSAP، ونظام عرض ديناميكي للشخصيات والمواقع مع الصور، وقسم تفاعلي للإعلانات الترويجية مع معاينة، وقسم تنزيلات مع بطاقات متحركة. مشروع تعليمي غير ربحي، تم تطويره باستخدام Astroو Tailwind CSS وJavaScript.

مشروع تدريبي لتعلم Three.js و TresJS باستخدام نماذج ثلاثية الأبعاد. تطبيق ويب تفاعلي يسمح بتخصيص مكتب واقف (standing desk) بخيارات تشطيب وألوان مختلفة. يتضمن عرض ثلاثي الأبعاد مع عناصر تحكم مدارية، ونماذج ثلاثية الأبعاد للاب توب وسماعات الرأس ونبات زخرفي. خصص إنهاء المكتب واختر الألوان للإكسسوارات مع معاينة في الوقت الفعلي. تم تطويره باستخدام Vue 3، TresJS (تكامل Three.js مع Vue)، TypeScript، Vite و UnoCSS.

مشروع صغير موجّه للتدرّب على استخدام Strapi كـ CMS وواجهة خلفية. تم تطويره باستخدام React/Next.js وTypeScript وTailwind CSS. رغم أن العرض التجريبي يستخدم بيانات وهمية، فإن الكود يتضمن تكاملاً حقيقياً مع Strapi لجلب المحتوى وإدارته.

مشروع دردشة فوري ببنية خلفية موجهة للإنتاج. يستخدم Node.js + Express و Socket.IO لاتصال ثنائي الاتجاه، مع وضعي تخزين: داخل الذاكرة (mock) وتخزين دائم اختياري عبر Supabase. يمكن تشغيل الواجهة الأمامية (Vite) بوضع demo أو live، والحل مبني بطبقات (configuration و HTTP و realtime و domain و storage) لتسهيل الصيانة والاختبار وقابلية التوسع.

تطبيق HTML5 للعبة Super Mario Bros الكلاسيكية المبنية باستخدام Phaser 3.55.2 للأغراض التعليمية، استنادًا إلى عمل decapapi. يعيد المشروع إنشاء تجربة منصة ثنائية الأبعاد باستخدام بنية معيارية للرسوم المتحركة والكتل والهياكل والكيانات وعناصر التحكم في المشغل وشاشة HUD، بالإضافة إلى الإضافات مثل التقاط لقطة الشاشة باستخدام html2canvas. وهو يدعم نشر الويب والتطوير المحلي باستخدام Vite، مما يجعل الاختبار والمساهمات مفتوحة المصدر بموجب ترخيص MIT أمرًا مباشرًا.

يعيد Paint Win 95' إنشاء تجربة Microsoft Paint الكلاسيكية بواجهة رجعية بأسلوب Windows 95 وسلوك ويب حديث. يتضمن أدوات للرسم والتحديد، ولوحة ألوان أساسية/ثانوية، وسجل تراجع/إعادة، ومستويات تكبير للعمل، وفتح الصور المحلية، والتصدير إلى PNG، ودعم إدخال الماوس ولوحة المفاتيح واللمس/القلم عبر Pointer Events.

Bookshop View Transitions هو عرض توضيحي مبني بـ React + Vite يركز على تنفيذ انتقالات سلسة بين الصفحات باستخدام واجهة View Transitions API، ويتضمن رسومًا متحركة مشتركة بين العناصر (العنوان، الغلاف، والتنقل) لتحقيق تنقل بصري متواصل.

نسخة TikTok مبنية باستخدام React وTypeScript وVite ومصممة بنهج mobile-first. تتضمن موجزًا عموديًا مع تشغيل تلقائي، وتنقل Following/For You، وإجراءات تفاعلية (إعجاب، تعليقات، حفظ، مشاركة)، وصفحات Friends/Inbox/Profile، وميزة upload مع النشر في الموجز. تعمل بهيكلية معتمدة على الخدمات (mock افتراضي مع تخزين دائم عبر localStorage) مع تجهيز Supabase للاتصال الخلفي الحقيقي.

مشروع مفتوح المصدر مستوحى من اللعبة الكلاسيكية Breakout، مبني باستخدام Astro ومنطق لعبة بـ TypeScript عبر Canvas. يتضمن اختيار مستوى الصعوبة داخل الـ canvas، سرعة كرة قابلة للتعديل وتتزايد تدريجيًا، طوبًا بقدرة تحمّل متغيرة مع حالات تلف مرئية، تحكمًا بلوحة المفاتيح، وإعادة تشغيل بعد Game Over.