Dein Portfolio mit Manablox · Teil 3 von 7 der Serie

Teil 3: Füll das Portfolio mit deiner Arbeit

Lade Bilder hoch, mach aus den Beispielprojekten deine eigenen, bearbeite die Abschnitte deiner Seiten und gib der Website deinen Namen und deine Farben.

Einsteiger35 Min.

Quest-Ziele

Bilder hochladen und ihnen Alt-Texte geben
Projekte bearbeiten, löschen und anlegen
Die Abschnitte einer Seite anordnen
Den Namen der Website und die Farben ändern
Eine Nachricht über das Kontaktformular empfangen

Das Portfolio aus dem letzten Teil zeigt noch Beispielinhalte. In diesem Teil ersetzt du sie durch deine eigene Arbeit. Alles passiert im Admin unter localhost:3000, lass also pnpm dev und pnpm dev:site weiterlaufen.

Du brauchst ein paar Bilder: ein Titelbild pro Projekt, ein paar weitere für die Galerien und eins von dir. Screenshots deiner Projekte eignen sich wunderbar. Bilder im Querformat 3:2 sehen als Titelbild am besten aus. Wenn du gerade keine hast, lade Robins Bilder herunter und entpacke sie.

Deine Bilder hochladen

Klick in der Seitenleiste auf Assets, dann auf Upload files, und wähl alle deine Bilder auf einmal aus.

Klick ein Bild an, um rechts seine Details zu öffnen. Füll den Alt text aus: einen Satz, der sagt, was das Bild zeigt. Screenreader lesen ihn Menschen vor, die das Bild nicht sehen können, und Suchmaschinen verstehen das Bild damit. Klick auf Save changes und mach das für jedes Bild.

Jedes Bild bekommt einen Alt-Text, hier das Porträt.

Ein Projekt bearbeiten

Öffne Content, klapp Work auf und klick das erste Projekt an, Brand refresh. Das Formular hat die Felder des Inhaltstyps Project:

Title: der Name des Projekts.
Slug: der letzte Teil seiner Adresse, in Kleinbuchstaben mit Bindestrichen statt Leerzeichen. Für Bakery Bloom ist das bakery-bloom, die Seite liegt also unter /work/bakery-bloom.
Summary: ein oder zwei Sätze für Karten und Suchergebnisse.
Gallery und Body: weitere Bilder und die Geschichte des Projekts.
Rechts: Client, Year, Role und das Cover image.

Robin hat aus den drei Beispielen diese Projekte gemacht:

text

Bakery Bloom    Kunde: Bloom Bakery       Jahr: 2025   Rolle: Design and development
Pixel Weather   Kunde: Personal project   Jahr: 2026   Rolle: Design, pixel art and code
Space Hopper    Kunde: Game jam           Jahr: 2025   Rolle: Game design and code

Tipp deine eigenen Texte in die Felder. Fürs Titelbild klickst du auf Choose asset und wählst ein Bild:

Das Titelbild aus der Asset-Bibliothek wählen.

Die Galerie nimmt mehrere Bilder. Klick auf Choose assets, klick das erste Bild an, halt dann Strg (Cmd auf dem Mac) gedrückt und klick die anderen an. Der Knopf unten zählt mit.

Mit Strg-Klick wählst du mehrere Bilder für die Galerie.

Wenn alles ausgefüllt ist, klickst du auf Publish.

Bakery Bloom, bereit zum Veröffentlichen.

Bearbeite das zweite Beispiel, Trail app, genauso. Robin hat daraus Pixel Weather gemacht.

Projekte löschen und anlegen

Für das dritte Beispiel, City at night, hat Robin keine Verwendung. Öffne es, klick oben auf Delete und bestätige.

Wer ein Dokument löscht, löscht auch alles darunter im Baum.

Um ein neues Projekt anzulegen, fahr im Baum mit der Maus über Work und klick auf das + am Ende der Zeile. Es legt eine Seite darunter an, das Projekt landet also unter /work/….

Das Plus in der Zeile von Work legt eine Seite darunter an.

Manablox fragt, welchen Typ das neue Dokument hat. Wähl Project.

Ein Ordner, ein Projekt oder eine Seite.

Füll das Formular genauso aus wie vorher. Den Slug musst du nicht tippen: Er entsteht aus dem Titel. Dann veröffentlichst du.

Space Hopper: Der Slug kam aus dem Titel.

Die Abschnitte der Startseite

Seiten sind anders gebaut als Projekte: Sie sind ein Stapel aus Blöcken. Öffne Home. Unter Components siehst du ihre vier Blöcke: einen Hero, ein Projektraster, eine Galerie und einen Aufruf zum Handeln. Klick einen Block an, um ihn zu öffnen, nimm die Pfeile, um ihn nach oben oder unten zu schieben, und Add block, um einen weiteren hinzuzufügen.

Öffne den Hero und gib ihm deine Überschrift, eine kurze Unterzeile und ein Bild. Sein Knopf kann auf ein Dokument verlinken: Wähl Work und beschrifte ihn mit See my work.

Der Hero: Überschrift, Unterzeile, Bild und ein Knopf.

Öffne dann das Project grid. Es zeigt die Projekte, die du hier verlinkst, in dieser Reihenfolge. Das gelöschte Projekt ist schon verschwunden. Klick auf Link content, tipp die ersten Buchstaben deines neuen Projekts und wähl es aus.

Space Hopper mit dem Projektraster verknüpfen.

Das Raster zeigt jetzt alle drei Projekte. Die Pfeile ändern ihre Reihenfolge.

Gib dem Gallery-Block ein paar Bilder und eine Überschrift (Robins lautet Sketches and screens) und veröffentliche die Seite.

Die Seiten About und Contact funktionieren genauso. Auf About hat Robin einen kurzen Text über die eigene Arbeit in den Block Image and text geschrieben, das Porträt als Bild gewählt und einen Satz von Mara aus der Bloom Bakery ins Quote gesetzt. Auf Contact hat der Textblock eine E-Mail-Adresse bekommen und das Kontaktformular eine neue Überschrift: Send me a message.

Dein Name und deine Farben

Im Kopfbereich steht noch Portfolio. Öffne in der Seitenleiste Design, dann Site settings, ändere den Site name auf deinen Namen und klick auf Publish.

Der Name erscheint im Kopfbereich, im Fußbereich und im Browser-Tab.

Unter Design → Theme änderst du die Farben. Die Farbe Primary verwenden Links, Knöpfe und Hervorhebungen. Robin hat ein kräftiges Pink gewählt. Der Styleguide rechts zeigt jede Änderung sofort. Klick auf Publish, wenn sie dir gefällt.

Eine neue Primärfarbe, in der Vorschau auf Knöpfen und Links.

Das Ergebnis ansehen

Lade localhost:3200 neu. Die Beispiele sind weg, und das Portfolio zeigt deine Arbeit:

Das Projektraster mit echten Titelbildern.

Eine Projektseite: Zusammenfassung, Kunde, Jahr und Rolle, dann das Titelbild.

Das Kontaktformular ausprobieren

Öffne die Kontaktseite, füll das Formular aus und klick auf Send.

Die Nachricht landet im Admin unter Databags → Message. Ein Databag ist eine Liste von Einträgen, die keine Seiten sind, zum Beispiel Nachrichten aus Formularen.

Die Nachricht ist im Databag Message angekommen.

Das ist ein komplettes Portfolio, ohne eine Zeile Code. Wenn dir das reicht, kannst du direkt zum letzten Teil springen und es online bringen. Im nächsten Teil baust du für dieselben Inhalte ein eigenes Frontend.