Über diese Vorlage
Personal Showcase ist eine brauchbare Referenz für dieses Publikum: die Komposition (Portfolio-Seite), ausgelegt für eine Agentur oder ein Studio, vermessen und bereit zum Nachbauen. Die Palette ist tiefes blau #050E13 darunter und weiß #EFEEE9 für die Schrift, gesetzt in Inter. Geliefert wird React und Tailwind CSS: eine Seite, kein Plugin, kein Build-Tooling zwischen dir und dem Design. Die Bewegung kommt über Übergänge von 300ms, cubic-bezier(0.76, 0, 0.24, 1) und eine Videospur in Schleife nicht hinaus. Leih dir die Struktur, nicht das Thema: Die Zahlen zum Thema Portfolio-Seite wandern unverändert in deine Marke.
Gemacht für
- Gemacht für Agenturen, die Projekte aus dem Bereich Agentur pitchen und ein 1462x1080 Rahmen schon in der ersten Antwort an den Kunden brauchen.
- Dieses Portfolio-Seite-Design beantwortet die Frage, was 16vh hohe Sektionen und Abstände in 28px-Schritten im Layout tatsächlich bewirken.
- Dieses Portfolio-Layout richtet sich an Gründer, die einen einzigen Screen als Beleg brauchen, dass Copy für Agentur 12,9s Video in Schleife tragen kann.
Was enthalten ist
- Ein Breakpoint für die Links. Die Navigation ist eine einzige Zeile ohne zweite Ebene darunter. Unterhalb des Tablet-Breakpoints übernimmt ein mobiles Overlay. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 1462x1080, damit die Medien darunter bis an den Rand durchlaufen. Die Leiste besteht aus wenigen Elementen und lässt sich ohne Komponentenbibliothek nachbauen.
- Eine Leiste ohne Beiwerk. Die Leiste ist eine Zeile aus Text und einer Aktion, auf 16vh hohe Sektionen und Abstände in 28px-Schritten bemessen, damit sie als Streifen wirkt und nicht als Band.
- Größen im Briefing fixiert. Die Werte sind die Spezifikation: 16vh hohe Sektionen, Abstände in 28px-Schritten, 300ms Übergänge und Easing cubic-bezier(0.76, 0, 0.24, 1), aufgenommen bei 1462x1080 und nicht aus einem Screenshot abgeleitet. Weil die Werte feststehen, ändert ein Austausch die Optik, ohne den Rhythmus zu verändern. Behalte die Werte, die willkürlich wirken.
- Das Posterbild ist entscheidend. Das Video über 1462x1080 läuft 12,9s in Schleife hinter dem Text, stumm und inline, ohne Tönungsebene dazwischen. Exportiere in 1462x1080 oder breiter, dann funktioniert der Zuschnitt auf volle Abdeckung weiter.
Bewegung & Interaktion
Kurze, benannte Zeiten
Jeder Zustandswechsel in der Spezifikation hat eine Dauer: Übergänge laufen etwa 300ms auf cubic-bezier(0.76, 0, 0.24, 1). Nichts bleibt beim Browser-Standard, deshalb wirkt die Seite gesetzt und nicht animiert. Ändert sich das Easing, muss die Dauer mit angepasst werden. Behalte die Dauern, wenn du die Seite neu gestaltest.
Eine Schleife, keine Timeline
Ein einziger Clip von 12,9s ist die ganze Hintergrundebene: Er läuft hinter dem Text, schleift ohne sichtbaren Schnitt und reagiert nie auf den Zeiger. Weil er stumm ist, kann die Schleife unter dem Text laufen, ohne um Ton oder Aufmerksamkeit zu konkurrieren.
Wie Personal Showcase den ersten Blick ordnet
Eine strenge Reihenfolge kostet später Flexibilität. Kommt eine Sektion über den Fold, müssen 16vh hohe Sektionen und Abstände in 28px-Schritten neu geschnitten werden, weil die Abfolge tragend ist und nicht dekorativ. Ein Leser im Bereich Agentur bekommt das Angebot vor den Optionen.
Was du in Personal Showcase zuerst änderst
Vergleich das mit einem leeren Blatt. Hier sind der Rahmen (1462x1080) und 16vh hohe Sektionen und Abstände in 28px-Schritten bereits entschieden, die Arbeit ist also Substitution und nicht Komposition. Substitution ist billiger als Komposition, und darum geht es.
Wie der Eintrag Portfolio-Seite umbricht
Ein entworfenes schmales Layout kostet mehr Entscheidungen als eine Quetschung. Das Briefing bezahlt sie: der Bereich wird auf 16vh gehalten, die Navigation klappt zu einem mobilen Menü zusammen und die Bewegung hat einen Reduced-Motion-Zweig, genannt und nicht erst zur Build-Zeit entdeckt. Bedienelemente bleiben groß genug zum Tippen, und der Text behält bei jeder Breite seine Lesereihenfolge.
Häufige Fragen
Was steht eigentlich im Briefing hinter Personal Showcase?
Das erfasste Briefing umfasst 6.948 Zeichen und beschreibt Rahmen, Schriftgrößen-Skala, Palette und Übergänge. Wenn du es kopierst, hast du genau diesen Text; schickst du es an Studio, wird dieselbe Anfrage mit der bereits beschriebenen Seite vorbereitet.
Wie ist dieser Eintrag zu Personal Showcase aufgebaut?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 6.948 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
Kann ich Portfolio-Seite von Personal Showcase in einem anderen Stack nachbauen?
Personal Showcase wurde in React und Tailwind CSS gebaut, und der Eintrag nennt das, um die Herkunft zu belegen. Das Briefing beschreibt Positionen, Größen und Zeitwerte, also lässt sich die Seite in jedem Framework nachbauen, das Schrift setzen und Elemente platzieren kann.
