React-Portfolio

سعيد بمشاركة أحدث مشاريعي — وهو موقع بورتفوليو ثابت متعدد الصفحات (MPA) تم بناؤه من الصفر باستخدام Vite ومُحسّن من حيث الأداء، والتجاوب مع مختلف الشاشات، وتجربة المستخدم السلسة. يعكس هذا المشروع مهاراتي في تطوير الواجهات الأمامية، مع التركيز على واجهة مستخدم نظيفة، وحركات انتقال سلسة، وبنية برمجية معيارية (Modular Architecture).

? التقنيات والمميزات:

? التقنيات الأساسية:

TypeScript، HTML، CSS، Tailwind، PostCSS

? تحسين الأداء:

تحميل الوحدات (Modules) بشكل كسول (Lazy Loading) لزيادة الكفاءة

? تنسيقات متقدمة:

استخدام PostCSS لدعم أسلوب الكتابة المتداخل مثل SCSS، وTailwind للتنسيق بأسلوب Utility-First

? التعامل مع النماذج (Forms):

استخدام GetForm API لإرسال البيانات بدون إعادة تحميل الصفحة، مع حفظ البيانات في قاعدة بيانات خارجية (مناسب جدًا للمشاريع الثابتة)

? تجربة مستخدم سلسة:

حركات تفاعلية مع تمييز روابط التنقل (Navigation Highlighting)

? أبرز ما تم تنفيذه في المشروع:

✅ تطبيق التحميل الكسول باستخدام

await import(...) لتحميل السكربتات بكفاءة

✅ بناء بنية معيارية (Modular Architecture) وتنظيم الأدوات القابلة لإعادة الاستخدام لتحسين سهولة الصيانة

✅ استخدام PostCSS للاستفادة من خصائص CSS الحديثة مع ضمان التوافق مع مختلف المتصفحات

✅ اعتماد أسلوب Mobile-First لضمان تجربة استخدام سلسة على جميع الأجهزة

✅ تحسين إرسال النماذج باستخدام GetForm API لمنع إعادة تحميل الصفحة

? رابط المشروع المباشر:

https://my-portfolio-mpa-...

? مستودع GitHub:

https://github.com/Momen-...

كان هذا المشروع تحديًا ممتعًا، وتعلمت من خلاله الكثير عن بنية تطبيقات الصفحات المتعددة (MPA)، وتقنيات التحميل الكسول (Lazy Loading)، وتجميع الملفات باستخدام Vite، وتصميم TypeScript بطريقة معيارية.

يسعدني سماع رأيكم في المشروع! أي ملاحظات أو اقتراحات مرحب بها. ?

#FrontendDevelopment #TypeScript #Vite #MPA #WebPerformance #TailwindCSS #WebDevelopment #PortfolioWebsite

المهارات المستخدمة:

HTML5 · CSS · Tailwind CSS · PostCSS · TypeScript · Vite