About Henrik's portfolio
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
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.
Design and branding
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, 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.