Erstelle in ca. 30 Minuten eine saubere Portfolio-Website – ganz ohne Programmieren. Folge einer einfachen Checkliste: Vorlage wählen, Arbeiten hinzufügen, Domain verbinden und veröffentlichen.
Am Ende dieses schnellen Builds hast du eine saubere One-Page-Portfolio-Website, die drei Aufgaben gut erfüllt: zeigt deine Arbeit, erklärt wer du bist und macht es einfach, dich zu kontaktieren.
Eine einfache Seite mit:
Das ist bewusst minimal. Eine One-Page-Portfolio ist schneller zu bauen, einfacher zu aktualisieren und konvertiert oft besser als eine Mehrseiten-Website, wenn jemand schnell durch deine Arbeiten scrollt.
Dieser Ansatz passt zu Freelancern, Studierenden, Kreativen und Jobsuchenden, die schnell etwas Professionelles benötigen—besonders wenn du dich auf Stellen bewirbst, Kunden pitchst oder deine Arbeit in sozialen Netzwerken teilst.
Um innerhalb von 30 Minuten zu bleiben, sammle vorab:
Ein 30-Minuten-Build funktioniert nur, wenn du 3–5 Minuten damit verbringst, zu entscheiden, wie "fertig" aussehen soll. Sonst verlierst du Zeit mit dem Ändern von Fonts, Umordnen von Abschnitten und dem Zweifeln, was rein soll.
Wähle das primäre Ergebnis für dein Portfolio:
Dieses Ziel bestimmt, was du zuerst hervorhebst: deine Rolle und Ergebnisse für das Hiring, dein Angebot und Prozess für Kunden oder deine Nischenarbeit für eine Spezialisierung.
Entscheide, ob du baust:
Wenn du gegen die Uhr baust, starte jetzt mit einer Einzelseite—du kannst später Seiten aufteilen.
Wähle einen primären CTA und (optional) einen sekundären CTA. Beispiele:
Alles auf der Seite sollte diese Aktionen unterstützen.
Bevor du eine Vorlage anfasst, entwerfe einen einfachen Satz:
Ich helfe [wem] bei [was], damit sie/er [Ergebnis] erreichen kann.
Beispiel: „Ich helfe SaaS-Startups, Onboarding-Flows zu gestalten, die Churn reduzieren und die Aktivierung verbessern.“
Halte diesen Satz sichtbar, während du baust—er ist dein Filter dafür, was du einfügst und was du weglässt.
Dein Builder bestimmt, wie schnell sich dieses „30-Minuten“-Projekt anfühlt. Wähle etwas, das dich ohne Menükämpfe veröffentlichen lässt.
Wenn du ein individuelleres Ergebnis willst, ohne klassischen Dev-Zyklus, ist Koder.ai eine weitere Möglichkeit: eine Plattform, bei der du dein Portfolio im Chat beschreibst und eine echte React-Web-App generierst (mit Go + PostgreSQL, falls du später Backend-Features hinzufügen willst). Du kannst Quellcode exportieren, deployen/hosten, eine Custom Domain verbinden und Snapshots/Rollbacks nutzen—praktisch, wenn du flexibel, aber trotzdem schnell sein willst.
Beginne mit diesen Must-haves:
Viele Tools wirken günstig, bis du auf eine Bezahlschranke triffst. Schau nach:
Wenn Preis eine Rolle spielt, vergleiche die Pläne auf /pricing und wähle den minimalen Plan, der eine Custom Domain und die oben genannten Funktionen unterstützt. Du kannst später upgraden, wenn dein Portfolio wächst.
Eine gute Vorlage sollte wie ein hilfreicher Ausgangspunkt wirken—nicht wie ein Puzzle, das du erst lösen musst, bevor du veröffentlichen kannst. Beim Ziel eines 30-Minuten-Builds ist die falsche Vorlage der schnellste Weg, Zeit zu verlieren.
Wähle eine Vorlage, die für das Zeigen von Arbeiten gedacht ist: eine klare Hero-Sektion, ein Grid für Projekte, ein kurzer Über-mich-Bereich und eine offensichtliche Kontakt-Sektion. Wenn du mit einer Business-Landingpage- oder Event-Vorlage startest, verbringst du Zeit damit, zu löschen und umzuordnen statt zu veröffentlichen.
Setze Priorität auf saubere Typografie, starke Abstände und Weißraum. Aufwendige Animationen, ungewöhnliche Navigationen und „kreative“ Scroll-Effekte mögen in Demos beeindrucken—sie machen Inhalte oft aber schwerer erfassbar und schwerer zu bearbeiten.
Dein Portfolio ist das Produkt. Die Vorlage sollte sich nicht in den Vordergrund drücken.
Bevor du dich festlegst, bestätige, dass die Vorlage diese Basics ohne Hacks kann:
Fehlen diese, wirst du sie erzwingen müssen—und dann fangen die Builder an, frustrierend zu werden.
Öffne die mobile Vorschau und checke drei Dinge:
Wenn die Mobilansicht jetzt unordentlich ist, wird sie sich später nicht von selbst reparieren. Wähle eine einfachere Vorlage und mach weiter—du kannst das Design jederzeit upgraden, wenn dein Portfolio live ist.
Dein Portfolio braucht keinen kompletten Brand-Guide, um professionell zu wirken. Du brauchst nur wenige konsistente Entscheidungen, damit jedes Element zusammenpasst.
Wenn du ein Logo hast, lade es hoch und nutze es nur im Header und Footer. Wenn nicht, funktioniert eine saubere Wortmarke (dein Name in einer guten Schrift) perfekt—vor allem für Freelancer und Kreative.
Wähle eine Akzentfarbe, die du für Links, Buttons und kleine Hervorhebungen verwendest (nicht für große Textblöcke). Eine einfache Methode: nimm eine Farbe aus deinem stärksten Projektbild.
Begrenze dich auf eine Schrift für Überschriften und eine für Fließtext. Viele Templates wirken „unruhig“, weil sie zu viele Schriftstile mischen.
Halte es lesbar:
Wenn du unsicher bist, bleib bei den Template-Standards und ändere nur die Akzentfarbe.
Konsistenz lässt eine No-Code-Portfolio-Website maßgeschneidert wirken.
Schnelle Einstellungen zum Vereinheitlichen:
Das wirkt wichtiger als ausgefallene Effekte und lässt Vorlagen poliert statt „template-y“ erscheinen.
Mache einen 10-Sekunden-Scan: Kannst du Text auf jedem Hintergrund gut lesen?
Mobilfreundlichkeit zeigt Kontrastprobleme oft zuerst—preview also mobil, bevor du weitergehst.
Du brauchst keine komplexe Sitemap, um eine gute No-Code-Portfolio-Website zu liefern. Eine klare Seite reicht oft—besonders, wenn dein Ziel ist, in 30 Minuten online zu gehen.
Nutze einen einfachen Top-to-Bottom-Flow. Diese Sektionen decken ab, was die meisten Besucher in unter einer Minute sehen wollen:
Wenn dein Template mit Extra-Blöcken startet (Blog, Newsletter, Preise, lange Feature-Grids), lösche sie fürs Erste. Du kannst später hinzufügen.
Dein Hero ist die „Warum sollte es mich interessieren?“-Sektion. Nutze diese kurze Checkliste:
Kurz und scannbar: kurze Sätze, klare Überschriften und Luft um die Inhalte.
Füge eine Navigation nur hinzu, wenn die Seite lang ist. Passt alles in ein paar Scrolls, lass die Seite das Leiten übernehmen.
Nutze für jede Sektion dasselbe Muster: eine Überschrift, eine kurze Einleitungszeile, dann der Inhalt. Konsistenz lässt dein Portfolio bewusst wirken—selbst wenn es schnell gebaut wurde.
Deine Projekte sind der Kern des Portfolios. Ziel: 3–6 starke Stücke, die beweisen, was du kannst, statt alles, was du je gemacht hast, reinzupacken.
Wähle Arbeiten aus, die zu den Jobs passen, die du als Nächstes willst. Bist du Designer, zeige Design; Fotograf, führe deine beste Serie an; Generalist, wähle eine Mischung, die trotzdem kohärent wirkt.
Ein schneller Filter: Entferne alles, das du nicht in einem kurzen Gespräch sicher erklären kannst. Wenn ein Projekt lange Rechtfertigungen braucht („Ich habe da eigentlich nicht viel gemacht"), schwächt es die Seite.
Für jedes Projekt sollten die gleichen Kerndetails enthalten sein, damit Leute scannen können:
Kurz halten—2–5 kurze Sätze reichen meist.
Verwende 3–6 Bilder pro Projekt oder ein kurzes Video, wenn Bewegung Teil der Arbeit ist. Setze das stärkste Bild zuerst—das wird geklickt.
Wenn möglich, füge ein „Process“-Visual hinzu (Wireframe, Skizze, Vorher/Nachher, Kontaktbogen), um Denkprozesse zu zeigen—ohne die Seite in einen Roman zu verwandeln.
Nutze klare Titel und Labels (z. B. „Brand Identity“, „Web-Redesign“, „Editorial Shoot"). Wenn ein Projekt einen Link hat, mache ihn offensichtlich und einfach: „Live-Seite ansehen“ oder „Final Cut ansehen" ist besser als „Hier klicken".
Deine Über-mich-Sektion hat eine Aufgabe: jemandem helfen, schnell zu entscheiden, ob du die richtige Person für eine Kontaktaufnahme bist.
Nutze einen freundlichen Headshot oder eine saubere Illustration/Avatar. Halte den Hintergrund schlicht und die Beleuchtung natürlich. Unruhige Szenen, Partyfotos und starke Filter machen das Lesen schwieriger.
Strebe 4–6 Zeilen an:
Beispiel:
Ich bin freiberuflicher UI-Designer mit Fokus auf saubere, konversionsfreundliche Landingpages für Early-Stage-SaaS. Zuvor habe ich einem Fintech-Startup geholfen, einen neuen Onboarding-Flow zu launchen und die Aktivierung um 18% zu verbessern. Ich suche 1–2 neue Kundenprojekte in diesem Monat.
Nenne Tools, die du tatsächlich nutzt (Figma, Webflow, Notion), Branchen, in denen du Erfahrung hast (Health, Fintech, Education) und Auszeichnungen/Zertifikate nur, wenn sie akkurat und relevant sind.
Falls passend, füge eine kurze Zeile mit einem klar beschrifteten PDF hinzu:
„Lebenslauf herunterladen (PDF)"
Platziere es nahe deinem Kontakt-Button, sodass jemand deine Geschichte überfliegen, Vertrauen fassen und in einem Scroll handeln kann.
Eine schöne Portfolio-Seite funktioniert nur, wenn man dich schnell erreichen kann. Die Kontakt-Sektion sollte offensichtlich, kurz und reibungslos sein—kein Herumklicken, kein Rätselraten.
Ziel: zwei Optionen, höchstens drei:
Wenn du mehr als das anbietest, zögern Leute. Halte es einfach und (wenn du eine Navigation hast) nenne sie „Kontakt".
Ein Satz kann Rückfragen reduzieren und bessere Anfragen anziehen. Beispiel:
"Ich bin ab nächsten Monat für freiberufliche Branding-Projekte verfügbar. Typische Antwortzeit: innerhalb von 1–2 Werktagen."
Sag das nur, wenn es stimmt. Wenn du keine Arbeit annimmst, sag, wofür du offen bist (Zusammenarbeiten, Festanstellung, Speaking etc.).
Ein Buchungslink kann für Service-basierte Arbeit großartig sein, aber füge ihn nur hinzu, wenn du ihn aktuell halten kannst und damit einverstanden bist, dass Leute ohne Erstkontakt Termine buchen. Wenn dein Kalender oft wechselt, bleib bei E-Mail + Formular.
Wenn du mit Kunden arbeitest, füge eine kurze Notiz wie „Basiert in Berlin (CET)" oder „Arbeitet global (UTC-5)" hinzu. Es hilft bei Terminvorschlägen und signalisiert Professionalität—besonders bei Remote-Arbeit.
Wiederhole den Kontakt-Link auch im Footer. Leute scrollen, entscheiden und klicken von dort.
Du kannst ein schönes Portfolio haben und trotzdem Besucher verlieren, wenn es auf dem Telefon unpraktisch ist oder ewig lädt. Verbringe ein paar Minuten hier und deine Seite wirkt poliert—ohne zusätzliche Seiten.
Die meisten Besucher sehen dein Portfolio auf dem Handy. Öffne die mobile Vorschau des Builders und scrolle schnell von oben nach unten.
Preview auf mehreren Bildschirmgrößen (Mobil, Tablet, Desktop) und achte auf:
Fixes sind meist einfach: Padding reduzieren, konsistente Abstände setzen oder Mehrspalten-Blöcke auf Mobil in eine Spalte umschalten.
Schnelle Seiten wirken professioneller. Die größten Performance-Killer sind übergroße Bilder und Hintergrundmedien.
Komprimiere große Bilder (besonders Projekt-Screenshots). Als Faustregel: Portfolio-Bilder brauchen selten mehr als ~2000px Breite. Wenn dein Builder eine „optimieren“-Option hat, aktiviere sie.
Vermeide große Hintergrundvideos. Wenn du Bewegung willst, reicht oft eine leichte Schleife oder ein kleines eingebettetes Clip—deine Arbeit sollte im Fokus stehen, nicht der Header.
Klicke jeden Button und Link—sozialen Icons, Projektkarten und deinen E-Mail-/Kontakt-Button.
Stelle sicher:
Vor dem Veröffentlichen eine schnelle Qualitätsrunde:
Wenn dein Portfolio mobilfreundlich, schnell ladend und frei von kleinen Fehlern ist, wirkt es sofort glaubwürdiger—auch wenn du es in unter 30 Minuten gebaut hast.
Eine Custom Domain macht dein Portfolio fertig und leichter teilbar in Lebensläufen, E-Mail-Signaturen und Social-Profilen. Veröffentlichen ist meist ein Button. Die Domain-Verbindung braucht ein paar Minuten mehr, ist aber meist unkompliziert.
Halte es einfach und professionell:
Wenn dein exakter Name vergeben ist, versuche kleine, lesbare Varianten (Mittlerer Initial, „studio" oder deinen Beruf). Vermeide Bindestriche und lange Phrasen—Leute tippen sie falsch.
Die meisten Builder führen dich schrittweise durch die Einrichtung.
Verbinde die Domain in den Builder-Einstellungen und folge den DNS-Anweisungen genau.
Typischerweise kopierst du ein oder zwei DNS-Einträge (oft ein A-Record und/oder CNAME) in deinen Domain-Registrar (wo du die Domain gekauft hast). Prüfe Schreibweise, Punkte und ob der Eintrag die Root-Domain (deinname.com) oder „www" betrifft.
Nach DNS-Änderungen gib dem Ganzen Zeit. Manche Domains verbinden in Minuten, andere brauchen ein paar Stunden. Sobald es aufgelöst ist, öffne die Seite unter deinname.com und www.deinname.com (falls du beides nutzt) und bestätige, dass sie ohne Sicherheitswarnungen lädt.
Setze schließlich deine bevorzugte Version (meist non-www oder www) als primäre Domain, damit du immer eine saubere URL teilst.
SEO klingt technisch, aber die Basics für eine No-Code-Portfolio-Seite sind meist einfache Felder und klare Formulierungen. Investiere ein paar Minuten und deine Seite ist für Menschen und Suchmaschinen verständlicher.
Im SEO-Bereich deines Builders findest du Felder für Seitentitel und Meta-Beschreibung (oft unter „SEO", „Seiteneinstellungen" oder „Search preview").
Halte den Seitentitel spezifisch und lesbar. Ein gutes Format ist:
Dein Name — Rolle | Portfolio
Beispiel: Jordan Lee — Product Designer | Portfolio
Für die Meta-Beschreibung schreib einen kurzen Satz, der erklärt, was du machst und was Besucher finden.
Beispiel: „Product Designer, spezialisiert auf Mobile Apps und Designsysteme. Ausgewählte Projekte, Prozess und Kontaktinfos.“
Deine Homepage sollte eine klare H1 ganz oben haben—meist dein Name und deine Rolle. Das hilft Besuchern sofort zu verstehen, was du machst.
Gute H1-Beispiele:
Nutze beschreibende Überschriften für Abschnitte wie „Ausgewählte Arbeiten", „Über mich" und „Kontakt". Vermeide vage Labels wie „Willkommen" oder „Zeug". Klare Überschriften erleichtern das Scannen und die Indexierung.
Portfolio-Seiten sind bildlastig, also füge Alt-Text dort hinzu, wo er am meisten Sinn macht: Projekt-Thumbnails, Hero-Bilder und jedes Bild, das Ergebnisse kommuniziert.
Alt-Text sollte beschreiben, was man wissen muss, nicht jedes Pixel. Beispiele:
Das verbessert Barrierefreiheit und gibt Suchmaschinen mehr Kontext.
Manche Portfolio-Builder bieten die Möglichkeit, Suchtools anzubinden oder automatisch eine Sitemap zu generieren. Wenn deiner das unterstützt, reiche die Seite dort ein.
Wenn nicht, halte dich nicht auf: veröffentliche und teile den Link dort, wo du schon Aufmerksamkeit hast—LinkedIn-Bio, Instagram-Profil und Verzeichnisse oder Communities, in denen du aktiv bist.
Bevor du dein Portfolio teilst, mach einen letzten Quick-Check, dass alles funktioniert und professionell wirkt. Eine saubere, funktionierende Seite schlägt eine flashy Seite mit kaputten Links.
Nutze einfache Analytics, um Views, Projekt-Klicks und Kontakt-Submissions zu messen. Nach einer Woche finde das Projekt mit den meisten Klicks und überarbeite Projekt-Titel, die keine Aufmerksamkeit bekommen.
Ja. Eine einseitige Portfolio-Website ist oft besser für schnelle Entscheidungen, weil sie leicht zu überfliegen ist.
Strebe einen klaren Ablauf an: Hero → Arbeit → Über mich → Kontakt. Du kannst Projekte später in separate Case-Study-Seiten aufteilen, sobald die Seite live ist.
Halte es minimal, damit du fertig wirst:
Wenn du keine 3 Projekte hast, veröffentliche mit 1–2 starken Arbeiten und füge später weitere hinzu.
Wähle ein primäres Ziel und lass es deine Entscheidungen steuern:
Wenn du unsicher bist, nimm nur das auf, was dieses Ziel unterstützt.
Wähle den Builder, der dir Reibung nimmt:
Prüfe vor der Entscheidung, ob es Paywalls für Custom Domains, Formulare, Speicher/Bandbreite, Analytics und Entfernen von Branding gibt (häufig auf /pricing aufgeführt).
Wähle eine Vorlage, die bereits die benötigten Abschnitte hat (Hero, Projekt-Grid, Über mich, Kontakt). Mache vor der Anpassung eine mobile Vorschau.
Vermeide Vorlagen mit starken Animationen, ungewöhnlicher Navigation oder komplexen Layouts—du wirst Zeit damit verlieren, die Reaktionsfähigkeit und Lesbarkeit zu reparieren.
Begrenze dein „Branding“ auf ein paar konsistente Entscheidungen:
Konsistenz wirkt „maßgeschneidert“, auch wenn du eine Vorlage nutzt.
Verwende ein wiederholbares Format, damit Menschen leicht überfliegen können:
Kurz und knapp (2–5 kurze Sätze) und führe mit dem stärksten Bild als erstes.
Nutze eine einfache Struktur, die die Frage „Soll ich dich kontaktieren?“ schnell beantwortet:
Kurz genug, um in unter einer Minute gelesen zu werden, und platziere einen klaren nächsten Schritt in der Nähe (E-Mail/Kontakt-Button, optional „Lebenslauf herunterladen (PDF)“).
Biete 2 Optionen an (maximal 3):
Füge eine kurze Erwartungszeile hinzu (Antwortzeit, Verfügbarkeit) und gib deine Location/Zeitzone an, wenn du remote arbeitest. Wiederhole den Kontaktlink im Footer, damit er nach dem Scrollen leicht erreichbar ist.
Führe diese schnellen Checks durch:
Nach der Veröffentlichung: teile den Link auf LinkedIn, in deiner E-Mail-Signatur und in Social-Bios, beobachte, welche Projekte Klicks bekommen, und passe die Startseite entsprechend an.
