Jake's Kitchen is a website project made to market an authentic
Asian restaurant in Southern California.
The website has a bright and simplistic theme that creates a
welcoming vibe for the visitor. Orange themed color is used to
bring about a warm and appetizing feeling for potential
customers.
This website is mobile friendly and employs responsive design.
Main sections of the website include Favorite Dishes, Menu
Stories, Testimonials, and Jake's Features. Javascript has been
used to implement smooth scrolling, sticky navigation, and
carousel sliders to enhance visitor experience.
Carousel slider is used to showcase the most popular
award-winning dishes. Vanilla Javascript is utilized to create
the slides, left/right buttons, and the dots that represent the
slides.
To move to the next/previous slide, click on
the right/left buttons; To jump to a specific slide, click on
the dot that corresponds to that slide.
Mobile navigation button will show up on the top right corner
when media query hits mobile navigation width, and navigation
menu will slide in from the right upon clicking the mobile
navigation button.
To close the mobile navigation
menu, just click the 'X' button on the top right corner.
Jake's Features Section is designed to showcase the unique
properties of the restaurant.
Javascript event
delegation is used for implementing the tabular structure of the
section. Clicking on one of the tabs will reveal the
corresponding Jake's feature.
Jake's Kitchen was designed and built from scratch. In order to have
more control in the design process, no CSS framework was used for
formatting. Looking back, a CSS framework such as Bootstrap could have
been used in conjunction with manual CSS to improve development
efficiency.
Vanilla Javascript was used to enhance user experience,
further animation development could utilize a javascript framework
such as jQuery.
Below summaries the potential improvements to add to the
project in the future:
Create more content on multiple webpages to generate a more complete website experience.
Utilize Bootstrap library instead of manual formatting to improve effectiveness of responsive design.
Utilize jQuery to more effectively create visual effects for better user experience.