Personal web page

الفكرة العامة: إنشاء( Single Page Application ( SPAلصفحة شخصية Portfolio تجمع بين أساسيات

Flexbox and Grid , واستخدامHTML, CSS, JavaScript and ReactJS التصميم والتفاعلية باستخدام

لتنظيم المحتوى مع الاهتمام بكونه متجاوب Responsiveعلى جميع الاجهزة.

حيث يتكون من عدة اقساام وهي :Header ,About Me , My Skills , :Education & Experience, Projects, My Customers ,Contact Us.

قسم Header: يقسم إلى جزأين مع وجود خلفية لون متدرج متحرك باستخدام CSS keyframes

قسم About Me : وصف مختصر عن الشخص ( bio) , صورة شخصية ( Avatar) , زر PDF " يحمل ملفDownload Resume "

ظهور عند التمرير: استخدام تأثيرات fade-inأو slide-inعند دخول القسم مجال الرؤية

لعرض محتويات القسم

قسم My Skills : على اليسار: أربعة أشرطة أفقية تمتلئ تلقائيئا عند تحميل الصفحة حتى عرض معين لكل مهارة ( Progress Bars ),مع استخدام CSS transitionللحصول على حركة أكثر نعومة

على اليمين: وصف قصير للمهارات وزر " Contact Me" يفتح برنامج البريد الافتراضي مع استخدام تنسيقات وتأثيرات مناسبة للزر

قسم Education & Experience :عرض المسار التعليمي والخبرات العملية في تصميم مجدول أو Vertical Timeline,و استخدم قائمة حيث يمثل كل عنصر في القائمة حدث ًا بتاريخ مثلا: ( Graduation 2025 – B.Sc. in CS ), مع وضع نقطة دائرية وخط عمودي يربط بينهما

قسم Project : ب6بطاقات مشاريع ( Cards) كل 3بطاقات في صف, كل بطاقة تحتوي على صورة للمشروع, اسم المشروع, ووصف قصير أو ال Tech Stack ,مع اضافة تأثير ظل عند الـ hoverعلى البطاقة, وتتظيم البطاقات باستخدام FlexboxأوGrid

قسم My Customers :صف واحد يحتوي على 3بطاقات عملاء ,كل بطاقة صورة دائرية للعميل وأسفله اسم العميل ووصف لما قاله العميل عن

الخدمة

قسم Contact Us: نموذج يحتوي على Name, email, message, زر " Send" يرسل البريد ويمكن محاكاته برسالة تأكيد باستخدام Js

,عرض رسالة الخطأ لكل حقل تحت الحقل.....

مع العلم ان زر " Top ":زر ثابت في الزاوية اليمنى السفلى يظهر عند التمرير لأسفل وعند الضغط عليه يعود إلى الأعلى بسلاسة

ويوجد خاصية الوضع الليلي ايضا بخلفية جذابة ومتدرجة