The Grill House is website project made to market a unique
restaurant in the Los Angeles Area.
The black themed website conveys a boutique and elegant feel to
the visitor. The combination of black background and yellow font
is deliberately used to arouse visitor's interest and appetite.
This website is mobile friendly and employs responsive design.
Main sections of the website include Menu, About, Recognitions,
and Order Callouts. Javascript has been used to implement smooth
scrolling, sticky navigation, and fading animations to enhance
visitor experience.
Mobile navigation button will show up 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.
Menu is implemented using event delegation in Javascript,
clicking on specific tabs will show the corresponding menu
lists.
On mobile screen sizes, the tabs will turn to
horizontal from vertical.
Fading animation is triggered when visitor scrolls up and down
the website. Elements that come into view upon scrolling will
fade in.
To implement such feature, an 'active' class
is added by Javascript to the element when it enters the
viewport by scrolling. The 'active' class contains the format
that translates the position and changes the opacity of the
element, thus rendering a fade in effect on the element upon
scrolling.
The Grill House was designed and built from scratch. No CSS framework
was used for formatting in order to have more custom control of the
website. Looking back, more CSS framework could have been used in
conjunction with manual CSS to improve efficiency and outcome.
For animations, vanilla Javascript combined with CSS were
used. For code scalability and consistency, further animation
development could utilize a javascript framework such as jQuery.
Below summaries the potential improvements to add to the
project in the future:
Utilize more grid display to achieve better results more efficiently, especially for element positioning.
Utilize Bootstrap library instead of manual formatting to improve effectiveness of responsive design.
Utilize jQuery to more effectively create animations for better user experience.