Zum Inhalt springen
UI Kit
Accent

Portfolio-Sections und Projektseiten

Projekte als gefiltertes Raster, große Zeilen, seitliche Galerie, Index mit Bild beim Überfahren, Projektkopf und ein Projekt in Zahlen.

6 Variants
Kategorie wechseln

Erst die Arbeit, dann die Geschichte

Ein Portfolio ist eine Liste von Belegen, und die sechs Layouts hier zeigen Projekte als mehr als Vorschaubilder. Sie nehmen Titel, Kunde, Jahr, Tags, Titelbild und Link als Daten, Übersicht und Projektseite lesen also aus denselben Einträgen.

Das Raster mit Filter ist die Übersicht für Studios mit vielen Projekten aus mehreren Disziplinen. Große Zeilen im Wechsel geben jedem Projekt Bild und Absatz, für eine Handvoll starker Fälle. Die horizontale Galerie zeigt Arbeiten als Querstreifen, die Liste mit Bild beim Überfahren ist der ruhige Index, den Designer und Architekturbüros mögen. Der Projektkopf eröffnet eine Fallstudie, „Projekt in Zahlen“ schließt sie mit Ergebnissen.

Fang mit deinen drei besten Projekten an, nicht mit den neuesten. Sag in je einem Satz, was die Aufgabe war und was sich geändert hat. Jeder Projekttitel verlinkt auf eine eigene Seite, so bekommen Suchmaschinen eine Seite je Fall statt einer langen Liste.

Portfolio

Raster mit Filter

Arbeiten in zwei ruhigen Spalten, gefiltert nach Disziplin.

Im Studio öffnen

Große Zeilen im Wechsel

Ein Projekt pro Zeile, das Bild abwechselnd links und rechts.

Im Studio öffnen

Projektkopf

Der Auftakt einer Projektseite mit Titel, Eckdaten und Bildern.

Im Studio öffnen

Horizontale Galerie

Hohe Projektkarten laufen bis an den Rand, mit Pfeilen und Fortschritt.

Im Studio öffnen

Liste mit Bild beim Überfahren

Ein Index großer Titel, auf dem Desktop folgt das Bild dem Zeiger.

Im Studio öffnen

Projekt in Zahlen

Ergebnisse, Zeitplan und Lieferumfang eines Projekts neben seinem Bild.

Im Studio öffnen

Details

Was Portfolio mitbringt, aus Registry und Quellcode gelesen.

Bereich
Content
Variants
6
Version
1.0.0 · seit 1.0.0
Datei
components/ui/portfolio.tsx
Bringt mit
utilskitbuttoniconsectionreveal
npm-Pakete
Keine
Sprachen
Englisch und Deutsch, 14 eigene Texte
Studio
Alle 6 Variants bearbeitbar
In Sammlungen
Portfolio
Mit KI bauen
Per MCP in Claude, Cursor, Copilot und Codex

Props

Die Schnittstelle PortfolioProps aus components/ui/portfolio.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

  • variantoptional
    PortfolioVariant

    filter-gridalternatingproject-headerhorizontalhover-listproject-stats

  • eyebrowoptional
    React.ReactNode
  • titleoptional
    React.ReactNode
  • descriptionoptional
    React.ReactNode
  • projectsoptional
    PortfolioProject[]
  • projectoptional
    PortfolioDetail

    project-header

  • statsoptional
    PortfolioStats

    project-stats

  • actionoptional
    { label: string; href: string }

Eingebaute Texte

Diese Texte schreibt Portfolio selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.

Alle 14 Texte anzeigen
allEnglisch All workDeutsch Alle Arbeiten
filterEnglisch Filter projectsDeutsch Projekte filtern
viewEnglisch View projectDeutsch Projekt ansehen
previousEnglisch Previous projectsDeutsch Vorherige Projekte
nextEnglisch Next projectsDeutsch Nächste Projekte
projectsEnglisch ProjectsDeutsch Projekte
backEnglisch All projectsDeutsch Alle Projekte
liveEnglisch Visit the live siteDeutsch Live-Seite besuchen
clientEnglisch ClientDeutsch Kunde
yearEnglisch YearDeutsch Jahr
deliverablesEnglisch DeliveredDeutsch Geliefert
timelineEnglisch TimelineDeutsch Zeitplan
weeksEnglisch {n} weeksDeutsch {n} Wochen
weekEnglisch {n} weekDeutsch {n} Woche

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • Portfolio reagiert selbst auf die Tasten Pfeil links, Pfeil rechts und Leertaste.
  • Setzt aria-label, aria-live und aria-pressed, damit Screenreader Zweck und Zustand ansagen.
  • Nutzt die Rollen group und region.
  • Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
  • Ergänzt Text für Screenreader, wo Icons und Grafiken allein stehen.
  • Zeigt bei Bedienung mit der Tastatur einen sichtbaren Fokusring.
  • Der Server rendert den Startzustand vollständig, JavaScript ergänzt nur die Interaktion.

Bewegung

  • Erscheint beim ersten Sichtkontakt mit einem kurzen Auftritt (kit-rise, useInView).
  • Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
  • Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 9 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Portfolio?

Mit aiw add @ai-website/portfolio. Der Befehl legt die Datei components/ui/portfolio.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind button, icon, section und reveal. Weitere npm-Pakete braucht sie nicht.

Welche Varianten hat Portfolio?

6 Varianten, Raster mit Filter, Große Zeilen im Wechsel, Projektkopf, Horizontale Galerie, Liste mit Bild beim Überfahren und Projekt in Zahlen. Du wählst sie mit der Prop variant, zum Beispiel variant="alternating".

Kann ich die Texte von Portfolio übersetzen?

Ja. Portfolio bringt 14 eigene Texte auf Deutsch und Englisch mit, etwa „Alle Arbeiten“, „Projekte filtern“ und „Projekt ansehen“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Portfolio einbauen?

Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Portfolio mit aiw_components und installieren sie mit aiw_add @ai-website/portfolio. Nenn im Prompt die Variante, etwa variant="filter-grid", dann schreibt der Assistent deine Inhalte direkt in die Props.

Kann ich Portfolio ohne Code anpassen?

Ja, im Studio. Alle 6 Varianten lassen sich dort bearbeiten, Texte, Listen und Schalter. Das Studio schreibt den passenden Portfolio-Code zum Kopieren.

Ähnliche Components

Mehr aus Content, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Portfolio stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert