Über diese Vorlage
Portfolio Cosmic wurde bei 800x562 erfasst und als Spezifikation abgelegt, nicht als Galeriebild. Sie beginnt mit „Designing seamless digital interactions by focusing on the unique nuances which bring systems to life“ und gibt dieser Zeile den Rahmen, statt sie in eine Karte zu schrumpfen. Das Farbschema ist schwarz #000000 darunter, weiß #D1DAD8 für die Schrift und blau #4E85BF für die Akzente, und die Seite ist in Inter gesetzt. Geliefert wird React und Tailwind CSS, erfasst bei 800x562, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Die Bewegung beschränkt sich auf Übergänge von 2700ms. Wenn du ein Briefing zum Thema Portfolio-Seite im Bereich 3D schreibst, starte bei dieser Komposition und tausche nur das Thema aus.
Gemacht für
- Wenn drei Leute an einem Portfolio-Seite-Design arbeiten, gib Content-Leads eine feste Display-Größe von 13px und 300vh hohe Sektionen statt eines Screenshots.
- Gemacht für einen Solo-Gründer, der ein Portfolio-Seite-Design für eine 3D-, Game- oder Entertainment-Marke ausliefert und kein Designsystem im Rücken hat.
- Wer ein Modell mit einem Portfolio-Seite-Briefing versorgt, startet mit dem Prompt über 8.253 Zeichen.
Was enthalten ist
- Leiste im Raster der Seite. Die Links stehen in einer Zeile bei einer einzigen Größe, und die Aktion in #4E85BF schließt die Zeile rechts ab, damit das Auge dort zur Ruhe kommt, wo die Navigation endet. Die Links sind kleiner gesetzt als die Wortmarke, und die Aktion in #4E85BF ist das einzige Element in der Leiste mit Gewicht.
- Größen im Briefing fixiert. Die Liste bleibt kurz (eine feste Display-Größe von 13px, 300vh hohe Sektionen, Abstände in 13px-Schritten und 2700ms Übergänge), deshalb lässt sich das ganze System von Hand prüfen. Das Briefing nennt Werte und keine Proportionen, damit die Komposition ihre Verhältnisse behält, wenn der Text länger oder kürzer wird. Prüfe einen Nachbau gegen dieselben Zahlen.
- Ein Raster, kein Textblock. Wo ein Textblock stehen könnte, setzt diese Seite eine Reihe Panels, das hält Portfolio-Seite scanbar. Die Panels teilen sich die Interface-Schrift in einer Größe, dadurch wird das Raster nicht zu einem zweiten Layout. Pass die Panel-Überschriften an die Seitenskala an.
- Navigation ohne Hintergrund. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 800x562, damit die Medien darunter bis an den Rand durchlaufen.
Bewegung & Interaktion
Schnell genug, um bewusst zu wirken
Übergänge sind auf 2700ms festgelegt; dieser Wert gilt auch für die Bedienelemente. Jeder Zustandswechsel nennt einen Wert, der Browser-Standard kommt nie zum Einsatz. Übernimm die Zeiten in deinen Nachbau.
Durchgehende horizontale Bewegung
Der horizontale Streifen ist nach der Überschrift das lauteste Element: durchgehende Bewegung, #4E85BF auf dem aktiven Eintrag, und er verlangt dem Leser nie eine Interaktion ab. Der aktive Eintrag ist mit #4E85BF markiert und nicht mit einer Größenänderung.
So wird der Eintrag Portfolio-Seite deiner
Die meisten fangen mit der Akzentfarbe an. Fang stattdessen beim Versprechen an: Schreib die Display-Zeile um und prüf dann blau #4E85BF gegen deine eigenen Medien. Die Komposition ist der wiederverwendbare Teil und übersteht eine andere Marke.
Was sich in Portfolio Cosmic bewegt
Du könntest eine Preset-Bibliothek über diese Komposition legen, und sie würde geschäftiger wirken, nicht besser. Das Briefing bleibt bei einer kurzen Liste: Übergänge von 2700ms, Parallax-Ebenen und ein Sticky-Element. Nichts in diesem Eintrag Portfolio-Seite animiert um seiner selbst willen.
Was der Eintrag Portfolio-Seite richtig macht
Der Preis ist Dichte: Dieser Eintrag Portfolio-Seite sagt auf dem ersten Screen weniger als ein feature-getriebenes Layout. Was bleibt, ist die Leserichtung, und die Navigation, das Ankündigungs-Badge, die Kennzahlen-Zeile, das Kartenraster und der Hintergrund-Clip leisten die Arbeit, die eine längere Seite verteilen würde. Portfolio Cosmic nennt das Angebot einmal und lässt die Komposition es wiederholen, statt eine zweite Behauptung zu ergänzen.
Häufige Fragen
Ist der Prompt zu Portfolio Cosmic eine fertige Spezifikation oder ein Ausgangspunkt?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 800x562, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Warum nennt der Eintrag React und Tailwind CSS überhaupt?
Portfolio Cosmic 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.
Kann ich eine aus Portfolio Cosmic nachgebaute Seite veröffentlichen, ohne die Quelle zu nennen?
Das Briefing ist eine Beschreibung, keine Lizenz zur Weitergabe fremder Dateien. Behalte Struktur und Zahlen, ersetze Medien und Markenzeichen, und nenne die Quelle, wenn ein Kunde fragt, woher das Layout stammt. Die Referenz wurde mit 800x562 erfasst.
