feat: portfolio redesign with i18n, RBC project showcase, CI/CD

- Add i18n support (EN/ZH) with language toggle - Redesign header with education dropdown, contact copy buttons - Add RBC project showcase with bullet points, skills highlighting - Create terraform-drift placeholder page - Add ProjectShowcase component with media toggle (image/video) - Update experience timeline with action-driven descriptions - Add Docker + Forgejo CI workflow for image builds - Update K8s manifests for riotpiao.com ingress - Add DESIGN.md documenting design system patterns
2026-08-31 13:59:46 -07:00
parent e404dae7c8
commit b9ae470bc1
26 changed files with 1724 additions and 250 deletions
@@ -1,5 +1,7 @@
 import './globals.css'
 import Header from '@/components/Header'
+import { TerminalProvider } from '@/lib/TerminalContext'
+import { LanguageProvider } from '@/lib/LanguageContext'

 export const metadata = {
  title: 'Rock Liang — Portfolio & Live Infrastructure',
@@ -14,8 +16,12 @@ export default function RootLayout({
  return (
    <html lang="en" suppressHydrationWarning>
      <body className="bg-white dark:bg-gray-950 text-gray-900 dark:text-white">
-        <Header />
-        {children}
+        <LanguageProvider>
+          <TerminalProvider>
+            <Header />
+            {children}
+          </TerminalProvider>
+        </LanguageProvider>
      </body>
    </html>
  );
@@ -1,71 +1,35 @@
 'use client'

 import { motion } from 'framer-motion'
-import { FeatureCard } from '@/components/FeatureCard'
+import { useState } from 'react'
+import { X } from 'lucide-react'
+import { ProjectShowcase } from '@/components/ProjectShowcase'
 import { HeroBlobFlow } from '@/components/HeroBlobFlow'
 import { InteractiveTerminal } from '@/components/InteractiveTerminal'
 import { ExperienceTimeline } from '@/components/ExperienceTimeline'
-import {
-  GitBranch,
-  Database,
-  BarChart3,
-  MessageSquare,
-  Cpu,
-  Layers,
-} from 'lucide-react'
-
-const features = [
-  {
-    icon: GitBranch,
-    title: 'Infrastructure Platform',
-    description: 'Multi-region Terraform + Argo CD GitOps on Kubernetes',
-    href: '/infrastructure',
-    stat: '40% CPU reduction',
-    status: 'live' as const,
-  },
-  {
-    icon: Cpu,
-    title: 'Distributed Systems',
-    description: 'gRPC, Kafka, AWS Step Functions across 57+ regions',
-    href: '/systems',
-    stat: 'Mission-critical',
-    status: 'live' as const,
-  },
-  {
-    icon: MessageSquare,
-    title: 'LLM Systems',
-    description: 'CPU-bound inference optimization, INT4/INT8 quantization',
-    href: '/llm',
-    stat: '60% latency cut',
-    status: 'live' as const,
-  },
-  {
-    icon: Database,
-    title: 'Kafka Cluster',
-    description: 'Strimzi KRaft cluster with auto-scaling brokers',
-    href: '/kafka',
-    stat: '3 brokers',
-    status: 'live' as const,
-  },
-  {
-    icon: Layers,
-    title: 'Open Source',
-    description: 'go-flink: distributed DataLakeHouse in Go',
-    href: '/opensource',
-    stat: 'Public repo',
-    status: 'live' as const,
-  },
-  {
-    icon: BarChart3,
-    title: 'Observability',
-    description: 'Prometheus, Grafana, Dynatrace — live metrics',
-    href: '/infrastructure',
-    stat: '99.2% uptime',
-    status: 'live' as const,
-  },
-]
+import { useLanguage } from '@/lib/LanguageContext'

 export default function Home() {
+  const [bioModalOpen, setBioModalOpen] = useState(false)
+  const { t } = useLanguage()
+
+  const projects = t.projects.items.map((item, index) => ({
+    ...item,
+    id: index === 1 ? 'project-rbc' : undefined,
+    status: index === 1 
+      ? 'completed' as const 
+      : index === 5 
+        ? 'building' as const 
+        : 'live' as const,
+    media: index === 0 
+      ? { type: 'video' as const, url: 'https://www.youtube.com/watch?v=wdJ5DN15jus' }
+      : index === 1
+        ? { type: 'image' as const, url: '/rbc-images.jpeg' }
+        : undefined,
+    videoUrl: index === 5 ? 'https://github.com/rockliang/go-flink' : '#',
+    articleUrl: index === 0 ? 'https://lnkd.in/p/gm2PZkWw' : '#',
+  }))
+
  return (
    <main className="min-h-screen">
      {/* Hero */}
@@ -82,30 +46,22 @@ export default function Home() {
            className="text-center mt-16"
          >
            <h1 className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-2">
-              Full-Stack Systems Engineer
+              {t.hero.title}
            </h1>
            <p className="text-xl text-gray-700 dark:text-gray-300 mb-6 font-medium">
-              Infrastructure × Backend × LLM Systems
+              {t.hero.subtitle}
            </p>
            <p className="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto mb-10">
-              Building observable, fault-tolerant systems from bare metal to cloud. Optimizing cost (infrastructure) × performance (inference) × reliability (SRE).
+              {t.hero.description}
            </p>

            <div className="flex gap-4 justify-center flex-wrap mb-8">
-              <a
-                href="#features"
+              <button
+                onClick={() => setBioModalOpen(true)}
                className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg font-semibold transition"
              >
-                Explore Systems
-              </a>
-              <a
-                href="https://github.com/rockliang"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="border-2 border-gray-300 dark:border-gray-700 text-gray-900 dark:text-white px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 dark:hover:bg-gray-800 transition"
-              >
-                GitHub
-              </a>
+                {t.hero.exploreMore}
+              </button>
            </div>

            <motion.div
@@ -114,7 +70,7 @@ export default function Home() {
              transition={{ duration: 0.8, delay: 1.2 }}
              className="text-sm text-gray-600 dark:text-gray-400"
            >
-              💡 Press <kbd className="bg-gray-200 dark:bg-gray-800 px-2 py-1 rounded">Cmd+K</kbd> to explore via terminal
+              💡 {t.hero.terminalHint} <kbd className="bg-gray-200 dark:bg-gray-800 px-2 py-1 rounded">Cmd+K</kbd> {t.hero.terminalHintSuffix}
            </motion.div>
          </motion.div>
        </div>
@@ -132,9 +88,9 @@ export default function Home() {
          transition={{ duration: 0.6 }}
          className="mb-16"
        >
-          <h2 className="text-4xl font-bold mb-4">What I Build</h2>
+          <h2 className="text-4xl font-bold mb-4">{t.projects.title}</h2>
          <p className="text-lg text-gray-600 dark:text-gray-400">
-            Production systems spanning infrastructure, distributed backends, and LLM optimization. Click any domain to explore.
+            {t.projects.subtitle}
          </p>
        </motion.div>

@@ -147,14 +103,20 @@ export default function Home() {
            visible: {
              opacity: 1,
              transition: {
-                staggerChildren: 0.1,
+                staggerChildren: 0.15,
              },
            },
          }}
-          className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
+          className="grid grid-cols-1 gap-8 max-w-3xl mx-auto"
        >
-          {features.map((feature) => (
-            <FeatureCard key={feature.title} {...feature} />
+          {projects.map((project) => (
+            <ProjectShowcase 
+              key={project.title}
+              {...project} 
+              watchVideoText={t.projects.watchVideo}
+              readArticleText={t.projects.readArticle}
+              askPoimenText={t.projects.askPoimen}
+            />
          ))}
        </motion.div>
      </section>
@@ -162,14 +124,14 @@ export default function Home() {
      {/* Footer */}
      <footer className="border-t border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-900 py-12 px-6">
        <div className="max-w-6xl mx-auto text-center text-sm text-gray-600 dark:text-gray-400">
-          <p>© 2025 Rock Liang. Deployed on homelab Kubernetes cluster (3-node Talos).</p>
+          <p>{t.footer.copyright}</p>
          <p className="mt-2">
-            <a href="https://github.com" target="_blank" rel="noopener noreferrer" className="hover:text-blue-600 dark:hover:text-blue-400">
-              GitHub
+            <a href="https://github.com/rockliang" target="_blank" rel="noopener noreferrer" className="hover:text-blue-600 dark:hover:text-blue-400">
+              {t.footer.github}
            </a>
            {' • '}
            <a href="mailto:[email protected]" className="hover:text-blue-600 dark:hover:text-blue-400">
-              Email
+              {t.footer.email}
            </a>
          </p>
        </div>
@@ -177,6 +139,70 @@ export default function Home() {

      {/* Interactive Terminal */}
      <InteractiveTerminal />
+
+      {/* Bio Modal */}
+      {bioModalOpen && (
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4"
+          onClick={() => setBioModalOpen(false)}
+        >
+          <motion.div
+            initial={{ scale: 0.95, opacity: 0 }}
+            animate={{ scale: 1, opacity: 1 }}
+            exit={{ scale: 0.95, opacity: 0 }}
+            onClick={(e) => e.stopPropagation()}
+            className="bg-white dark:bg-gray-900 rounded-lg shadow-2xl max-w-2xl w-full max-h-96 overflow-y-auto"
+          >
+            {/* Header */}
+            <div className="sticky top-0 bg-gradient-to-r from-blue-600 to-purple-600 px-6 py-6 flex justify-between items-center">
+              <h2 className="text-2xl font-bold text-white">{t.bio.title}</h2>
+              <button
+                onClick={() => setBioModalOpen(false)}
+                className="text-white hover:bg-white/20 rounded-lg p-2 transition"
+              >
+                <X size={24} />
+              </button>
+            </div>
+
+            {/* Content */}
+            <div className="p-6 space-y-4 text-gray-900 dark:text-white">
+              <p className="text-lg">
+                {t.bio.intro}
+              </p>
+
+              <div>
+                <h3 className="font-semibold text-blue-600 dark:text-blue-400 mb-2">{t.bio.expertise.title}</h3>
+                <p className="text-sm text-gray-700 dark:text-gray-300">
+                  {t.bio.expertise.content}
+                </p>
+              </div>
+
+              <div>
+                <h3 className="font-semibold text-blue-600 dark:text-blue-400 mb-2">{t.bio.highlights.title}</h3>
+                <ul className="text-sm text-gray-700 dark:text-gray-300 space-y-1">
+                  {t.bio.highlights.items.map((item, i) => (
+                    <li key={i}>• {item}</li>
+                  ))}
+                </ul>
+              </div>
+
+              <div>
+                <h3 className="font-semibold text-blue-600 dark:text-blue-400 mb-2">{t.bio.educationTitle}</h3>
+                <p className="text-sm text-gray-700 dark:text-gray-300 whitespace-pre-line">
+                  {t.bio.educationContent}
+                </p>
+              </div>
+
+              <p className="text-sm text-gray-600 dark:text-gray-400 pt-4 border-t border-gray-200 dark:border-gray-700">
+                {t.bio.currentFocus}
+              </p>
+            </div>
+          </motion.div>
+        </motion.div>
+      )}
    </main>
  )
 }
@@ -0,0 +1,51 @@
+'use client'
+
+import Link from 'next/link'
+import { ArrowLeft } from 'lucide-react'
+
+export default function TerraformDriftPage() {
+  return (
+    <main className="min-h-screen bg-white dark:bg-gray-950">
+      <div className="max-w-4xl mx-auto px-6 py-20">
+        <Link 
+          href="/#project-rbc" 
+          className="inline-flex items-center gap-2 text-blue-600 dark:text-blue-400 hover:underline mb-8"
+        >
+          <ArrowLeft size={16} />
+          Back to Projects
+        </Link>
+
+        <h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-4">
+          Terraform State Drift Solution
+        </h1>
+        
+        <p className="text-gray-600 dark:text-gray-400 mb-12">
+          Coming soon...
+        </p>
+
+        {/* Placeholder sections */}
+        <div className="space-y-8 text-gray-500 dark:text-gray-500">
+          <div className="border border-dashed border-gray-300 dark:border-gray-700 rounded-lg p-6">
+            <h2 className="font-semibold mb-2">The Problem</h2>
+            <p className="text-sm">Content coming soon...</p>
+          </div>
+          
+          <div className="border border-dashed border-gray-300 dark:border-gray-700 rounded-lg p-6">
+            <h2 className="font-semibold mb-2">Immediate Fix</h2>
+            <p className="text-sm">Content coming soon...</p>
+          </div>
+          
+          <div className="border border-dashed border-gray-300 dark:border-gray-700 rounded-lg p-6">
+            <h2 className="font-semibold mb-2">Short Term Fix</h2>
+            <p className="text-sm">Content coming soon...</p>
+          </div>
+          
+          <div className="border border-dashed border-gray-300 dark:border-gray-700 rounded-lg p-6">
+            <h2 className="font-semibold mb-2">Long Term Fix</h2>
+            <p className="text-sm">Content coming soon...</p>
+          </div>
+        </div>
+      </div>
+    </main>
+  )
+}