(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,87 @@
+'use client'
+
+import { motion } from 'framer-motion'
+
+interface AvatarWithBlobProps {
+  roles: string[]
+}
+
+export function AvatarWithBlob({ roles }: AvatarWithBlobProps) {
+  // Floating animation variants for each role blob
+  const getBlobVariants = (index: number) => ({
+    animate: {
+      y: [0, -20, 0],
+      x: [0, Math.cos((index * 2 * Math.PI) / roles.length) * 10, 0],
+      rotate: [0, 5, -5, 0],
+      transition: {
+        duration: 4 + index * 0.5,
+        repeat: Infinity,
+        ease: 'easeInOut',
+      },
+    },
+  })
+
+  return (
+    <div className="relative w-full max-w-md mx-auto aspect-square flex items-center justify-center">
+      {/* Animated background blobs */}
+      <div className="absolute inset-0">
+        {/* Center circle glow */}
+        <motion.div
+          animate={{
+            scale: [1, 1.1, 1],
+            opacity: [0.3, 0.5, 0.3],
+          }}
+          transition={{
+            duration: 4,
+            repeat: Infinity,
+          }}
+          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 mx-auto"
+      >
+        <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-lg">
+          RL
+        </div>
+      </motion.div>
+
+      {/* Floating role blobs */}
+      {roles.map((role, index) => {
+        const angle = (index * 2 * Math.PI) / roles.length
+        const radius = 120
+        const x = Math.cos(angle) * radius
+        const y = Math.sin(angle) * radius
+
+        return (
+          <motion.div
+            key={role}
+            variants={getBlobVariants(index)}
+            animate="animate"
+            className="absolute z-20"
+            style={{
+              left: '50%',
+              top: '50%',
+              marginLeft: x,
+              marginTop: y,
+            }}
+          >
+            <motion.div
+              initial={{ scale: 0, opacity: 0 }}
+              animate={{ scale: 1, opacity: 1 }}
+              transition={{ delay: 0.4 + index * 0.15 }}
+              className="px-4 py-2 rounded-full bg-white dark:bg-gray-900 border-2 border-blue-400 dark:border-blue-600 shadow-lg whitespace-nowrap text-sm font-semibold text-gray-900 dark:text-white"
+            >
+              {role}
+            </motion.div>
+          </motion.div>
+        )
+      })}
+    </div>
+  )
+}