الرؤية

كان هدفي من مشروع "Captain X" هو الارتقاء بالعلامة التجارية الشخصية لمحمد علي، المتداول المحترف، من خلال إنشاء حضور وب مميز وثنائي اللغة (الإنجليزية والعربية). كانت الرؤية تتمثل في الانتقال من المظهر التقليدي إلى واجهة مخصصة عالية الأداء تبعث على الثقة والاحترافية، وتعكس خبرته في الأسواق المالية وطريقة تداول "النسبة الذهبية".

التحدي

كانت النسخة السابقة من الموقع (hi-x-old-code) تعمل، لكنها كانت تفتقر إلى اللمسات الجمالية والأداء المطلوب لعلامة تجارية شخصية بارزة. تضمنت التحديات الرئيسية ما يلي:

• الأداء: كان الموقع القديم يعاني من أصول غير محسّنة ومكتبات ثقيلة (مثل Font Awesome) مما أبطأ أوقات التحميل.
• تجربة الجوال: لم تكن نسخة الجوال محسّنة بالكامل، مع مشاكل في صور الخلفية ومسافات التخطيط التي لم تتناسب جيدًا مع الشاشات الصغيرة.
• هيكلية المشروع: كان الكود غير منظم، مما جعل من الصعب صيانته أو تطويره.
• الدعم ثنائي اللغة: على الرغم من وجوده، كان التنفيذ بحاجة إلى تحسين لضمان تجربة سلسة عبر كل من التخطيطات من اليمين لليسار (Arabic) ومن اليسار لليمين (English).

الحل

قمت بإجراء إصلاح شامل للكود (hi-x-new-code)، مع التركيز على الأداء، والهيكلية، وتجربة المستخدم.

• الهيكلية والتنظيم: أعدت تنظيم المشروع في هيكل قياسي قابل للصيانة مع مجلدات مخصصة لـ css/ و js/ و images/. قمت بتنفيذ عملية بناء تخرج حزمة html/ نظيفة وجاهزة للنشر.
• تحسين الأداء:
  • استبدلت المكتبات الثقيلة بمجموعة مخصصة من أيقونات SVG المحسّنة (images/icons/).
  • قمت بتنفيذ عرض الصور المتجاوب باستخدام وسم <picture> وتنسيقات WebP لضمان التحميل السريع على جميع الأجهزة.
  • قمت بضغط ملفات CSS و JavaScript (styles-min.css, main-min.js).
• التصميم المتجاوب: أعدت تصميم تجربة الجوال، وتحديداً القسم العلوي ومعالجة الخلفية، لضمان عرض دقيق (pixel-perfect) على الهواتف دون التأثير على جودة العرض على سطح المكتب.
• تحسين المحتوى: أضفت صفحة about-us.html جديدة ووسعت الصفحات الرئيسية بمحتوى أكثر ثراءً وعلامات SEO وصفية أفضل لكل من الإنجليزية والعربية.
• لمسة احترافية: قدمت لغة تصميم حديثة وأنيقة مع خطوط متناسقة (Inter, Poppins, Cairo) ولوحة ألوان راقية تتناسب مع هوية العلامة التجارية "Captain X".