موقع بورتفوليو "Start Framework" (React.js & Bootstrap)

هو مشروع واجهة أمامية (Front-End) لموقع بورتفوليو (معرض أعمال) شخصي أو لشركة، تم بناؤه كتطبيق صفحة واحدة (Single Page Application - SPA). تم تصميم المشروع بواجهة نظيفة (Minimalist) وعصرية، تعتمد على الرسوم المسطحة (Flat Design) لعرض عناصر معرض الأعمال بشكل جذاب وبسيط.

الموقع مصمم ليكون سريعاً وسهل التصفح، ويعرض مهارات المطور أو المصمم بشكل احترافي.

الميزات الرئيسية للمشروع:

تصميم "Flat Design":

يعتمد قسم معرض الأعمال (Portfolio Section) على شبكة (Grid) من البطاقات.

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

تنقل سهل (SPA Navigation):

شريط تنقل (Navbar) علوي ثابت وواضح، يتضمن اسم المشروع "START FRAMEWORK".

روابط تنقل (About, Portfolio, Contact) تنقل المستخدم بين أقسام الصفحة المختلفة بسلاسة دون الحاجة لإعادة تحميل الصفحة بالكامل.

يتم تمييز القسم النشط (Active Section) - "PORTFOLIO" في الصورة - بلون مختلف، مما يحسن تجربة المستخدم (UX).

تنظيم احترافي للمحتوى:

استخدام فواصل بصرية (Divider) أنيقة (خط ونجمة) للفصل بين عنوان القسم ("PORTFOLIO SECTION") ومحتوى القسم، مما يعطي تنظيماً بصرياً ممتازاً.

تصميم متجاوب (Responsive Design):

تم استخدام نظام الشبكات (Grid System) الخاص بـ Bootstrap لضمان عرض قسم معرض الأعمال بشكل مثالي على جميع الشاشات، من الهواتف المحمولة إلى شاشات الكمبيوتر الكبيرة.

التقنيات المستخدمة:

React.js: تم استخدام مكتبة React لبناء واجهة المستخدم (UI) بالكامل كمكونات (Components) قابلة لإعادة الاستخدام (مثل Navbar, PortfolioCard, SectionTitle). هذا يجعل الموقع تطبيق صفحة واحدة (SPA) سريعاً وتفاعلياً.

Bootstrap: تم الاعتماد على إطار العمل Bootstrap بشكل أساسي لتنسيق الصفحة، خاصة لإنشاء الـ Navbar ونظام الشبكة (Grid System) المتجاوب في قسم البورتفوليو.

JavaScript (ES6+): هي اللغة الأساسية التي تعمل بها React، وتُستخدم لإدارة الحالة (State) والتفاعلات داخل التطبيق (مثل التنقل بين الأقسام).

HTML5 & CSS3: لبناء هيكل الصفحة وإضافة التخصيصات (Custom Styles) اللازمة فوق Bootstrap لتحقيق الشكل الجمالي المطلوب (مثل ألوان وخلفيات بطاقات البورتفوليو).