Acht eigene Layouts für Entwickler-Portfolios mit Live-Vorschau, wofür sich jedes eignet, und eine kopierbare HTML- und CSS-Vorlage, die du kostenlos auf GitHub Pages hosten kannst.
Ein starkes Entwickler-Portfolio zeigt schnell drei Dinge: was du baust, den Beweis, dass es funktioniert, und wie man dich erreicht. Die acht Layouts unten sind eigene Beispiele zum Ansehen und Anpassen, von einer einseitigen Liste mit Fallstudien bis zu einer Website im Terminal-Stil, gefolgt von einer schlichten HTML- und CSS-Vorlage, die du noch heute veröffentlichen kannst.
Wähle ein Layout nach Ziel
Ziel
Passendes Layout
Warum
Erste Junior-Stelle
Projekt-Fallstudien
Zeigt dein Denken, nicht nur Screenshots
Freelance-Kunden
Leistungen und Ergebnisse
Stellt in den Vordergrund, was ein Kunde bekommt
Open-Source-Arbeit
Repository-Raster
Echter Code ist nur einen Klick entfernt
Frontend oder Design Engineering
Interaktive Präsentation
Die Website selbst ist der Beweis
Senior- oder Staff-Rollen
Texte zuerst
Ausführliche Beiträge zeigen Urteilsvermögen
Die meisten Listen mit Entwickler-Portfolios bestehen aus Screenshots fremder Websites, die du nicht kopieren kannst und die schnell veralten. Hier ist jedes Layout ein eigenes Wireframe, das für diese Seite gezeichnet wurde. Wechsle zwischen ihnen, um die Struktur zu sehen, lies, wann welches passt, und starte dann mit der Vorlage unten.
Wähle in der Tabelle das Ziel, das zu deinem nächsten Job oder Kunden passt.
Sieh dir das passende Layout im Umschalter an und notiere seine Abschnitte der Reihe nach.
Kopiere die Vorlage, setze deinen Namen, deine Projekte und Links ein und lösche Abschnitte, die du nicht brauchst.
Veröffentliche sie kostenlos auf GitHub Pages oder einem anderen statischen Host und verlinke sie in deinem Lebenslauf und deinen Profilen.
Drei fertige Projekte mit einer kurzen Beschreibung schlagen zwölf halbfertige.
Nenne bei jedem Projekt das Problem, deinen Anteil, den Stack und ein Ergebnis, hinter dem du stehen kannst.
Verlinke eine Live-Demo und den Quellcode; Prüfer sehen sich oft zuerst den Code an und dann die Screenshots.
Setze einen einfachen E-Mail-Link in Header und Footer, damit niemand danach suchen muss.
Prüfe dein eigenes Portfolio auf Barrierefreiheit und Geschwindigkeit, denn Prüfer tun das auch.
Häufige Fragen
Was sollte ein Entwickler-Portfolio enthalten?
Eine einzeilige Zusammenfassung dessen, was du tust, drei bis sechs Projekte mit Problem, Rolle, Stack und Links, einen kurzen Abschnitt über dich und einen klaren Weg, dich zu kontaktieren. Ein Lebenslauf zum Herunterladen und ein Bereich mit Texten sind nützliche Extras, aber keine Pflicht.
Muss ich mein Portfolio von Grund auf selbst bauen?
Nein. Personalverantwortliche interessieren sich mehr für die Projekte als dafür, ob du das Gerüst von Hand programmiert hast. Für Frontend-Rollen ist der Eigenbau ein gutes kleines Projekt, während für Backend-, Data- oder Mobile-Entwickler eine Vorlage oder ein Website-Baukasten völlig ausreicht.
Wo kann ich ein Entwickler-Portfolio kostenlos hosten?
GitHub Pages veröffentlicht HTML, CSS und JavaScript direkt aus einem Repository unter einer Adresse wie yourname.github.io. Andere statische Hosts funktionieren genauso, und du kannst später eine eigene Domain hinzufügen.
Wie viele Projekte sollte ich zeigen?
Drei bis sechs. Wähle die, die der Arbeit am nächsten kommen, die du als Nächstes machen willst, und stelle das stärkste an den Anfang, denn viele Besucher scrollen nie bis zum Ende der Liste.
Sollte ich Uni- oder Tutorial-Projekte aufnehmen?
Nur wenn du sie wesentlich verändert hast. Ein Tutorial-Klon, den viele Bewerber haben, sagt einem Prüfer wenig; füge eine Funktion, eine Testsuite oder einen echten Datensatz hinzu und erkläre, was du geändert hast.
Schreib Projekte als kleine Fallstudien
Ein Screenshot beweist, dass du einen Screenshot machen kannst. Zwei oder drei Sätze zum Problem, zur schwierigen Stelle und zu deiner Lösung zeigen, wie du denkst, und genau das wird in Vorstellungsgesprächen geprüft.
Halte jede Fallstudie gut überfliegbar: Titel, einzeilige Zusammenfassung, Stack-Tags, dann die kurze Geschichte und die Links. Wer mehr will, kann die Details öffnen.
Mach die Website selbst zu einer guten Arbeitsprobe
Dein Portfolio ist das eine Projekt, das garantiert jeder Prüfer sieht. Semantische Überschriften, sichtbare Fokusstile, schnelles Laden und ein Layout, das auf dem Smartphone funktioniert, zählen alle als Beleg.
Verzichte auf aufwendige Intro-Animationen und Ladebildschirme. Sie verzögern die Inhalte, wegen derer Prüfer kommen, und können Menschen schaden, die reduzierte Bewegung bevorzugen.
Mit wenig Aufwand aktuell halten
Speichere Projekte als einfache Liste in einer Datei, damit ein neues in wenigen Minuten hinzugefügt ist. Entferne Projekte, die dein Niveau nicht mehr widerspiegeln.
Ergänze im Footer eine Zeile mit dem Datum der letzten Aktualisierung. Sie zeigt Besuchern unaufdringlich, dass die Angaben aktuell sind.
Checkliste für Projektkarten
Was jeder Projekteintrag beantworten sollte
Feld
Beispiel
Titel
App zum Schichttausch für eine kleine Praxis
Einzeilige Zusammenfassung
Lässt das Personal Schichten tauschen, ohne dass eine Führungskraft den Dienstplan neu eingibt
Deine Rolle
Allein gebaut, oder die Teile, für die du im Team verantwortlich warst
Stack
React, Node, Postgres
Schwierige Stelle
Verhindern, dass zwei Personen gleichzeitig dieselbe Schicht übernehmen
Ergebnis
Etwas Wahres und Überprüfbares, etwa bestandene Tests oder echte Nutzer
Links
Live-Demo und Quellcode-Repository
Kostenlose Vorlage für ein Entwickler-Portfolio
Eine einzelne HTML-Datei mit Inline-CSS. Sie braucht keinen Build-Schritt, funktioniert auf Smartphones und wechselt zu dunklen Farben, wenn das System des Besuchers das verlangt.
Portfolio-Vorlage in einer Datei
Bearbeite den Code und die Vorschau aktualisiert sich. Ersetze Beispielname, Projekte und E-Mail und speichere die Datei dann als index.html.
Projekt-Fallstudien
Ideal für: Jobsuchende auf Junior- und mittlerem Level
Name und einzeilige Rolle
Drei Fallstudien-Karten
Kurz über mich
Kontakt
Jede Karte öffnet eine Seite mit Problem, Vorgehen, Stack und Ergebnis.
Leistungen und Ergebnisse
Ideal für: Freelancer
Was ich für Kunden baue
Liste der Leistungen
Ausgewählte Arbeiten
Ablauf in drei Schritten
Kontaktformular oder E-Mail
Richtet sich an Auftraggeber und stellt daher Ergebnisse statt Programmiersprachen voran.
Repository-Raster
Ideal für: Open-Source-Mitwirkende
Einleitung
Raster aus Repositories mit Sprache und Zweck
Vorträge oder Beiträge
Kontakt
Jede Kachel verlinkt direkt auf den Code und seine Live-Demo.
Terminal-Stil
Ideal für: Backend-, DevOps- und Tooling-Rollen
Header im Prompt-Stil
whoami-Zusammenfassung
ls-Projektliste
cat contact
Macht Spaß, solange jede Zeile lesbar bleibt und die Seite auch mit der Maus funktioniert.
Interaktive Präsentation
Ideal für: Frontend- und kreative Entwickler
Interaktiver Hero im Vollbild
Projekt-Showreel
Technische Notizen
Kontakt
Respektiere reduzierte Bewegung und biete einen reinen Textweg zu den Projekten.
Texte zuerst
Ideal für: Senior Engineers
Kurzbiografie
Neueste Beiträge
Ausgewählte Projekte
Vorträge
Kontakt
Beiträge zeigen Urteilsvermögen und Kommunikation, die bei Senior-Einstellungen stark gewichtet werden.
Lebenslauf auf einer Seite
Ideal für: Alle, die wenig Zeit haben
Header mit Links
Zeitleiste der Berufserfahrung
Projekte
Fähigkeiten
Lebenslauf herunterladen
Eine Webversion des Lebenslaufs, die sich auf dem Smartphone leichter lesen lässt als ein PDF.
Geteilter Bildschirm
Ideal für: Entwickler, die auch gestalten
Feste linke Spalte mit Name und Links
Scrollende rechte Spalte mit Projekten
Kontaktlinks bleiben sichtbar, während Besucher die Arbeiten durchsehen.