Personal portfolio site

Expressing my personality and showcasing my design and CSS/SASS skills while keeping things simple.

Made using SASS, CSS Grid, Flexbox and JavaScript.

UK Bank Holidays Preview

Fully responsive personal website

This was an excellent learning experience and made me realise the importance of organisation, and thinking through the smaller details (like the favicon being used).

The importance of organisation

Working on highlihted the importance of organising my code in a sensible and modular way to be able to re-use elements, while also maintaining the ability to customise the code.

The objective of the site was to keep things simple on the front-end, which is often not the easiest thing to accomplish. I decided on using containers with different backgrounds to visually differentiate sections. These sections are also separated into separate SASS files for ease (this has already saved me hours as locating bugs is easier) while using modular mixins for grid items, containers and typography.

The site uses CSS Grid and Flexbox for the 'My Work' section, which makes it much easier to make responsive using @media queries and changing the order of the elements.

I'm also a fan of using @mixins in my SASS in order to make the code more declarative and readable. For eg: @include for-phone-only {} is much more readable than '@media (max-width: 599px) {}'

Here are some of my other projects

Showcase: Components

Here is a collection of website components from popular websites written from scratch.