Ein Entwickler-Portfolio an einem Wochenende mit Gemini 3.8 Flash High
Wie man einen KI-Coding-Agenten zu einem fertigen Next.js-Portfolio lenkt: Prompts, erfundene Inhalte, Icons, Responsive-Checks und Sicherheit vor dem Deployment.
Viele erfahrene Entwickler teilen eine leicht peinliche Angewohnheit: jahrelange Arbeit mit JavaScript, TypeScript, React, Next.js, Node.js, Java, Python und Cloud – und ein persönliches Portfolio, das nie fertig wird. Technisch ist das selten das Problem. Es ist die klassische „später, wenn Zeit ist“-Falle, und die Zeit kommt nie.
Ein Ausweg ist, die Methode zu wechseln. Statt tagelang Komponenten zu entwerfen und jede Zeile selbst zu tippen, kann man den ersten Durchgang einem KI-Coding-Agenten überlassen. Hier war das Antigravity mit Gemini 3.8 Flash High, an einem Samstagnachmittag. Ziel war kein weiteres generisches KI-Template, sondern eine Seite, die sich persönlich anfühlt – und das Ergebnis übertraf die Erwartungen.
Ein bewusst knappes Briefing
Das Portfolio sollte schnell drei Dinge vermitteln: Full-Stack-Engineer, baut moderne Web-Architekturen und beschäftigt sich zunehmend mit KI, Agenten und neuen Entwickler-Technologien.
Außerdem sollte es das übliche Template vermeiden: Hero, 47 Skill-Badges, 12 Projektkarten, ein riesiger Lebenslauf, eine Begrüßung vom „leidenschaftlichen Entwickler“, Kontaktformular, Footer. Die finale Struktur fiel viel schlanker aus:
- Vollbild-Hero
- Call to Action für den Newsletter
- Ausgewählte Arbeiten
- Wichtigste Technologien
- Artikel und Veröffentlichungen
- Berufserfahrung
- Minimaler Footer
Kein abgeladener Lebenslauf, kein endloses Karussell, keine Füllabschnitte.
Erst das Design
Die visuelle Richtung stand fest, bevor Gemini irgendetwas schrieb: dunkel, cineastisch, modern, auf Entwickler zugeschnitten, minimal, luftig und persönlich.
Am wichtigsten war der Hero. Eine Stock-Illustration eines Entwicklers kam nicht infrage. Gezeigt werden sollte die echte Person am Arbeitsplatz, also ist der finale Hero eine dunkle, cineastische Szene mit eingeblendetem Porträt. Er füllt den gesamten Viewport, was nach einer Kleinigkeit klingt und viel verändert: Der erste Bildschirm wirkt wie eine Vorstellung statt wie ein Seitenkopf. Ein kleiner Scroll-Indikator unten in der Mitte zeigt, dass darunter noch mehr kommt.
Gemini die ganze Vision übergeben
Ab hier wurde es interessant. Gemini bekam keine Schritt-für-Schritt-Anweisungen wie „bau die Navbar“, dann „jetzt den Hero“, dann „jetzt die Projektkarten“. Es bekam die gesamte Produktvision auf einmal. Der Stack war simpel: Next.js und Tailwind CSS.
Der Prompt umfasste:
- Hintergrund
- Technologie-Stack
- Projekte
- Artikel
- Berufserfahrung
- visuelle Richtung
- Branding
- Responsive-Anforderungen
- Inhaltshierarchie
Daraufhin lieferte Gemini die erste Implementierung.
Die erste Version konnte nie perfekt sein
Und das muss sie auch nicht. Einige Icons waren Platzhalter, einige Markenlogos nur Annäherungen, und manche Artikeleinträge mussten durch die echten ersetzt werden.
Genau hier muss sich die Haltung zum KI-Coding ändern. Die Erwartung lautet nicht „Die KI hat perfekten Code generiert“, sondern „Die KI hat eine starke erste Implementierung geliefert, die ein Mensch prüfen, lenken und verfeinern kann“. Das sind zwei sehr unterschiedliche Aussagen.
Lassen Sie das Modell nicht erfinden, wer Sie sind
Inhaltliche Genauigkeit war eine der deutlichsten Lektionen. In einem Portfolio richten erfundene Inhalte echten Schaden an. Eine ausgedachte Projektbeschreibung mag harmlos wirken, ein gefälschter Artikel, ein falscher GitHub-Link oder ein erfundener Werdegang sind es aber ganz und gar nicht.
Deshalb wurden die echten Links und Inhalte von Hand eingetragen. Lassen Sie die KI die Implementierung schreiben, aber nicht Ihre Identität erfinden.
Echte Icons im Technologie-Abschnitt
Der erste Technologie-Abschnitt nutzte Platzhalter-Icons, und das reichte nicht. Wenn die Seite JavaScript, TypeScript, React, Next.js, Docker, PostgreSQL und GitHub aufführt, sollte sie die echten Logos zeigen. Also bekam Gemini ausdrücklich gesagt, welche Quellen es nutzen soll: Devicon für Entwickler-Technologien und React Simple Icons für weitere Marken-Icons. Ein echtes Logo schlägt jede KI-Annäherung.
Responsive Design als angenehme Überraschung
Nach dem Deployment wurde die Seite auf dem Desktop und dann auf dem Smartphone geprüft, beides sah gut aus. Das Tablet fiel besser aus als erwartet, und das Tablet ist meist der unangenehme Breakpoint. Desktop-Layouts schrumpfen, mobile Layouts dehnen sich, und die Größe dazwischen entlarvt falsche Annahmen. Diese Seite hielt in allen drei stand.
Das deutet auf mehr hin als schnellere Codegenerierung: Mit klar formulierten Anforderungen kann KI im ersten Durchgang ein brauchbares responsives System erzeugen. Testen fällt dadurch nicht weg. Es wird dadurch wertvoller.
Sicherheit vor dem Deployment
Die Seite ging nicht sofort online. Vor dem Deployment wurde geprüft auf:
- bekannte Schwachstellen in Abhängigkeiten
- hartkodierte Keys, Tokens und Passwörter
- Umgebungsvariablen und private Schlüssel
- Telefonnummern, E-Mail-Adressen und interne URLs
- jedes andere versehentlich enthaltene Secret
- sensible Daten, die noch in der Git-Historie liegen
Behalten Sie eine Unterscheidung im Kopf. Ein öffentliches Portfolio kann bewusst Ihren Namen, GitHub, LinkedIn, Artikel-Links und berufliche Details enthalten, das ist kein Sicherheitsproblem. Versehentlich so etwas auszuliefern, ist dagegen eine ganz andere Sache:
API_KEY=...
DATABASE_PASSWORD=...
PRIVATE_KEY=...
Auch KI-generierte Apps brauchen ganz normale Engineering-Disziplin.
Ausliefern
Die fertige App ging auf Vercel live. Erst da wurde das Experiment real. Der Punkt ist nicht, dass Gemini irgendwelchen Code erzeugt hat. Der Punkt ist, dass jemand ein Produkt beschrieben, iteriert, geprüft und ausgeliefert hat – und so über KI-gestützte Entwicklung nachzudenken, bringt deutlich mehr.
Wie viel vom Kontingent ging drauf?
Gemini 3.8 Flash High hat den gesamten Ablauf in Antigravity übernommen. Danach zeigte das Nutzungs-Dashboard noch 90 % des Wochenlimits und 37 % des Fünf-Stunden-Limits an. Das ist kein wissenschaftlicher Benchmark, und andere Prompts, Kontextgrößen, Modelle, Agentenverhalten und Projekte ergeben ganz andere Zahlen. Als persönlicher Datenpunkt ist es trotzdem interessant: Der Weg von null über ein gestaltetes Portfolio, eine responsive Umsetzung, iterative Korrekturen und ein Security-Review bis zum Produktions-Deployment passte in ein Wochenende, ohne das Wochenkontingent aufzubrauchen.
Was das Wochenende gelehrt hat
Die Erkenntnis ist nicht, dass Gemini Websites bauen kann, das ist bekannt. Es geht darum, wie man es einsetzt.
- Ihr Prompt ist Teil der Architektur. Ein vager Prompt ergibt eine generische Seite. Einer, der Designvorgaben, Inhalte, Architektur, Technologien, Responsive-Verhalten und Grenzen ausbuchstabiert, bringt Sie viel näher an das, was Sie wollen.
- KI ist gut in der Umsetzung und hat keine Entscheidungsgewalt. Gemini kann entscheiden, wie eine Karte gebaut wird. Es sollte nicht über Ihren Werdegang entscheiden, darüber, welche Projekte Sie gebaut haben, welche Artikel von Ihnen sind oder welche Links Ihnen gehören. Das sind Fragen der Source of Truth.
- Iteration schlägt Perfektion. Der Ablauf war nicht „Prompt, dann perfekte Seite“, sondern „Prompt, umsetzen, prüfen, korrigieren, verfeinern, validieren, deployen“ – und das ist viel näher an echtem Engineering.
- Lassen Sie Funktionierendes in Ruhe. Sobald das Portfolio stimmte, hörten die „mach es besser“-Bitten auf. Agenten sind großartig darin, Dinge zu ändern, aber das heißt nicht, dass alles geändert werden muss.
Funktioniert das für jedes Projekt?
Für eine Marketing-Website, ein Portfolio, eine Landingpage, einen Prototyp oder eine inhaltsgetriebene App kann dieser Ansatz sehr produktiv sein. Bei Produktionssystemen mit Zahlungen, Authentifizierung, sensiblen Daten, komplexer Geschäftslogik oder verteilten Systemen sollte KI ganz anders eingesetzt werden: mit festerer Kontrolle über die Architektur und deutlich mehr Tests, Threat Modeling, Reviews durch Menschen und manueller Prüfung. Je höher der Einsatz, desto weniger sinnvoll ist es, dem Agenten die Schlüssel zu überlassen.
Was das Experiment wirklich getestet hat
Das Portfolio war nur das Vehikel. Getestet wurde ein Workflow. Die Zeit floss weniger ins Tippen von Komponenten und mehr in diese Fragen: Was soll es geben, warum, wie soll es aussehen, was darf sich nicht ändern und welche Informationen sind maßgeblich. Einen Großteil der Umsetzung hat der Agent erledigt.
Für Engineers ist das ein echter Wandel: weg vom Schreiben jeder Zeile, hin zum Lenken, Reviewen, Validieren und Ausliefern von Systemen. Engineering wird dadurch nicht unwichtiger. Das Urteilsvermögen von Engineers wird wichtiger.
Spannend war nicht die Geschwindigkeit. Auffällig war, wie viel Aufwand sich von den Tastenanschlägen hin zu Entscheidungen verlagerte. KI-gestützte Entwicklung wird überzeugend, wenn jemand eine Idee klar beschreiben, einen Agenten durch den Bau steuern, seine Fehler erkennen, die wichtigsten Vorgaben schützen und trotzdem verantworten kann, was ausgeliefert wird – nicht, wenn ein Modell 10.000 Zeilen schreibt. Die KI hat das Portfolio nicht allein gebaut. Ein Mensch hat sie gelenkt, geprüft, korrigiert und das Ergebnis ausgeliefert, und für ein Wochenendexperiment ist das ein gutes Ergebnis.