プロジェクトカード

ProjectCardコンポーネントは、プロジェクトを魅力的に表示するための包括的なカードコンポーネントです。画像、タイトル、カテゴリ、説明、技術スタック、ステータス、デモ/GitHubへのアクションボタンを含みます。Litとデザイントークンを使用して構築され、一貫したテーマとアクセシビリティを提供します。

機能

• バリエーション: Default、Primary、Success、Warning、Errorの5種類
• サイズ: Small、Medium、Largeの3サイズ
• リッチコンテンツ: 画像、タイトル、カテゴリ、説明、ステータス表示
• 技術スタック: 使用技術のタグ表示
• アクションボタン: デモとGitHubへのリンク
• ホバー効果: 画像オーバーレイとアニメーション
• テーマ対応: ライトテーマとダークテーマの自動切り替え
• レスポンシブ: モバイルファーストのレスポンシブデザイン

使用方法

---
import { ProjectCard } from '@karan-monorepo/ui-core';
---

<kds-project-card
  title="My Project"
  category="Web Application"
  description="A modern web application built with React and TypeScript."
  image="/project-image.jpg"
  image-alt="Project screenshot"
  status="Active"
  demo-url="https://example.com"
  github-url="https://github.com/example"
  technologies='["React", "TypeScript", "Tailwind CSS"]'
  variant="primary"
  theme="light"
/>

プロパティ

プロパティ	型	デフォルト	説明
title	string	""	プロジェクトのタイトル
description	string	""	プロジェクトの説明文
image	string	""	プロジェクト画像のURL
imageAlt	string	""	画像のaltテキスト
category	string	""	プロジェクトのカテゴリ
status	string	""	プロジェクトのステータス（Active、Completed等）
demoUrl	string	""	デモサイトのURL
githubUrl	string	""	GitHubリポジトリのURL
technologies	string[]	[]	使用技術の配列
variant	'default' | 'primary' | 'success' | 'warning' | 'error'	'default'	カードのバリエーション
size	'sm' | 'md' | 'lg'	'md'	カードのサイズ
theme	'light' | 'dark'	'light'	コンポーネントのカラーテーマ

使用例

ProjectCard Component

Comprehensive card component for showcasing projects with images, descriptions, technologies, and action links.

Variants

Default

Primary

Success

Sizes

Small

Medium

Large

Themes

Light Theme

Dark Theme

Usage Examples

Full Featured Project

Minimal Project

バリエーション

ProjectCardコンポーネントは5つの視覚的バリエーションをサポートします：

• default: 標準的なプロジェクトカード
• primary: メインプロジェクト用の強調カード
• success: 完成プロジェクト用の成功カード
• warning: 進行中プロジェクト用の警告カード
• error: 非推奨/問題があるプロジェクト用のエラーカード

<!-- デフォルト -->
<kds-project-card title="Project" variant="default" theme="light" />

<!-- プライマリ -->
<kds-project-card title="Project" variant="primary" theme="light" />

<!-- 成功 -->
<kds-project-card title="Project" variant="success" theme="light" />

<!-- 警告 -->
<kds-project-card title="Project" variant="warning" theme="light" />

<!-- エラー -->
<kds-project-card title="Project" variant="error" theme="light" />

サイズバリエーション

ProjectCardコンポーネントは3つのサイズをサポートします：

• sm: コンパクトな小型カード
• md: 標準的な中型カード
• lg: 詳細表示用の大型カード

<!-- 小さなサイズ -->
<kds-project-card title="Project" size="sm" variant="primary" theme="light" />

<!-- 標準サイズ -->
<kds-project-card title="Project" size="md" variant="primary" theme="light" />

<!-- 大きなサイズ -->
<kds-project-card title="Project" size="lg" variant="primary" theme="light" />

使用ケース

完全機能プロジェクト

<kds-project-card
  title="Full Stack Application"
  category="Web Development"
  description="A comprehensive e-commerce platform with admin dashboard."
  image="/project.jpg"
  image-alt="Project screenshot"
  status="Active"
  demo-url="https://example.com"
  github-url="https://github.com/example"
  technologies='["React", "Node.js", "PostgreSQL", "Docker"]'
  variant="primary"
  theme="light"
/>

ミニマルプロジェクト

<kds-project-card
  title="Simple Portfolio"
  category="Static Site"
  description="A minimal portfolio website."
  technologies='["HTML", "CSS", "JavaScript"]'
  demo-url="https://example.com"
  variant="default"
  theme="light"
/>

技術スタック強調

<kds-project-card
  title="Modern Tech Stack"
  category="SaaS Application"
  description="Showcasing cutting-edge technologies."
  technologies='["Next.js", "TypeScript", "Prisma", "tRPC", "Tailwind CSS"]'
  status="In Development"
  demo-url="https://example.com"
  github-url="https://github.com/example"
  variant="primary"
  theme="light"
/>

インタラクティブ機能

画像オーバーレイ

カードにホバーすると、画像上にアクションボタンが表示されます：

• Demo: デモサイトへのリンク
• Code: GitHubリポジトリへのリンク

ホバー効果

• 画像のズームイン効果
• カード全体の浮き上がりアニメーション
• スムーズなトランジション

スタイリング

ProjectCardコンポーネントはデザイントークンを使用した一貫したスタイリングを提供します：

• タイポグラフィ: sansJPフォントファミリーと適切なサイズ・重み
• カラー: ライト/ダークテーマに対応したカラートークン
• スペーシング: デザインシステムのスペーシングトークン
• レスポンシブ: モバイルファーストのレスポンシブデザイン
• シャドウ: 深度を表現する洗練されたシャドウ

アクセシビリティ

ProjectCardコンポーネントには適切なアクセシビリティ機能が含まれています：

• セマンティックHTMLの構造
• 画像のaltテキストサポート
• キーボードナビゲーション対応のボタン
• 高コントラスト比による視認性の確保
• スクリーンリーダー対応のラベル

ベストプラクティス

1. 画像を提供してプロジェクトを視覚的に魅力的に表示する
2. 明確な説明を書いてプロジェクトの目的を伝える
3. 関連技術を選択してスキルセットを示す
4. ステータスを設定してプロジェクトの現状を明確にする
5. デモとコードの両方のリンクを提供して透明性を保つ
6. 適切なバリエーションを選択してプロジェクトの重要度を表現する
7. 両方のテーマでテストして良好なコントラストと可読性を確保する

レスポンシブデザイン

ProjectCardコンポーネントはモバイルファーストで設計されています：

• タブレット/デスクトップでは横並びグリッド表示
• モバイルでは縦並びスタック表示
• アクションボタンはモバイルで縦並びに変更
• 画像の高さは画面サイズに応じて調整

ブラウザサポート

ProjectCardコンポーネントは以下の技術をサポートするモダンブラウザで動作します：

• CSS Custom Properties
• Web Components (Lit)
• CSS Flexbox
• CSS Grid
• CSS Transforms and Transitions