Recreating Hennessy Website
- I build it using
npm/sasswhere I did not include a lot of
mixins. The choice was just because its easier for nesting and more readable(personal preference)
- I have used
jQuerywhich usually I'm trying to stay away but some of the effects like
slideUpwere not possible without it.
- For most of the icons I've used
Font Awesome 5, and the rest were coppied from
Small minimap of the website and my comments
- Starting with the Homepage
- I've included lots of functionallity. The modals for
Searchare created with
jQueryand the simplest and awesome effect
slideUp. After that I'm proud of the vertical
navbarwhich creates a really clean and friendly look for the user. The droppdown effect on them is created with
cssanimations because I wanted to mix the things and stay away from the
jQueryfor 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/sliderwhich I've done with Vanilla JS and has amazing animation for changing slides. As
Homepageis the first one you will inspect, I'm happy with the effect of the
arrowon the right bottom corner which always scrolls the page with
200pxand is beeing overlapped from the footer.
- The pages which get their data from
- 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.
- 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.