Restaurant/Juice-Bar Page

Result

See the Jolly Juicer website live here

About this project

This project was prefaced with lessons about classes, ES6 modules and Webpack. To put these lessons into practice the assignment was to create this restaurant page, set it up with webpack and use modules for the separate pages and functionality.

Objectives

• set up the webpack environment needed for the project
• create a homepage, menu and contact page
• use tabbed menu items (I went for colored active pages for stylistic reasons)
• each page should have its own module
• deploy to GH Pages

Notes and lessons learned

• Since I just did the webpack tutorial, I was very overwhelmed with the extreme amount of options to add to the webpack setup. Eventually I settled for keeping that modular as well and merely added what I needed like style-loader, css-loader and running the build script initially.
• I followed along with the linked gist to create a subtree branch. I didn't realize that would automatically deploy when pushing to the gh-pages branch. My very brutal design sans styling was out there for the world to see without me knowing it at first.
• I really enjoyed the modular approach. Since starting the JS path, it's been building up to a lot more code organizing and I feel that makes things a lot more intuitive for me personally.
• I definitely enjoyed this project. At first because it was quite a smooth ride after all the practice the days before with modules and webpack. Later because it really started looking like a proper site with some basic styling choices.
• I styled the project without a real gameplan. Once the functionality was there, I could have moved on but instead I decided to go for some minimal styling with these basics:
  • a Playful sans font for the logo and a more serious sans for the rest
  • a green accent color to fit with the healthy vibe
  • flatlay background images with fruits and vegetables
  • text overlay containers with 75% opacity to keep the design consistent across pages

Credits

• photo homepage: by LUM3N
• photo menu page: by Brooke Larke
• photo contact page: by Element5 Digital

Things to do or features to add someday/maybe

• add mobile responsiveness with media queries
• simplify/refactor the pages modules code