React Portfolio

تطوير موقع بورتفوليو احترافي بنظام Data-Driven UI ومكتبة React

عن المشروع:

هذا المشروع ليس مجرد موقع تعريفي تقليدي، بل هو تطبيق ويب مبني بأسلوب برمي متطور يعتمد على بنية Data-Driven UI. تم تصميمه ليعكس مهاراتي كخريج لمعهد تكنولوجيا المعلومات (ITI) في مسار MERN Stack، مع التركيز المكثف على تجربة المستخدم (UX) وجودة الأداء.

المميزات التقنية والهندسية:

هيكلية البيانات الديناميكية (Dynamic UI): يعتمد الموقع بالكامل على ملفات JSON خارجية لإدارة محتوى المشاريع والخبرات، مما يسمح بتحديث البيانات فوراً دون الحاجة لتعديل الكود المصدري (Source Code)، وهو ما يعكس احترافية في فصل البيانات عن العرض (Separation of Concerns).

نظام Modals مخصص:

تطوير نظام نوافذ منبثقة (Modals) مخصص لعرض تفاصيل المشاريع، الحلول التقنية، والنتائج المحققة، مما يوفر تجربة تصفح غنية وتفاعلية.

تفاعلات وحركات برمجية (Advanced Animations):

دمج مكتبة AOS (Animate On Scroll) مع تأثيرات كتابة مخصصة (Typing Effects) لإضفاء لمسة عصرية واحترافية تجذب الانتباه أثناء التصفح.

نظام مراسلة متكامل ومعالج للبيانات:

بناء نموذج اتصال (Contact Form) متكامل باستخدام Formik و Yup لضمان التحقق من صحة البيانات (Validation)، مع الربط بخدمة EmailJS لاستلام الرسائل مباشرة.

تصميم متجاوب بالكامل (Mobile-First):

استخدام Tailwind CSS و DaisyUI لضمان ظهور الموقع بشكل مثالي (Pixel-Perfect) على جميع الشاشات والأجهزة المحمولة.

البنية التكنولوجية (Tech Stack):

الأساس: React 18 مع Vite لضمان أقصى سرعة في التحميل والأداء.

التنسيق: Tailwind CSS و DaisyUI لبناء واجهات عصرية ونظيفة.

المنطق والخدمات: Formik و Yup لإدارة النماذج، و Axios للتعامل مع البيانات.

إدارة المحتوى: هيكلة منظمة للمجلدات (src/components, services, animations) تعكس نظافة الكود وسهولة صيانته.

سياق العمل:

يعد هذا الموقع نموذجاً حياً لمهاراتي في تحويل الأفكار إلى منتجات رقمية عالية الجودة، حيث تم مراعاة معايير نظافة الكود (Clean Code) وأفضل الممارسات المتبعة في تطوير تطبيقات الويب الحديثة.