(chore) init commit and add tasks

components/TypewriterText.tsx

@@ -0,0 +1,55 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import { useState, useEffect } from 'react'
+
+const phrases = [
+  'a Senior Systems engineer',
+  'Rock Liang',
+  'a Senior Full-stack builder',
+  'a Senior Infrastructure architect',
+  'a Senior Backend SDE',
+]
+
+export function TypewriterText() {
+  const [currentPhrase, setCurrentPhrase] = useState(0)
+  const [displayText, setDisplayText] = useState('')
+  const [isDeleting, setIsDeleting] = useState(false)
+
+  useEffect(() => {
+    const phrase = phrases[currentPhrase]
+    const delay = isDeleting ? 50 : 100
+
+    const timer = setTimeout(() => {
+      if (!isDeleting) {
+        if (displayText.length < phrase.length) {
+          setDisplayText(phrase.substring(0, displayText.length + 1))
+        } else {
+          setTimeout(() => setIsDeleting(true), 1500)
+        }
+      } else {
+        if (displayText.length > 0) {
+          setDisplayText(phrase.substring(0, displayText.length - 1))
+        } else {
+          setIsDeleting(false)
+          setCurrentPhrase((prev) => (prev + 1) % phrases.length)
+        }
+      }
+    }, delay)
+
+    return () => clearTimeout(timer)
+  }, [displayText, isDeleting, currentPhrase])
+
+  return (
+    <div className="relative z-10 mt-6 h-10 flex items-center justify-center">
+      <span className="text-2xl font-semibold text-gray-800 dark:text-gray-200">
+        I'm <span className="text-blue-600 dark:text-blue-400">{displayText}</span>
+        <motion.span
+          animate={{ opacity: [1, 0] }}
+          transition={{ duration: 0.6, repeat: Infinity }}
+          className="inline-block w-0.5 h-7 ml-1 bg-blue-600 dark:bg-blue-400"
+        />
+      </span>
+    </div>
+  )
+}