بورتفوليو احترافي

نظام التصميم المزدوج (Dark/Light Mode):

زر تبديل ثابت في الزاوية العلوية اليمنى

حفظ تفضيلات المستخدم في localStorage

انتقالات سلسة بين الوضعين باستخدام CSS transitions

ألوان متناسقة لكل وضع مع ضبط كافة العناصر (النصوص، الخلفيات، البطاقات)

تصميم متجاوب متكامل (Responsive Design):

تكييف تلقائي لجميع أحجام الشاشات (جوال، تابلت، سطح مكتب)

إعادة ترتيب العناصر في الشاشات الصغيرة (مثل تحويل الأعمدة إلى صفوف)

ضبط أحجام الخطوط والعناصر حسب حجم الشاشة

إخفاء القائمة في الشاشات الصغيرة (تمهيدًا لإضافة قائمة هامبرجر)

تأثيرات بصرية متقدمة:

تأثير الكتابة المتحركة على النصوص (Typing Animation)

تأثيرات رفع العناصر عند المرور (Hover Effects)

ظلال متحركة على البطاقات والأزرار

انتقالات سلسة بين الأقسام (Smooth Scrolling)

تأثير ضبابي على شريط التنقل (Backdrop Filter Blur)

هيكل منظم ومقسم بوضوح:

5 أقسام رئيسية (الرئيسية، الخدمات، المشاريع، عني، التواصل)

بطاقات عرض منتظمة للخدمات والمشاريع

نظام ألوان متناسق يعتمد على اللون الفيروزي (#1de2d1)

حماية المحتوى:

منع النسخ (user-select: none)

تعطيل النقر الأيمن مع رسالة تنبيه

حماية الصور من التحميل غير المصرح به

أداء محسّن:

تحميل الخطوط بذكاء (Poppins بثلاث أوزان)

استخدام will-change و backface-visibility لتحسين التصيير

تحسين تجربة التحميل باستخدام transition على العناصر

مكونات تفاعلية:

أزرار ذات تدرجات لونية وظلال متحركة

أيقونات التواصل الاجتماعي بتأثيرات الرفع

بطاقات خدمات ومشاريع قابلة للنقر

التواصل الاجتماعي:

روابط مباشرة لحسابات المطور (GitHub، Facebook، Instagram)

زر اتصال مباشر عبر البريد الإلكتروني

زر تحميل السيرة الذاتية (CV)

تفاصيل تقنية متقدمة:

نظام شبكي حديث (Grid System) للخدمات والمشاريع

تدرجات لونية متحركة على الأزرار

إدارة فعالة لحالات :hover و :focus

استخدام متقدم لمحددات CSS

يُظهر هذا العمل مستوى عالي من الاحترافية في تصميم واجهات المستخدم وتجربة المستخدم (UI/UX) مع توازن ممتاز بين الجماليات البصرية والأداء التقني.