Valla Table

Welcome to Valla Table, a front-end web project inspired by an authentic Thai restaurant in New York. The project is built to showcase my essential front-end and development skills as well as my design capability, through the story of Valla Table.

Table of Contents

• Features
  • Home
  • Menus
  • about
  • Order Online
  • Hours & Location
• Common Elements
  • Navbar
  • Slide
  • Gallery
  • Footer
• Design
• Technologies Used
• Feedback
• License
• Acknowledgments
  
  

Features

The website comprises five main pages: Home, Menus, About, Order Online, and Hours & Location.

Home

• The Home page is where users can find a greeting message, feast their eyes on stunning food images, and get information about the restaurant's operating hours and location.

Menus

• The Menus page is the go-to place for discovering the extensive list of dishes offered by Valla Table. To enhance user experience, the menus are categorized by food type, making it easy for visitors to find their desired dishes.
  
  

About

• The About page is where the captivating story of Valla Table and its founder are shared with visitors.

Order Online

The Order Online page enables users to explore the menu, add or remove dishes to their cart, and review their choices. Key features and functionalities include:

• Beautiful images accompanying each dish.
• Descriptions of dishes, including ingredients and preparation details.
• An add-to-cart container appearing on hover for a larger screen.

• The add-to-cart content is altered to 'In Cart' if the item is already added.

• A sidebar that slides in from the right when the add-to-cart container is clicked, displaying the cart contents and the total price.

• A close icon on the sidebar allowing users to hide the sidebar and continue exploring the menu.
• A clear-cart button on the sidebar to remove all items from the cart. The sidebar will also be automatically hidden if this button is clicked.
• A remove button to simply delete a particular dish from the cart and also update the total price.
• Functionality to increment or decrease the number of items in the cart.
• A cart icon located on the top right of the header showing the total number of items in the cart

• A functionality that persists cart items using local storage, so users can still find their items in the cart after they close the browser and return.
• While the website currently lacks a checkout functionality, it demonstrates the front-end development skills I have honed. I hope this project offers a glance into my capabilities in front-end development.
  
  

Hours & Location

• This page provides details about the restaurant's opening and closing times, along with its address. A Google Maps link is also provided for user convenience.
  
  

Common Elements

Several elements are available on every site page for a consistent and user-friendly experience.

Navbar

• The navbar includes the restaurant logo and navigation links to other pages.
• The restaurant logo serves as a link back to the Home page.
• The navbar is fixed at the top of the page for easy access while scrolling.
• It is fully responsive for any size of screen.
  

Navbar on medioum screen

Navbar on small screen

Slide

• The site features a slide showcasing various food images, except on the Order Online Page.
• Users can navigate through images using the next and previous arrows.

Gallery

• Selected pictures are thoughtfully curated and displayed on the Home and About pages.

Footer

• The footer includes social media links, the restaurant's address, and a top button.
• Social media links open in new tabs for a seamless user experience.
• The top button smoothly scrolls users back to the top of the page.
• A link to the developer's profile is also available at the bottom of the footer.
  
  

Design

This project prioritizes responsive and mobile-first design for an optimal user experience across all screen sizes. The design features:

• A clean, crisp, and minimalistic aesthetic.
• Simple fonts and minimal color schemes for a sophisticated and luxurious feel.
  
  

Technologies Used

• HTML
• CSS
• JavaScript
  
  

Feedback

Feedback and comments are welcome. If you're interested in collaborating, please don't hesitate to reach out via my GitHub profile. Thanks!

License

All images utilized in this project are the exclusive property of Valla Table, the restaurant that inspired this web project. Unauthorized use or reproduction of these images is strictly prohibited and may infringe upon the restaurant's intellectual property rights. Please refrain from using any images without obtaining proper permission and authorization from Valla Table.

Acknowledgments

To explore the genuine experience and offerings of Valla Table, the restaurant that served as the inspiration for this project, please visit their official website.