معرض أعمال تفاعلي حديث (Portfolio) بتقنيات React, TypeScript & Framer Motion

قمت بتصميم و تنفيذ معرض أعمال شخصي عالي الأداء لاستعراض المشاريع البرمجية المعقدة بأسلوب نظيف وتفاعلي. الهدف الرئيسي من المشروع كان تجاوز القوالب التقليدية وبناء واجهة مستخدم حية تعكس عقلية هندسية احترافية، مع التركيز على كتابة كود نظيف، بنية معيارية، وتحريكات انسيابية دون أي تأخير (Zero-latency).

تم بناء التطبيق باستخدام React وTypeScript، مع تصميم بصري بأسلوب Deep Ocean باستخدام نظام مخصص من Tailwind CSS. اعتمدت في العرض على تخطيط شبكي حديث (Bento Grid) لعرض المشاريع، مما يسمح للمستخدمين بالتفاعل مع المحتوى بديناميكية عالية.

أبرز المميزات التقنية:

- واجهة مستخدم تفاعلية (Interactive UI): استخدام مكتبة Framer Motion لتنفيذ تأثيرات ظهور معقدة عند التمرير (Scroll Reveals)، وتحريكات متتابعة، وتأثيرات الزجاج (Glassmorphism) مع الحفاظ على أداء ثابت بمعدل 60 إطاراً في الثانية (60FPS).

- بنية برمجية قوية: الاعتماد على مكونات Shadcn UI لضمان تصميم مرن، قابل للوصول (Accessible)، وسهل الصيانة.

- نظام تواصل بدون خادم: دمج خدمة EmailJS مع نظام تحقق قوي باستخدام Zod Schema، مما يتيح تواصلاً آمناً ومباشراً عبر النماذج دون الحاجة ل Backend تقليدي.

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

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

React.js

TypeScript

Tailwind CSS

Framer Motion

Shadcn UI

EmailJS