Portfolio

الإطار الأساسي (Frontend Framework): React 19 - تم استخدام أحدث نسخة من ريآكت للاستفادة من تحسينات الأداء وتعامله مع الـ Components.

أداة البناء (Build Tool): Vite - لضمان سرعة فائقة في التطوير وعملية الـ Bundling للملفات النهائية.

التصميم والتنسيق (Styling): Tailwind CSS 4 - تم استخدامه لتصميم الواجهات بأسلوب Utility-first، مما يضمن كود CSS نظيفاً وقابلاً للتوسع.

مكتبة المكونات (UI Components): shadcn/ui - تم الاعتماد عليها لتوفير مكونات واجهة مستخدم (Buttons, Cards, Inputs) جاهزة وقابلة للتخصيص بالكامل.

الأيقونات: Lucide React - لتوفير أيقونات متجهة (Vector) خفيفة الوزن ومتوافقة مع التصميم.

2. المميزات التقنية والوظائف

نظام السمات (Theme System): يدعم المشروع الوضعين الداكن والفاتح (Dark/Light Mode) مع حفظ تفضيلات المستخدم تلقائياً في المتصفح عبر localStorage باستخدام React Context API.

الاستجابة الكاملة (Responsive Design): الواجهة مهيأة تماماً للعمل على كافة الشاشات (Mobile, Tablet, Desktop) بفضل نظام الـ Grid والـ Flexbox في Tailwind.

إدارة النماذج (Form Handling): تم استخدام React Hook Form في قسم "اتصل بنا" لضمان التحقق من البيانات (Validation) وتحسين تجربة إدخال البيانات دون إعادة تحميل الصفحة.

الأداء (Performance): بفضل استخدام Vite وتقنيات التحميل الكسول (Lazy Loading) للمكونات، يتميز الموقع بسرعة تحميل عالية جداً.

3. هيكلة المشروع (Project Structure)

يتبع المشروع تنظيماً برمجياً منظماً يسهل صيانته:

src/components/: يحتوي على أجزاء الصفحة المختلفة (Hero, About, Projects, Contact).

src/components/ui/: يحتوي على المكونات الأساسية المستمدة من shadcn.

src/context/: يحتوي على ThemeContext.jsx المسؤول عن إدارة حالة الثيم (الوضع الليلي).

src/assets/: لتخزين الصور والملفات الثابتة.

4. أقسام الصفحة

Hero Section: مقدمة تعريفية مع أزرار الانتقال (CTA).

About Section: معلومات شخصية وإحصائيات سريعة.

Skills Section: عرض المهارات التقنية مع أشرطة تقدم (Progress Bars).

Projects Section: معرض للأعمال السابقة مع تفاصيل تقنية لكل مشروع.

Contact Section: نموذج تواصل تفاعلي.

Footer: روابط التواصل الاجتماعي وروابط سريعة.