joyeking/redesigned-portfolio

Portfolio carousel interactions

Use this skill when changing the project showcase carousel on the landing page or the graphic-design carousel on the Projects page. If the user says to use or reference this skill, implement the relevant pattern directly and adapt its content to the request.

Project context

This site is a static portfolio generated by build_site.mjs, with shared behavior in site.js and styling in site.css. Keep the implementation native to that architecture. Do not install React Bits, add a React runtime, configure a license key, or copy a proprietary component. The React Bits Prism Carousel and Album Rail are visual/interaction references only.

Preserve the site's existing color palette, typography, and design tokens. A carousel request alone does not authorize changing them. Keep the current page content and routes working, and ensure artwork is fully visible without accidental cropping (use contained image fitting where the artwork itself must remain intact).

Landing page: Prism-style selected work

The landing page's #featured section presents projects in a centered, rectangular coverflow. Each project is one slide containing both its image and its project/problem description, so they transition together as one unit.

• Keep one project prominent in the center; show adjacent projects as progressively narrower, smaller, dimmed/desaturated previews at both sides.
• On navigation, move the whole slide (image and copy) into focus with a smooth coverflow transition and a brief, restrained light sweep across the active image.
• Support previous/next buttons, direct progress ticks, horizontal pointer drag/swipe, stage wheel scrolling, and left/right keyboard arrows when the stage is focused. Wrap at the first and last project.
• Keep the centered image in a rectangular frame and preserve its full composition. Keep readable description text grouped directly below its image.
• Maintain accessible labels, focus visibility, aria-hidden for offscreen slides, and an announced/current state for the selected indicator. Prevent a drag from accidentally opening a project link.
• On narrow screens, retain the same image-plus-description relationship and usable controls; reduce dimensions and spacing rather than clipping the active artwork.

Projects page: album-rail-inspired graphic gallery

The #ideas Graphic design section is a single-image-at-a-time, horizontal fan/coverflow of graphic-design work. It is inspired by Album Rail's layered album sleeves, but uses this site's own artwork and rectangular presentation.

• Center one fixed-size rectangular image. Show neighboring images fanned to either side with progressively smaller scale, slight rotation, and lower opacity; use a soft blurred rectangular backing behind the rail.
• Do not add a vine, record, vinyl disc, or album-player decoration. Do not turn the gallery into a row of generic cards.
• Keep the gallery focused on the artwork. The selected item's caption may show its title and discipline/category only; do not add project descriptions to these gallery items.
• Advance one item at a time on stage wheel scrolling, previous/next buttons, horizontal drag/swipe, and left/right keyboard arrows. Clicking a visible side image selects it. Wrap around the collection.
• Keep Limitless out of this graphic gallery. Its mobile UI/UX screens and explanatory description belong in their own dedicated section, with the screens displayed together as a separate app-design showcase.
• Preserve image aspect ratios and show the complete design inside the frame. Make the rail responsive without allowing slide overflow to create page-level horizontal scrolling.

Implementation workflow

1. Inspect the current markup generator, behavior, and CSS before editing. The existing entry points are build_site.mjs (#featured, #ideas, and the dedicated Limitless section), site.js ([data-prism-carousel] and [data-design-carousel]), and site.css (the .prism-* and .design-* rules). Line numbers may change; search by these selectors.
2. Change only the carousel or section requested. Keep data-driven project content and existing links; do not duplicate content into hard-coded slides.
3. Keep pointer, wheel, button, keyboard, and click interactions consistent with the behavior above. Avoid global scroll hijacking; only capture wheel input while the pointer is over the carousel stage.
4. Respect prefers-reduced-motion, provide visible keyboard focus, and ensure hidden slides cannot receive focus or pointer input.
5. When asked to verify or preview, inspect both the landing page and Projects page at desktop and narrow widths, including image fit, transitions, controls, and the standalone Limitless section.