صفحة بورتفوليو تعرض المشاريع السابقة للمطور بطريقة منظمة وجذابة.

1. Grid متجاوب:

الكروت تتوزع تلقائيًا حسب حجم الشاشة، سواء موبايل أو كمبيوتر.

2. Hover على الكروت:

كل كارد يرفع ويعطي ظل عند تمرير الماوس، يعطي إحساس بالعمق.

3. عرض/إخفاء التفاصيل:

زر لكل مشروع يفتح وصفه أو يغلقه بدون إعادة تحميل الصفحة.

4. تصميم نظيف وفخم:

ألوان متناسقة، خطوط واضحة، خلفية داكنة أنيقة.

5. جاهزة للشاشات المختلفة:

تعمل على أي شاشة بدون مشاكل.

طريقه التنفيذ

1. HTML:

أنشأنا الهيكل الأساسي للصفحة: Header + Container + Cards.

كل Card يحتوي على صورة، عنوان، وصف مخفي، وزر عرض التفاصيل.

2. CSS:

تصميم الخلفية Gradient داكنة.

Grid للكروت مع gap مناسب.

Hover على الكارد ليعطي حركة وعمق.

زر أنيق مع تأثير Hover.

إخفاء الوصف في البداية (display:none) لتظهر فقط عند الضغط على الزر.

3. JavaScript:

دالة toggleDesc تتحقق من حالة الوصف لكل كارد.

عند الضغط على الزر، تظهر التفاصيل أو تختفي، ويتغير نص الزر بين “عرض التفاصيل” و “إخفاء التفاصيل”.