riotpiao.com/components/ExperienceTimeline.tsx

'use client'

import { motion } from 'framer-motion'

interface TimelineItem {
  company: string
  role: string
  period: string
  description: string
  impact: string
  skills: string[]
  color: string
}

const timeline: TimelineItem[] = [
  {
    company: 'RBC',
    role: 'Infrastructure Platform Architect',
    period: '2020 — Present',
    description: 'Leading multi-region infrastructure platform on Kubernetes. Building GitOps workflows with Terraform and Argo CD across 4 global regions.',
    impact: '40% CPU reduction, 99.2% uptime',
    skills: ['Kubernetes', 'Terraform', 'Argo CD', 'Go', 'AWS', 'Cilium', 'Prometheus', 'Grafana'],
    color: 'from-blue-500 to-blue-600',
  },
  {
    company: 'AWS',
    role: 'Senior Software Engineer (Step Functions)',
    period: '2019 — 2020',
    description: 'Designed and optimized distributed orchestration platform. Built fault-tolerant task scheduling across 57+ regions serving mission-critical workloads.',
    impact: '8 core components, 57+ regions',
    skills: ['AWS', 'Java', 'gRPC', 'Distributed Systems', 'DynamoDB', 'CloudWatch'],
    color: 'from-orange-500 to-orange-600',
  },
  {
    company: 'Homelab',
    role: 'DevOps / SRE / SDE',
    period: '2021 — Present',
    description: 'Production-grade bare-metal K8s cluster (Talos + Cilium). Built Temporal-based LLM inference pipeline with CPU-bound optimization and quantization.',
    impact: '60% latency cut, 75% memory saved',
    skills: ['LangGraph', 'Temporal', 'LLM Ops', 'PyTorch', 'Kafka', 'Observability'],
    color: 'from-green-500 to-green-600',
  },
  {
    company: 'Open Source',
    role: 'Maintainer — go-flink',
    period: '2022 — Present',
    description: 'Building distributed DataLakeHouse framework in Go. Fault-tolerant task scheduling, streaming semantics, and efficient data processing.',
    impact: 'Public repository, active development',
    skills: ['Go', 'Distributed Systems', 'Data Pipeline', 'Testing', 'Architecture'],
    color: 'from-purple-500 to-purple-600',
  },
]

const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.2,
    },
  },
}

const itemVariants = {
  hidden: { opacity: 0, x: -20 },
  visible: {
    opacity: 1,
    x: 0,
    transition: { duration: 0.6, ease: 'easeOut' },
  },
}

export function ExperienceTimeline() {
  return (
    <section className="max-w-4xl 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">Explore Experience</h2>
        <p className="text-lg text-gray-600 dark:text-gray-400">
          From AWS to RBC. Building systems at scale. Skills acquired along the journey.
        </p>
      </motion.div>

      <motion.div
        variants={containerVariants}
        initial="hidden"
        whileInView="visible"
        viewport={{ once: true }}
        className="relative"
      >
        {/* Timeline line */}
        <div className="absolute left-0 md:left-1/2 top-0 bottom-0 w-1 bg-gradient-to-b from-blue-500 via-purple-500 to-green-500 md:transform md:-translate-x-1/2" />

        {/* Timeline items */}
        <div className="space-y-12">
          {timeline.map((item, index) => (
            <motion.div
              key={item.company}
              variants={itemVariants}
              className="relative pl-8 md:pl-0"
            >
              {/* Timeline dot */}
              <div className={`absolute left-0 md:left-1/2 top-2 w-4 h-4 rounded-full bg-gradient-to-br ${item.color} transform md:-translate-x-1/2 -translate-x-1.5 border-4 border-white dark:border-gray-950 shadow-lg`} />

              {/* Content card */}
              <div className={index % 2 === 0 ? 'md:w-1/2 md:pr-8' : 'md:w-1/2 md:ml-auto md:pl-8'}>
                <div className="bg-white dark:bg-gray-900 rounded-lg p-6 border border-gray-200 dark:border-gray-700 hover:shadow-lg transition-shadow">
                  <div className="flex items-start justify-between mb-3">
                    <div>
                      <h3 className="text-xl font-bold text-gray-900 dark:text-white">
                        {item.company}
                      </h3>
                      <p className="text-sm font-semibold text-blue-600 dark:text-blue-400">
                        {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>

                  <p className="text-sm text-gray-700 dark:text-gray-300 mb-3">
                    {item.description}
                  </p>

                  <div className="bg-gradient-to-r from-blue-50 to-purple-50 dark:from-gray-800 dark:to-gray-800 rounded px-3 py-2 mb-4 text-sm font-semibold text-blue-600 dark:text-blue-400">
                    📊 {item.impact}
                  </div>

                  <div className="flex flex-wrap gap-2">
                    {item.skills.map((skill) => (
                      <span key={skill} className="text-xs px-3 py-1 rounded-full bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300">
                        {skill}
                      </span>
                    ))}
                  </div>
                </div>
              </div>
            </motion.div>
          ))}
        </div>
      </motion.div>
    </section>
  )
}