professional responsive Neon Full-Stack Portfolio
تفاصيل العمل
هذا المشروع هو منصة عرض شخصية متقدمة (Professional Portfolio) تم تصميمها لتسليط الضوء على خبرات المطور الشامل (Full-Stack Developer) Bermoul Ayoub. الهدف الرئيسي هو دمج الأناقة الاحترافية مع التصميم التكنولوجي الجريء، باستخدام جمالية النيون الأزرق الساطع و الوضع المظلم العميق لخلق تجربة مستخدم لا تُنسى تعكس القدرة على بناء حلول رقمية عالية الأداء ومواكبة لأحدث الاتجاهات.
التصميم المزدوج Theme Switching System: نظام تبديل بين الوضع المظلم النيوني والوضع المضيء الاحترافي، مع استخدام localStorage : لحفظ تفضيل المستخدم، مما يضمن تجربة متناسقة وثابتة.
التفاعل الديناميكي
تأثير الكتابة الآلية (Typing Effect): تم تنفيذه بـ Vanilla JavaScript لعرض المسميات الوظيفية والتخصصات (مثال: Full-Stack Developer, React/Node Specialist) بشكل تسلسلي وجذاب في قسم Hero.
التحميل البصري
حركات الظهور المتسلسلة (Staggered Load-in): يتم التحكم في ظهور عناصر الواجهة (العناوين، الأزرار، الأيقونات) بشكل متسلسل عبر JavaScript، مما يمنح تجربة تحميل احترافية وسلسة بدلاً من الظهور المفاجئ.
الهيكلة والاستجابة Full Responsiveness: تصميم مُحسّن باستخدام Flexbox/Grid و Media Queries لضمان التوافق والأداء المثالي على جميع الأجهزة، من شاشات العرض الكبيرة إلى الهواتف الذكية
جمالية وابتكارات الـ CSS
تمثل المؤثرات البصرية نقطة قوة رئيسية في هذا المشروع:
متغيرات CSS (CSS Variables): استخدام متغيرات مُعرّفة (مثل --primary-neon و --deep-bg) لإدارة الألوان بسهولة، وتسهيل عملية التبديل بين الثيمات.
مؤثرات التوهج (Glow Effects): تطبيق ظلال نصية ومحيطية (Box-Shadows) بتأثير النيون لإبراز العناوين والإطارات (مثل الصورة الشخصية)، مع استخدام تحريك Glitch متقطع لإضفاء طابع تكنولوجي.
تحسين الأداء البصري: استخدام cubic-bezier مخصص في الانتقالات لضمان سلاسة حركة العناصر البصرية وسرعتها.
أهمية المشروع
عرض المهارات: يثبت المشروع كفاءة المطور في التعامل مع واجهات المستخدم المعقدة (UX/UI)، والحركات المتقدمة، وإدارة منطق التطبيق (Logic Management) البسيط باستخدام JavaScript النقي.
تصميم حديث: يبتعد عن التصاميم التقليدية ويستخدم أسلوباً مطلوباً ومميزاً في سوق العمل التقني.
قاعدة قابلة للتوسع: الهيكلية مصممة للسماح بإضافة أقسام أخرى بسهولة (مثل Portfolio، Contact، Experience) مع الحفاظ على التناسق البصري للثيم النيوني.