My New Kickass Portfolio Website

mokkapps profile image Michael Hoffmann ・1 min read

Based on this nice dev.to post

I decided to make a complete rewrite and redesign of my portfolio website.

This linked post includes all the relevant reasons why a web developer should create his own unique portfolio website. Some of the main reasons which encouraged me to do the refactoring:

  • Show my creativity and make a website that is a true expression of myself
  • Design as much as possible myself without using pre-designed templates
  • Make the site as fast and accessible as possible
  • Provide a foundation to make the website easily extendable and adjustable

Here you can see a screenshot of my new website:

Website Screenshot

And these are the latest Lighthouse results:

Lighthouse Results

I described my previous website setup in this post:

Let me know what you think about it!

Posted on by:

mokkapps profile

Michael Hoffmann


Freelance software engineer from Germany with focus on Angular


Editor guide

The icons at the top are a bit confusing without any label context. You might want to either add a title attribute to the icons (so I can long-hover over them to know what they are) or add label text somewhere near the icon. Other than that, looks great, especially on mobile!


Thanks! Oops, my fault that I forgot to add the title attribute 😲 will fix it


You probably want to consider something that works for mobile too since I happen to be viewing the website on it now :)

I added a visible label on mobile devices ;-)


How’d you like working with Gatsby? I’ve found it very pleasant in my dabbles.


I totally loved it. I love working with React and Gatsby makes it very easy to handle all static page relevant stuff.

Especially querying pages and posts via GraphQL, the plugin system as well as the performant image loading via gatsby-image are amazing features.

Short story: I ❤️ it!


Why do you use percentages to indicate your skills?

Also the link to dev.to has no icon. (on mobile)


As described in

I prefer a graphical representation of my skills. The percentage number is not important in this case. Maybe I remove it, I will think about it.

Which mobile browser do you use?


How can you rate your skills as a percentage though? What is 100% in this scenario? How do you know how close you are to this mythical, theoretical 100%? Who provides this score? How do you test yourself to come out with a score? Is it just knowing the standard library for any given language or competency in using it?

Of course, this is problematic and not a reliable indicator.

But it is definitely better than a list of buzzwords:

Java, JavaScript, React, Angular

Do you know a better way to visualize skills?

Personally, as a programmer, I don't like visualisation in and of itself. It seems that whatever approach you use is still implying a visual ranking or relationship of skill proficiency based on size, colour etc. which brings with it the problems of measurement I described.

Maybe it's appropriate in the portfolio and/or CV of a designer. I'm glad you included a numerical value in a div for screen readers though :)

But listing things in order is my preferred approach. Added benefit on a CV is reordering items as necessary to appear a better candidate for different job roles. If it was my site I'd list them in order of proficiency and show an image of the technologies logo on the left.

Thanks for your explanation, sounds reasonable. I will think about it and maybe change it ;-)

Changed it based on your suggestion and I am very happy with the result:

Thanks for the helpful discussion!


I couldn't reproduce it. It was on the brave browser.

The SVG is loaded via a CDN maybe it hasn't been loaded yet


Without JavaScript enabled, your site says "OKKAPPS" and the screenshots on the start page are all blurry for no apparent reason.


This site heavily relies on Gatsby and therefore on React. Disabling JavaScript disables React components, slows down page transitions, prevents service workers from preloading page data, etc.

So this is somehow a predicted behaviour. Do you think supporting disabled JS on websites is nowadays still required?


Yes, it is - it even is more than ever before, because of increased malvertising.

A website that does not display text or images properly if you don't allow its creator to run code on your computer is broken.

Ok, thanks for your explanation. I understand your point and I add it to my Todo list but currently with a lower priority .