Updating my portfolio

I’ve been painfully conscious for some time that the first indication of what I’m capable of as a developer I give to prospective employers is my portfolio. And my portfolio leaves a lot to be desired.

For a start, the design is clunky. I might not be a top-grade designer but my awareness of web design principles has come on leaps and bounds over the last few months. On top of the clunky design, as a demonstration of my ability to create responsive websites, it falls flat on its face.

With this in mind, I recently set out to create a brand-new portfolio, built from scratch using a couple of tools I didn’t the first time around. Read on to find out how I’ve gone about this redesign and what I hope the final product to achieve.

The design brief

The aim of my portfolio is to demonstrate the skills I have learnt in my efforts to transition into a web development-related role by creating a professionally-presented product that is both pleasing to the eye and built using well-organised, clean code.

The target audience is primarily recruiters and prospective employers. As such, the primary goals of the site should be:

• Ensuring my skills are presented concisely

• Making it clear how best to contact me

• Providing information about, and links to, projects I’ve worked on.

I’d like to also work towards being able to potentially take on freelancing work, though since this is a secondary goal for me at present, the design I have put together is not intended to engage freelance clients. To do so would require a wider-scope, however the current design could be built upon in the future to achieve this purpose.

Inspiration

Before creating my design, I spent quite some time researching other people’s portfolios. This I found surprisingly challenging. I found plenty of ambitious and unique designs through blog posts with titles like ’30 inspirational portfolio designs’, but these were invariably built around designs that were a little too ambitious to be guiding me at my current skill-level.

Yet I wanted something visually appealing and built upon solid, dependable layout patterns. A couple of portfolios inspired me:

• Tom Hirst’s site I found to be incredibly focused. Any text content is concise and the intention of the site is very clear, with great use of green as a ‘call to action’ colour.

• Sarah Evan’s site has a modern but approachable feel. In particular, I liked the individual project pages detailing the process and brief behind each project.

• Adam Marsden’s site provided some more direct inspiration – I loved the layout of his project cards and decided to use this as inspiration of my layout. I also liked the way he divided his project into two sections, with key projects gaining a greater priority on the page, with a ‘miscellaneous’ section for older or smaller projects.

• Finally, although it might not be the most flashy part of a site, I really liked Hannah King’s footer section, and used this as inspiration for mine.

Initial design

With some inspiration under my belt, I began to think about my design. Having watched Kevin Powell’s video on designing a brewery site using Adobe XD (and discovering that, unlike Adobe’s other software, XD is free), I decided to have a go at using it to put together a design for my portfolio. This was my first attempt at using design software for a project. In the past, I had drawn out a design on paper showing a rough layout of pages but I can honestly say that, having created a initial design for a site on a computer, I will never start a project again without spending time on this stage.

Adobe XD is, in my opinion, very intuitive and enjoyable to use. I spent the best part of 15 hours putting my design together, which is probably quite a long time, but I learnt a lot and, the more I used the software, the quicker I became.
I’m confident that having a well-thought-out design is saving me time now that I’m coding. There are several reasons for this – colours, sizing and responsive layout.

Colours

To begin, I did what I usually do: pick a couple of colours and mostly use those, throwing in random other colours I kind of think work in an ad-hoc way as I work my way through the project.

Whilst creating my portfolio design, I cycled through several colour schemes before settling on my final palette. I used ColorSpace to help me select complementary colours but it was Adobe XD’s colour-library feature that ensure I developed a more disciplined approach.

Wherever possible, I used the same small selection of colours, resulting in a more consistent design. I selected a bold, vibrant green as a highlight colour that stands out and draws the user’s focus.

I created a little colour board for myself, including the variable names I would use in Sass.

Sizing

Creating an initial design also encouraged me to think more carefully about the sizing and positioning of elements. I’d read a lot about the importance of whitespace and how it’s effective use is integral to modern design. Spending time creating a design in Adobe XD undoubtedly helped me develop a greater awareness of my use of whitespace, ensuring the components on my site are given room to maximise their impact and to ensure a good flow.

I also found the design process to help with thinking about giving text space to breathe with more line-spacing than I would have used in the past and a subtle increase in character spacing. Most importantly, I was able to keep all of these design considerations consistent.

Responsive layout

Adobe XD allows the user to quickly add a new ‘artboard’ to a project and, in doing so, select a width based upon different devices. Though I was aware I would most likely need to create a third mid-size layout, I decided to include two versions in my initial design: a larger-viewport version (1280 pixels) and a smaller version (360 pixels).

Creating both versions gave me a real sense of how they would relate to each other, how the different components would have to stack and change position. This process naturally led me to consider the practicalities of how this might work and my brain began to formulate ideas and make practical decisions based upon what I knew I could achieve with code. In turn, this affected how I put together the design.

Coding - setup

After my last project’s CSS files had become very messy very quickly, it was clear to me that this time around I needed a better way to organise my CSS. So I decided to use Sass, arguably the most popular CSS-preprocessor to organise my code into separate (partial) files.

I used node package manager (npm) to install node-sass in my project, creating a script to run and compile Sass automatically whenever a change was made. This I was able to do thanks largely to Jonas Schmedtmann’s Advanced CSS and Sass course.

Having also spent some time developing a deeper understanding of git and Github, I was keen to integrate these technologies into my workflow in a more professional manner. I started using issues and pull requests on Github and the command line tool Git Bash on my computer to manage branches and commits on the project. I’m ready to start working more confidently with these tools thanks in large part to Udacity’s fantastic free course How to use Git and Github.

Front page

The front page will be divided into four main sections:

• A header including my name, photo and - most importantly - links to the contact page and my CV

• An about section, which will be short and sweet

• A skills section, which will again be short and sweet as most of the information about my skills will be located on a separate page

• A projects section, also short and sweet (noticing a pattern here?), with only two recent projects featured along with a link to the dedicated projects page.

Having read Steve Krug’s Don’t Make Me Think, in which he strongly emphasizes how little time people tend to spend on average looking at any given webpage, I wanted to keep the information on the front page as focused and succinct as possible. The primary goals outlined above are achieved in this page with a minimal amount of waffle.

Next steps

My intention is to get this up and running as soon as I possibly can – out with the old portfolio and in with the new. I can then add the secondary pages as when they are ready.

Hopefully, once the CSS is written for the home page, I will be able to put the other pages together a little quicker. Some reuse components that I am designing for the home page, such as the skills card component (reused on the About me page) and the project card component (reused on the Projects page).

I’m excited about this project and am confident it will better present what I am capable of. I’ve spoken to several recruiters who have looked at my current portfolio and, whilst they are sometimes complementary about it, I know I will feel more confident in these conversations when my new site is up and running.