# Entwickler-Portfolio gestalten: eine Seite mit Geschmack

[Canonical HTML page](https://gradiently.design/de/guide/developer-portfolio-design)

Ein Entwickler-Portfolio wird an dem Code gemessen, den du verlinkst, und an der Sorgfalt, die man sieht. Hier sind Struktur, ein Hero-Hintergrund zum Einfügen, schnell lesbare Projektkarten und Link-Vorschauen, die fertig aussehen.

## The short version

- Ein starkes Entwickler-Portfolio hat vier Teile: einen kurzen Hero, der sagt, was du baust, drei bis sechs Projektkarten, einen kurzen Über-mich-Teil und einen einfachen Weg zur Kontaktaufnahme.
- Ein Hero-Hintergrund aus geschichteten CSS-Verläufen lädt sofort und zeigt visuellen Geschmack ohne schweres Bild.
- Jede Projektkarte sollte das Problem, das Gebaute und das Ergebnis nennen, mit Links zum Live-Projekt und zum Code.
- Ein Open-Graph-Bild in 1200×630 lässt deinen Portfolio-Link fertig aussehen, wenn er in Bewerbungen, Chats und Social-Posts geteilt wird.
- Wenige, besser erklärte Projekte ergeben ein stärkeres Portfolio als ein langes Raster aus Tutorials.

Ein gutes **Entwickler-Portfolio** ist eine kleine, schnelle Seite mit vier Teilen: ein Hero, der in einer Zeile sagt, was du baust, drei bis sechs Projektkarten, die das Problem und deinen Anteil an der Lösung erklären, ein kurzer Über-mich-Teil und ein Kontaktlink. Geschmack zeigt sich im Detail: ein ruhiger Hero-Hintergrund, einheitliche Karten, lesbare Schrift und eine Link-Vorschau, die fertig aussieht, wenn ein Recruiter deine URL in einen Bewerbungskanal einfügt. Du brauchst keine Framework-Schau. Du brauchst eine Seite, der man ansieht, dass sie gepflegt wird.

## Die Struktur eines Entwickler-Portfolios

| Abschnitt | Was er leistet | Halte ihn bei |
| --- | --- | --- |
| Hero | Dein Name und was du baust | Eine Zeile, ein stützender Satz |
| Projekte | Beweis, dass du liefern kannst | Drei bis sechs Karten |
| Über mich | Wie du arbeitest, was du als Nächstes willst | Ein kurzer Absatz |
| Artikel oder Vorträge | Zeigt, wie du denkst (optional) | Drei Links |
| Kontakt | Macht den nächsten Schritt leicht | E-Mail, GitHub, LinkedIn |

Eine Seite genügt den meisten Entwicklern. Füge Projektseiten nur für Arbeiten hinzu, die eine längere Geschichte verdienen.

Sage, was du baust, nicht, was du bist. „Ich baue schnelle Checkout-Abläufe für Onlineshops“ sagt einem Leser mehr als „Full-Stack-Entwickler“. Wenn du am Anfang deiner Laufbahn stehst, ist „Ich baue barrierefreie Web-Apps mit React und Postgres“ ehrlich und konkret. [Hero-Bereich gestalten](https://gradiently.design/de/guide/hero-section-design) erklärt mehr zum Schreiben dieser ersten Zeile.

## Ein Hero-Hintergrund, der Geschmack zeigt

Viele Portfolios nutzen entweder eine flache weiße Seite oder einen schweren animierten Hintergrund, der alles andere verzögert. Ein Mittelweg ist ein geschichteter CSS-Verlauf: zwei oder drei weiche radiale Flächen über dunklem oder hellem Grund. Das sind ein paar Zeilen Code, ohne Netzwerkkosten, und es wirkt trotzdem durchdacht. [Website-Hero-Hintergrund](https://gradiently.design/de/guide/website-hero-background) und [CSS-Mesh-Verlauf](https://gradiently.design/de/guide/css-mesh-gradient) gehen weiter.

Tiefer Indigo-Hero-Grund: `radial-gradient(ellipse at 20% 15%, #3b2a8f 0%, #0e1020 55%, #07080f 100%)`

Die Basisebene: eine einzelne Indigo-Fläche, die in fast Schwarz ausläuft. Ruhig genug für weiße Schrift an jeder Stelle.

```css
.hero {
  min-height: 70vh;
  color: #f4f4f8;
  background:
    radial-gradient(ellipse 60% 50% at 80% 10%, rgb(56 189 248 / 0.28), transparent 70%),
    radial-gradient(ellipse 50% 60% at 15% 20%, rgb(124 58 237 / 0.45), transparent 70%),
    linear-gradient(180deg, #0e1020 0%, #07080f 100%);
}

.hero h1 {
  font-size: clamp(2.25rem, 5vw, 4rem);
  line-height: 1.05;
  max-width: 18ch;
}
```

Ein Hero mit zwei Flächen in reinem CSS. Halte die hellste Fläche dort fern, wo die Überschrift sitzt, damit die Worte lesbar bleiben.

Wenn du Bewegung willst, animiere langsam, halte die Worte still und beachte `prefers-reduced-motion`; [Reduzierte Bewegung](https://gradiently.design/de/guide/reduced-motion) erklärt, wie. Etwas Körnung darüber verbirgt Streifenbildung bei großen dunklen Verläufen, behandelt in [CSS-Rauschtextur](https://gradiently.design/de/guide/css-noise-texture).

## Projektkarten, die Wirkung erklären

Eine Projektkarte hat Sekunden, um einen Klick zu rechtfertigen. Gib jeder dieselben vier Teile: einen Titel, ein Problem in einem Satz, was du gebaut hast und das Ergebnis, dann Links zum Live-Projekt und zum Code. Ergebnisse müssen nicht dramatisch sein. „Täglich genutzt von unserem Team mit 30 Personen“ oder „Ladezeit von 4 s auf 1,2 s gesenkt“ sind gut, wenn sie wahr und deine sind.

### Schwache Karte

- „Wetter-App“ mit einem Screenshot
- Eine Liste aus acht Technologien
- Keine Ahnung, was du selbst getan hast
- Ein toter Demo-Link

### Starke Karte

- „Rota: Schichttausch für ein Café-Team“
- Das Problem in einem Satz
- Dein Anteil und ein messbares Ergebnis
- Funktionierender Live-Link und ein aufgeräumtes Repository

```css
.projects {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 1.5rem;
}

.card {
  border-radius: 1rem;
  padding: 1.5rem;
  background: linear-gradient(160deg, #161a2e 0%, #0f1222 100%);
  border: 1px solid rgb(255 255 255 / 0.08);
}

.card img {
  aspect-ratio: 16 / 10;
  width: 100%;
  object-fit: cover;
  border-radius: 0.5rem;
}
```

Ein responsives Kartenraster. Ein festes Bildseitenverhältnis hält jede Karte gleich geformt, auch wenn Screenshots abweichen.

Screenshots wirken fertiger, wenn sie auf demselben Hintergrund stehen. Setze jeden mit etwas Abstand auf deinen Hero-Grund, statt rohe Browser-Aufnahmen verschiedener Größen zu zeigen.

## Open-Graph-Bilder für dein Portfolio

Dein Portfolio-Link wird in Bewerbungen, Recruiter-Nachrichten, Slack-Kanäle und Social-Posts eingefügt. Jeder davon zeigt das **Open-Graph-Bild** mit 1200×630 Pixeln. Eine leere Karte oder ein beschnittener Screenshot macht die Sorgfalt zunichte, die du in die Seite gesteckt hast. Erstelle eines für die Startseite und, falls du Projektseiten hast, eines pro Projekt im selben Layout. [Dynamische OG-Bilder](https://gradiently.design/de/guide/dynamic-og-images) zeigt, wie du sie zur Build-Zeit erzeugst; [Open-Graph-Bildgröße](https://gradiently.design/de/guide/open-graph-image-size) behandelt die Zuschnitte.

Ein Open-Graph-Bild im Querformat für ein Entwickler-Portfolio mit dem Namen der Entwicklerin und einer einzeiligen Beschreibung

Die Vorschau der Startseite: Name und die eine Zeile, sonst nichts.

Ein passendes Open-Graph-Bild für ein Portfolio-Projekt namens Rota auf demselben Verlauf

Eine Vorschau einer Projektseite im selben Layout und auf demselben Hintergrund.

## Über-mich- und Kontaktbereich schreiben

Halte den Über-mich-Teil bei einem kurzen Absatz in der ersten Person: was du gern baust, wie du gern arbeitest und was du als Nächstes suchst. Ein Satz über das Leben außerhalb des Codes ist in Ordnung; eine ganze Biografie nicht. Beende die Seite mit einem offensichtlichen Weg, dich zu erreichen, meist eine ausgeschriebene E-Mail-Adresse, dazu GitHub und LinkedIn. Ein Kontaktformular bringt Reibung für einen Recruiter, der deine Adresse nur in eine Nachricht kopieren will. Wenn du dich auf designnahe Stellen bewirbst, hilft [Personal Branding](https://gradiently.design/de/guide/personal-branding), Seite, Lebenslauf und Profile in einem Look zu halten.

## Kleine Details, die nach Geschmack aussehen

- **Eine Schriftfamilie**, zwei Schnitte. Eine gute Serifenlose für alles, eine Monospace nur für Code.
- **Eine Zeilenlänge von 60 bis 75 Zeichen** für Fließtext, damit Absätze angenehm zu lesen sind.
- **Echter Kontrast**: Fließtext sollte gegen seinen Hintergrund WCAG AA erfüllen.
- **Ein Favicon**, das zu den Hero-Farben passt.
- **Schnelles Laden**: Das Portfolio eines Entwicklers, das vier Sekunden zum Erscheinen braucht, sagt von selbst genug.
- **Ein dunkles und ein helles Theme** nur, wenn du beide ordentlich pflegst.

Wenn du die Vorschaubilder und Screenshot-Rahmen nicht von Hand zeichnen willst, kann Gradiently sie auf einem Mark machen, einem lebendigen Verlaufshintergrund, der deine Worte lesbar hält, und mit Pro ein Design in einem Schritt an die Link-Vorschau, einen LinkedIn-Post und einen X-Header anpassen. Es lässt sich auch mit ChatGPT und Claude verbinden, sodass du beim Schreiben der Fallstudien eine Reihe von Projektvorschauen anfordern kannst.

## FAQ

### Was gehört in ein Entwickler-Portfolio?

Ein Hero in einer Zeile dazu, was du baust, drei bis sechs Projektkarten mit Problem, Lösung und Ergebnis, ein kurzer Über-mich-Teil und Kontaktlinks. Verlinke Live-Projekte und deren Code.

### Wie viele Projekte gehören in ein Entwickler-Portfolio?

Drei bis sechs gut erklärte Projekte sind stärker als ein langes Raster. Wähle Arbeiten, die zeigen, welche Stelle du als Nächstes willst.

### Welche Größe sollte ein Open-Graph-Bild fürs Portfolio haben?

1200×630 Pixel. Halte Namen und einzeilige Beschreibung in der Mitte, damit in quadratischen Vorschauen nichts abgeschnitten wird.

### Sollte ein Entwickler-Portfolio einen animierten Hintergrund haben?

Nur, wenn er dezent ist, die Seite nicht verzögert und Einstellungen für reduzierte Bewegung beachtet. Ein geschichteter CSS-Verlauf bietet denselben Schliff bei fast keinen Leistungskosten.