포트폴리오 캐러셀 상호작용
이 스킬은 랜딩 페이지의 프로젝트 쇼케이스 캐러셀이나 프로젝트 페이지의 그래픽 디자인 캐러셀을 변경할 때 사용합니다. 사용자가 이 스킬을 사용하거나 참조하라고 요청하면, 관련 패턴을 직접 구현하고 요청에 맞게 내용을 조정합니다.
프로젝트 컨텍스트
이 사이트는 build_site.mjs로 생성되는 정적 포트폴리오이며, 공유 동작은 site.js, 스타일은 site.css에 있습니다. 해당 아키텍처에 맞게 네이티브하게 구현하세요. React Bits를 설치하거나, React 런타임을 추가하거나, 라이선스 키를 구성하거나, 독점 구성 요소를 복사하지 마세요. React Bits Prism Carousel 및 Album Rail은 시각적/상호작용 참조 자료로만 사용됩니다.
사이트의 기존 색상 팔레트, 타이포그래피, 디자인 토큰을 유지하세요. 캐러셀 요청만으로 이를 변경할 권한은 없습니다. 현재 페이지 콘텐츠와 경로가 계속 작동하도록 유지하고, 아트워크가 실수로 잘리지 않고 완전히 보이도록 하세요(아트워크 자체가 손상되지 않도록 포함된 이미지 맞춤 사용).
랜딩 페이지: Prism 스타일의 선택된 작업
랜딩 페이지의 #featured 섹션은 프로젝트를 중앙에 배치된 직사각형 커버플로우로 표시합니다. 각 프로젝트는 하나의 슬라이드로, 이미지와 프로젝트/문제 설명이 함께 전환됩니다.
- 하나의 프로젝트를 중앙에 두드러지게 표시하고, 인접한 프로젝트는 양쪽에서 점점 더 좁고, 작고, 흐리게/채도가 낮은 미리보기로 표시합니다.
- 탐색 시 전체 슬라이드(이미지와 설명)가 부드러운 커버플로우 전환과 함께 포커스로 이동하며, 활성 이미지 위에 짧고 절제된 라이트 스윕 효과를 추가합니다.
- 이전/다음 버튼, 직접 진행 표시, 가로 포인터 드래그/스와이프, 스테이지 휠 스크롤, 스테이지가 포커스된 상태에서 좌우 키보드 화살표를 지원합니다. 첫 번째와 마지막 프로젝트에서 래핑됩니다.
- 중앙 이미지를 직사각형 프레임에 유지하고 전체 구성을 보존합니다. 읽기 쉬운 설명 텍스트를 이미지 바로 아래에 그룹화합니다.
- 접근 가능한 레이블, 포커스 가시성, 오프스크린 슬라이드에 대한
aria-hidden, 선택된 표시기의 공지/현재 상태를 유지합니다. 드래그로 인해 프로젝트 링크가 실수로 열리지 않도록 방지합니다. - 좁은 화면에서도 이미지와 설명의 관계와 사용 가능한 컨트롤을 유지하며, 활성 아트워크를 자르는 대신 치수와 간격을 줄입니다.
프로젝트 페이지: 앨범 레일에서 영감을 받은 그래픽 갤러리
#ideas 그래픽 디자인 섹션은 한 번에 하나의 이미지를 표시하는 가로형 팬/커버플로우 그래픽 디자인 작업 갤러리입니다. Album Rail의 레이어드 앨범 슬리브에서 영감을 받았지만, 이 사이트의 자체 아트워크와 직사각형 프레젠테이션을 사용합니다.
- 고정 크기의 직사각형 이미지 하나를 중앙에 배치합니다. 인접 이미지는 양쪽으로 펼쳐져 점진적으로 작은 크기, 약간의 회전, 낮은 불투명도로 표시되며, 레일 뒤에는 부드러운 블러 처리된 직사각형 배경이 있습니다.
- 덩굴, 레코드판, 비닐 디스크, 앨범 플레이어 장식을 추가하지 마세요. 갤러리를 일반 카드 행으로 바꾸지 마세요.
- 갤러리가 아트워크에 집중되도록 유지하세요. 선택된 항목의 캡션에는 제목과 분야/카테고리만 표시할 수 있으며, 이러한 갤러리 항목에 프로젝트 설명을 추가하지 마세요.
- 스테이지 휠 스크롤, 이전/다음 버튼, 가로 드래그/스와이프, 좌우 키보드 화살표로 한 번에 한 항목씩 전진합니다. 보이는 측면 이미지를 클릭하면 선택됩니다. 컬렉션 끝에서 래핑됩니다.
Limitless를 이 그래픽 갤러리에서 제외하세요. 해당 모바일 UI/UX 화면과 설명 내용은 자체 전용 섹션에 속하며, 화면은 별도의 앱 디자인 쇼케이스로 함께 표시되어야 합니다.- 이미지 종횡비를 유지하고 프레임 내에 전체 디자인을 표시하세요. 슬라이드 오버플로로 인해 페이지 수준의 가로 스크롤이 발생하지 않도록 레일을 반응형으로 만드세요.
구현 워크플로
- 편집하기 전에 현재 마크업 생성기, 동작, CSS를 검사하세요. 기존 진입점은
build_site.mjs(#featured,#ideas, 전용 Limitless 섹션),site.js([data-prism-carousel]및[data-design-carousel]),site.css(.prism-*및.design-*규칙)입니다. 줄 번호는 변경될 수 있으므로 이러한 선택자로 검색하세요. - 요청된 캐러셀이나 섹션만 변경하세요. 데이터 기반 프로젝트 콘텐츠와 기존 링크를 유지하고, 하드 코딩된 슬라이드에 콘텐츠를 복제하지 마세요.
- 포인터, 휠, 버튼, 키보드, 클릭 상호작용을 위 동작과 일관되게 유지하세요. 전역 스크롤 하이재킹을 피하고, 포인터가 캐러셀 스테이지 위에 있을 때만 휠 입력을 캡처하세요.
prefers-reduced-motion을 존중하고, 가시적인 키보드 포커스를 제공하며, 숨겨진 슬라이드가 포커스나 포인터 입력을 받을 수 없도록 하세요.- 확인하거나 미리보기를 요청받으면 데스크톱과 좁은 너비에서 랜딩 페이지와 프로젝트 페이지를 모두 검사하고, 이미지 맞춤, 전환, 컨트롤, 독립형 Limitless 섹션을 포함하세요.