قمت بتصميم وتطوير الواجهة الأمامية (Front-End) لموقع Dishcovery، وهو منصة ويب تهدف إلى أخذ المستخدم في رحلة لاستكشاف أشهر الأطباق والوصفات من مختلف المطابخ العالمية. يركز المشروع بشكل أساسي على تقديم تجربة بصرية جذابة وسهولة في التصفح، مما يتيح للمستخدمين الوصول إلى الوصفات المفضلة لديهم بسلاسة.
أبرز المميزات التي تم تنفيذها:
تصميم متجاوب بالكامل (Fully Responsive): الموقع يعمل بكفاءة وتنسيق مثالي على جميع الأجهزة (حاسوب، تابلت، موبايل).
نظام عرض البطاقات (Card Layout): عرض الوصفات بشكل منظم وجذاب بصرياً، يبرز صورة الطبق واسمه وتقييمه.
واجهة تفاصيل الوصفة: صفحة مخصصة لكل طبق تعرض المكونات، طريقة التحضير، ومعلومات غذائية بتنسيق واضح وسهل القراءة.
شريط بحث وتصفية (Search & Filter): واجهة تتيح للمستخدم البحث عن وصفات معينة أو تصفيتها حسب المطبخ (إيطالي، آسيوي، شرقي، إلخ).
تأثيرات بصرية (Animations): استخدام تأثيرات Hover وانتقالات ناعمة لتحسين تفاعل المستخدم مع العناصر.
التقنيات المستخدمة:
HTML5: لبناء هيكلية الموقع بشكل معياري ومتوافق مع محركات البحث (SEO Friendly).
CSS3 / SASS: لتنسيق الموقع واستخدام Flexbox و Grid System لضمان تخطيط مرن، بالإضافة إلى استخدام Media Queries للتجاوب مع الشاشات.
JavaScript (ES6+): لإضافة التفاعلية للموقع (مثل القوائم المنسدلة، وفلترة العناصر ديناميكياً).
(اختياري - أضف هذا السطر إذا استخدمت مكتبة خارجية): Bootstrap / Tailwind لتسريع عملية التصميم وضمان الاتساق.
(اختياري - أضف هذا السطر إذا استخدمت React أو Vue): React.js لبناء واجهة مستخدم تعتمد على المكونات (Components).
ما يميز هذا العمل:
كود نظيف (Clean Code) ومنظم يسهل التعديل عليه وتطويره مستقبلاً.
الاهتمام بأدق تفاصيل التصميم (Pixel Perfect) لضمان تطابق النتيجة النهائية مع التصميم المقترح.
سرعة تحميل عالية وأداء سلس للواجهة.