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
@@ -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>
+  )
+}