Add repo card component and GitHub language colors for projects page

Co-authored-by: Cursor <cursoragent@cursor.com>

app/projects/page.tsx

@@ -1,6 +1,7 @@
-import Link from 'next/link';
+import { FaGithub } from 'react-icons/fa';
 import { fetchPublicRepos } from '@/lib/github';
 import { SidebarLayout } from '@/components/sidebar-layout';
+import { RepoCard } from '@/components/repo-card';
 
 export const revalidate = 3600;
 
@@ -20,53 +21,27 @@ export default async function ProjectsPage() {
           </h1>
           <p className="type-small text-slate-500 dark:text-slate-400">
             從我的 GitHub 帳號自動抓取公開的程式庫與專案。
+            {repos.length > 0 && (
+              <span className="ml-1">共 {repos.length} 個專案</span>
+            )}
           </p>
         </header>
 
         {repos.length === 0 ? (
-          <p className="mt-4 type-small text-slate-500 dark:text-slate-400">
+          <div className="mt-6 flex flex-col items-center gap-3 rounded-2xl border border-dashed border-slate-200 bg-slate-50/50 p-8 text-center dark:border-slate-700 dark:bg-slate-900/30">
+            <FaGithub className="h-12 w-12 text-slate-400 dark:text-slate-500" />
+            <p className="type-small text-slate-500 dark:text-slate-400">
               目前沒有可顯示的 GitHub 專案，或暫時無法連線到 GitHub。
             </p>
+          </div>
         ) : (
           <ul className="mt-4 grid gap-4 sm:grid-cols-2">
-            {repos.map((repo) => (
+            {repos.map((repo, index) => (
-              <li
+              <RepoCard
                 key={repo.id}
-                className="flex h-full flex-col rounded-lg border border-slate-200 bg-white p-4 shadow-sm transition hover:-translate-y-0.5 hover:shadow-md dark:border-slate-800 dark:bg-slate-900"
+                repo={repo}
-              >
+                animationDelay={index * 50}
-                <div className="flex items-start justify-between gap-2">
+              />
-                  <Link
-                    href={repo.htmlUrl}
-                    prefetch={false}
-                    target="_blank"
-                    rel="noreferrer"
-                    className="type-base font-semibold text-slate-900 transition-colors hover:text-accent dark:text-slate-50"
-                  >
-                    {repo.name}
-                  </Link>
-                  {repo.stargazersCount > 0 && (
-                    <span className="inline-flex items-center gap-1 rounded-full bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-700 dark:bg-amber-900/40 dark:text-amber-300">
-                      ★ {repo.stargazersCount}
-                    </span>
-                  )}
-                </div>
-
-                {repo.description && (
-                  <p className="mt-2 flex-1 type-small text-slate-600 dark:text-slate-300">
-                    {repo.description}
-                  </p>
-                )}
-
-                <div className="mt-3 flex items-center justify-between text-xs text-slate-500 dark:text-slate-400">
-                  <span>{repo.language ?? '其他'}</span>
-                  <span suppressHydrationWarning>
-                    更新於{' '}
-                    {repo.updatedAt
-                      ? new Date(repo.updatedAt).toLocaleDateString('zh-TW')
-                      : '未知'}
-                  </span>
-                </div>
-              </li>
             ))}
           </ul>
         )}

components/repo-card.tsx

@@ -0,0 +1,64 @@
+import Link from 'next/link';
+import { FiExternalLink } from 'react-icons/fi';
+import type { RepoSummary } from '@/lib/github';
+import { getLanguageColor } from '@/lib/github-lang-colors';
+
+interface RepoCardProps {
+  repo: RepoSummary;
+  animationDelay?: number;
+}
+
+export function RepoCard({ repo, animationDelay = 0 }: RepoCardProps) {
+  const langColor = getLanguageColor(repo.language);
+
+  return (
+    <li
+      className={`motion-card group relative flex h-full flex-col rounded-2xl border border-white/40 bg-white/60 p-5 shadow-lg backdrop-blur-md transition-all hover:scale-[1.01] hover:shadow-xl dark:border-white/10 dark:bg-slate-900/60 ${animationDelay > 0 ? 'repo-card-enter' : ''}`}
+      style={
+        animationDelay > 0 ? { animationDelay: `${animationDelay}ms` } : undefined
+      }
+    >
+      <div className="pointer-events-none absolute inset-x-0 top-0 h-0.5 origin-left scale-x-0 bg-gradient-to-r from-blue-500 via-sky-400 to-indigo-500 opacity-80 transition-transform duration-300 ease-out group-hover:scale-x-100 dark:from-blue-400 dark:via-sky-300 dark:to-indigo-400" />
+      <div className="flex items-start justify-between gap-2">
+        <Link
+          href={repo.htmlUrl}
+          prefetch={false}
+          target="_blank"
+          rel="noreferrer"
+          className="type-base inline-flex items-center gap-2 font-semibold text-slate-900 transition-colors hover:text-accent dark:text-slate-50 dark:hover:text-accent"
+        >
+          {repo.name}
+          <FiExternalLink className="h-3.5 w-3.5 opacity-0 transition-opacity group-hover:opacity-100" />
+        </Link>
+        {repo.stargazersCount > 0 && (
+          <span className="inline-flex shrink-0 items-center gap-1 rounded-lg bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-700 dark:bg-amber-900/40 dark:text-amber-300">
+            ★ {repo.stargazersCount}
+          </span>
+        )}
+      </div>
+
+      {repo.description && (
+        <p className="mt-2 flex-1 line-clamp-2 text-sm text-slate-600 group-hover:text-slate-800 dark:text-slate-300 dark:group-hover:text-slate-100">
+          {repo.description}
+        </p>
+      )}
+
+      <div className="mt-3 flex items-center justify-between gap-2 text-xs text-slate-500 dark:text-slate-400">
+        <span className="inline-flex items-center gap-1.5">
+          <span
+            className="h-2 w-2 shrink-0 rounded-full"
+            style={{ backgroundColor: langColor }}
+            aria-hidden
+          />
+          {repo.language ?? '其他'}
+        </span>
+        <span suppressHydrationWarning>
+          更新於{' '}
+          {repo.updatedAt
+            ? new Date(repo.updatedAt).toLocaleDateString('zh-TW')
+            : '未知'}
+        </span>
+      </div>
+    </li>
+  );
+}

lib/github-lang-colors.ts

@@ -0,0 +1,43 @@
+/**
+ * GitHub-style language colors for repo cards.
+ * Fallback: #94a3b8 (slate-400) for unknown languages.
+ */
+const LANG_COLORS: Record<string, string> = {
+  TypeScript: '#3178c6',
+  JavaScript: '#f1e05a',
+  Python: '#3572A5',
+  Rust: '#dea584',
+  Go: '#00ADD8',
+  Ruby: '#701516',
+  PHP: '#4F5D95',
+  Java: '#b07219',
+  Kotlin: '#A97BFF',
+  Swift: '#F05138',
+  C: '#555555',
+  'C++': '#f34b7d',
+  'C#': '#239120',
+  Shell: '#89e051',
+  HTML: '#e34c26',
+  CSS: '#563d7c',
+  Vue: '#41b883',
+  Svelte: '#ff3e00',
+  Dart: '#00B4AB',
+  Scala: '#c22d40',
+  Elixir: '#6e4a7e',
+  Lua: '#000080',
+  R: '#198CE7',
+  Markdown: '#083fa1',
+  YAML: '#cb171e',
+  JSON: '#292929',
+};
+
+const FALLBACK_COLOR = '#94a3b8';
+
+/**
+ * Returns the GitHub-style hex color for a programming language.
+ * Unknown languages use a neutral slate fallback.
+ */
+export function getLanguageColor(lang: string | null): string {
+  if (!lang || !lang.trim()) return FALLBACK_COLOR;
+  return LANG_COLORS[lang] ?? FALLBACK_COLOR;
+}

lib/github.ts

@@ -27,8 +27,8 @@ function getGithubHeaders() {
 
 /**
  * Fetch all public repositories for the configured GitHub user.
- * Returns an empty array on error instead of throwing, so the UI
+ * Excludes forked repositories. Returns an empty array on error instead of
- * can render a graceful fallback.
+ * throwing, so the UI can render a graceful fallback.
  */
 export async function fetchPublicRepos(usernameOverride?: string): Promise<RepoSummary[]> {
   const username = usernameOverride || process.env.GITHUB_USERNAME;
@@ -56,7 +56,9 @@ export async function fetchPublicRepos(usernameOverride?: string): Promise<RepoS
 
     const data = (await res.json()) as any[];
 
-    return data.map((repo) => ({
+    return data
+      .filter((repo) => !repo.fork)
+      .map((repo) => ({
         id: repo.id,
         name: repo.name,
         fullName: repo.full_name,

styles/globals.css

@@ -40,6 +40,16 @@
   100% { opacity: 1; transform: translateY(0) scale(1); }
 }
 
+.repo-card-enter {
+  animation: fade-in-up 0.6s ease-out both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .repo-card-enter {
+    animation: none;
+  }
+}
+
 @keyframes float-soft {
   0% { transform: translate3d(0,0,0) scale(1); }
   50% { transform: translate3d(4px,-6px,0) scale(1.03); }