pratik543 / zen-sushi

ZenSushi: Sleek sushi ordering site with responsive design, smooth animations, and clean code. Built using HTML, CSS, and JavaScript, it offers a seamless user experience across devices.

ZenSushi Sushi Ordering Landing Page 🍣

Welcome to the ZenSushi project, a modern and responsive website with captivating animations, designed to provide an enjoyable sushi ordering experience through an elegant landing page.

Project Overview 📋

The primary objective was to develop a fully responsive landing page that seamlessly adapts to diverse screen sizes while captivating users with tasteful animations.

Key Features & Functionality 🔑

• Responsive Design: The landing page dynamically adjusts to different devices, ensuring a consistent user experience.
• Animations: Delicate animations, powered by the AOS (Animate on Scroll) library, breathe life into the sushi ordering process, enhancing user engagement.
• Clean and Organized Code: Emphasis was placed on maintaining clean, readable, and well-structured code, following the BEM naming convention for CSS classes.
• CSS Techniques: Leveraging CSS variables, imports, and flexible layout properties contributed to elegant and reusable styling.
• Technical Stack: The frontend was crafted using HTML, CSS, and JavaScript, with Vite serving as the modern front-end build tool to streamline development. AOS library facilitated smooth animations.

Technical Stack 💻

ZenSushi utilizes HTML, CSS, and JavaScript for its frontend development, with the aid of Vite for efficient local server setup. AOS library enriches the user experience with seamless animations.

Setup / Installation: 💻

To explore ZenSushi locally:

• Download or clone the repository
• Execute npm install
• Run npm run dev
• Access the local server or visit http://localhost:5173/

Approach: 🚶

The development approach prioritized cleanliness and organization, manifesting in segmented CSS files, consistent CSS variable usage for color and font management, and adherence to the BEM naming convention. Responsive design was achieved through flex and position properties, while animations were seamlessly integrated using the Animate On Scroll library. File and folder structure was meticulously maintained throughout the project.

Credits

Special thanks to JavaScript Mastery for the invaluable tutorial resources!