Personal space and creative playground
About the project
The thoughts on a new portfolio had been on Henrik's mind since he last launched a portfolio in 2016. Some years later he put pen to paper and the project took off.
- Front-end development
- Front-end development
Early on in the process
Henrik has primarily done front-end development lately, but design has always been on his mind. His employer Kodamera offer their employees time for skills development four hours every second week. During some sessions in 2018, Henrik focused on design and made some early, rough sketches of what his future website might look like.
Who was I, who am I? Before starting out, Henrik looked back on his career. Doing so, Henrik was able to sort out what to aim for. Henrik defined what type of work he primarily wants to do (front-end development and design), who he wants to work with (ambitious people) and defined his creative style summed up in five words: simplicity, clarity, distinctness, uncomplicated and accessible.
Henrik set up two main purposes for project: it was supposed to be fun and developing. No hard deadlines (though it might have been good), no demands, no musts, simply no pressure.
Why create a portfolio if it's not fun? Last time Henrik made a portfolio, he didn't had fun, he put too much pressure on himself. He wanted to deliver something amazing although he wasn't very experienced. This time, he wanted his portfolio to be a fun thing, and it sure has been.
When creating a portfolio, there are literally "no strings attached", you decide what to aim for and it's an amazing opportunity to learn stuff. Henrik wanted to learn things during the entire process – from strategy to design and development, and he has.
At first, wireframes felt a bit “too serious”, but they helped Henrik to map up functionality and prioritise what was important and what wasn't. It gave him a preview of what type of components that was needed, and realised he needed a flexible content management system that enabled him to build dynamic pages with ease.
Design and branding
Wireframes done, Henrik moved on to work on high-fidelity sketches, aiming to find a visual expression that conveyed what he was aiming for, something simple, clear, distinct, uncomplicated and accessible.
Logotype and colors
Go bold or play it safe? Henrik's intention was to stand out without making noise, needless to say, difficult to accomplish. Challenge accepted, he kept things simple, choose a monochrome color palette and clean layout that would let content shine. With the logo he aimed for something spectacular, but ended up using a simple and clean 'h' letter mark.
Henrik thinks it's well worth to spend time on typography, something he thinks influences the overall look and feel. As with the colors, he ended up choosing a simple but clear geometric sans serif font as primary font – Neutrif Studio. To add a bit of contrast and "techy" touch to the project, Roboto Mono was selected as secondary font.
With all visuals in place, work began on high fidelity sketches, in search for something that just "feels right". Although not perfect, Henrik had found a type of layout and expression he liked, thanks to those early rough sketches made in 2018.
The level of detail grew as the number of sketches increased. At a point when Henrik felt he had what he looked for, the refinement phase came to an end. Every detail wasn't there, but the overall feel was, so some details had to be sort out during development.
02 – yarn global add gatsby-cli
Looking back, this command is a big reason that this project kicked off. Up until this point, Henrik wasn't sure how the site was going to be built. By testing Gatsby, checking out the file structure and fiddle around a little, he came to realise that the site should be built with it.
03 – Choosing how to work with content
An initial thought was to build and render pages using markdown files. While this seemed handy at first, it would probably be a bit cumbersome in the long run. The end goal was to be able to build dynamic pages like you do with a classic CMS. A headless CMS was on Henrik's mind, but with no prior experience, that seemed a bit ambitious?
04 – Exploring headless CMS:es
Now we're far outside the comfort zone, a headless CMS would clearly be a perfect addition to this project, but how does it even work? The search for a perfect fit began, Henrik tested Contentful, but kept searching. He bumped into Prismic which seemed perfect, but trouble with fetching content made him hesitate. Later he found Strapi, which he used for a while, but after having found Sanity, he hasn't looked elsewhere.
05 – Integrating Headless CMS with Gatsby
With no prior experience, this was probably the toughest part of the project. Strapi was a bit challenging to set up, but most things has worked like a charm. Henrik learned more, watched tutorials, read documentation and joined the Strapi Slack channel, and things was under way. As he later swapped to Sanity, his experience was that Sanity was way smoother to setup and maintain compared to Strapi.
06 – Realising the design using code
The moment Henrik had been waiting for arrived. A lot of effort was put into preparatory work, but the fun part is of course when things "come alive". Development went smooth most of the time, pages took shape and a whole began to manifest itself little by little.
07 – Creating content
Creating content takes time, Henrik has realised in retrospect. When you think you're done, things probably have to be rewritten one or two times, especially if English isn't your native language, another lesson learned.
08 – Launching the site
Around six months after testing Gatsby for the first time, the site is finally launched. It's a big moment for Henrik, after spending countless hours in front of the computer, many of them scratching his head, but most of them enjoying creating this portfolio. Thanks for reading.