Über diese Vorlage
Das hier ist der Eintrag Portfolio-Seite von 3D Portfolio, veröffentlicht mit dem Briefing, das ihn hervorgebracht hat, statt als Screenshot. Die Überschrift der Seite lautet „Jack — 3D Creator“, und die Komposition ist um genau diese Worte gebaut. Die ganze Seite baut auf schwarz #0C0C0C darunter und weiß #D7E2EA für die Schrift auf. Der Eintrag nennt den Stack, der die Seite erzeugt hat (React und Tailwind CSS), statt ihn zu verschweigen. Die Bewegung ist Übergänge von 200ms und eine Videospur in Schleife und bleibt so zurückhaltend, dass die Texte weiter führen. Diese Referenz ist für eine 3D-, Game- oder Entertainment-Marke gedacht, wenn der erste Screen vor dem Build feststehen soll.
Gemacht für
- Halte ein 1472x1080 Rahmen in der Übergabe-Notiz fest, damit der nächste Build die Angabe nicht aus der Seite herauslesen muss.
- Wenn die Bewegung wegfallen muss, funktioniert das Portfolio-Seite-Design trotzdem, weil dann 85vh hohe Sektionen und Abstände in 160px-Schritten die Hierarchie übernehmen.
- Studio-Leads, die mehrere Projekte parallel fahren, nehmen dieses Portfolio-Seite-Design als Muster, das jede weitere Seite kopiert.
Was enthalten ist
- Navigation ohne Hintergrund. Die Leiste ist eine Zeile aus Text und einer Aktion, auf 85vh hohe Sektionen und Abstände in 160px-Schritten bemessen, damit sie als Streifen wirkt und nicht als Band. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 1472x1080, damit die Medien darunter bis an den Rand durchlaufen. Die Leiste besteht aus wenigen Elementen und lässt sich ohne Komponentenbibliothek nachbauen.
- Badge über dem Falz. Eine einzelne Pille trägt die Ankündigung über der Headline, und um diese Position konkurriert nichts anderes. Es gibt nur eine Ankündigung, und das lässt das Badge wie eine Neuigkeit wirken. Nimm es weg, wenn die Nachricht alt ist.
- Links vor der Aktion. Die Leiste überlagert Portfolio-Seite, statt Raum darunter zu belegen, damit die Komposition die volle Höhe des ersten Bildschirms behält. Übernimm dieses Muster, wenn die Navigation einen lauten ersten Screen überstehen soll.
- Größen im Briefing fixiert. Im Layout bleibt nichts dem Gefühl überlassen: Das Briefing nennt 85vh hohe Sektionen, Abstände in 160px-Schritten und 200ms Übergänge, und der Build muss genau diese Werte treffen. Weil die Werte feststehen, ändert ein Austausch die Optik, ohne den Rhythmus zu verändern. Prüfe einen Nachbau gegen dieselben Zahlen.
Bewegung & Interaktion
Das ganze Animationsbudget
Zustandswechsel sind mit 200ms angegeben, die Rückmeldung der Bedienelemente ist damit ein gestalteter Wert und kein Browser-Standard. Weil die Werte kurz sind, fällt ein Nachbau mit langsameren Zeiten sofort auf. Wenn du das Easing änderst, ändere es überall.
Tiefe aus dem Rendering
Das Bild entsteht zur Laufzeit (ein 3D-Transform auf dem Hauptelement) und wird nicht als Standbild geladen, der Rahmen mit 1472x1080 braucht dadurch ein Asset weniger. Das Briefing hält die Oberfläche um die Canvas schlicht, damit die Szene das einzige Spektakel bleibt.
Was du in 3D Portfolio zuerst änderst
Wenn du eigene Medien einsetzt, behalt Zuschnitt und Ebenenreihenfolge. Das Medium ist eine Schleife von 6,4s in 1472x1080. Genau diese Platzierung hält den Text lesbar. Rahmen und Skala sind das, was unangetastet bleibt.
3D Portfolio als Spezifikation lesen
Das Briefing ist eine Spezifikation: 85vh hohe Sektionen, Abstände in 160px-Schritten und 200ms Übergänge, und der Medienrahmen ist bei 1472x1080 festgelegt, bevor irgendetwas darum herum entworfen wird. Nichts in diesem Eintrag Portfolio-Seite hängt an einer Voreinstellung.
Wie der Eintrag Portfolio-Seite umbricht
Verglichen mit einem Mobil-Layout, das Sektionen ausblendet, behält dieses sie und ändert ihre Form: die Skala ist fließend statt gestuft und der Bereich wird auf 85vh gehalten. Das schmale Layout ist eine Entscheidung und keine Quetschung, und die Hierarchie übersteht sie.
Häufige Fragen
Ist der Prompt zu 3D Portfolio eine fertige Spezifikation oder ein Ausgangspunkt?
Das erfasste Briefing umfasst 13.877 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 3D Portfolio aufgebaut?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 13.877 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
Warum nennt der Eintrag React und Tailwind CSS überhaupt?
3D Portfolio 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.
