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.