بورتفوليو شخصي

هذا المشروع هو بورتفوليو احترافي متكامل (Full-Stack Developer Portfolio) يدمج بين التصميم المستقبلي المتطور (High-End UI) والأداء البرمجي العالي، وهو مستوحى من الهوية البصرية لشركة Argus VPN.

إليك الوصف الكامل للمشروع:

1. نوع العمل (Project Type)

هو عبارة عن منصة تسويق شخصي (Personal Branding Platform) للمطور "محمد"، تدمج بين واجهة أمامية سينمائية ولوحة تحكم خلفية (Admin Panel) لإدارة البيانات ديناميكياً. يتبع المشروع نمط Tech-Noir و Glassmorphism، مما يجعله يبدو كأنظمة الأمن السيبراني المتقدمة.

2. مميزات المشروع (Key Features)

الهوية البصرية (Argus Tech-Noir):

تعتمد على اللون الأسود العميق مع لمسات "السيان الكهربائي" (Electric Cyan).

استخدام تأثير الزجاج المضبب (Glassmorphism) في جميع القوائم والبطاقات.

نظام "كوكبة المهارات" (Skills Constellation):

عرض المهارات في مدارات تفاعلية متوهجة.

تغيير ديناميكي: يتحدد حجم كل "كوكب" بناءً على مستوى الإتقان (Proficiency).

لوحة تحكم إدارية (Comprehensive Admin Panel):

إدارة كاملة (CRUD) للمشاريع، المهارات، الخدمات، وتقييمات العملاء.

تأمين الدخول باستخدام نظام JWT أو NextAuth.

أقسام مبتكرة:

ملف النظام (About Me): مصمم كملف تعريفي أمني (Security Dossier) مع صورة بتأثير "المسح البيومتري".

سجل التقييمات (Verified Logs): عرض مراجعات العملاء بنظام "النقاط الموثوقة".

الأداء الفائق (60FPS Performance):

استخدام تسريع الأجهزة (GPU Acceleration) لضمان تمرير انسيابي جداً.

خاصية Content-Visibility التي تسرع تحميل الصفحة عبر تجاهل رندر الأقسام غير الظاهرة.

3. طريقة التنفيذ (Technical Implementation)

تم بناء المشروع باستخدام أحدث التقنيات البرمجية لضمان السرعة والقابلية للتوسع:

الواجهة الأمامية (Frontend):

Next.js 15 (App Router): لضمان أفضل أداء وتحسين محركات البحث (SEO).

Tailwind CSS: لبناء الواجهة المرنة والتصاميم الزجاجية المعقدة.

Framer Motion: لإضافة الحركات التفاعلية، وتأثيرات الظهور (Scroll Reveal)، وحركات الكواكب.

الخلفية وقاعدة البيانات (Backend & DB):

MongoDB: لتخزين بيانات المشاريع والمهارات بشكل مرن.

Next.js API Routes: لبناء الواجهة البرمجية التي تربط لوحة التحكم بقاعدة البيانات.

Cloudinary: لرفع وتخزين صور المشاريع والصورة الشخصية بجودة عالية وأحجام محسنة.

التحسينات التقنية (Optimizations):

Hardware Acceleration: تم برمجة العناصر لتستخدم معالج الرسوميات (GPU) بدلاً من المعالج الرئيسي (CPU) أثناء الحركة.

Hydration Fixes: معالجة تعارضات المتصفح لضمان تحميل نظيف وخالٍ من الأخطاء البرمجية.

4. المظهر النهائي (Final Aesthetic)

المشروع ليس مجرد موقع لعرض المشاريع، بل هو تجربة بصرية تعطي انطباعاً فورياً بالاحترافية والقدرة التقنية العالية، حيث يشعر الزائر أنه يتفاعل مع نظام تقني متطور وليس مجرد صفحة ويب تقليدية.