riotpiao.com/app/page.tsx

'use client'

import { motion } from 'framer-motion'
import { FeatureCard } from '@/components/FeatureCard'
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,
  },
]

export default function Home() {
  return (
    <main className="min-h-screen">
      {/* Hero */}
      <section className="bg-gradient-to-br from-blue-50 to-purple-50 dark:from-gray-950 dark:to-gray-900 py-24 px-6">
        <div className="max-w-4xl mx-auto">
          {/* Avatar with flowing outcomes */}
          <HeroBlobFlow />

          {/* Description */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 1 }}
            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
            </h1>
            <p className="text-xl text-gray-700 dark:text-gray-300 mb-6 font-medium">
              Infrastructure × Backend × LLM Systems
            </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).
            </p>

            <div className="flex gap-4 justify-center flex-wrap mb-8">
              <a
                href="#features"
                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>
            </div>

            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              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
            </motion.div>
          </motion.div>
        </div>
      </section>

      {/* Experience Timeline */}
      <ExperienceTimeline />

      {/* Features Grid */}
      <section id="features" className="max-w-6xl mx-auto px-6 py-20">
        <motion.div
          initial={{ opacity: 0 }}
          whileInView={{ opacity: 1 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
          className="mb-16"
        >
          <h2 className="text-4xl font-bold mb-4">What I Build</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.
          </p>
        </motion.div>

        <motion.div
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true }}
          variants={{
            hidden: { opacity: 0 },
            visible: {
              opacity: 1,
              transition: {
                staggerChildren: 0.1,
              },
            },
          }}
          className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
        >
          {features.map((feature) => (
            <FeatureCard key={feature.title} {...feature} />
          ))}
        </motion.div>
      </section>

      {/* 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 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>
            {' • '}
            <a href="mailto:[email protected]" className="hover:text-blue-600 dark:hover:text-blue-400">
              Email
            </a>
          </p>
        </div>
      </footer>

      {/* Interactive Terminal */}
      <InteractiveTerminal />
    </main>
  )
}