joyeking/redesigned-portfolio

Interacciones del carrusel del portfolio

Usa este skill al modificar el carrusel de proyectos en la página de inicio o el carrusel de diseño gráfico en la página de Proyectos. Si el usuario dice que use o haga referencia a este skill, implementa el patrón relevante directamente y adapta su contenido a la solicitud.

Contexto del proyecto

Este sitio es un portfolio estático generado por build_site.mjs, con comportamiento compartido en site.js y estilos en site.css. Mantén la implementación nativa a esa arquitectura. No instales React Bits, añadas un runtime de React, configures una clave de licencia ni copies un componente propietario. El Carrusel Prism y el Álbum Rail de React Bits son solo referencias visuales/de interacción.

Preserva la paleta de colores, tipografía y tokens de diseño existentes del sitio. Una solicitud de carrusel por sí sola no autoriza cambiarlos. Mantén el contenido de página y las rutas actuales funcionando, y asegúrate de que las obras de arte sean completamente visibles sin recortes accidentales (usa ajuste de imagen contenido donde la obra misma debe permanecer intacta).

Página de inicio: Trabajo seleccionado estilo Prism

La sección #featured de la página de inicio presenta los proyectos en un coverflow rectangular centrado. Cada proyecto es una diapositiva que contiene tanto su imagen como su descripción del proyecto/problema, para que transicionen juntos como una unidad.

• Mantén un proyecto prominente en el centro; muestra los proyectos adyacentes como vistas previas progresivamente más estrechas, más pequeñas, atenuadas/desaturadas a ambos lados.
• Al navegar, mueve toda la diapositiva (imagen y texto) al foco con una transición suave de coverflow y un breve y sutil destello de luz sobre la imagen activa.
• Soporta botones anterior/siguiente, marcas de progreso directas, arrastre/deslizamiento horizontal con el puntero, desplazamiento con la rueda del escenario y teclas de flecha izquierda/derecha cuando el escenario está enfocado. Envuelve al llegar al primer y último proyecto.
• Mantén la imagen centrada en un marco rectangular y preserva su composición completa. Mantén el texto de descripción legible agrupado directamente debajo de su imagen.
• Mantén etiquetas accesibles, visibilidad del foco, aria-hidden para diapositivas fuera de pantalla, y un estado anunciado/actual para el indicador seleccionado. Evita que un arrastre abra accidentalmente un enlace de proyecto.
• En pantallas estrechas, conserva la misma relación imagen-más-descripción y controles utilizables; reduce dimensiones y espaciado en lugar de recortar la obra activa.

Página de Proyectos: Galería gráfica inspirada en álbum-rail

La sección #ideas de Diseño gráfico es una galería horizontal de estilo fan/coverflow que muestra una imagen a la vez. Está inspirada en las fundas de álbumes superpuestas de Album Rail, pero utiliza las propias obras de arte del sitio y una presentación rectangular.

• Centra una imagen rectangular de tamaño fijo. Muestra las imágenes vecinas extendidas a ambos lados con escala progresivamente menor, ligera rotación y menor opacidad; usa un fondo rectangular borroso suave detrás del carril.
• No añadas una enredadera, disco, vinilo o decoración de reproductor de álbumes. No conviertas la galería en una fila de tarjetas genéricas.
• Mantén la galería centrada en la obra de arte. El pie de foto del elemento seleccionado puede mostrar solo su título y disciplina/categoría; no añadas descripciones de proyecto a estos elementos de galería.
• Avanza un elemento a la vez con desplazamiento de rueda del escenario, botones anterior/siguiente, arrastre/deslizamiento horizontal, y teclas de flecha izquierda/derecha. Al hacer clic en una imagen lateral visible, se selecciona. El carrusel envuelve al llegar al final de la colección.
• Mantén Limitless fuera de esta galería gráfica. Sus pantallas de UI/UX móvil y su descripción explicativa pertenecen a su propia sección dedicada, con las pantallas mostradas juntas como una vitrina de diseño de aplicación independiente.
• Preserva las relaciones de aspecto de las imágenes y muestra el diseño completo dentro del marco. Haz que el carril sea responsivo sin permitir que el desbordamiento de diapositivas cree desplazamiento horizontal a nivel de página.

Flujo de implementación

1. Inspecciona el generador de marcado, el comportamiento y el CSS actuales antes de editar. Los puntos de entrada existentes son build_site.mjs (#featured, #ideas y la sección dedicada de Limitless), site.js ([data-prism-carousel] y [data-design-carousel]) y site.css (las reglas .prism-* y .design-*). Los números de línea pueden cambiar; busca por estos selectores.
2. Cambia solo el carrusel o la sección solicitada. Mantén el contenido de los proyectos basado en datos y los enlaces existentes; no dupliques contenido en diapositivas codificadas de forma fija.
3. Mantén las interacciones de puntero, rueda, botón, teclado y clic consistentes con el comportamiento anterior. Evita el secuestro global del desplazamiento; captura la entrada de la rueda solo mientras el puntero esté sobre el escenario del carrusel.
4. Respeta prefers-reduced-motion, proporciona un foco de teclado visible, y asegúrate de que las diapositivas ocultas no puedan recibir foco ni entrada de puntero.
5. Cuando se te pida verificar o previsualizar, inspecciona tanto la página de inicio como la página de Proyectos en anchos de escritorio y estrechos, incluyendo el ajuste de imagen, las transiciones, los controles y la sección independiente de Limitless.