(chore) init commit and add tasks

2026-08-18 18:33:49 -07:00
commit 6c6218ef36
61 changed files with 9851 additions and 0 deletions
@@ -0,0 +1,150 @@
+'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>
+  )
+}