Personal Portfolio

Introduction

The aim of this project was to create from scratch a portfolio website to showcase my projects for potential employers or clients. The portfolio was to show creativity and originality while keeping a professional element to the design. I expressed the UI animations through GSAP and ScrollMagic, while using smoothstate to get more control of page transitions within the website

Technologies

HTML5 CSS3 JavaScript ES6 SASS jQuery Webpack GSAP PHP AJAX

Design Features

The website was designed to be minimal and have information that was only relevant to the target audience to keep user engagement. Part of this minimal design was to keep the variation of colour to the minimum, with using variations of blue, red and gold to give a calm and professional look. The structure of the website using smoothstate was to resemble a SPA website with the page transitions. While the focus of the design was to be kept minimal and to the point, the home banner animation was to induce a bit of personality and flair to the site.

Development Features

The module bundler Webpack was used to manage javascript modules and their dependencies. The main external javascript file used was from Greenock for the animations such as the home banner, scroll magic to add animations for for a better scrolling user experience and smoothstate for better control of the page transitions. Also, PHP was used for the contact section for sending emails through to me. The website was built using a mobile-first approach to keep it fully responsive