My personal website
تفاصيل العمل
أقدم لكم معرض أعمالي الشخصي - موقع بورتفوليو احترافي يعكس خبرتي كمطور واجهات أمامية Front-end Developer. بنيت الموقع باستخدام أحدث التقنيات الحديثة مع دعم كامل للغتين العربية والإنجليزية.
نظرة عامة على المشروع:
صممت وطورت موقع بورتفوليو متكامل يعرض مهاراتي ومشاريعي السابقة بطريقة احترافية وجذابة. الموقع مُحسّن بالكامل لمحركات البحث ويعمل بسلاسة على جميع الأجهزة من الموبايل للديسكتوب.
المميزات الرئيسية:
الأداء والتحسينات:
• Server-Side Rendering (SSR) باستخدام Next.js App Router
• تحسين الصور تلقائيًا لسرعة تحميل فائقة
• نتيجة Lighthouse أعلى من 90% في الأداء وسهولة الاستخدام
• تحسين كامل لمحركات البحث SEO مع Meta Tags احترافية
الدعم اللغوي:
• دعم كامل للغة العربية والإنجليزية
• تبديل تلقائي لاتجاه الكتابة RTL/LTR
• ترجمة احترافية لكل المحتوى
• روابط URL منفصلة لكل لغة (/ar و /en)
التصميم وتجربة المستخدم:
• تصميم عصري بواجهة نظيفة ومهنية
• متجاوب تمامًا Responsive على جميع الشاشات
• وضع داكن وفاتح Dark/Light Theme
• حركات انتقالية سلسة باستخدام Framer Motion
• ألوان متدرجة بنظام Blue-Slate
الأقسام المتضمنة:
• قسم Hero احترافي مع أزرار Call-to-Action
• عرض شامل للمهارات والتقنيات
• خط زمني للخبرات العملية Experience Timeline
• خط زمني للشهادات والتعليم
• معرض مشاريع تفاعلي مع نوافذ Modal تفصيلية
• آراء العملاء Testimonials
• نموذج تواصل مع روابط السوشيال ميديا
المميزات التفاعلية:
• نوافذ تفصيلية للمشاريع مع عرض التقنيات المستخدمة
• فلترة المشاريع حسب التقنية
• حالات تحميل Loading احترافية
• تأثيرات Hover سلسة
• دعم كامل للتنقل بلوحة المفاتيح Keyboard Navigation
التقنيات المستخدمة
إطار العمل والمكتبات:
• Next.js 15.5.2 - مع App Router
• React 19.1.0 - أحدث إصدار
• TypeScript 5.x - للأمان والدقة في الكود
التصميم والواجهة:
• Tailwind CSS 4.x - إطار عمل CSS حديث
• Framer Motion 12.x - لحركات الأنيميشن
• Lucide React - مكتبة أيقونات احترافية
• مكونات مخصصة قابلة لإعادة الاستخدام
الدعم اللغوي:
• next-intl 4.x - حل شامل للترجمة i18n
• مسارات URL مخصصة حسب اللغة
• دعم كامل لـ RTL
أدوات التطوير:
• ESLint - للحفاظ على جودة الكود
• PostCSS - معالجة CSS
• Turbopack - سيرفر تطوير سريع