Portfolio-Website-Vorlagen

Portfolio-Vorlagen. Mach aus deinen Arbeiten eine Website, die du potenziellen Kunden schicken kannst.

Zeige, was du gestaltet hast, welchen Beitrag du geleistet hast und warum das relevant ist. Wähle ein Layout mit Platz für Bilder und Projektkontext.

Ein Layout für meine Arbeiten finden Eine Projektgeschichte planen

Offset

Primefolio

Forma Studio

Beispieldesigns · ersetze die fiktiven Inhalte durch deine eigenen.

AI ChatBeispielablauf

Deine Arbeiten

Hilf mir meinen tatsächlichen Beitrag in diesen Portfolio-Projekten zu zeigen.

KI · Beispielantwort

Schicke Auftrag, deinen Beitrag und fertige Bilder. Ich kann daraus einen kurzen Projekttext neben den Arbeiten erstellen. Ergebnisse verwende ich nur aus deinen Angaben.

Ein echtes Projekt hinzufügen

Projekt und Auftrag
Nenne Kunde oder Projekt und erkläre die beauftragte Aufgabe.
Dein Beitrag
Beschreibe deinen Lieferumfang und zeige passende Bilder oder Screenshots.
Ergebnis
Zeige die fertige Arbeit. Geschäftsergebnisse ergänzt du, wenn sie belegt sind; sonst erklärst du das Gelieferte.

Danach: Projekttext neben eigenen Bildern lesen.

Beispieldialog, keine Live-KI-Sitzung.

01 / Deine Arbeiten

Was muss die Arbeit erklären?

Jedes Projekt sollte das Ergebnis und kurz deinen Beitrag zeigen. Ergänze Kunden- oder Projektnamen, deine Rolle und einige Bilder der Arbeit. Potenzielle Kunden können so einschätzen, ob deine Erfahrung zu ihrem Auftrag passt.

Bildbetonte Arbeiten

Gib den Arbeiten Raum und nenne Urheberschaft und Mitwirkende klar.

Digitale und gemischte Arbeiten

Zeige relevante Ansichten, Bedingungen und Beitrag statt nur eines Mockups.

02 / Portfolio-Designs

Welches Layout gibt deinen Projekten den richtigen Raum?

Offset passt zu markanten grafischen Arbeiten, Primefolio zu Projektkarten mit Detailfenstern, Forma Studio zur redaktionellen Darstellung und Verdan zu Fotografie und Raumgestaltung. Öffne die vollständige Vorschau und stelle dir deine Arbeiten darin vor.

Offset

Große Typografie und grafische Projektbilder mit Arbeiten, Leistungen und Vorgehen.

Preis und Dateien ansehen ↗

Dateien prüfen

Aktueller Download geprüft am 2. Oktober 2026. Prüfe die ausgewählten Dateien auf der Produktseite.

index.html
RECREATE.md
assets/contour.svg
assets/fern.png
assets/form-poster.svg
assets/geometric-print.svg
assets/glass.png
assets/packaging.png
assets/ribbon.png

Einige Ressourcen können von externen URLs geladen werden. Prüfe dein gewähltes Projekt vor der Veröffentlichung.

Primefolio

Studiopräsentation mit Konzeptstudien-Karten und lokalen Detaildialogen.

Preis und Dateien ansehen ↗

Dateien prüfen

Aktueller Download geprüft am 2. Oktober 2026. Prüfe die ausgewählten Dateien auf der Produktseite.

index.html
RECREATE.md
assets/current-product.png
assets/hero-form.png
assets/serein-brand.png

Einige Ressourcen können von externen URLs geladen werden. Prüfe dein gewähltes Projekt vor der Veröffentlichung.

Forma Studio

Redaktionelle Präsentation von Identity- und Digitalarbeiten mit Vorgehen und Leistungen.

Preis und Dateien ansehen ↗

Dateien prüfen

Aktueller Download geprüft am 2. Oktober 2026. Prüfe die ausgewählten Dateien auf der Produktseite.

index.html
RECREATE.md
assets/index.webp
assets/terra.webp
assets/vesper.webp

Einige Ressourcen können von externen URLs geladen werden. Prüfe dein gewähltes Projekt vor der Veröffentlichung.

Verdan

Gestaltungsrichtung für Umweltdesign, Fotografie, Disziplinen und Studiokontext.

Preis und Dateien ansehen ↗

Dateien prüfen

Aktueller Download geprüft am 2. Oktober 2026. Prüfe die ausgewählten Dateien auf der Produktseite.

index.html
RECREATE.md
assets/courtyard.png
assets/forest.png
assets/meadow.png
assets/workspace.png

Einige Ressourcen können von externen URLs geladen werden. Prüfe dein gewähltes Projekt vor der Veröffentlichung.

Beispieldesigns · ersetze die fiktiven Inhalte durch deine eigenen.

AI ChatBeispielablauf

Projektgeschichte

Erstelle aus meinen Projektnotizen und Bildern einen kurzen Portfolio-Fall.

KI · Beispielantwort

Schicke Auftrag, deinen Beitrag und fertige Bilder. Ich kann daraus einen kurzen Projekttext neben den Arbeiten erstellen. Ergebnisse verwende ich nur aus deinen Angaben.

Ein echtes Projekt hinzufügen

Projekt und Auftrag
Nenne Kunde oder Projekt und erkläre die beauftragte Aufgabe.
Dein Beitrag
Beschreibe deinen Lieferumfang und zeige passende Bilder oder Screenshots.
Ergebnis
Zeige die fertige Arbeit. Geschäftsergebnisse ergänzt du, wenn sie belegt sind; sonst erklärst du das Gelieferte.

Danach: Projekttext neben eigenen Bildern lesen.

Beispieldialog, keine Live-KI-Sitzung.

03 / Projektgeschichte

Was soll ein Besucher hinter dem Bild erfahren?

Erkläre, für wen das Projekt war, was der Auftrag war und welchen Teil du umgesetzt hast. Gib KI einige Notizen und lasse einen kurzen Projekttext daraus schreiben. Ergänze gemessene Ergebnisse nur, wenn sie vorliegen; fertige Arbeiten sind bereits aussagekräftig.

01
Projekt und Auftrag
Nenne Kunde oder Projekt und erkläre die beauftragte Aufgabe.
02
Dein Beitrag
Beschreibe deinen Lieferumfang und zeige passende Bilder oder Screenshots.
03
Ergebnis
Zeige die fertige Arbeit. Geschäftsergebnisse ergänzt du, wenn sie belegt sind; sonst erklärst du das Gelieferte.

Quelldateien und technische Details ansehen

Was die Serein-Studie tatsächlich enthält

02-primefolio/ script: projects.serein

Die Studie enthält Name, Disziplin, Einführung, Designfrage und Richtung. Echter Kunde, eigene Rolle, Projektumfang, Prozessnachweise und gemessene Ergebnisse fehlen. Nur belegbare Angaben ergänzen.

serein:{name:'Serein',type:'Brand identity / Packaging',intro:'An everyday ritual, given a quieter identity.',question:'How could an everyday care ritual feel considered without relying on ornate packaging or a loud visual language?',direction:'Warm paper, a compact wordmark and a controlled orange accent carry the idea across labels and stationery. The study explores a family of objects that belong together without making every surface identical.'}

Primefolio

Mitgelieferte englische Originalseite mit fiktiven Inhalten. Ganze Seite öffnen, um Aufbau und Bedienung zu prüfen.

Ganze Vorschau öffnen ↗

AI ChatBeispielablauf

Passende Bilder

Zeige das ganze Plakat, statt dessen Titel abzuschneiden.

KI · Beispielantwort

Nenne die Bilddateien und den wichtigen sichtbaren Ausschnitt. Ich kann Rahmenverhältnis und Zuschnitt ändern und die Handy- und Desktopansicht zum Prüfen zeigen.

Eigene Bilder ins Layout einpassen

Bilder hinzufügen
Lege die Bilder im Projektordner ab und nenne der KI die Dateien.
Ausschnitt bestimmen
Sage, ob das ganze Bild oder ein bestimmtes Detail sichtbar sein soll.
Zwei Größen ansehen
Prüfe die Rahmen auf Handy und Desktop vor der Veröffentlichung.

Danach: wichtigen Bildinhalt in beiden Ansichten prüfen.

Beispieldialog, keine Live-KI-Sitzung.

04 / Passende Bilder

Passen meine eigenen Bilder in das Layout?

Die Bildrahmen lassen sich an deine Arbeiten anpassen. Gib KI die Originaldateien und sage, was sichtbar bleiben muss: das ganze Plakat, Interface-Texte oder ein Produktdetail. Lass Ausschnitt oder Bildverhältnis ändern und prüfe Handy sowie Desktop.

Originalbilder hinzufügenLege Projektbilder in den Ordner und nenne sie im KI-Auftrag.Darstellung wählenBitte um ganzes Plakat, Detailausschnitt oder einen Rahmen im passenden Bildverhältnis.Beide Ansichten prüfenEin Desktopausschnitt kann auf dem Handy Details verdecken. Öffne beide Ansichten vor der Veröffentlichung.

Lokal auf diesem Gerät markiert; nichts wird übermittelt.

Offset: tatsächlicher Test breiter und hoher Bilder

Vorbereitete Quellkopie: erste zwei Projektbilder durch lokale SVGs in 3:1 und 1:3 ersetzt. Original-CSS und Kunden-ZIP unverändert.

Ganze Vorschau öffnen ↗

Tatsächlicher vorbereiteter Offset-Bildausschnitt, Desktop-Chrome 1118×958. Rote obere Markierung und dunkle untere Beschriftung zeigen den Zuschnitt.

AI ChatBeispielablauf

Kundenanfrage

Füge eine Projektanfrage mit Beschreibung, Zeitraum und Antwortadresse hinzu.

KI · Beispielantwort

Wähle E-Mail, Formular-Empfangsdienst oder Buchungslink. Ich kann das Ziel anbinden und bei einer Testsendung helfen. Eine Meldung im Browser belegt noch keinen Eingang.

Anfragen mit deinem Postfach verbinden

Ziel wählen
Nutze E-Mail-Adresse, Formular-Empfangsdienst oder deinen Buchungslink.
Mit KI verbinden
Gib das Ziel an und lasse Button oder Formular anbinden. Private Zugangsdaten gehören in die autorisierte Einrichtung, nicht in öffentliches HTML.
Test senden
Prüfe den tatsächlichen Nachrichteneingang oder Termin im Dienst, nicht nur eine Erfolgsmeldung auf der Seite.

Danach: Testnachricht oder Buchung im Empfangsdienst prüfen.

Beispieldialog, keine Live-KI-Sitzung.

05 / Kundenanfrage

Was sollte ein Kunde vor der Kontaktaufnahme wissen?

Kunden sollten deine Leistungen kennen und wissen, was sie schicken sollen: Projektbeschreibung, ungefähren Zeitraum und Kontaktdaten. Setze diese Hinweise neben E-Mail oder Formular. Für direkte Nachrichten lässt du KI das Formular mit einem Empfangsdienst verbinden.

Ziel wählen

Nutze E-Mail-Adresse, Formular-Empfangsdienst oder deinen Buchungslink.

Mit KI verbinden

Gib das Ziel an und lasse Button oder Formular anbinden. Private Zugangsdaten gehören in die autorisierte Einrichtung, nicht in öffentliches HTML.

Test senden

Prüfe den tatsächlichen Nachrichteneingang oder Termin im Dienst, nicht nur eine Erfolgsmeldung auf der Seite.

AI ChatBeispielablauf

Aktuell halten

Ergänze dieses Projekt mit Bildern und meiner Rolle im gleichen Portfoliostil.

KI · Beispielantwort

Schicke Auftrag, deinen Beitrag und fertige Bilder. Ich kann daraus einen kurzen Projekttext neben den Arbeiten erstellen. Ergebnisse verwende ich nur aus deinen Angaben.

Ein echtes Projekt hinzufügen

Projekt und Auftrag
Nenne Kunde oder Projekt und erkläre die beauftragte Aufgabe.
Dein Beitrag
Beschreibe deinen Lieferumfang und zeige passende Bilder oder Screenshots.
Ergebnis
Zeige die fertige Arbeit. Geschäftsergebnisse ergänzt du, wenn sie belegt sind; sonst erklärst du das Gelieferte.

Danach: Projekttext neben eigenen Bildern lesen.

Beispieldialog, keine Live-KI-Sitzung.

06 / Aktuell halten

Kann ich das Portfolio mit meiner KI aktualisieren?

Ja. Lege Bilder und Kurzbeschreibung des neuen Projekts in deinem aktuellen Ordner ab. Lass KI eine Projektkarte mit Details im gleichen Stil ergänzen. Prüfe die Vorschau und veröffentliche die Dateien erneut. So wächst dein Portfolio mit deinen Arbeiten.

Vorbereitetes Template-Beispiel ansehen

Beispiel für KI-BearbeitungFormwell

Ersetze Beispielintro und Leistungen durch meine freigegebenen Portfolioinhalte. Behalte das Layout.

KI · Beispielantwort

Das vorbereitete Formwell-Beispiel aktualisiert Studiotexte. Deine echten Fälle brauchen zusätzlich Bilder, Detailverweise und Prüfung.

index.html · RECREATE.md

Formwell · vorbereitete HTML-Vorschau

Ganze Vorschau öffnen ↗

Vorbereiteter Dialog und Projektversionen. Keine Live-Verbindung zu einer KI.

07 / Mit Kontext wählen

Was prüfe ich vor der Auswahl?

Prüfe Bildformate, Platz für die Projektbeschreibung und den Kontaktweg. Öffne die Originalvorschauen und Dateien unten. Für eine eigene URL pro Fallstudie kannst du KI weitere Projektseiten in der gewählten Vorlage erstellen lassen.

Kann ich die Beispielprojekte behalten?

Nutze den Aufbau und ersetze fiktive Projekte durch eigene Arbeiten. Gib KI Bilder und Notizen. Sie kann Karten und Texte ändern, ohne das Portfolio neu zu gestalten.

Haben Details eigene URLs?

Nicht bei lokalen Detailfenstern. Für teilbare Projektadressen lässt du KI eigene HTML-Seiten erstellen und die Karten damit verknüpfen. Prüfe die Vorschau für den aktuellen Aufbau.

Sind Hosting und Domain enthalten?

Nein. Nutze eigenes Hosting und Domain. Lass einen autorisierten KI-Agenten den Ordner auf Cloudflare oder Vercel veröffentlichen oder frage Hosting-Support beziehungsweise IT nach dem Upload der vollständigen ZIP.

Preis und Dateien von Offset ansehen

Formwell / Website-Dateien + Designanweisungen

Teste ein echtes Template, bevor du dich entscheidest.

Lade das originale Formwell-Projekt herunter. Gib die Dateien und RECREATE.md an ein geeignetes KI-Tool, probiere eine kleine Änderung und prüfe das Ergebnis.

Das kostenlose Beispiel ist Formwell. Originaldesign und Anleitung sind auf Englisch. Die Produktpreise bleiben unverändert.

Formwell-ZIP herunterladen RECREATE.md herunterladen ↗