Personal Portfolio Website

موقع بورتفوليو شخصي مبني كتطبيق Full-Stack يهدف إلى عرض المشاريع والمهارات بطريقة احترافية، مع نظام إدارة محتوى مخصص (Custom CMS) للتحكم الكامل في كل تفاصيل الموقع بدون الاعتماد على أدوات جاهزة.

المشروع معمول ليكون أكثر من مجرد صفحة تعريفية، بل منصة ديناميكية قابلة للتوسع تعكس طريقة تفكيري في بناء واجهات حديثة، تنظيم المحتوى، وإدارة البيانات بشكل آمن ومرن.

الواجهة الأمامية مبنية باستخدام React.js مع تصميم حديث ومتجاوب، بينما تم الاعتماد على Supabase كـ Backend متكامل لإدارة قاعدة البيانات، المصادقة، والتخزين.

الواجهة العامة (Public Portfolio)

توفر تجربة تفاعلية لزوار الموقع:

قسم Hero ديناميكي مع حركات وانتقالات سلسة

عرض المهارات باستخدام عناصر تفاعلية توضح مستوى الإتقان

معرض مشاريع قابل للتصفية مع صفحات تفاصيل (Case Studies)

نماذج تواصل متعددة (مشاريع – تعاون – تواصل عام)

دعم روابط اجتماعية غير محدودة مع اكتشاف تلقائي للأيقونات

دعم الوضع الليلي (Dark Mode) مع انتقالات ناعمة

تصميم متجاوب بالكامل مع جميع الشاشات

Skeleton Loaders لتحسين تجربة المستخدم أثناء التحميل

لوحة التحكم (Admin Dashboard)

تم بناء لوحة تحكم مخصصة لإدارة الموقع بالكامل:

واجهة إدارية متجاوبة مع Sidebar منظم

إدارة إعدادات الموقع والملف الشخصي (الاسم، المسمى الوظيفي، النبذة، الصورة، السيرة الذاتية)

التحكم في الهوية البصرية (الألوان، اللوجو، الأيقونة)

إعدادات SEO (Meta Tags, Analytics)

إدارة المهارات وتصنيفها مع تحديد مستوى الإتقان وترتيبها

إدارة المشاريع بشكل متقدم:

إضافة صور وميديا

تحديد التقنيات المستخدمة والمؤشرات

كتابة Case Study (المشكلة – الحل – النتيجة)

نظام Draft / Published

إعدادات SEO لكل مشروع

الجوانب التقنية في المشروع:

استخدام Supabase (PostgreSQL) مع تفعيل Row Level Security لتأمين البيانات على مستوى قاعدة البيانات

إدارة الحالة العامة باستخدام React Context API

دعم التحديثات اللحظية (Real-time Subscriptions)

نظام حفظ تلقائي (Auto-save) لمنع فقدان البيانات

Error Boundaries للتعامل مع الأخطاء بشكل آمن

تحسين محركات البحث (SEO) باستخدام Meta Tags و OpenGraph

تحسين الأداء عبر Lazy Loading و Code Splitting

ما يركز عليه المشروع:

بناء CMS مخصص بدل الاعتماد على حلول جاهزة

تصميم واجهات حديثة قابلة لإعادة الاستخدام

تأمين البيانات من مستوى قاعدة البيانات

تنظيم الكود وقابلية الصيانة والتوسع

تقديم تجربة مستخدم احترافية وسلسة