81 lines
2.7 KiB
TypeScript
81 lines
2.7 KiB
TypeScript
|
'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>
|
||
|
|
)
|
||
|
|
}
|