joyeking/redesigned-portfolio

Interactions du carrousel du portfolio

Utilisez cette compétence lorsque vous modifiez le carrousel de présentation des projets sur la page d'accueil ou le carrousel de design graphique sur la page Projets. Si l'utilisateur vous dit d'utiliser ou de référencer cette compétence, implémentez directement le motif pertinent et adaptez son contenu à la demande.

Contexte du projet

Ce site est un portfolio statique généré par build_site.mjs, avec le comportement partagé dans site.js et le style dans site.css. Conservez l'implémentation native à cette architecture. N'installez pas React Bits, n'ajoutez pas de runtime React, ne configurez pas de clé de licence et ne copiez pas de composant propriétaire. Le Prism Carousel et l'Album Rail de React Bits sont uniquement des références visuelles/interactives.

Conservez la palette de couleurs, la typographie et les tokens de design existants du site. Une demande de carrousel à elle seule n'autorise pas leur modification. Maintenez le contenu et les routes actuels des pages, et assurez-vous que les œuvres sont entièrement visibles sans recadrage accidentel (utilisez un ajustement d'image contenu là où l'œuvre elle-même doit rester intacte).

Page d'accueil : travaux sélectionnés style Prism

La section #featured de la page d'accueil présente les projets dans un coverflow rectangulaire centré. Chaque projet est un seul diapositive contenant à la fois son image et sa description du projet/problème, de sorte qu'ils transitionnent ensemble comme une seule unité.

• Gardez un projet proéminent au centre ; montrez les projets adjacents comme des aperçus progressivement plus étroits, plus petits, atténués/désaturés des deux côtés.
• Lors de la navigation, déplacez la diapositive entière (image et texte) au premier plan avec une transition coverflow fluide et un léger éclat de lumière bref et retenu sur l'image active.
• Prenez en charge les boutons précédent/suivant, les indicateurs de progression directs, le glissement/balayage horizontal du pointeur, le défilement de la molette sur la zone, et les flèches gauche/droite du clavier lorsque la zone est focalisée. Effectuez un cycle entre le premier et le dernier projet.
• Gardez l'image centrée dans un cadre rectangulaire et préservez sa composition complète. Gardez un texte de description lisible regroupé directement sous son image.
• Maintenez des étiquettes accessibles, la visibilité du focus, aria-hidden pour les diapositives hors écran, et un état annoncé/actuel pour l'indicateur sélectionné. Empêchez un glissement d'ouvrir accidentellement un lien de projet.
• Sur les écrans étroits, conservez la même relation image-plus-description et des contrôles utilisables ; réduisez les dimensions et l'espacement plutôt que de recadrer l'œuvre active.

Page Projets : galerie graphique inspirée de l'album-rail

La section #ideas de design graphique est une galerie horizontale en éventail/coverflow de travaux de design graphique, présentant une seule image à la fois. Elle est inspirée des pochettes d'albums superposées d'Album Rail, mais utilise les propres œuvres de ce site et une présentation rectangulaire.

• Centrez une image rectangulaire de taille fixe. Montrez les images voisines déployées de chaque côté avec une échelle progressivement plus petite, une légère rotation et une opacité réduite ; utilisez un fond rectangulaire flou doux derrière le rail.
• N'ajoutez pas de vigne, de disque, de vinyle ou de décoration de lecteur d'album. Ne transformez pas la galerie en une rangée de cartes génériques.
• Gardez la galerie centrée sur l'œuvre. La légende de l'élément sélectionné peut afficher son titre et sa discipline/catégorie uniquement ; n'ajoutez pas de descriptions de projet à ces éléments de galerie.
• Avancez d'un élément à la fois lors du défilement de la molette sur la zone, des boutons précédent/suivant, du glissement/balayage horizontal et des flèches gauche/droite du clavier. Cliquer sur une image latérale visible la sélectionne. Effectuez un cycle dans la collection.
• Gardez Limitless en dehors de cette galerie graphique. Ses écrans mobiles UI/UX et sa description explicative appartiennent à leur propre section dédiée, avec les écrans affichés ensemble comme une vitrine distincte de design d'application.
• Préservez les proportions des images et montrez le design complet à l'intérieur du cadre. Rendez le rail réactif sans permettre aux débordements de diapositives de créer un défilement horizontal au niveau de la page.

Flux de travail d'implémentation

1. Inspectez le générateur de balisage, le comportement et le CSS actuels avant de modifier. Les points d'entrée existants sont build_site.mjs (#featured, #ideas et la section dédiée Limitless), site.js ([data-prism-carousel] et [data-design-carousel]) et site.css (les règles .prism-* et .design-*). Les numéros de ligne peuvent changer ; recherchez par ces sélecteurs.
2. Modifiez uniquement le carrousel ou la section demandée. Conservez le contenu des projets basé sur les données et les liens existants ; ne dupliquez pas le contenu dans des diapositives codées en dur.
3. Maintenez les interactions de pointeur, de molette, de bouton, de clavier et de clic cohérentes avec le comportement ci-dessus. Évitez le détournement global du défilement ; ne capturez la saisie de la molette que lorsque le pointeur se trouve sur la zone du carrousel.
4. Respectez prefers-reduced-motion, fournissez un focus clavier visible et assurez-vous que les diapositives masquées ne peuvent pas recevoir le focus ou la saisie du pointeur.
5. Lorsqu'on vous demande de vérifier ou de prévisualiser, inspectez à la fois la page d'accueil et la page Projets en largeur de bureau et étroite, y compris l'ajustement des images, les transitions, les contrôles et la section autonome Limitless.