موقع بورتفوليو شخصي

نوع العمل:

موقع ويب شخصي (Portfolio) يعرض مهارات وخبرات ومشاريع المطورة، مع تركيز واضح على إمكانية الوصول (Accessibility) لتناسب جميع المستخدمين، خاصة كبار السن. يتضمن الموقع أقسامًا: الرئيسية، من أنا، المهارات، الخبرة، الخدمات، المشاريع، التعليم، الاتصال.

ميزاته:

تصميم عصري وبسيط يعتمد على الألوان الهادئة (أزرق، رمادي، أبيض) وخطوط واضحة (Inter) مع تحسينات للتباين وسهولة القراءة.

إمكانية وصول متقدمة:

حجم خط أساسي كبير (18px) مناسب لكبار السن.

دعم تفضيلات المستخدمين (تقليل الحركة، التباين العالي) عبر استعلامات الوسائط.

تركيز مرئي واضح (focus-visible) على العناصر القابلة للتفاعل.

نصوص بديلة للصور ووسوم ARIA لتحسين تجربة قارئات الشاشة.

تصميم متجاوب يعمل على جميع الأجهزة (هاتف، جهاز لوحي، كمبيوتر) باستخدام Grid و Flexbox ونقاط توقف دقيقة.

تفاعل سلس:

قائمة تنقل ثابتة (fixed header) مع تمرير سلس إلى الأقسام.

بطاقات المهارات تكشف عن تفاصيلها (نسبة التقدم) عند التمرير (hover).

قسم التعليم مزود بتبويب (tab) بسيط بالجافاسكريبت للتبديل بين جامعتين.

تحديث تلقائي لسنة الحقوق في الفوتر.

عرض المشاريع مع صور معاينة وروابط للمشاريع الحية أو على GitHub.

أيقونات تفاعلية لوسائل التواصل (LinkedIn, GitHub) وطرق الاتصال (واتساب، بريد، هاتف).

تحسينات أداء:

تحميل الصور بتقنية الـ lazy loading.

استخدام متغيرات CSS (Custom Properties) لتوحيد الألوان والقيم وتسهيل الصيانة.

ملف CSS منظم مع تعليقات واضحة.

طريقة التنفيذ:

الهيكل (HTML5):

استخدام وسوم دلالية (header, main, section, footer).

إضافة معرفات (id) للربط مع الروابط، وتحسين محركات البحث عبر وصف meta والعلامات البديلة.

التصميم (CSS3):

تصميم بنظام الألوان عبر متغيرات الجذر (root).

استخدام Flexbox و Grid لبناء تخطيطات مرنة.

تأثيرات حركية (hover, transition) مع احترام تفضيلات تقليل الحركة.

استعلامات وسائط (Media Queries) لضبط التصميم على الشاشات المختلفة.

تحسينات التباين والتركيز لضمان إمكانية الوصول.

التفاعل (JavaScript):

وظيفة showEduDetails للتبديل بين تفاصيل التعليم.

تحديث السنة الحالية في الفوتر.

تمرير سلس مع تعويض ارتفاع الشريط الثابت.

منع السلوك الافتراضي للروابط الداخلية لتحقيق تمرير سلس.

الملفات المساعدة:

صور معاينة للمشاريع مأخوذة من لقطات شاشة حقيقية.

تضمين رمز مفضلة (favicon).