Skip to content
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
js
sass
vendor
.gitignore
README.md
bartenders.html
collection.html
hennessy-mix.html
history.html
index.html
news.html
package-lock.json
package.json
savoir-faire.html
talents.html
visit-us.html
worldwide-mix.html

README.md

Recreating Hennessy Website

  • I would say that this task was way harder than I though. Recreated the design with small changes which were personal preference. The functionallity is something that I'm really proud and all the elements like blog posts and drinks were created with Vanilla Javascript and their data is hardcoded in separate file. This website is build only for learning purpouses. Its been included to my portfolio as personal project.

Getting Started

  • I build it using npm/sass where I did not include a lot of variables and mixins. The choice was just because its easier for nesting and more readable(personal preference)
  • I have used jQuery which usually I'm trying to stay away but some of the effects like slideUp were not possible without it.
  • For most of the icons I've used Font Awesome 5, and the rest were coppied from Hennessy Original Website.

Small minimap of the website and my comments

  1. Starting with the Homepage
  • I've included lots of functionallity. The modals for Log In, Create Account and Search are created with jQuery and the simplest and awesome effect slideUp. After that I'm proud of the vertical navbar which creates a really clean and friendly look for the user. The droppdown effect on them is created with css animations because I wanted to mix the things and stay away from the jQuery for some of those effects(it's not as smooth as it should be). Next one which is most obvious for the user is the slideshow/carousel/slider which I've done with Vanilla JS and has amazing animation for changing slides. As Homepage is the first one you will inspect, I'm happy with the effect of the arrow on the right bottom corner which always scrolls the page with 200px and is beeing overlapped from the footer.
  1. The pages which get their data from JS Object:
  • The following pages: Bartenders, Mixed-Drink, World Drinks, Talents and News get their data from a separate files which data is hardcoded, and their markup is created from Javascript. It was a challenge for me and gladly proud I can say that I mastered it.
  1. History stiff slider
  • The slider was a challenge as well but after my second attempt I created it to work smoothly. The UI on desktop is really friendly and easy to navigate. Mobile device styling is way different than the desktop but still works and offers different experience for the users.

Small comment

  • Proud of the project, I know that there is much more to do and lots of the pages are missing but the basic layout of the website is done from scratch. It took me more than a month but it was worth every minute working on it. If you have any questions, comments, tips etc. please contact me.
You can’t perform that action at this time.