feat: add CI status badge with commit SHA on homelab experience card

components/ExperienceTimeline.tsx

@@ -1,8 +1,52 @@
 'use client'
 
 import { motion } from 'framer-motion'
+import { useState, useEffect } from 'react'
+import { GitBranch, CheckCircle, XCircle, Loader2 } from 'lucide-react'
 import { useLanguage } from '@/lib/LanguageContext'
 
+interface RepoCI {
+  sha: string
+  status: string
+  url: string
+}
+
+function CIBadge({ repo, forgejoUrl }: { repo: string; forgejoUrl: string }) {
+  const [ci, setCI] = useState<RepoCI | null>(null)
+
+  useEffect(() => {
+    fetch(`/api/ci-status?repo=${repo}`)
+      .then(r => r.json())
+      .then(data => setCI({
+        sha: data.sha?.substring(0, 7) || '',
+        status: data.conclusion || data.status || 'unknown',
+        url: data.url || `${forgejoUrl}/actions`,
+      }))
+      .catch(() => null)
+  }, [repo, forgejoUrl])
+
+  if (!ci || !ci.sha) return null
+
+  const icon = ci.status === 'success'
+    ? <CheckCircle size={12} className="text-green-500" />
+    : ci.status === 'failure'
+      ? <XCircle size={12} className="text-red-500" />
+      : <Loader2 size={12} className="animate-spin text-yellow-500" />
+
+  return (
+    <a
+      href={`${forgejoUrl}/commit/${ci.sha}`}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="flex items-center gap-1.5 px-2 py-1 rounded-full bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 hover:border-blue-400 dark:hover:border-blue-600 transition-colors"
+    >
+      <GitBranch size={10} className="text-gray-400" />
+      <span className="text-xs font-mono text-gray-600 dark:text-gray-300">{ci.sha}</span>
+      {icon}
+    </a>
+  )
+}
+
 const colors = [
   'from-green-500 to-green-600',
   'from-red-500 to-red-600',
@@ -93,9 +137,14 @@ export function ExperienceTimeline() {
                         {item.role}
                       </p>
                     </div>
-                    <span className="text-xs font-mono text-gray-500 dark:text-gray-400 whitespace-nowrap ml-4">
-                      {item.period}
-                    </span>
+                    <div className="flex flex-col items-end gap-1 ml-4">
+                      <span className="text-xs font-mono text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                        {item.period}
+                      </span>
+                      {index === 0 && (
+                        <CIBadge repo="rock/homelab" forgejoUrl="https://forgejo.riotpiao.com/rock/homelab" />
+                      )}
+                    </div>
                   </div>
 
                   <p className="text-sm text-gray-700 dark:text-gray-300 mb-3">