Das bekommst du
- Eine Offline-HTML-Datei oder echte Routen in deinem React-, Vue-, Svelte- oder Astro-Projekt
- Start, Projekte und Fallstudien, Texte und Artikel, Vorträge, Uses, Über mich, Lebenslauf, Kontakt und 404
- Projekt-Cover als HTML-Produktpanels auf fotografischen Hintergründen
- Befehlspalette, Tabs für Berufserfahrung, Repo-Raster, Filter und validierte Formulare
- Optionale Hintergründe oder Fotos von PopNow, beziffert, bevor du zahlst
Gut für
- Entwickler und Indie-Maker, die eine persönliche Website wollen
- Jobsuchende, die eine „Stell mich ein“-Seite mit Fallstudien brauchen
- Entwickler, die schreiben oder Vorträge halten und dafür ein Zuhause suchen
Nicht für
- Helle oder farbenfrohe Marken: Das Design ist nur dunkel
- Visuelle Designer, deren Arbeit vor allem aus Bildern besteht
- Unternehmenswebsites oder Onlineshops
So nutzt du ihn
In Claude oder ChatGPT
Nutze den PopNow-Skill „Entwickler-Portfolio-Website“ (developer-portfolio-website) dafür: Baue meine persönliche Website. Ich bin Backend-Entwickler in Berlin; mein Lebenslauf, drei Projekte und zwei Blogartikel liegen in ./notes.
In einem Coding-Agent
/popnow-developer-portfolio-website Baue meine persönliche Website. Ich bin Backend-Entwickler in Berlin; mein Lebenslauf, drei Projekte und zwei Blogartikel liegen in ./notes.
Dann probier
Erstelle einen Hintergrund für ein viertes Projekt im selben dunklen Stein-Stil und nenn mir vorher den Preis.
Entferne den Vortragsbereich und mach aus Uses eine Seite „Arbeitsweise“.
Das solltest du bereithalten
- Deine Jobs, Zeiträume und konkreten Ergebnisse
- Zwei bis sechs Projekte mit Problem, wichtigen Entscheidungen und Ergebnis
- Artikel, Vorträge, Repos und Tools, die du wirklich hast
- Dein eigenes Porträt und echte Eventfotos, falls vorhanden
Ähnliche Skills
Alle ansehen →3D-Avatar-Maker
+3Baue im Browser eine niedliche 3D-Figur im Plüschtier-Look und speichere sie als transparentes PNG oder 3D-Seite.
Kalender-Heatmap
+3Ein Jahr täglicher Aktivität als schattiertes Kalenderraster, mit Serien, Summen und Tastaturbedienung.
KI-SaaS-Landingpage
+3Warmes Sandpapier und feine Linien um ein lebendiges Kanban-Board, auf dem ein Assistent Aufgaben plant.
Animierte Hero-Section
+3Ein Landingpage-Hero mit sanft wechselndem Schlagwort, zwei Buttons und einem breiten Bildrahmen.
Shader-Hero-Website für Agenturen
+3Orange-Shader hinter großer Aussage, Pillen-Navigation und versetztem Raster mit Fallstudien.
Dunkle SaaS-Landingpage
+3Eine dunkle, bewegungsreiche Marketingseite für ein Softwareprodukt, geliefert als eine eigenständige HTML-Datei.
Designer-Portfolio-Website
+3Sechs geneigte Karten um eine verblassende Überschrift auf ruhigem Grau, eine rote Porträtkarte, Fallstudien.
Redaktionelle SaaS-Website
+3Marineblauer geteilter Hero, Serifen-Überschrift neben einem Dokumentarbild, schräge Bänder, ein Kobaltakzent.
Glassmorphism-Website-Vorlage
+3Mattglas-Pillen auf Fastschwarz, große Serifen-Überschrift mit einem kursiven Wort und E-Mail-Anmeldung.
Website für Hardware-Produkte
+3Riesige haarlinige Modellnamen auf Silber-Studioaufnahmen, Datenkarten und eine maßstabsgetreue Reihe.
Interaktives Architekturdiagramm
+3Ein offline nutzbares, klickbares Systemdiagramm aus einem geprüften JSON-Modell, mit den Belegen zu jedem Kasten.
Interaktiver Raster-Hero
+3Dunkles Raster feiner Fäden, das sich zum Cursor neigt und bei jedem Klick einen Ring ausrollt.
Knowledge-Graph-Explorer
+3Mach aus Projektnotizen einen durchsuchbaren Offline-Graphen, in dem jede Aussage auf ihre Quellzeile verweist.
KPI-Dashboard-Vorlage
+3Vier KPI-Kacheln mit Veränderungs-Chips über einem leuchtenden Liniendiagramm, Aufschlüsselung und Zielbalken.
Landingpage aus KI-Mockups
+3Drei Entwürfe ganzer Seiten ansehen, einen wählen, dann baut dein Agent ihn als sauberen Code.
Magazin-Website-Vorlage
+3Eine Magazin-Website in Printqualität mit Artikeln, Themen, kleinem Shop und Abos, als eine HTML-Datei.
Partikel-Animations-Hero
+3Text auf warmem Papier neben einer drehenden Kugel aus Tinten- und Türkispunkten, die sich je Idee formt.
Persönliche Marken-Website
+3Ein Porträt, das in warmes Papier übergeht, darüber eine feine Klammer, daneben kurze und fette Aussagen.
Kinoreife Produkt-Launch-Seite
+3Fastschwarze Filmseite: Serifen-Titelkarte über gleitendem Licht, Letterbox-Nachtszene, Reservierungsformular.
Admin-Dashboard-Vorlage
+3Eine funktionierende Backoffice-Konsole mit Diagrammen, Tabellen, Kanban und Kalender, als eine Offline-HTML-Datei.
SaaS-Landingpage-Vorlage
+3Eine ruhige, helle Marketingseite für ein Softwareprodukt mit funktionierender Produktkonsole, Preisen und Registrierung.
Portfolio-Website im Scrapbook-Stil
+3Ein mehrseitiger Online-Lebenslauf aus Papierobjekten, mit Fallstudien und druckbarem Lebenslauf.
Sneaker-Shop-Website-Vorlage
+3Ein kompletter Schuh- oder Modeshop mit Katalog, Produktseiten, Warenkorb und Demo-Checkout in einer HTML-Datei.
Landingpage für Workflow-Automatisierung
+3Graphit-Seite mit kleiner Überschrift und einem lebenden Knotengraphen, der läuft und Logs streamt.
Fragen
Warum sind die Projekt-Cover keine Screenshots?
Jedes Cover ist ein kleines Produkt-Interface aus HTML und CSS mit Daten aus deinem Fachgebiet. Es bleibt in jeder Größe scharf, passt zu den Farben der Website und zeigt nie private Daten von einem echten Bildschirm.
Brauche ich dafür PopNow?
Nein. Die mitgelieferten Stein- und Sandhintergründe kannst du für deine Projekte wiederverwenden, und Vorträge bekommen gezeichnete Vorschaubilder. PopNow ist optional für neue Hintergründe, ein Schreibtischfoto oder ein überarbeitetes Porträt, und jeder Lauf wird vorher beziffert.
Was, wenn ich keine Vorträge oder Open-Source-Repos habe?
Abschnitte ohne echten Inhalt werden samt ihren Links entfernt. Der Skill erfindet für eine echte Person nie Vorträge, Repos, Sterne oder Kunden.
Lässt es sich in meine bestehende Next.js-App einbauen?
Ja. Es erkennt den Stack, lässt andere Dateien unangetastet und baut dieselben Routen als echte Seiten mit denselben Tokens und Schriften.