Entwickler-Portfolio mit React, Vite & Tailwind: Herausstechen

Was Ihr Portfolio über Sie sagt, bevor Sie ein Wort gesagt haben

Ein Recruiter verbringt durchschnittlich 6 Sekunden mit einem Lebenslauf. Bei einem Online-Portfolio ist es noch weniger — es sei denn, etwas fällt auf.

Die meisten Entwickler-Portfolios sehen gleich aus. Gleiche Struktur. Gleicher “Über mich”-Bereich. Gleiche Liste von Fähigkeiten in bunten Badges. Gleiches Kontaktformular am Seitenende. Wenn Sie ein unverändertes generisches Template verwenden, stechen Sie nicht heraus — Sie gehen in der Masse unter.

Die eigentliche Frage: Wie baut man ein Portfolio-Template, das professionell bleibt, schnell anpassbar ist und dazu einlädt, bis ganz nach unten zu scrollen?

Folgendes haben wir beim Aufbau und der Industrialisierung von Frontend-Projekten mit React, Vite und Tailwind gelernt. Technische Entscheidungen, vermiedene Fehler, Muster, die wirklich funktionieren.

---

Warum React + Vite + Tailwind der Stack ist, der 2025 Sinn ergibt

Das ist kein Hype-Stack. Es ist ein pragmatischer Stack.

React für die Komposierbarkeit. Ein Portfolio ist eine Sammlung wiederverwendbarer Abschnitte: Hero, Projekte, Fähigkeiten, Kontakt. React zwingt Sie dazu, in Komponenten zu denken — und das ist genau das, was man für ein anpassbares Template braucht.

Vite für die Geschwindigkeit. Die Startzeit in der Entwicklung ist im Vergleich zu Create React App nahezu sofortig. Reaktives Hot Module Replacement, optimierter Production-Build, keinerlei unnötige Konfiguration. Bei einem Solo-Projekt wie einem Portfolio zählt jede Minute Reibung.

Tailwind CSS für Styling-Effizienz. Man muss nicht zwischen einer .jsx-Datei und einer .css-Datei für jede Komponente jonglieren. Die Utility-Klassen befinden sich direkt im Markup. Ergebnis: Man sieht den Stil an derselben Stelle wie die Struktur. Anpassungen erfolgen durch das Ändern einiger Werte in tailwind.config.js, nicht durch das Suchen nach CSS-Variablen, die über 12 Dateien verteilt sind.

Die Kombination der drei ergibt einen reibungslosen Entwicklungs-Workflow, ein leichtes finales Bundle und eine leicht wartbare oder übertragbare Basis. Für eine inhaltsorientiertere Showcase-Website ist eine Alternative wie Astro und sein Zero-JS-by-default-Ansatz ebenfalls einen Blick wert — jeder Stack hat sein eigenes Spielfeld.

---

Projektarchitektur: die Entscheidungen, die alles verändern

Die erste Falle bei einem Portfolio-Template ist es, alles in App.jsx zu stecken. Eine 800-Zeilen-Datei, in der alles vermischt ist — Daten, Logik, Rendering. Unmöglich zu warten. Unmöglich anzupassen, ohne alles zu zerstören.

Die funktionierende Struktur sieht so aus:

src/
├── components/       # Wiederverwendbare UI-Komponenten
├── sections/         # Seitenabschnitte (Hero, Projects, usw.)
├── data/             # Konfigurationsdateien (JSON oder JS)
├── hooks/            # Custom Hooks (useDarkMode, useScrollSpy...)
└── assets/           # Bilder, Icons

Die Trennung von Daten und Komponenten ist nicht verhandelbar.

Die gesamte Anpassung muss über die Dateien in data/ laufen. Name, Titel, Projekte, Links zu sozialen Netzwerken, Fähigkeiten — alles in einer config.js oder portfolio.json-Datei. Jemand, der Ihr Template anpassen möchte, sollte niemals eine React-Komponente anfassen müssen.

Das ist der Unterschied zwischen einem Template, das Menschen wirklich verwenden, und einem, das sie nach 20 Minuten Frustration aufgeben.

Konkretes Beispiel einer Konfigurationsdatei

// src/data/config.js
export const siteConfig = {
  name: "Marie Dupont",
  title: "Full-Stack-Entwicklerin",
  location: "Caen, Normandie",
  email: "contact@mariedupont.dev",
  bio: "Ich baue schnelle und zugängliche Interfaces.",
  social: {
    github: "https://github.com/mariedupont",
    linkedin: "https://linkedin.com/in/mariedupont"
  }
}

Sauber. Lesbar. In 2 Minuten änderbar, ohne den React-Code anzufassen.

---

Dark Mode: Implementierung ohne neue Probleme

Der Dark Mode wird erwartet. Bei einem Tech-Portfolio ist sein Fehlen ein negatives Signal.

Aber seine Implementierung mit Tailwind erfordert von Anfang an eine Architekturentscheidung: Strategie class oder Strategie media.

Die media-Strategie folgt automatisch den Systemeinstellungen. Einfach, aber man verliert die Benutzerkontrolle — kein Toggle möglich.

Die class-Strategie ist der richtige Ansatz für ein Portfolio. Man fügt die Klasse dark am <html>-Element hinzu oder entfernt sie, und Tailwind wendet die dark:-Varianten an. Der Benutzer kann manuell umschalten, und die Präferenz wird in localStorage gespeichert.

// src/hooks/useDarkMode.js
import { useState, useEffect } from 'react'

export function useDarkMode() {
  const [isDark, setIsDark] = useState(() => {
    return localStorage.getItem('theme') === 'dark' ||
      window.matchMedia('(prefers-color-scheme: dark)').matches
  })

  useEffect(() => {
    document.documentElement.classList.toggle('dark', isDark)
    localStorage.setItem('theme', isDark ? 'dark' : 'light')
  }, [isDark])

  return [isDark, setIsDark]
}

Dieser Hook tut genau das, was nötig ist. Nicht mehr. Das ist das Prinzip: kein Over-Engineering.

In tailwind.config.js aktivieren Sie:

darkMode: 'class'

Und in Ihren Komponenten erledigen die dark:-Klassen den Rest:

<section className="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">

---

Responsivität: Mobile-First wirklich denken

“Mobile-First” ist ein Prinzip, das alle kennen und das die Hälfte der Entwickler falsch herum anwendet.

Mit Tailwind ist Mobile-First konkret: Man schreibt die Basisstile für mobile Geräte, dann fügt man mit den Präfixen sm:, md:, lg: Breakpoints für größere Bildschirme hinzu.

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

Eine wiederkehrende Falle: Bilder. Ein 1920px-Hero-Bild, das auf Mobile geladen wird, sind 3 verlorene Sekunden Ladezeit. Verwenden Sie systematisch das WebP-Format und nutzen Sie die <picture>-Komponente oder srcSet-Props, um die richtige Größe für den richtigen Bildschirm auszuliefern.

Bei einem Portfolio ist Performance auch eine Demonstration von Kompetenzen. Ein Lighthouse-Score unter 90 ist ein Argument gegen Sie. Die Trends im Webdesign und modernem CSS zeigen übrigens, wie man gepflegte Effekte erzielt, ohne das Rendering zu belasten.

“Die Geschwindigkeit einer Website ist nicht nur ein technisches Kriterium — es ist ein Geschäftsargument. Google misst es, Nutzer spüren es, und Ihre potenziellen Kunden ziehen Schlüsse über Ihre Seriosität.” — Was wir unseren Kunden bei GDM-Pixel seit 15 Jahren sagen.

---

Die klassischen Fehler, die wir zu oft sehen

Nach der Prüfung und Refaktorierung von Dutzenden von Frontend-Projekten tauchen immer dieselben Fehler auf.

Animation um der Animation willen. Übergänge an jedem Element, Scroll-Effekte überall, Partikel im Hintergrund. Ergebnis: Das Portfolio ist langsam, ablenkend und erweckt den Eindruck, dass der Entwickler keine Entscheidungen treffen kann. Weniger ist mehr. Eine gut platzierte Animation ist mehr wert als 10 zufällige.

Hartcodierte Daten in Komponenten. Das haben wir bereits erwähnt, aber es ist so häufig, dass es eine Wiederholung verdient. Wenn Ihr Titel direkt im JSX der Hero-Komponente steht, ist Ihr Template kein Template — es ist eine verkleidete persönliche Website.

Kein State-Management für das Kontaktformular. Ein Formular ohne visuelles Feedback (Laden, Erfolg, Fehler) ist schlechte UX. Verwenden Sie useState für die Verwaltung der Formularzustände. Integrieren Sie einen Dienst wie Resend, EmailJS oder Formspree für den Versand — kein eigenes Backend nötig.

Mangelnde Barrierefreiheit. Fehlende Aria-Labels bei Icons, unzureichender Kontrast zwischen Text und Hintergrund, unmögliche Tastaturnavigation. Bei einem Entwickler-Portfolio ist das besonders auffällig — und besonders schlecht angesehen von jemandem, der einstellt.

---

Schnelle Anpassung: was konfigurierbar sein muss

Ein gutes Portfolio-Template sollte es jemandem ermöglichen, es in weniger als einer Stunde vollständig anzupassen. Folgendes muss unbedingt in den Konfigurationsdateien stehen, nicht im Code:

Die Hauptfarbpalette. In tailwind.config.js eine primary-Farbe definieren, die sich überall verbreitet:

theme: {
  extend: {
    colors: {
      primary: '#6366f1', // Ändern Sie nur diese Zeile
    }
  }
}

Die Schriften. Google Fonts in index.css importiert, in der Tailwind-Config referenziert. Eine Schrift ändern = zwei Zeilen geändert.

Projekte, Fähigkeiten, Erfahrungen. Alles in Arrays in data/. Ein Projekt hinzufügen = ein Objekt zu einem Array hinzufügen. Nicht mehr.

---

Was Sie dieser Projekttyp wirklich lehrt

Ein Portfolio-Template mit diesem Stack zu bauen ist eine hervorragende Disziplinübung.

Man ist gezwungen, Architekturentscheidungen bei einem kleinen Projekt zu treffen. Separation of Concerns, State-Management, Barrierefreiheit, Performance — alles in einem überschaubaren Umfang. Das ist das beste Lernfeld.

Drei konkrete Erkenntnisse:

1. Konfiguration vor Code. Je mehr Ihr Template ohne Änderungen am React-Code konfigurierbar ist, desto mehr Wert hat es. Für Sie und für andere.

2. Performance ist nicht optional. Bei einem Tech-Portfolio ist eine langsame Website ein direktes Gegenargument zu Ihren Kompetenzen. Vite + optimierte Bilder + minimales Code-Splitting ist die Grundlage.

3. Dark Mode und Responsivität sind keine Extras. Es sind Grundanforderungen im Jahr 2025. Sie von Anfang an zu implementieren kostet weniger, als sie nachträglich hinzuzufügen.

---

Fazit: Ein Template ist ein Produkt — behandeln Sie es als solches

Ein Entwickler-Portfolio ist nicht nur ein Schaufenster. Es ist eine aktive Demonstration Ihrer technischen Entscheidungen, Ihres Organisationssinns und Ihrer Liebe zum Detail.

Mit React, Vite und Tailwind haben Sie alle Werkzeuge, um etwas Sauberes, Schnelles und wirklich Anpassbares zu liefern. Der Stack ist nicht die Schwierigkeit — es sind die Architektur und die Design-System-Entscheidungen, die den Unterschied machen.

Bei GDM-Pixel wenden wir dieselben Prinzipien in unseren Kundenprojekten an: Datentrennung, wiederverwendbare Komponenten, zentralisierte Konfiguration. Was bei einem Portfolio funktioniert, funktioniert auch bei einer Geschäftsanwendung, und es ist genau die Sorgfalt, die wir in jede professionelle Website-Erstellung stecken. Deshalb haben wir unseren Workflow um diese Muster industrialisiert.

Arbeiten Sie an einem Frontend-Projekt und möchten Ihren Stack strukturieren oder Ihre Produktion beschleunigen? Sprechen Sie mit uns — wir schauen uns konkret an, was in Ihrem Workflow optimiert werden kann, ohne Ihnen einen vollständigen Neuaufbau zu verkaufen, wenn das nicht nötig ist.

---

Quellen und Ressourcen zum Vertiefen: Offizielle Vite-Dokumentation, Tailwind CSS Dark Mode, React-Dokumentation — Thinking in React