"Mealify," a modern and dynamic landing page for a restaurant, specifically designed to showcase advanced front-end development skills. This project goes beyond basic layout by integrating interactive features and a fully functional Dark/Light theme toggle, providing a personalized user experience.
Key Features:
Dark/Light Mode Support: Implemented a theme switcher using JavaScript and CSS variables, allowing users to toggle between dark and light themes seamlessly.
Responsive & Adaptive Layout: The design adapts fluidly to all screen sizes, featuring a complex Grid layout for the food gallery and Flexbox for structure.
Interactive UI Elements: Includes smooth scrolling navigation, hover effects on chef cards and gallery images, and a sticky navigation bar.
Professional Sections: Structured with clear sections for "Chefs," "Gallery," and "Contact," ensuring content is easily digestible.
Clean & Semantic Code: Written with accessibility and SEO best practices in mind.
Tech Stack:
HTML5
CSS3 (Grid, Flexbox, Variables)
JavaScript (DOM Manipulation for Dark Mode)