Batman portfolio

قمت بتصميم وتطوير معرض أعمال (Portfolio) يجمع بين الهوية البصرية الفريدة المستوحاة من "بتمان" وبين أحدث تقنيات الويب العالمية. الهدف من المشروع لم يكن مجرد عرض أعمال، بل تقديم تجربة مستخدم (UX) استثنائية تُبرز المهارات البرمجية في تحسين الأداء (Optimization) والتحريك الإبداعي (Motion Design).

المميزات التقنية للمشروع:

1. هندسة الأداء الفائق (Speed & SEO Engine):

تحقيق تقييم 100/100 في Lighthouse: تم تحسين كافة مقاييس الأداء (Core Web Vitals) للوصول إلى أعلى درجة ممكنة.

سرعة تحميل استثنائية: استخدام بنية Islands Architecture لتقليل حجم ملفات الجافا سكريبت المرسلة للمتصفح بنسبة 80%.

تحسين الصور (Asset Optimization): بناء Pipeline آلي لتحويل الصور إلى صيغ WebP و AVIF، مما قلل حجم الصفحة بنسبة 60% مع الحفاظ على الجودة.

2. بنية برمجية حديثة وعالمية (Modern Architecture):

دعم كامل للغتين (i18n): واجهة ثنائية اللغة (عربي/إنجليزي) مع دعم كامل للـ RTL و LTR لضمان تجربة سلسة لكافة المستخدمين.

أحدث التقنيات: المشروع مبني باستخدام Astro 6 و React 19 و Tailwind CSS v4، مما يضمن كوداً نظيفاً وقابلاً للتطوير.

SEO تقني متقدم: توليد تلقائي لبيانات JSON-LD Schema لتحسين ظهور الموقع وفهمه من قبل محركات البحث بشكل احترافي.

3. تجربة بصرية غامرة (Visual Experience & A11y):

تحريك تفاعلي (Motion Design): استخدام Framer Motion لعمل حركات وانتقالات بتردد 60fps تعتمد على تسريع الأجهزة (Hardware Acceleration) لضمان النعومة.

ثيم باتمان (Dark Knight Theme): تصميم واجهة مظلمة (Dark UI) احترافية تعتمد على التباين العالي والظلال المدروسة لراحة العين وجذب الانتباه.

معايير الوصول (Accessibility): الالتزام الكامل بمعايير A11y لضمان أن الموقع قابل للاستخدام من قبل الجميع، بما في ذلك مستخدمي قارئات الشاشة.