موقع شخصي Portfolio

نظرة عامة (Overview): مشروع "Portfolio" هو موقع شخصي تفاعلي وحديث تم بناؤه باستخدام أحدث تقنيات React 19 و Vite 7. صُمم الموقع ليكون واجهة احترافية لعرض المهارات والمشاريع السابقة بأسلوب بصري جذاب يعتمد على الرسوم المتحركة (Animations) وتجربة المستخدم السلسة. يجمع التطبيق بين الأداء العالي والتصميم العصري، مع نظام تواصل مباشر متكامل دون الحاجة لواجهة خلفية معقدة.

النطاق والأهداف (Scope & Objectives): يهدف المشروع إلى تقديم هوية المطور الرقمية من خلال واجهة أمامية (Frontend) سريعة الاستجابة. يركز النطاق على عرض معرض الأعمال (Projects Showcase)، وتفاصيل المهارات، وتوفير آلية تواصل فعالة، كل ذلك ضمن تصميم متجاوب كلياً (Fully Responsive) يعمل بسلاسة على الهواتف وأجهزة سطح المكتب، مع لمسات جمالية حديثة مثل تأثيرات "Holo" والأيقونات التفاعلية.

التقنيات المستخدمة (Tech Stack):

Vite (v7.1.2) & React 19: لبناء تطبيق سريع جداً (Blazing fast) مع الاستفادة من أحدث ميزات React لإدارة الواجهة.

React Router DOM (v7.6.1): لإدارة التنقل بين الصفحات (الصفحة الرئيسية، المشاريع، صفحة الخطأ 404) بسلاسة (Client-side routing).

Tailwind CSS (v4.1.12): لتنسيق الموقع وبناء تصميم متجاوب بأسلوب Utility-first الحديث.

EmailJS: لتمكين نموذج الاتصال (Contact Form) من إرسال رسائل بريد إلكتروني مباشرة من المتصفح دون الحاجة لخادم backend.

SweetAlert2: لعرض تنبيهات (Modals) أنيقة ومخصصة عند نجاح أو فشل إرسال الرسائل.

Lottie-web & Lordicon: لدمج أيقونات ورسوم متحركة تفاعلية خفيفة الوزن تضفي حيوية على الموقع.

React Simple Typewriter: لإضافة تأثير الكتابة التلقائية للنصوص (Typewriter effect) لزيادة الجاذبية البصرية في العناوين.

الميزات الرئيسية (Key Features):

نموذج اتصال وظيفي (Functional Contact Form): إمكانية إرسال رسائل مباشرة للمطور مع التحقق من صحة المدخلات وعرض رسائل نجاح/خطأ تفاعلية باستخدام SweetAlert2.

تصميم بصري متقدم (Advanced UI Effects): استخدام حقول إدخال بتصميم "Holo" (ثلاثي الأبعاد/مستقبلي) مع تأثيرات توهج (Glow) ومسح ضوئي (Scanlines).

تصفح سلس (Smooth Navigation): تنقل فوري بين أقسام الموقع (Home, Projects) وإدارة حالات التحميل (Loading States) باستخدام Suspense.

أيقونات تفاعلية: أزرار تواصل اجتماعي ونصوص مدعومة بأيقونات متحركة (Animated Icons) تتفاعل عند التمرير (Hover) أو بشكل حلقي (Loop).

جاهزية التجاوب (Responsive Ready): ضبط تلقائي لأبعاد الشاشة (Viewport Height Fixes) لضمان العرض الصحيح على متصفحات الهواتف المحمولة.

رابط المشروع على Github: https://github.com/Yousse...

رابط المعاينة: https://youssefhany.verce...