تطبيق عملي متقدم لعناصر HTML& Selectour CSS

نظرة عامة

هذا المشروع هو موقع شخصي / بورتفوليو تفاعلي (Portfolio) مصمم بالكامل باستخدام HTML5 وCSS3 مع إضافة تأثيرات جذابة بجافاسكريبت. يهدف إلى عرض مهارات المطور "حمزة المنظري" في تصميم الويب، مع واجهة مستخدم حديثة وتجربة تصفّح سلسة.

المميزات الرئيسية

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

يتكيف مع جميع الشاشات (سطح المكتب، الأجهزة اللوحية، الهواتف).

قائمة تنقل مخفية (Hamburger Menu) تظهر على الأجهزة المحمولة.

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

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

تأثيرات الظهور التدريجي (Fade-in) للمحتوى أثناء التمرير.

خلفيات ثابتة (Parallax Backgrounds).

الأقسام الهيكلية:

الصفحة الرئيسية (Landing):

خلفية كاملة الشاشة.

نص مركزي كبير مع زر دعوة للإجراء (CTA).

الخدمات (Services):

عرض ٣ خدمات رئيسية بأيقونات.

تصميم بطاقات (Cards) متسقة.

المشاريع (Projects):

شبكة مشاريع (Grid Layout) مع صور معاينة.

تأثيرات Hover على البطاقات.

عني (About):

صورة شخصية + نص وصفي.

تخطيط عمودي بسيط.

اتصل بي (Contact):

نموذج اتصال بسيط (الاسم، الإيميل، الرسالة).

التذييل (Footer):

روابط وسائل التواصل الاجتماعي (Font Awesome Icons).

حقوق النشر.

التقنيات المستخدمة

HTML5: بناء هيكل الصفحة.

CSS3:

Flexbox و Grid للتخطيطات.

متغيرات CSS (Custom Properties) لإدارة الألوان والخطوط.

تأثيرات Transitions و Animations.

Media Queries للتجاوبية.

JavaScript:

تنفيذ قائمة الهاتف المتحركة.

تنشيط تأثيرات التمرير (Scroll Events).

مكتبات خارجية:

Font Awesome للأيقونات.

خطوط Google Fonts (مثل "Open Sans").

تفاصيل التصميم

الألوان:

الأزرق الداكن (#19283f) كخلفية رئيسية.

الأخضر الفيروزي (#33d1cc) للتأكيد على العناصر المهمة.

الأصفر (#ffc400) للأزرار والنقاط التفاعلية.

الأبيض (#fff) للنصوص الرئيسية.

الطباعة (Typography):

عناوين رئيسية بخطوط سميكة.

نصوص محتوى بخطوط بسيطة قابلة للقراءة.

التفاعلية:

تغيير لون روابط التنقل عند التمرير.

تأثيرات رفع (Scale) البطاقات عند Hover.

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

أداء عالي: لا يستخدم أطر عمل ثقيلة (Pure CSS/JS).

نظافة الكود: تسميات متسقة، تعليقات توضيحية.

سهولة التخصيص: يمكن تعديل الألوان/المحتوى بسرعة.

توافق مع المتصفحات: يعمل على Chrome, Firefox, Edge.

ملاحظات للتحسين

إضافة قسم "المهارات" (Skills) لسرد التقنيات التقنية.

دعم اللغات المتعددة (خاصةً العربية/الإنجليزية).

تحسين سرعة تحميل الصور (ضغط حجمها).

رابط المشروع على GitHub: HamzaElmanzari/HTML_AND_CSS_Template_Three

رابط الموقع الحي: معاينة مباشرة