Entwickler-Portfolio gestalten: eine Seite mit Geschmack

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

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 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 und CSS-Mesh-Verlauf gehen weiter.

.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;
}

Wenn du Bewegung willst, animiere langsam, halte die Worte still und beachte prefers-reduced-motion; Reduzierte Bewegung erklärt, wie. Etwas Körnung darüber verbirgt Streifenbildung bei großen dunklen Verläufen, behandelt in CSS-Rauschtextur.

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.

.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;
}

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 zeigt, wie du sie zur Build-Zeit erzeugst; Open-Graph-Bildgröße behandelt die Zuschnitte.

Ü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, 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.