Experience unique and tasty dish serve from underground. An oasis of pleasure
Le Diable β Experience unique and tasty dish serve from underground
Le Diable is a personal project that holds a special place in my journey as a web developer. It was one of my earliest full-fledged websites, designed and developed entirely by me when I was learning CSS, JavaScript, and responsiveness.
This project pushed me to practice UI/UX design, improve my CSS layout skills, and experiment with animations. Every element, from the web design to the logo and assets, was crafted from scratch. Though itβs a static website, I envision rebuilding it dynamically with modern technologies like Remix, Svelte, Solid, SST, Next.js, etc. in the future.
π Pages, Sections & Features
π Home Page
The home page introduces visitors to the restaurant with:
- A hero section showcasing the restaurantβs aesthetic
- A brief overview of the dishes we serve: Breakfast, Lunch, Dinner, Desserts, Snacks, and Drinks
- A short introduction about our restaurant and philosophy
- A team highlight featuring the Chef Co-Founder
- A mini-gallery preview and testimonials section
π½ Menu Page
The menu page provides an interactive experience:
- Animated category filters to switch between meal types
- A search bar to find dishes by name or ingredients
- Each dish includes:
- Name, ingredients, price, reviews, and ratings
- Book Your Table section β A reservation form allowing customers to input:
- Name, email, date/time, and number of guests
Menu page also features customer testimonials for credibility.
π Delivery Page
Customers can choose their preferred restaurant branch, including:
- Alaminos, Pangasinan
- Guimbal, Iloilo
- Manila
- Vigan City
- Baguio City
- Olongapo, Zambales
- Taguig City
- Tagaytay, Cavite
- El Nido, Palawan
- Guimaras
- Davao City Del Sur
Upon selecting a branch, they are redirected to the delivery page, which includes multiple sections:
π¦ Delivery Offers
- Pick up your order from the restaurant
- Order via WeeDeliver, Grab, or FoodPanda
π Most Ordered Dishes
A section listing the most popular dishes at each branch.
π Gift Cards
A customizable gift card purchase section, designed using Figma, where customers can:
- Choose a design
- Fill out a purchase form
π· Coupons
A section displaying discount codes that customers can copy.
π΄ Become a Rider
A redirection button to a job application form for joining as a delivery rider.
π¦ COVID-19 Updates
A dedicated safety measures section outlining health protocols.
π Reservation & Contact Page
A dual-form page featuring:
- A contact form for customer inquiries
- A reservation form for booking tables
π About / Our Story Page
A detailed introduction to the restaurant, including:
- The Story of Le Diable β How the restaurant came to life
- Meet Our Professionals β Images, roles, and details about the team
- Testimonials β Showcasing customer feedback
πΈ Gallery Page
A visual showcase of the restaurant, including:
- Interior photos
- Food photography
- Happy customers
π΅ Become a Rider Page
A structured job application page for those interested in joining the delivery team.
- Users select their area
- Fill out personal information
- Submit their application
π Report a Bug Page
An bug report page where users can:
- Describe an issue
- Upload multiple screenshots
- Provide email and affected page URL
π Footer Section
The footer includes:
- Restaurant schedule
- Newsletter subscription form
- Location information
- Quick links to:
- Become a Rider
- Report a Bug
- Contact Us
- Reserve a Table
π Future Plans
While this project remains static, I see immense potential in migrating it to a dynamic stack. My goal is to rebuild it using frameworks like Remix, Svelte, or Solid, making it more scalable and interactive.
Le Diable represents a major milestone in my growth as a developer, reminding me how far Iβve come and how much more there is to explore in the world of web development.