Portfolio Website

  • NextJS
  • React
  • TypeScript
  • TailwindCSS
This portfolio website is my personal playground where I combine curiosity with career orientation. With little prior experience in the web stack, I wanted to see how far I could get with modern tools such as Next JS 15, React, TypeScript and Tailwind CSS v4 – and at the same time build a site that lets visitors understand in just a few clicks who I am, what I’m working on and what I want to learn next. In addition to classic content like project descriptions, skill diagrams and a graphical résumé, the site offers small gimmicks: a language switch toggles seamlessly between German and English, the theme toggle adapts to light or dark preferences, a color cycler offers six accent colors and a vCard can be transferred directly to a smartphone via QR code.

Task

After my computer-science bachelor’s degree, I wanted, on the one hand, to create an authentic point of contact for applications without already committing myself to a specific role – frontend, backend or something in between. On the other hand, I was attracted by the challenge of proving to myself with a tangible project that I can quickly grasp new technologies and see them through to a finished product. The website therefore had to unite several needs. It had to reflect my personality, so it needed room for small details such as a “this-or-that” component. It had to be bilingual so that international contacts are not excluded, and it had to meet legal requirements such as imprint and data protection. For the application process I also needed a way to present my résumé attractively: PDF versions set in LaTeX in German and English should be downloadable depending on the selected language. Finally, I wanted to make contacting me as easy as possible – via mailto links with predefined subject, via LinkedIn or GitHub profile and via QR-code vCard that can be scanned or downloaded without typing.

Approach

The foundation is Next JS 15 with the new App Router. All page building blocks – from skill bar charts and project cards to the résumé – are designed as reusable React components and styled with Tailwind CSS v4 utility classes. Two complete color palettes for light and dark mode are available, while a cycler with six accent tones makes the color scheme flexibly adjustable. For internationalization, next-intl is used: all texts reside in de.json and en.json, so a language switch is possible without reloading and new translations require only a single JSON entry.

The data for the project portfolio is stored centrally in a projects.ts array. Each new entry automatically generates a card on the overview page and a dynamic detail route under /projects/[id], so the content can grow without code changes. Interactive elements give the site personality: the “this-or-that” component reveals my preferences on click, skill bars display competencies and a graphical résumé presents stages in chronological order.

On the contact page, a server-side function generates a QR code for my vCard after the button click, so visitors can transfer my contact details directly to their phone. Additionally, mailto links with a pre-filled subject ease the initial contact, and LinkedIn and GitHub buttons point to my profiles. For recruiters, the résumé is available as a PDF; a small hook detects the current page language and automatically provides the correct German or English version.

The whole thing is hosted on the free Vercel tier. Every Git push triggers a CI pipeline; the custom domain runs via adjusted DNS entries with an automatically issued TLS certificate. I paid special attention to the design – for example the color scheme in both dark and light mode and the placement of elements (not least thanks to feedback from friends, including a friend who works in UI/UX design) – and solved performance issues by balancing server-side rendering and static generation. The result is a low-maintenance, personal platform that shows I enjoy diving into new technologies and have fun working ideas through to a visible product.