Portfolio Webseite

NextJS
React
TypeScript
TailwindCSS

Diese Portfolio-Website ist mein persönliches Spielfeld, auf dem ich Neugier und berufliche Orientierung miteinander verbinde. Ohne große Vorerfahrung im Web-Stack wollte ich herausfinden, wie weit ich mit modernen Tools wie Next JS 15, React, TypeScript und Tailwind CSS v4 komme – und zugleich eine Seite bauen, die Besucher:innen in wenigen Klicks verstehen lässt, wer ich bin, woran ich arbeite und was ich als Nächstes lernen möchte. Neben klassischen Inhalten wie Projektbeschreibungen, Skill-Diagrammen und grafischem Lebenslauf bietet die Seite kleine Spielereien: Ein Sprachschalter wechselt nahtlos zwischen Deutsch und Englisch, der Theme-Toggle passt sich an helle oder dunkle Vorlieben an, ein Farbcycler stellt sechs Akzentfarben zur Wahl und eine vCard lässt sich per QR-Code direkt auf das Smartphone übernehmen.

Aufgabe

Nach dem Informatik-Bachelor wollte ich einerseits einen authentischen Anlaufpunkt für Bewerbungen schaffen, ohne mich schon auf eine konkrete Rolle – Frontend, Backend oder etwas dazwischen – festzulegen. Andererseits reizte mich die Aufgabe, mir mit einem greifbaren Projekt selbst zu beweisen, dass ich neue Technologien schnell verstehe und bis zum fertigen Produkt durchziehen kann. Die Website sollte deshalb mehrere Bedürfnisse vereinen. Sie musste meine Persönlichkeit wiederspiegeln, also Platz für kleine Details wie eine „Dies-oder-Das“-Komponente bieten. Sie sollte zweisprachig sein, damit internationale Kontakte nicht ausgeschlossen sind, und sie sollte rechtliche Anforderungen wie Impressum und Datenschutz erfüllen. Für den Bewerbungsprozess brauchte ich außerdem einen Weg, meinen Lebenslauf ansprechend zu präsentieren: Einmal in LaTeX gesetzte PDF-Versionen auf Deutsch und Englisch sollten sich abhängig von der eingestellten Sprache herunterladen lassen. Schließlich wollte ich den Kontakt so einfach wie möglich machen – per Mailto-Links mit vordefiniertem Betreff, per LinkedIn- oder GitHub-Profil und per QR-Code-vCard, die sich ohne Tippen einscannen oder runterladen lässt.

Umsetzung

Das Fundament bildet Next JS 15 mit dem neuen App Router. Alle Seitenbausteine – von Skill-Balkendiagrammen über Projektkarten bis zum Lebenslauf – sind als wiederverwendbare React-Komponenten konzipiert und werden von Tailwind CSS v4 per Utility-Klassen gestylt. Zwei komplette Farbpaletten für Light- und Dark-Mode stehen bereit, während ein Cycler mit sechs Akzenttönen das Farbschema flexibel anpassbar macht. Für die Internationalisierung kommt next-intl zum Einsatz: Sämtliche Texte befinden sich in de.json und en.json, sodass ein Sprachwechsel ohne Neuladen möglich ist und neue Übersetzungen nur einen JSON-Eintrag erfordern.

Daten für das Projekt-Portfolio liegen zentral in einem projects.ts-Array. Jede neue Eintragung erzeugt automatisch eine Karte auf der Übersichtsseite und eine dynamische Detailroute unter /projects/[id], sodass Inhalte ohne Codeänderung wachsen können. Interaktive Elemente verleihen der Seite Persönlichkeit: Die „Dies-oder-Das“-Komponente deckt auf Klick meine Vorlieben auf, Skill-Bars zeigen Kenntnisse und ein grafischer Lebenslauf stellt Stationen chronologisch dar.

Auf der Kontaktseite generiert eine serverseitige Funktion nach dem Button-Klick einen QR-Code für meine vCard, sodass Besuchende meine Kontaktdaten direkt aufs Telefon übernehmen können. Ergänzend erleichtern Mailto-Links mit vorbefülltem Betreff den Erstkontakt, außerdem verweisen LinkedIn- und GitHub-Buttons auf meine Profile. Für Recruiter:innen steht der Lebenslauf als PDF bereit; ein kleiner Hook erkennt die aktuelle Seitensprache und liefert automatisch die korrekte deutsche oder englische Version.

Gehostet wird das Ganze auf dem kostenlosen Vercel-Tier. Jeder Git-Push stößt eine CI-Pipeline an; die eigene Domain läuft über angepasste DNS-Einträge mit automatisch ausgestelltem TLS-Zertifikat. Besondere Aufmerksamkeit habe ich dem Design gewidmet, etwa Farbgebung in sowohl Dark- als auch Lightmode oder Platzierung von Elementen (nicht zuletzt dank Feedback von Freunden, darunter einer Freundin, die im UI/UX Design arbeitet), und Performance-Fragen durch Abwägung von Server-Side Rendering und Static Generation gelöst. Das Ergebnis ist eine wartungsarme, persönliche Plattform, die zeigt, dass ich mich gern in neue Technologien einarbeite und Spaß daran habe, Ideen bis zum sichtbaren Produkt auszuarbeiten.