Skip to main content
Website

Henrik's portfolio

About Henrik's portfolio

The thoughts on a new portfolio has bee going on in Henrik's mind since he last launched a portfolio back in 2016. Some years later he put pen to paper and the project took off.

What Henrik did

Front-end development, back-end development, accessibility, art direction, web design & SEO

Technologies & frameworks

Gatsby, React/JSX, HTML, CSS (Tailwind CSS), Strapi, Netlify/Heroku (Hosting) & GSAP

Type of project

Website

Timeframe

2018 - current

Early on

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.

Defining Henrik

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.

Purpose

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.

Fun

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.

Developing

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.

Wireframes

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 .

Typography

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.

Sketches

With all visuals in place, work began on high fidelity sketches, in search for something that just "feels right". Although not perfect, Henrik a the type of layout and expression he liked, thanks to those early rough sketches made in 2018.

Refining

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.

Development

At this point, "only" the development remained. Initially, Henrik figured WordPress would be the CMS to go for, but during 2019 he had discovered Gatsby. Fast forward a few months and Henrik suddenly was involved in building a search application using React, something that made him even more interested in the JavaScript ecosystem.
A summary of how Henrik's portfolio was built

01 – Learning more JavaScript

With little experience of JavaScript, Henrik needed to improve his skills, he bought a course on Udemy – The complete Javascript course by Jonas Schmedtmann. During spring Henrik spent a lot of time to get a better grasp of JavaScript basics.

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, and hasn't looked elsewhere since.

05 – Integrating Strapi 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. Step by step, Henrik learned more, watched tutorials, read documentation and joined the Strapi Slack channel, and things was under way.

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.