(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,80 @@
+'use client'
+
+import { motion, AnimatePresence } from 'framer-motion'
+import { useState, useEffect } from 'react'
+import { Code, Network, Zap, Sparkles, Github } from 'lucide-react'
+import { TypewriterText } from './TypewriterText'
+
+const roles = [
+  { text: 'Software Engineer Lead', icon: Code },
+  { text: 'Infrastructure Architect', icon: Network },
+  { text: 'Distributed Systems Builder', icon: Zap },
+  { text: 'LLM Systems Optimizer', icon: Sparkles },
+  { text: 'Open Source Developer', icon: Github },
+]
+
+export function HeroBlobFlow() {
+  const [index, setIndex] = useState(0)
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setIndex((prev) => (prev + 1) % roles.length)
+    }, 2000)
+    return () => clearInterval(interval)
+  }, [])
+
+  return (
+    <div className="relative w-full max-w-md mx-auto aspect-square flex flex-col items-center justify-center">
+      {/* Background glow */}
+      <div className="absolute inset-0">
+        <motion.div
+          animate={{
+            scale: [1, 1.15, 1],
+            opacity: [0.25, 0.4, 0.25],
+          }}
+          transition={{
+            duration: 6,
+            repeat: Infinity,
+            ease: 'easeInOut',
+          }}
+          className="absolute inset-0 bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500 rounded-full blur-3xl"
+        />
+      </div>
+
+      {/* Avatar center */}
+      <motion.div
+        initial={{ scale: 0, opacity: 0 }}
+        animate={{ scale: 1, opacity: 1 }}
+        transition={{ duration: 0.8, delay: 0.2 }}
+        className="relative z-10 w-32 h-32"
+      >
+        <div className="w-full h-full rounded-full bg-gradient-to-br from-blue-600 to-purple-600 flex items-center justify-center text-white font-bold text-4xl border-4 border-white dark:border-gray-950 shadow-xl">
+          RL
+        </div>
+      </motion.div>
+
+      {/* Typewriter text below avatar */}
+      <TypewriterText />
+
+      {/* Rotating role text */}
+      <div className="relative z-10 mt-12 px-6 w-full flex items-center justify-center">
+        <AnimatePresence mode="wait">
+          <motion.div
+            key={index}
+            initial={{ opacity: 0, y: 20, scale: 0.95 }}
+            animate={{ opacity: 1, y: 0, scale: 1 }}
+            exit={{ opacity: 0, y: -20, scale: 0.95 }}
+            transition={{ duration: 0.6, ease: 'easeInOut' }}
+            className="absolute text-2xl font-semibold text-gray-900 dark:text-white text-center px-6 flex items-center gap-3 justify-center"
+          >
+            {(() => {
+              const Icon = roles[index].icon
+              return <Icon size={28} className="text-blue-600 dark:text-blue-400 flex-shrink-0" />
+            })()}
+            {roles[index].text}
+          </motion.div>
+        </AnimatePresence>
+      </div>
+    </div>
+  )
+}