Karrel V3

Karrel V3 is the latest iteration of my portfolio website. Here you can find my latest projects & thoughts. This project is more or less the recap of everything I have learned over the past 5 years.

Technologies/Frameworks used

Figma

Next.js

KirbyCMS

TailwindCSS

TypeScript

Technologies/Frameworks used

Figma

Next.js

KirbyCMS

TailwindCSS

TypeScript

Behind the scenes

How did I tackle this project?

What this website is about

You are now looking at Karrel V3. This is both my portfolio and one of my projects. On this site you will find my latest work, articles where I share what I have been learning, and what I get excited about.

This website has gone through several versions in the past years. Each version reflected where I was at that moment as a designer and developer. With this third version, I wanted to move away from building “just another nice-looking portfolio” and instead approach it as a UX project with long term strategy behind it.

In 2025 it is easy to spin up a generic portfolio in seconds. AI tools can generate a polished site for you without effort. The real challenge is to make something personal, original and sustainable. By crafting this site myself, I have full control over how it grows, how it reflects my work, and how it fits into my broader professional identity.

What you can expect on this website

Articles where I share insights
A selection of my latest projects
My resume, styled in line with this website
A live example of how I design and develop

If you want to read more about how I created the very first version of this portfolio, I wrote a blog post about it here

Karrel V3 web development service page on iPhone

Process of creating this website

I began with sketches and wireframes. This gave me the freedom to explore different layouts and navigation ideas quickly, without being distracted by colors or details. Starting in wireframes helped me focus on structure and clarity first, which is the foundation of any good UX.

Wireframes of the project page for my Karrel V3 portfolio website

Wireframe of the project detail page of my Karrel V3 portfolio website

Clickable prototype

Next, I made the wireframes clickable. By turning them into an interactive prototype, I could walk through the site as if it already existed. This allowed me to test user flows early and spot any confusing steps before writing a single line of code. You can try the prototype here

Component library

Once the structure worked, I created a component library based on atomic design principles. Every element, from the smallest button to complete layouts, was turned into a reusable piece. This approach kept the design consistent and saved time during development, but more importantly it gave me a system I can keep building on in the future.

CMS blocks

Alongside the components, I built CMS blocks that matched the same atomic structure. This meant I could design and rearrange pages rapidly in Figma and later in the CMS, while keeping a consistent look and feel. The CMS became more than just a content tool, it became a design extension.

Final designs

With the system in place, I worked on the final designs. The goal was not just to make it visually appealing, but to make it flexible and sustainable. The website had to present my work clearly, but also be able to grow with me in the coming years.

Resume

As a finishing touch, I made sure my resume followed the same design system. This way, every interaction with my work feels part of a single identity. Download my resume here

Why this process mattered

Each step had a clear purpose. Wireframes and prototypes saved time by revealing problems early. The component library and CMS blocks made the design scalable, so I can keep evolving the site without starting over. The final designs and resume tie everything together, showing that this is not just a portfolio but a long-term personal product.

Next project

Questions or just want to connect?

Don't hesitate to send me a message.