feat: consolidate homelab projects, add skills dropdown, update timeline animations

- Consolidate 3 homelab projects into single 'Self-Hosted Cloud' card
- Add /homelab deep dive page with full tech stack
- Update to 4 nodes (3 control plane + 1 worker)
- Add organized skills dropdown (6 categories)
- Update timeline skills for riotpiao.com experience
- Add 'Learn more' links for all major experiences
- Change timeline animation to scroll-reveal (y-axis)

components/ExperienceTimeline.tsx

@@ -12,7 +12,7 @@ const colors = [
 ]
 
 const skills = [
-  ['LangGraph', 'Temporal', 'LLM Ops', 'PyTorch', 'Kafka', 'Observability', 'Go-Flink'],
+  ['Kubernetes', 'Talos', 'ArgoCD', 'Terraform', 'Authentik', 'Prometheus', 'Grafana', 'vLLM', 'Temporal', 'Kafka', 'PostgreSQL', 'Go'],
   ['Golang', 'Terraform', 'IaC', 'OpenShift', 'Docker', 'Distributed Systems', 'Grafana'],
   ['Java', 'AWS', 'DynamoDB', 'CloudWatch', 'gRPC', 'Distributed Systems', 'Ownership', 'Disaster Recovery', 'Observability'],
   ['C++', 'CMake', 'Golang', 'Docker'],
@@ -20,7 +20,7 @@ const skills = [
 ]
 
 const links = [
-  null,
+  '#project-homelab', // Homelab - link to homelab project showcase
   '#project-rbc', // RBC - link to RBC project showcase
   '#project-aws', // AWS - link to AWS project showcase
   null,
@@ -28,29 +28,19 @@ const links = [
 ]
 
 const linkTexts = [
-  '',
+  'Learn more →',
   'Learn more →',
   'Learn more →',
   '',
   'View Product →',
 ]
 
-const containerVariants = {
-  hidden: { opacity: 0 },
-  visible: {
-    opacity: 1,
-    transition: {
-      staggerChildren: 0.2,
-    },
-  },
-}
-
 const itemVariants = {
-  hidden: { opacity: 0, x: -20 },
+  hidden: { opacity: 0, y: 40 },
   visible: {
     opacity: 1,
-    x: 0,
-    transition: { duration: 0.6, ease: 'easeOut' },
+    y: 0,
+    transition: { duration: 0.5, ease: 'easeOut' },
   },
 }
 
@@ -73,13 +63,7 @@ export function ExperienceTimeline() {
         </p>
       </motion.div>
 
-      <motion.div
-        variants={containerVariants}
-        initial="hidden"
-        whileInView="visible"
-        viewport={{ once: true }}
-        className="relative"
-      >
+      <div 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" />
 
@@ -89,6 +73,9 @@ export function ExperienceTimeline() {
             <motion.div
               key={item.company}
               variants={itemVariants}
+              initial="hidden"
+              whileInView="visible"
+              viewport={{ once: true, margin: "-100px" }}
               className="relative pl-8 md:pl-0"
             >
               {/* Timeline dot */}
@@ -138,7 +125,7 @@ export function ExperienceTimeline() {
             </motion.div>
           ))}
         </div>
-      </motion.div>
+      </div>
     </section>
   )
 }