Story Crater Bot
b9ae470bc1
- Add i18n support (EN/ZH) with language toggle - Redesign header with education dropdown, contact copy buttons - Add RBC project showcase with bullet points, skills highlighting - Create terraform-drift placeholder page - Add ProjectShowcase component with media toggle (image/video) - Update experience timeline with action-driven descriptions - Add Docker + Forgejo CI workflow for image builds - Update K8s manifests for riotpiao.com ingress - Add DESIGN.md documenting design system patterns
95 lines
3.2 KiB
TypeScript
95 lines
3.2 KiB
TypeScript
'use client'
|
|
|
|
import { motion, AnimatePresence } from 'framer-motion'
|
|
import { useState, useEffect } from 'react'
|
|
import Image from 'next/image'
|
|
import { Code, Network, Zap, Sparkles, Shield, Cpu } from 'lucide-react'
|
|
import { useLanguage } from '@/lib/LanguageContext'
|
|
|
|
const roleIcons = [Network, Shield, Code, Sparkles, Zap, Cpu]
|
|
|
|
export function HeroBlobFlow() {
|
|
const [index, setIndex] = useState(0)
|
|
const [isDark, setIsDark] = useState(false)
|
|
const { t } = useLanguage()
|
|
const roles = t.hero.roles
|
|
|
|
useEffect(() => {
|
|
const isDarkMode = document.documentElement.classList.contains('dark')
|
|
setIsDark(isDarkMode)
|
|
|
|
const observer = new MutationObserver(() => {
|
|
const darkMode = document.documentElement.classList.contains('dark')
|
|
setIsDark(darkMode)
|
|
})
|
|
|
|
observer.observe(document.documentElement, {
|
|
attributes: true,
|
|
attributeFilter: ['class'],
|
|
})
|
|
|
|
return () => observer.disconnect()
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
setIndex((prev) => (prev + 1) % roles.length)
|
|
}, 2000)
|
|
return () => clearInterval(interval)
|
|
}, [roles.length])
|
|
|
|
return (
|
|
<div className="relative w-full max-w-5xl mx-auto">
|
|
{/* Full hire-me image */}
|
|
<div className="relative w-full">
|
|
<Image
|
|
src={isDark ? '/hire-me.png' : '/hire-me-light.png'}
|
|
alt="You hire me, you get a bundle"
|
|
width={1200}
|
|
height={800}
|
|
className="w-full h-auto"
|
|
priority
|
|
/>
|
|
|
|
{/* Avatar + Rotating text - centered on image */}
|
|
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-20 flex flex-col items-center">
|
|
{/* Avatar */}
|
|
<motion.div
|
|
initial={{ scale: 0, opacity: 0 }}
|
|
animate={{ scale: 1, opacity: 1 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
>
|
|
<Image
|
|
src="/avatar.jpeg"
|
|
alt="Profile"
|
|
width={200}
|
|
height={200}
|
|
className="w-48 h-48 rounded-full object-cover border-4 border-white dark:border-gray-950 shadow-xl"
|
|
/>
|
|
</motion.div>
|
|
|
|
{/* Rotating role text */}
|
|
<div className="mt-6 h-16 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="text-3xl font-bold text-gray-900 dark:text-white text-center flex items-center gap-3 justify-center bg-white/80 dark:bg-gray-900/80 rounded-xl py-3 px-6 backdrop-blur-sm"
|
|
>
|
|
{(() => {
|
|
const Icon = roleIcons[index]
|
|
return <Icon size={32} className="text-blue-600 dark:text-blue-400 flex-shrink-0" />
|
|
})()}
|
|
{roles[index]}
|
|
</motion.div>
|
|
</AnimatePresence>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|