Wie ich meine Portfolio-Website mit React, Next.js und Tailwind CSS gebaut habe – Ein ehrlicher Einblick

Oder: Wie ich mich freiwillig entschieden habe, mein Gehirn in eine Schleife aus Komponenten, States und Build Errors zu schicken. Für eine Website, die wahrscheinlich nur meine Mama und ein Recruiter aus Versehen besuchen.

Ein kleiner Schritt aus der Komfortzone – und ein großer Sprung in die Hölle der Dev-Umgebungen

Nach Jahren in der WordPress-Welt, wo Themes wie Fertigpizza funktionieren und Plugins alles regeln, dachte ich: Ich möchte mal was "Richtiges" machen. Also habe ich beschlossen, meine persönliche Portfolio-Website mit React, Next.js und Tailwind CSS von Grund auf zu entwickeln. Es war eine Mischung aus viel Freude, ein bisschen Frustration und jeder Menge Lernmomente.

Warum React, Next.js und Tailwind CSS? Weil ich offensichtlich Komplexität mit Kontrolle verwechselt habe.

WordPress ist bequem. Zu bequem. Ich wollte Flexibilität, Performance, SEO und eine Seite, die nicht nach Baukasten schreit. Nebenbei häuften sich mit der Zeit Anfragen nach individuellen, performanten Lösungen, von modernen Unternehmensseiten bis hin zu komplexen SaaS-Anwendungen und Dashboards. Nachdem ich einige dieser Projekte komplett „from scratch" für Kunden umgesetzt hatte, kam mir der Gedanke: Warum nicht meine eigene Portfolioseite endlich als Lernprojekt realisieren? React, Next.js und Tailwind CSS boten die ideale Grundlage, um dynamische, SEO-optimierte und visuell überzeugende Webauftritte zu entwickeln. Das Tech-Stack ist wirklich gut. Schnell, modern, und komplett overkill für ein Portfolio, das aus fünf Seiten besteht.

Mein Background (und warum ich dachte, dass das "easy" wird)

Ich hatte schon Erfahrung mit HTML, CSS, JavaScript und arbeite sogar im Moment an einer Software für Bildbearbeitung mit Flutter. Wenn du mehr dazu erfahren möchtest, abonniere einfach meinen kostenlosen Newsletter (kein Spam, versprochen) und erhalte eine Benachrichtigung, sobald das Projekt live geht. Tailwind CSS kannte ich bereits, sowie React und Next.js. Trotzdem habe ich viel einfach ausprobiert und bin oft genug über meinen eigenen Code gestolpert, um zu lernen.

Dokumentation, Copilot und Chaos (aka: Mein neues Entwickler-Dreieck)

Die offiziellen Dokumentationen von Next.js und Tailwind CSS waren meine Bibel. Dazu kam GitHub Copilot als emotionale Support-AI. Meine Methode? Trial & Error. Und Error. Und nochmal Error. Aber irgendwann stand was auf dem Bildschirm, das nicht nach digitalem Autounfall aussah.

Die Backend-Logik selbst zu bauen war ein bisschen wie das erste Mal Steuererklärung: verwirrend, beängstigend, aber irgendwie machbar, wenn man lange genug leidet.

Was kann die Website? (Spoiler: Nicht meine Miete zahlen)

• Kontaktformular: weil Schreiben einfacher ist als Rauchzeichen.
• Newsletter-Integration: für den einen Typen, der sich wirklich anmeldet.
• Blog-Bereich: Du liest ihn gerade. Danke dafür. Wirklich.
• Bildgalerie: weil ich auch fotografiere und das irgendwie zeigen muss.
• Animationen: subtil, aber immerhin etwas Bewegung im Leben.

Die "großen" Hürden (oder: kleinere Nervenzusammenbrüche)

Kontaktformular und Newsletter

Für das Kontaktformular habe ich Nodemailer mit Gmail und für den Newsletter MailerLite verwendet. Die API-Dokumentationen habe ich durchgelesen, ein paar Einstellungen angepasst, und nach minimalem Troubleshooting lief alles, ich habs immerhin nicht mit WhatsApp-Automation gebaut.

Next.js und Tailwind CSS

Der Einstieg in Next.js mit dem neuen App Router fühlte sich anfangs wie ein komplexes Puzzle an. Die Konzepte rund um Server Components und Daten-Fetching-Strategien brachten mich kurz ins Grübeln. Ich hab's irgendwann verstanden. Oder zumindest so getan.

Ganz anders bei Tailwind CSS mit Dark Mode - das war fast schon ein Selbstläufer. Die Utility-Klassen haben es mir extrem leicht gemacht, ein responsive- und modernes Design auf Basis der Tailwind Plus Bibliothek zu entwickeln und dieses anzupassen.

Zur Verbesserung der UX kamen zusätzliche Bibliotheken wie @headlessui/react zum Einsatz. Außerdem wollte ich einige dezente Animationen integrieren - und da Google gerade das Open-Source-Designsystem Material 3 Expressive vorgestellt hatte, war das die perfekte Gelegenheit, erste Elemente daraus mit der Bibliothek @mui/material einzubinden.

GitHub: Manchmal ist Organisation leider doch besser…

GitHub hat dieses Projekt – und ehrlich gesagt, mein gesamtes Arbeitsleben – gerettet. Ich hab neue Features gebaut, alten Code zerschossen, Commits verwünscht, und dann den Stand von gestern wiederhergestellt. Tatsächlich kam das öfter vor, als mir jemand Reichweite statt Bezahlung angeboten hat.

Ich habe die Website auf Hetzner deployed, und GitHub hat den Prozess so einfach gemacht wie einen Klick auf „Push". Ein kleiner Moment des Stolzes, bevor ich gesehen habe, dass ich das Favicon vergessen habe. In meiner Agentur, Ecru Media, ist GitHub ein fester Bestandteil unseres Workflows – es hält uns organisiert und sorgt dafür, dass wir effizient zusammenarbeiten, ohne dass es zu technisch wird. #notsponsored

Warum sich das alles lohnt

Mit React, Next.js und Tailwind CSS habe ich eine Website gebastelt, die nicht nur gut aussieht, sondern auch Ergebnisse liefert:

• Blitzschnelle Performance: Dank Next.js' Static Site Generation (SSG) und Server-Side Rendering (SSR) lädt die Website in Windeseile.
• SEO-Optimierung: Meine Seite rankt. Irgendwo. Vermutlich im Darknet. Aber hey, sie rankt.
• Responsives Design: Tailwind CSS mit Dark Mode sorgt dafür, dass die Website auf jedem Gerät top aussieht.
• Flexibilität: React-Komponenten = digitale LEGO-Steine für Erwachsene mit zu viel Bildschirmzeit. Die komponentenbasierte Architektur macht Updates und neue Features extrem einfach.

Neben dem Verfassen von Blog-Katastrophen bauen wir tatsächlich auch Websites.

Wir bauen Webauftritte, die nicht nur gut aussehen, sondern auch was bringen. Also Leads, Umsatz, Bekanntheit. Kein Hokuspokus. Sondern:

• Webentwicklung (React, Next.js, WordPress – alles dabei)
• UI/UX-Design (schön UND sinnvoll)
• SEO & Content (sichtbar werden ohne cringe Keywords)
• Foto & Video (nicht von Canva, sondern von echten Menschen)

Fazit: Tu es. Oder lass es. Aber wenn du's tust, mach's richtig.

Der Aufbau meiner Portfolio-Website war eine Reise voller kleiner Stolpersteine, aber auch mit unglaublich viel Spaß. Ich habe gelernt, wie viel mehr moderne Technologien wie React, Next.js und Tailwind CSS können als WordPress und AI wie GitHub Copilot, Lovable, etc. den Einstieg inzwischen unglaublich einfach machen – und ich bin froh, den Sprung gewagt zu haben. Ich musste oft genug im Code herumbasteln, bis es geklappt hat, aber genau das macht es aus.

Wenn du überlegst, deine eigene Website zu bauen oder eine SaaS-App zu starten: Go for it. Oder lass uns das für dich übernehmen. Wir haben das Internet nicht erfunden. Aber wir reparieren es täglich.

👉 ecrumedia.at/kontakt – Klick. Schreib. Lass uns dein Projekt besser machen als deine letzte Tinder-Bio.