joyeking/redesigned-portfolio

Portfolio-Karussell-Interaktionen

Verwenden Sie dieses Skill, wenn Sie das Projekt-Karussell auf der Landingpage oder das Grafikdesign-Karussell auf der Projekte-Seite ändern. Wenn der Benutzer sagt, dieses Skill zu verwenden oder darauf zu verweisen, implementieren Sie das entsprechende Muster direkt und passen Sie den Inhalt an die Anfrage an.

Projektkontext

Diese Website ist ein statisches Portfolio, das von build_site.mjs generiert wird, mit gemeinsamem Verhalten in site.js und Styling in site.css. Halten Sie die Implementierung nativ zu dieser Architektur. Installieren Sie keine React Bits, fügen Sie keine React-Laufzeitumgebung hinzu, konfigurieren Sie keinen Lizenzschlüssel und kopieren Sie keine proprietäre Komponente. Die React Bits Prism Carousel und Album Rail sind nur visuelle/Interaktions-Referenzen.

Behalten Sie die vorhandene Farbpalette, Typografie und Design-Tokens der Website bei. Eine Karussell-Anfrage allein berechtigt nicht zu deren Änderung. Sorgen Sie dafür, dass die aktuellen Seiteninhalte und Routen funktionsfähig bleiben, und stellen Sie sicher, dass Kunstwerke vollständig sichtbar sind, ohne versehentliches Beschneiden (verwenden Sie eine eingepasste Bilddarstellung, wo das Kunstwerk selbst intakt bleiben muss).

Landingpage: Prism-Stil ausgewählte Arbeiten

Der Abschnitt #featured auf der Landingpage präsentiert Projekte in einem zentrierten, rechteckigen Coverflow. Jedes Projekt ist ein Slide, das sowohl sein Bild als auch seine Projekt-/Problembeschreibung enthält, sodass sie zusammen als eine Einheit übergehen.

• Halten Sie ein Projekt prominent in der Mitte; zeigen Sie benachbarte Projekte als zunehmend schmalere, kleinere, abgedunkelte/entsättigte Vorschauen auf beiden Seiten.
• Verschieben Sie bei der Navigation das gesamte Slide (Bild und Text) mit einem sanften Coverflow-Übergang und einem kurzen, zurückhaltenden Lichtstreifen über das aktive Bild in den Fokus.
• Unterstützen Sie Vorher-/Nächste-Schaltflächen, direkte Fortschrittspunkte, horizontales Ziehen/Wischen mit dem Zeiger, Mausrad-Scrolling auf der Bühne und linke/rechte Pfeiltasten der Tastatur, wenn die Bühne fokussiert ist. Wickeln Sie am ersten und letzten Projekt.
• Halten Sie das zentrierte Bild in einem rechteckigen Rahmen und bewahren Sie seine vollständige Komposition. Halten Sie lesbaren Beschreibungstext direkt unter seinem Bild gruppiert.
• Behalten Sie zugängliche Labels, Sichtbarkeit des Fokus, aria-hidden für nicht sichtbare Slides und einen angesagten/aktuellen Status für den ausgewählten Indikator bei. Verhindern Sie, dass ein Ziehen versehentlich einen Projektlink öffnet.
• Auf schmalen Bildschirmen behalten Sie die gleiche Bild-plus-Beschreibungs-Beziehung und nutzbare Steuerelemente bei; reduzieren Sie Abmessungen und Abstände, anstatt das aktive Kunstwerk zu beschneiden.

Projekte-Seite: Album-Rail-inspirierte Grafikgalerie

Der Abschnitt #ideas Grafikdesign ist eine Einzelbild-pro-Zeit, horizontaler Fächer/Coverflow von Grafikdesign-Arbeiten. Er ist von den geschichteten Albumhüllen der Album Rail inspiriert, verwendet jedoch die eigenen Kunstwerke und die rechteckige Präsentation dieser Website.

• Zentrieren Sie ein festes, rechteckiges Bild. Zeigen Sie benachbarte Bilder fächerartig auf beiden Seiten mit zunehmend kleinerer Skalierung, leichter Drehung und geringerer Deckkraft; verwenden Sie eine weiche, unscharfe rechteckige Hintergrundfläche hinter der Schiene.
• Fügen Sie keine Ranke, Schallplatte, Vinylscheibe oder Album-Player-Dekoration hinzu. Verwandeln Sie die Galerie nicht in eine Reihe generischer Karten.
• Halten Sie die Galerie fokussiert auf das Kunstwerk. Die Beschriftung des ausgewählten Elements darf nur seinen Titel und seine Disziplin/Kategorie zeigen; fügen Sie diesen Galerieelementen keine Projektbeschreibungen hinzu.
• Blättern Sie ein Element nach dem anderen bei Mausrad-Scrolling auf der Bühne, Vorher-/Nächste-Schaltflächen, horizontalem Ziehen/Wischen und linken/rechten Pfeiltasten. Ein Klick auf ein sichtbares Seitenbild wählt es aus. Wickeln Sie um die Sammlung.
• Halten Sie Limitless aus dieser Grafikgalerie heraus. Seine mobilen UI/UX-Bildschirme und erklärenden Beschreibungen gehören in einen eigenen dedizierten Abschnitt, wobei die Bildschirme zusammen als separate App-Design-Präsentation angezeigt werden.
• Bewahren Sie die Bildseitenverhältnisse und zeigen Sie das gesamte Design innerhalb des Rahmens. Machen Sie die Schiene responsiv, ohne dass ein Überlauf von Slides zu horizontalem Scrollen auf Seitenebene führt.

Implementierungs-Workflow

1. Überprüfen Sie den aktuellen Markup-Generator, das Verhalten und das CSS, bevor Sie Änderungen vornehmen. Die vorhandenen Einstiegspunkte sind build_site.mjs (#featured, #ideas und der dedizierte Limitless-Abschnitt), site.js ([data-prism-carousel] und [data-design-carousel]) und site.css (die .prism-*- und .design-*-Regeln). Zeilennummern können sich ändern; suchen Sie nach diesen Selektoren.
2. Ändern Sie nur das angeforderte Karussell oder den angeforderten Abschnitt. Behalten Sie datengesteuerte Projektinhalte und vorhandene Links bei; duplizieren Sie keine Inhalte in hartcodierte Slides.
3. Halten Sie Interaktionen per Zeiger, Rad, Schaltfläche, Tastatur und Klick konsistent mit dem obigen Verhalten. Vermeiden Sie globales Scroll-Hijacking; erfassen Sie Radeingaben nur, während sich der Zeiger über der Karussell-Bühne befindet.
4. Respektieren Sie prefers-reduced-motion, bieten Sie sichtbaren Tastaturfokus und stellen Sie sicher, dass versteckte Slides keinen Fokus oder Zeigereingaben empfangen können.
5. Wenn Sie aufgefordert werden, zu überprüfen oder eine Vorschau anzuzeigen, überprüfen Sie sowohl die Landingpage als auch die Projekte-Seite auf Desktop- und schmalen Breiten, einschließlich Bildanpassung, Übergängen, Steuerelementen und des eigenständigen Limitless-Abschnitts.