Case Study

Professional Portfolio

Abstract

I designed, developed and deployed my professional website to have a centralized hub for all my projects (private, client, NDA client, etc.), case studies and articles I worked on over the years. The primary goal was to create a modern, easily scalable, SEO-friendly portfolio website that was also easy to maintain.

The first version was developed over two weeks in late 2025. After reworking the first version and replacing all SCSS classes with easily maintainable and scalable Tailwind CSS classes while also reworking the UI/UX, the second version was published in early January 2026. The site leverages the power of the Next.js App Router, TypeScript, React (and custom-made React components) and Static Site Generation (SSG) to achieve near-perfect Lighthouse scores while allowing for quick navigation throughout the website. Key architectural features include a global state solution using React Context for the website modal and a dynamic content pipeline for case studies using MDX and Gray Matter.

Introduction

This project was developed to serve as a centralized hub and to display my projects, articles and case studies in a modern way using the latest stable technologies in web development. A secondary goal of this website was to serve as a showcase to display my skills in an easy-to-access manner while creating a high-performance web application.

However, the primary goal was to design, develop and deploy a website that has near-perfect Lighthouse scores of >95 across all metrics, has full accessibility (WCAG 2.1), is easily maintainable and can be scaled to accommodate future articles and case studies.

Choosing the Technology

Image is Loading

Since the goals were already defined, it was easy to decide which technologies to use to design, develop and deploy the website.

Figma was used to create a first working design of the project. Elements like colors, images, typography and the icon were created inside the moodboard. The initial wireframe was enough to create a very early MVP of the project.

Since I have already worked with Next.js in previous projects (both client projects and personal projects), using it was an easy decision. Initially I used Next.js 14.x, however, due to several security risks the website was updated to Next.js 15.x.

React (for the UI) and TypeScript (for compile-time type safety) were easy decisions as well, since Next.js works with both and I have used both inside previous projects.

While the first version of this website used SCSS to demonstrate proficiency in traditional CSS architecture, including methodologies like BEM and the power of pre-processors for creating maintainable, scalable style sheets, for the second version SCSS was substituted with Tailwind CSS. The core reason behind this decision was maintainability and scalability. While SCSS was a good initial decision, I noticed that the larger the project grew, the more time was wasted on maintaining the .scss files. On top of that, having both the .scss files and the .tsx files inside the file system meant that the whole project was harder to navigate. It created bloat that I did not want, hence the reason all SCSS classes were completely substituted with Tailwind CSS classes after a thorough refactor of the complete website.

MDX together with Gray Matter were chosen to allow me to write articles such as this case study in an easy format and to integrate them in a simple workflow into the Next.js website. On top of this, MDX allowed for the creation of my own components that I could then, in turn, use inside the MDX files. This gave me free reign over the complete UI of each article and case study.

Design of the Project

As mentioned before, the design of this project was primarily done inside Figma. The design itself followed standard website design practices of firstly creating a wireframe, then creating a moodboard and ultimately creating the finished first version of the website.

Image is Loading

Along with these standard design practices, there were two major branches that had to be worked on along with a couple of important design choices.

UI/UX Design

The primary goal for the UI/UX design was for the user journey to be very linear across the whole website.

Everything was supposed to be only two clicks away and most of the website could be accessed from any page through the header or the footer. The header itself was supposed to be the guide through the website, allowing visitors to navigate easily.

A special function was assigned to the Get In Touch button inside the header. When a visitor clicks it, a modal pops up with all the necessary contact information about me (email, GitHub, LinkedIn) and a direct download link to my CV. This was done so visitors could easily find my contact information. At the same time it provided an easy solution to the goal of keeping everything just two clicks away.

The overall design of the website was heavily based on the old design of my previous website (2020 to 2024). The dark blue color scheme gives a modern, futuristic feeling to the visitor. Animations such as the moving background particles, the interactive grid or the different waves across the website serve the purpose of breaking the potential quiet feeling of the website while also being a good fit for the futuristic design. The first version of the website still had a particle animation that spanned across the whole website. This was quickly removed as it created too much noise. On top of that, all animations inside the text sections of articles and case studies were removed, to allow the user to fully focus on the articles, graphics and code.

Architectural Design

A core principle every developer, including myself, follows is DRY (Don't Repeat Yourself). The same applies here.

The architecture was built on a foundation of atomic design principles. Core UI elements were developed as small, reusable and unopinionated components (Icons, Buttons, Modals). These were then composed into larger "organisms" (like the Header or project cards). This approach, combined with a clear separation of concerns between Server Components (for static content) and Client Components (for interactivity), ensures the codebase is both maintainable and performant.

A feature-first architecture was planned during the development of the second version, but was ultimately deemed not possible in the timeframe I set for the rework, due to the fact that it took quite some time to substitute all SCSS classes and files with Tailwind CSS classes.

Challenges & Solutions

During the development, there were a couple of notable challenges.

Challenge 1: Get In Touch Modal

Challenge: The very first iteration of the website had the Get In Touch modal as a component of the header itself. This created an issue, since other components outside the header, such as CTA sections, were not able to open the modal.

Solution: To allow other components on the website to open the modal, regardless of their position on the page and on the website, the modal had to be extracted from the header and placed inside a React Context. This in turn allowed every other component on the website to call and open the modal, regardless of their position.

The extracted modal architecture:

Image is Loading

Challenge 2: MDX Integration

Challenge: To write articles and case studies, MDX was the best choice. To integrate it and to add metadata for SEO at the same time while also allowing for multiple MDX folders to be maintained and to allow for Next.js to find the correct corresponding article inside the /content folder of MDX was a challenge.

Solution: The first production version of the website that was released in late October 2025 solved this issue by having a very linear structure for the MDX content, only having one folder and one uniform TypeScript file. This was not possible for the second production version, as the URL structure changed substantially throughout the project. To fix the aforementioned challenge and to increase both scalability and maintainability, specific TypeScript files were created for the corresponding MDX content types (articles.ts, case-studies.ts, legals.ts). Every content type received their own helper functions. To provide Next.js with the correct content, each type was provided with a recursive Node.js function that is fetching each article of a corresponding type inside a corresponding folder. These helper functions in turn not only allowed for Next.js to get the correct metadata and MDX content, but it also allowed me to create embla article carousels of the articles with such filters as latest, oldest and others.

The MDX content structure and helper function workflow:

Image is Loading

Deployment & Infrastructure

The first production version of the website was deployed in October 2025 on Netlify. The second production version of the website was deployed in early January 2026.

The whole CI/CD pipeline is managed through GitHub and is open source. The main branch is deploying to Netlify after each PR is checked thoroughly. During the first production deployment I made the strategic decision to host my professional website on Netlify and all of my private projects on Vercel alone for a clear separation of concerns and to have a better view of the analytic data between the different projects.

Separating the concerns also allowed me to diversify my experience with the two leading Jamstack platforms and segregates the resource usage of my private project pieces.

The CI pipeline of the website always involves new feature branching, writing precise GitHub documentation prior to each merge and after a successful merge, the CD pipeline then deploys the latest version onto Netlify.

Conclusion

Through the successful development of the website and the implementation of Next.js and the App Router, a seamless, up-to-date user experience was created. At the same time MDX was successfully implemented.

This now allows for vast possibilities for the future. One venue that is already in the planning is the creation of educational content and documentation on this website. Overall, the design and development of the website was a success.