My portfolio
تفاصيل العمل
موقع بورتفوليو (Portfolio Website)
موقع بورتفوليو حديث ومتجاوب تم تطويره باستخدام HTML وCSS وJavaScript.
المميزات
تصميم عصري ونظيف مع ألوان متدرجة
تصميم متجاوب بالكامل مع جميع الأجهزة
انتقالات وحركات سلسة
شريط تنقّل تفاعلي مع تمييز الرابط النشط
قسم لعرض المشاريع مع تأثيرات عند تمرير الفأرة
️ قسم المهارات مع أشرطة تقدم متحركة
نموذج تواصل
دمج روابط وسائل التواصل الاجتماعي
الأقسام
قسم الواجهة (Hero Section) – مقدمة جذابة مع أزرار دعوة لاتخاذ إجراء
قسم من أنا (About Section) – معلومات شخصية وخلفية
قسم المشاريع (Projects Section) – عرض أعمالك مع بطاقات المشاريع
قسم المهارات (Skills Section) – عرض المهارات التقنية مع أشرطة التقدم
قسم التواصل (Contact Section) – نموذج تواصل ومعلومات الاتصال
طريقة البدء
قم باستنساخ (Clone) أو تحميل المشروع
افتح ملف index.html عبر المتصفح
عدّل المحتوى وضع معلوماتك الخاصة
التخصيص
المعلومات الشخصية
قم بتحديث ما يلي داخل index.html:
اسمك داخل قسم الواجهة
المسمّى الوظيفي أو مجالات عملك
نص قسم من أنا
بيانات التواصل (البريد – الهاتف – الموقع)
روابط حسابات التواصل الاجتماعي
المشاريع
استبدل المشاريع الافتراضية بمشاريعك:
تحديث عناوين المشاريع ووصفها والوسوم
إضافة صور مشاريعك داخل assets/images
تحديث روابط المشاريع (نسخة حية – GitHub)
المهارات
عدّل قسم المهارات حسب خبراتك:
إضافة أو حذف مهارات
تحديث أسماء المهارات ونسبها
تعديل عرض شريط التقدم داخل الـHTML عبر style attribute
الصور
أضف صورك داخل assets/images/:
profile.jpg – صورة شخصية
project1.jpg / project2.jpg … – صور المشاريع
يمكنك استخدام صور جاهزة من:
Unsplash
Pexels
Lorem Picsum
الألوان
يمكنك تخصيص الألوان عبر تعديل المتغيرات في ملف styles.css:
:root {
--primary-color: #6366f1;
--secondary-color: #8b5cf6;
--dark-color: #0f172a;
--light-color: #f8fafc;
}
دعم المتصفحات
يعمل الموقع على جميع المتصفحات الحديثة:
Chrome
Firefox
Safari
Edge
الترخيص
يمكنك استخدام هذا القالب بحرية لبناء بورتفوليوك الشخصي!
نموذج التواصل
نموذج التواصل حاليًا يقوم بعرض رسالة Alert فقط. لجعله يعمل فعليًا يمكنك:
الدمج مع Formspree
استخدام EmailJS
إنشاء واجهة خلفية (Backend API) خاصة بك
نصائح
استبدل جميع النصوص الافتراضية بمعلوماتك الحقيقية
استخدم صور عالية الجودة لمشاريعك وصورتك الشخصية
اجعل وصف المشاريع مختصرًا وواضحًا
حدّث وسوم الـSEO في الـMeta Tags
أضف سيرتك الذاتية بصيغة PDF داخل مجلد assets
اختبر الموقع على الهاتف للتأكد من تجاوبه
تم البناء باستخدام ️ عن طريق HTML وCSS وJavaScript