Building My Portfolio

You are currently viewing the latest iteration of my personal portfolio, and a lot has changed since my previous version. I have learned a whole lot in the past year since my last portfolio, both in terms of design and development. I wanted to bundle all of that new knowledge into a fresh site to provide a solid example of my current skillset.

Research

Before starting any designing or coding, I sat down to research and plan where I was going to take my portfolio in order to get the most out of it. I spent a lot of time looking around at other peoples portfolios from the industry to get an idea of what to include. The first place I started looking was Awwwards as these are tried and tested to be well polished, unique websites that stand out among others. I gained a solid foundation in my head of where I wanted to take my website and from there I sat down with a pencil and paper to put some ideas down.

Design

After putting my ideas down, I opened my design program of choice, Adobe XD, and started working up some design concepts. I had an initial layout in mind and after playing around with a variety of fonts and colours, I was happy that I had something to start working with. I decided to go with a dark UI with large white text and a bright accent colour. As proven in some studies, the greater the contrast between colour combinations, the better the performance (Tubik Studio, 2016).

Development

I believe that my development skills have come along way in the past year and I wanted to demonstrate this in my portfolio. Back then I had no idea about BEM (Block Element Modifier) methodology, Stacks, SASS, NPM or any of what seemed like wizardry to me a year ago. I started by setting up a local development environment using ScotchBox (a simple Vagrant LAMP stack) and creating my project in Github.

To make my workflow a lot more efficient, I set up my folder structure and files to begin working with. I love using SASS when I am developing my sites so I went about setting up Grunt to compile my SASS into a usable CSS file. Using SASS really helps me manage all of my CSS, keeping it broken up into relevant bite-sized chunks making it a lot more maintainable and clear.

To keep my coding well organised and structured, I used BEM naming convention and OOCSS (Object Orientated CSS). BEM allows you to increase productivity, by making your code scalable and reusable (Belaya, 2018) and OOCSS encourages stylesheets that are faster and easier to maintain (Lazaris, 2011).

"BEM makes your code scalable and reusable, thus increasing productivity and facilitating teamwork. Even if you are the only member of the team, BEM can be useful for you."
- Inna Belaya

I love using OOCSS in particular as it allows me to create my styles based on my designs and then quickly apply them CSS classes as I am coding my markup, rather than rewriting styles over and over again for different elements across the site. An example of how I have used the two together can be found in my landing page section.

Here I have my section called .hero, then my content block inside hero called .hero__content, using BEM notation to style my hero section. My text inside the hero is then styled using objects that I've previously created to set the font, the size, and the colour to prevent having to write font-family, font-color, and font-size every time I want to style some text. On a larger project, it may not be a good idea to name classes specifically by the font name as I have, as the fonts used may change at a larger date, '.header' and '.bodyfont' may be more appropriate.

Future Plans

As I continue learning new things, I will continue updating my website to reflect my additional knowledge. My next steps are to learn Greensock, a JavaScript animation library, and Barba.js to add loading animations and page transitions to make my site feel more alive.