بورتفوليو مطوّر واجهات أمامية
نبذة عن المشروع:
بورتفوليو ثلاثي الأبعاد لمطوّر الواجهات الأمامية زين العابدين منصور، يعرض خبراته وتطبيقات الويب والمواقع التي طوّرها أمام العملاء وأصحاب العمل.
أردنا بورتفوليو يكشف مهارة صاحبه التقنية منذ لحظة فتحه. لذلك افتتحنا الصفحة بمشهد مكتب تفاعلي ثلاثي الأبعاد، ثم رتّبنا بقية المحتوى كقصة واضحة: من هو، وأين عمل، وماذا بنى، وكيف يمكن التواصل معه.
ما الذي قدمناه
الصفحة الرئيسية قصة متصلة تُقرأ بالتمرير، مع قائمة علوية وزر لتحميل السيرة الذاتية، وتكمّلها صفحتان إضافيتان: صفحة تفاصيل لكل تطبيق ويب، وصفحة تجمع كل المواقع التي طوّرها.
- الواجهة: عبارة "Hi, I'm Zain" مع تخصصاته، فوق مكتب تفاعلي ثلاثي الأبعاد عليه حاسوب وشاشة
- النظرة العامة: تعريف قصير وزر لتحميل السيرة الذاتية وأربع بطاقات لأدواره: مطوّر واجهات أمامية، ومتخصص React، ومحسّن أداء، ومهندس تطبيقات
- الخبرات العملية: خط زمني عمودي لأدواره في Dopa Tech ومجموعة بلدنك رانك والمشاريع الحرة
- تطبيقات الويب: بطاقات لأنظمة مثل إدارة الأصول وإدارة المشاريع والمواعيد والموارد البشرية وتطبيق محادثة للمهندسين بتقنية PWA، لكل منها وسوم ورابط لصفحة التفاصيل
- المواقع: شريط عرض للمواقع التي بناها، من بورتفوليو مصمم غرافيك إلى مدونة دوبا بيوتي ومواقع فروع بلدنك رانك
- التواصل: نموذج رسائل بجانب مجسّم ثلاثي الأبعاد لكوكب
أبرز المميزات
- مشهد مكتب تفاعلي ثلاثي الأبعاد في الواجهة، مع مؤشر للتمرير أسفله
- كوكب ثلاثي الأبعاد بجانب نموذج التواصل وخلفية نجوم متحركة
- أدواته معروضة كشارات ثلاثية الأبعاد، من React وNext.js إلى TypeScript وTailwind CSS
- صفحات لتطبيقات الويب تقسم كل مشروع إلى نظرة عامة والمشكلة والحل وأثره
- شريط عرض للمواقع بأسهم ونقاط تنقّل، مع صفحة "Discover All Websites" لاستعراضها كاملة
- قسم لآراء العملاء
- نموذج تواصل بحقول الاسم والبريد الإلكتروني والرسالة
التصميم وتجربة المستخدم
اخترنا ألوانًا كحلية وبنفسجية داكنة مع لمسة بنفسجية متوهجة، فتبرز المجسّمات ثلاثية الأبعاد وصور المشاريع كأنها مكتب مضاء في الليل. تنتهي العناوين العريضة بنقطة، مثل "Overview." و"Work Experience."، وتعلوها تسميات صغيرة بأحرف كبيرة، فيحافظ كل قسم على الإيقاع نفسه. يظهر المحتوى بحركة انسيابية مع التمرير، وعلى الجوال نستغني عن شارات الأدوات ثلاثية الأبعاد ليبقى الموقع خفيفًا وسريعًا.
