ポートフォリオのカルーセルインタラクション
このスキルは、ランディングページのプロジェクトショーケースカルーセルや、プロジェクトページのグラフィックデザインカルーセルを変更する際に使用します。ユーザーがこのスキルの使用や参照を指示した場合は、関連するパターンを直接実装し、リクエストに合わせてコンテンツを調整してください。
プロジェクトのコンテキスト
このサイトは build_site.mjs で生成される静的ポートフォリオであり、共有動作は site.js、スタイルは site.css に記述されています。このアーキテクチャに沿ったネイティブ実装を維持してください。React Bits をインストールしたり、React ランタイムを追加したり、ライセンスキーを設定したり、プロプライエタリなコンポーネントをコピーしたりしないでください。React Bits の Prism Carousel と Album Rail は、ビジュアルおよびインタラクションの参考としてのみ使用します。
サイトの既存のカラーパレット、タイポグラフィ、デザイントークンを維持してください。カルーセルのリクエストだけでは、これらを変更する権限は与えられません。現在のページコンテンツとルートが動作し続けるようにし、アートワークが誤って切り取られることなく完全に表示されるようにしてください（アートワークそのものを完全に表示するには、コンテナに収まる画像フィッティングを使用します）。
ランディングページ：Prism スタイルの厳選作品
ランディングページの #featured セクションでは、プロジェクトを中央揃えの長方形カバーフローとして表示します。各プロジェクトは1枚のスライドであり、画像とプロジェクト/問題の説明の両方を含み、1つのユニットとして一緒に遷移します。
- 1つのプロジェクトを中央に大きく表示し、隣接するプロジェクトは両側に徐々に狭く、小さく、暗く/彩度を下げたプレビューとして表示します。
- ナビゲーション時には、スライド全体（画像とコピー）をスムーズなカバーフロー遷移でフォーカスし、アクティブな画像に控えめなライトスイープエフェクトを適用します。
- 前/次のボタン、直接進行を示すティック、水平方向のポインタードラッグ/スワイプ、ステージのホイールスクロール、およびステージにフォーカスがある場合の左右キーボード矢印をサポートします。最初と最後のプロジェクトでラップします。
- 中央の画像は長方形のフレームに収め、その完全な構成を維持します。説明テキストは画像の直下にグループ化して読みやすくします。
- アクセシブルなラベル、フォーカスの可視性、オフスクリーンスライドの
aria-hidden、選択インジケーターのアナウンス/現在状態を維持します。ドラッグで誤ってプロジェクトリンクが開かれないようにします。 - 狭い画面でも、同じ画像と説明の関係と操作可能なコントロールを維持します。アクティブなアートワークをクリップするのではなく、寸法と間隔を縮小します。
プロジェクトページ：アルバムレール風グラフィックギャラリー
#ideas グラフィックデザインセクションは、一度に1枚の画像を表示する水平方向のファン/カバーフロー形式のグラフィックデザイン作品ギャラリーです。Album Rail の重なったアルバムスリーブにインスパイアされていますが、このサイト独自のアートワークと長方形の表示を使用します。
- 固定サイズの長方形画像を1枚中央に配置します。隣接する画像は両側にファン状に広がり、スケールが徐々に小さくなり、わずかに回転し、不透明度が低くなります。レールの背後にはソフトなぼかしの長方形背景を配置します。
- 蔓、レコード、ビニールディスク、アルバムプレーヤーの装飾は追加しないでください。ギャラリーを汎用的なカードの列にしないでください。
- ギャラリーはアートワークに焦点を当てます。選択したアイテムのキャプションには、タイトルと分野/カテゴリのみを表示します。これらのギャラリーアイテムにプロジェクトの説明を追加しないでください。
- ステージのホイールスクロール、前/次のボタン、水平ドラッグ/スワイプ、左右のキーボード矢印で一度に1アイテムずつ進めます。表示されているサイド画像をクリックすると選択されます。コレクション内でラップします。
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 セクションを含めます。