CyberDev - ملف أعمال مطور الأنظمة المدمجة والذكاء الاصطناعي (Electronics & AI Developer Portfolio)

الهدف والمحتوى الأساسي :

الهدف الرئيسي للمشروع هو تقديم ملف أعمال إلكتروني تفاعلي وحديث للمطور BERMOUL AYOUB، متخصص في تقاطع الأنظمة المدمجة (Embedded Systems)، الإلكترونيات، والذكاء الاصطناعي (AI).

يركز التصميم على دمج المهارات التقنية المتنوعة (البرمجة الأساسية، الويب، والأجهزة) في منصة واحدة جذابة.

التقنيات والميزات الرئيسية :

1. التصميم والجوانب البصرية (CSS)

تصميم العصر الرقمي المظلم (Deep Dark Mode with Neon Glow):

يستخدم نظام ألوان داكن جداً (Primary: #00bcd4 - Cyan Neon) لإضفاء طابع احترافي وعصري يتماشى مع مجالي الإلكترونيات والبرمجة.

يتم تطبيق تأثير النيون (Neon Glow) على العناصر الهامة مثل الشعار، العناوين الرئيسية، وأزرار الدعوة للإجراء (CTA)، مما يعزز الجاذبية البصرية.

الاستجابة (Responsive Design): تم بناء تصميم متجاوب (باستخدام @media queries) لضمان عرض مثالي على جميع الأجهزة (المكتب، الأجهزة اللوحية، والهواتف الذكية).

2. التفاعل والحركة (JavaScript)

تأثير الكتابة الديناميكي (Dynamic Typing Effect): ميزة بارزة في قسم "Home" تقوم بكتابة وحذف العبارات بشكل متكرر ("Electronics & AI Student," "Front-end Developer," إلخ) لإظهار التخصصات بأسلوب جذاب.

التمرير التلقائي للمشاريع (Featured Projects Auto-Scroll): يقوم بتمرير بطاقات المشاريع أفقياً تلقائياً ضمن القسم الخاص بها، مع إمكانية إيقافه عند التفاعل معه (Hover/Mouse Enter).

تأثير الظهور أثناء التمرير (Scroll Reveal): يستخدم IntersectionObserver API لإضافة حركة انتقال ناعمة (fadeInSlideUp) للعناصر والأقسام عند ظهورها في مجال الرؤية لأول مرة، مما يضيف حيوية للصفحة.

تأثير الحركة العائمة (Float Effect): تم تطبيق حركة floatEffect على صورة المستخدم في قسم Hero، مما يعطي انطباعاً بالحركة الديناميكية والحديثة.

3. الهيكلة والمحتوى (HTML)

قسم معلومات شاملة (About Me): يوضح التخصصات المدمجة عبر ثلاثة مسارات رئيسية:

المنطق الأساسي (Core Logic): C/C++ و Python.

الأنظمة المدمجة (Embedded Systems): Arduino و Matlab.

الواجهة الأمامية والدمج (Front-End & Integration): HTML, CSS, JavaScript (مما يمثل حلول Full-Stack للأنظمة الفيزيائية و IoT).

إحصائيات بارزة (Stats Bar): يعرض إحصائيات سريعة مثل سنوات الخبرة، المشاريع المكتملة، إلخ.

قسم المهارات (Skills): يعرض الخبرة في شكل بطاقات واضحة (Web Fundamentals, Embedded Programming, Core Programming).