صفحة هبوط
Capivo
أول مشروع احترافي لي، عبارة عن Landing Page تم تنفيذها بدقة Pixel Perfect باستخدام Next.js وMaterial UI خلال فترة التدريب.

التصنيف
- الدور
- متدرب واجهات أمامية
- المدة
- Internship
- حجم الفريق
- فريق متعدد التخصصات
- السنة
- 2024
- التقنيات
- Next.jsTypeScriptMaterial UI
01
نظرة عامة
Capivo أول شركة بدأت معها رحلتي المهنية كمطور واجهات أمامية خلال فترة التدريب. كانت أول مهمة حقيقية أعمل عليها هي تطوير Landing Page الخاصة بالشركة، مع التركيز على تنفيذ التصميم بدقة وجودة إنتاجية.
بنيت الصفحة باستخدام Next.js وTypeScript وMaterial UI، لتعرض خدمات الشركة، وأعمالها، وعملاءها، وهويتها كشريك تطوير للويب وتطبيقات الجوال.
02
التحدي
بالنسبة لي، لم يكن التحدي في تعقيد المشروع، بل في الانتقال من المشاريع التعليمية إلى العمل داخل فريق حقيقي، والالتزام بمعايير جودة الكود، والتواصل مع الفريق، وتحويل التصميم إلى واجهات جاهزة للإنتاج.
كما تطلب المشروع تنفيذ الصفحة بدقة Pixel Perfect، مع تجربة متجاوبة على مختلف الأجهزة، والحفاظ على اتساق الواجهة باستخدام Material UI.
03
دوري
تولّيت تطوير Landing Page الخاصة بالشركة خلال فترة التدريب، وشمل ذلك:
- تحويل تصميم Figma إلى واجهة Pixel Perfect.
- تطوير Landing Page باستخدام Next.js وTypeScript وMaterial UI.
- التأكد من توافق الموقع مع مختلف أحجام الشاشات.
- التعاون مع الفريق ومراجعة الملاحظات حتى الوصول إلى النسخة النهائية.
لم يقتصر دوري على تنفيذ الشاشات فقط، بل شمل التعلم من بيئة عمل احترافية، وتطبيق ملاحظات المراجعة، والوصول إلى نتيجة جاهزة للاستخدام الفعلي.
04
العملية
01
فهم المشروع
راجعت التصميم وحددت المكونات المطلوبة وآلية تنفيذها داخل المشروع، مع فهم أقسام الصفحة التسويقية مثل الخدمات، والمعرض، والعملاء، والتعريف بالشركة.
02
التخطيط
تم تقسيم الصفحة إلى أقسام واضحة، وتحديد كيفية بناء المكونات باستخدام Material UI مع الحفاظ على التجاوب واتساق التصميم.
03
التطوير
بنيت الصفحة باستخدام Next.js وTypeScript وMaterial UI، مع التركيز على دقة التنفيذ، والتجاوب، وتحويل أقسام التصميم إلى واجهات قابلة لإعادة الاستخدام.
04
الاختبار
قبل التسليم، تحققت من:
- مطابقة الواجهة للتصميم بدقة Pixel Perfect.
- التوافق مع مختلف أحجام الشاشات والأجهزة.
- سلامة الأقسام الرئيسية مثل الخدمات، والمعرض، والعملاء.
- تطبيق ملاحظات الفريق بعد المراجعات.
05
الإطلاق
نفّذت التعديلات المطلوبة بعد مراجعات الفريق حتى أصبحت الصفحة جاهزة، وتم نشرها كنسخة حية تعكس هوية الشركة.
05
الميزات
تنفيذ Pixel Perfect
حوّلت التصميم إلى واجهة مطابقة مع الاهتمام بالتفاصيل الصغيرة التي تجعل الصفحة تبدو احترافية ومتسقة.
تصميم متجاوب
وفّرت تجربة استخدام مناسبة على مختلف الأجهزة وأحجام الشاشات، من الموبايل إلى سطح المكتب.
Material UI
استفدت من مكونات Material UI لبناء واجهات متسقة وسهلة الصيانة داخل المشروع.
أقسام تسويقية متكاملة
بنيت أقسام الصفحة لتعكس خدمات الشركة، وأعمالها، وعملاءها، والتعريف بها كشريك تطوير موثوق.
06
أبرز النقاط التقنية
خلال عملي على المشروع، ركزت على تطبيق معايير التنفيذ الاحترافي لأول مرة داخل فريق حقيقي، مع الاهتمام بدقة الواجهة والتجاوب.
أبرز ما عملت عليه:
- Next.js.
- TypeScript.
- Material UI.
- Pixel Perfect Implementation.
- Responsive Design.
- Component-Based UI.
- العمل ضمن فريق ومراجعات الكود.
07
النتائج
خلال فترة التدريب، ساهمت في:
- تسليم أول مشروع احترافي خلال فترة التدريب.
- اكتساب خبرة العمل داخل فريق تطوير حقيقي.
- تطبيق أفضل الممارسات في بناء واجهات الإنتاج لأول مرة.
- نشر الصفحة كنسخة حية على الرابط النهائي.
08
ما تعلمته
كانت هذه التجربة نقطة البداية في مسيرتي المهنية. تعلمت أن العمل الاحترافي لا يقتصر على كتابة الكود فقط، بل يشمل التواصل مع الفريق، والالتزام بمعايير الجودة، والاهتمام بالتفاصيل التي تجعل المنتج جاهزًا للاستخدام الفعلي.
