DEV Community

Cover image for The Relaunch of my Portfolio for 2021
Kevin Woblick
Kevin Woblick

Posted on

1

The Relaunch of my Portfolio for 2021

My old portfolio at Kovah.de has not received any big updates for years. The design was basically the same. I had fancy browser mockups which contained full screenshots of the websites I made. A few weeks ago I decided that it was about time to relaunch my website together with a new logo.

The new Logo

Logo of Kevin Woblick

The logo represents my primary profession as being a Web Developer: the lower/greater signs (< and >) are used in HTML, so I wanted them to be the main part of my logo. I tried various other shapes, variations and also colors. But in the end, I found this new logo the most beautiful thing I've created.

The font used for the logotype and the website is called Nexa, which I bought years ago.

The new Website

The new website was built many years ago and the basic layout, the colors and the overall design didn't change much in the past years. The new version comes with fresher colors, modern soft gradients and bold typography.

While the previous version was built with Hugo as the static site generator, I decided to give Eleventy a chance as I am not that satisfied with Hugo. Instead of writing CSS on my own, 99% of the site is built with Tailwind CSS. Only a few effects are custom styles.

There is not a single line of Javascript.

Screenshot of kovah.de

Performance-wise, I am really satisfied with the results, which is not a miracle if you keep in mind that the site is HTML and CSS with some images and a custom font. In fact, images and the fonts are responsible for 90% of the size of the site. However, fonts contain only a small subset of all available characters in the Latin charset. Images are delivered as jpg, webp and avif so the browser can pick the most suitable format.

Googles Lighthouse testifies the performance with a solid 100. 🥳


If you have any questions, feel free to ask!

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (2)

Collapse
 
eliancodes profile image
Elian Van Cutsem

Very nice, looks great! Doesn't the repeating classes annoy you? cfr your projects are all exactly the same, still you'll need to edit all of them if you decide to make a change (except if you're using a framework that loops over them ofcourse)

Collapse
 
kovah profile image
Kevin Woblick

Thank you for the feedback!
Actually, all projects (the big cards and small ones) are included via a template like this: {% include content/project-card, projectTitle: 'LinkAce', imageSrc: 'src/assets/images/projects/linkace.jpg', imageAlt: 'LinkAce screenshot', ...%}. Inside the template, the project card is filled with the information. So I only have 1 place to edit the classes.

Cloudinary image

Zoom pan, gen fill, restore, overlay, upscale, crop, resize...

Chain advanced transformations through a set of image and video APIs while optimizing assets by 90%.

Explore

AWS GenAI LIVE!

GenAI LIVE! is a dynamic live-streamed show exploring how AWS and our partners are helping organizations unlock real value with generative AI.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️