Redesigning my portfolio for the nth-time()

Articles|HÃ¥kon Underbakke | about 3 years ago

My portfolio is, at heart, just a big hobby project. I love tinkering with the design, and it’s a nice workplace to try out new methods and designs.

This time around, the main reason for redesigning (or rather recreating) my portfolio was the code-base. After working at Idean for several months with other colleagues in the front end industry – I’ve developed more of a preference on how I want my codebase to look.

So, without further ado, my redesign:

The stack

  • React
  • Typescript
  • styled-components

Syntax highlighting

I have previously used Highlight.js, but this time around I decided to go for Prism.js. It catches which language it is by looking at the closest parent .language-xxx class. (.language-js). I’ve set language-js as the standard, and whenever I add code-blocks in different languages I just supply them with the correct class through WordPress.

useEffect(() => {
    if (item) {
      (window as any).Prism.highlightAll();
    }
}, [item]);

Mouse tracking button

I wrote an article about this over here.

Accessibility

The website is built to work 100% with just a keyboard – and the contrasts are WCAG tested with AAA results. I’m constantly trying to fine tune and fix special case scenarios related to accessibility.

Code

You can find the source for this website publicly at Github.