موقع Landing Page / موقع شخصي تعريفي (Portfolio Website)

نوع العمل

ده يعتبر موقع شخصي (Personal Portfolio Website).

الهدف منه: عرض معلومات عنك (About Me)، خدماتك (Services)، أعمالك (Portfolio)، شهادات العملاء (Testimonials)، الفريق (Team) والتواصل (Contact).

مناسب جدًا للـ مصممين، مطورين ويب، فريلانسرز علشان يبينوا مهاراتهم وأعمالهم.

مميزاته

تصميم متجاوب (Responsive Design) باستخدام Bootstrap → بيشتغل على الموبايل، التابلت، والكمبيوتر.

أنيق واحترافي → استخدام Google Fonts، أيقونات FontAwesome، و Animations.

قسم كامل للأعمال (Portfolio) مع فلترة Tabs + Modals لعرض الصور.

تجربة مستخدم UX كويسة:

شريط تنقل (Navbar) ثابت.

تأثيرات أنيميشن (Animate.css).

أيقونات تفاعلية (Social Media + Services).

قابلية التخصيص → تقدر تعدل النصوص، الألوان، الصور، والخطوط بسهولة.

خفيف وسريع لأن معظم المحتوى HTML + CSS.

طريقة تنفيذه

إعداد المشروع:

أنشأت ملفات: index.html, style.css, مجلد imgs.

ربطت Bootstrap, FontAwesome, Animate.css, Google Fonts.

بناء الهيكل بـ HTML:

Header/Hero Section: صورة شخصية + ترحيب + سوشيال ميديا.

About Me: صورة + وصف + Progress Bars للمهارات.

Services: كروت بخدماتك.

Portfolio: صور أعمالك مع Tabs + Modals.

Testimonials: Carousel آراء العملاء.

Clients/Stats: أرقام إحصائية.

Team: كروت الفريق.

Contact: معلومات التواصل.

التنسيق بـ CSS و Bootstrap:

Bootstrap مسؤول عن الشبكة (Grid, Columns, Rows).

style.css فيه الألوان والخطوط والتأثيرات الخاصة.

إضافة الـ Interactivity:

Bootstrap JS للـ Navbar + Carousel + Modals.

مكتبة Animate.css للحركات.

(ممكن لاحقًا إضافة JS مخصص لعداد الأرقام أو الـ Typed.js للكتابة المتحركة).