…Building a Portfolio (Part One)

The Backstory

Last September I decided to leave my job as the IT Manager at the Honeypot Group (Barnet FC, Jako Living Sports and The Hive London are just three of the group companies) to focus on a career in Web Development. As I’ve since explained (repeatedly), IT and Web are two separate career paths. They’re similar, perhaps even related, but noticeably different. IT and Web are both fields for “computer people” (read: nerds) in much the same way that a surgeon and an oncologist are doctors. Similar, perhaps even related, but noticeably different. Yeah, repetition is boring, share my pain.

Web Development has been my passion for a long time and, having made decent inroads into a career in IT, I realised that my heart was set. Elsewhere. Bugger.

Pastures New

I left my full-time role on the 2nd January, following a surprising 1-0 home victory against Plymouth Argyle. Why do I mention the result? I’m not sure, it has no bearing on my story. Alas, onward. The plan was to finally commit to becoming a full-stack web dev, something I had put off multiple times. Before the end of the month, I began a Web Development bootcamp with CareerFoundry, having registered a couple of months in advance. Things were a bit hectic and I didn’t blog much about my experience as a student. That said, every web dev is a student. No-one has “finished” learning how to be a web dev yet.

The course I took taught Ruby on Rails as a back-end language/framework. It’s one of the most popular languages, used for millions of websites, notably websites such as airbnb, goodreads and hulu. Twitter was also originally built with Ruby on Rails.

I completed the course last week and it’s now time to find a job as a Web Developer. How do I intend on doing so? Step one: Build a decent portfolio website. Show employers what I can do. Blog about the experience this time, idiot.

Planning a Portfolio: The Basics

Failing to plan is planning to fail


Today was quite hot in London, encouraging me to work outside. I set up my office at the end of the garden and set about planning my portfolio.

The desk area where I set up my 'office'

My Office

View from my 'office'

View from my Office

First, I searched online for portfolio inspiration. In truth, inspiration was not forthcoming. However, I did have very strong views on what I didn’t want my portfolio to look like. I found thousands of ways not to invent the lightbulb, etc and so on.

Starting with the basics, such as structure, I slowly put the elements of a plan together. Within 30 minutes I had put some of my thoughts on paper. Importantly, I had also destroyed some cherries.


Brain food. RIP, you will not be forgotten.

The basics were easy, my portfolio will have three content sections: About, Work and Contact. It will also have a header and footer.

In terms of style, I decided that I would be my own target market. Minimalist in style, inspired by flat/material design, with sans-serif fonts and a green/grey/white colour palette. The colour palette, in part, as I think blue is overused for portfolio websites and I can’t recall the last time I designed in green.

I also took the opportunity to ask myself some questions that I’ll only be able to answer as I start to put the website together. For example, will animated text work on the “About” introduction?

Finishing the Handwritten Draft

After mourning the scarcity of earthly goods (I ran out of cherries) I finished the content plan, with decisions on structure and design basics. Overleaf, I took the opportunity to recap the skills this project will require. With the plan handwritten, I drew rough wire-frames to complete the first phase of my draft.

I’ve not explained the above in great detail as the plans themselves are available below and they should be self-explanatory. If they’re not, dear reader, know that the struggles of future me stemmed from this point. As I write this blog post, I have a handwritten Schrodinger’s plan.

Hand written content and structure plan

Content & Structure Plan

Hand written skillset expectation and wireframe design

Skills Required & Handwritten Wireframe

Handwriting first drafts of everything I do is quite an important part of my workflow. This isn’t limited to design: I handwrite first drafts of my plans, to-do lists (the task aspect of the bullet journal system revolutionised my life) and coaching sessions, amongst other things. The reason for this is that there are very few technical limitations to what I can handwrite; I define everything as I see fit. If I want to start a mind-map, begin to illustrate halfway through and then wireframe towards the end, I can. In this instance, I started writing down everything in my head and, once happy I had structure, drew my vision.

Also, unlocking my phone and opening a note-taking app takes at least two seconds longer than writing something down. This is unacceptable.

The next step is to produce a digital wireframe, choose a colour palette and decide which fonts I wish to use. More soon.