My portafolio

اسم المشروع: موقع معرض أعمال شخصي بنظام "Liquid Glass" الحديث وصف المشروع: هذا الموقع هو عبارة عن منصة عرض أعمال (Portfolio) من صفحة واحدة، مصممة بلغة بصرية عصرية تعتمد على نمط "Glassmorphism" أو التصميم الزجاجي. يركز الموقع على تقديم تجربة مستخدم تفاعلية وعالية الجودة باستخدام تقنيات الويب الحديثة. التصميم والجمالية: - نظام Liquid Glass: يعتمد التصميم على تأثيرات الزجاج الضبابي (Backdrop Blur) مع خلفيات سائلة متحركة (Animated Blobs) تعطي عمقاً وحركية للموقع. - التباين العالي: استخدام خلفية داكنة جداً (Slate-950) مع نصوص وأيقونات ساطعة لضمان الوضوح التام والراحة للعين. - شريط تمرير مخصص: تم تصميم شريط التمرير ليكون جزءاً من الهوية البصرية الزجاجية للموقع. المميزات التقنية والتفاعلية: 1. تأثيرات الظهور (Scroll Reveal): تظهر أقسام الموقع تدريجياً وبسلاسة أثناء التمرير لأسفل باستخدام تقنية Intersection Observer. 2. بطاقات تفاعلية ثلاثية الأبعاد: دمج مكتبة VanillaTilt.js لإضافة تأثير الميلان (Tilt) واللمعان عند مرور الفأرة فوق بطاقات المشاريع والمهارات. 3. نظام التنقل العائم: شريط تنقل ذكي يتبع المستخدم ويوفر وصولاً سريعاً لجميع الأقسام مع دعم التمرير السلس (Smooth Scroll). 4. نموذج تواصل متكامل: نظام لإرسال الرسائل مباشرة من الموقع مع تنبيهات فورية (Toast Notifications) عند نجاح الإرسال. 5. استجابة كاملة (Responsive Design): تم بناء الموقع باستخدام Tailwind CSS لضمان عمله بكفاءة وتناسق على جميع الشاشات (الهواتف، الأجهزة اللوحية، والحواسيب). أقسام الموقع: - القسم التعريفي (Hero Section): واجهة رئيسية تضم صورة الملف الشخصي، المسمى الوظيفي، وأزرار الإجراءات السريعة. - قسم الإحصائيات: عرض رقمي للإنجازات والتقنيات والمشاريع المكتملة. - شبكة المهارات والخدمات: عرض منظم للمهارات التقنية والخدمات المقدمة باستخدام تخطيطات عصرية (Bento Grid). - الخط الزمني للخبرة: استعراض المسار المهني والتدريبي بشكل متسلسل زمنياً وبصرياً. - معرض المشاريع: بطاقات تفصيلية لكل مشروع مع وصف التقنيات المستخدمة وروابط المصادر البرمجية. - قسم التعليم والتقييمات: مساحة لعرض المؤهلات الأكاديمية وشهادات التقدير من الزملاء أو العملاء. التقنيات المستخدمة: - HTML5 & Tailwind CSS. - JavaScript (Vanilla JS). - Lucide Icons للأيقونات. - VanillaTilt.js للتأثيرات الحركية. - Formspree لإدارة النماذج البريدية.