Website trial

team-strawhats-portfolio/src/components/canvas/MemberModel.tsx → src/components/canvas/MemberModel.tsx

@@ -36,6 +36,7 @@ export default function MemberModel() {
     // Listen to global window scroll
     useEffect(() => {
         const handleScroll = () => {
+            // Calculate 70% threshold
             const totalHeight = document.documentElement.scrollHeight - window.innerHeight
             let progress = 0
             if (totalHeight > 0) {
@@ -93,17 +94,6 @@ export default function MemberModel() {
             if (orbitRef2.current) orbitRef2.current.rotation.z += delta * 2.5
             if (orbitRef3.current) orbitRef3.current.rotation.z += delta * 3
         }
-
-        // 6. CYBER HAND ANIMATION (Active Member 0 / Index 0)
-        if (activeMember === 0) {
-            const t = state.clock.elapsedTime
-            // Wiggle fingers in a wave
-            if (thumbRef.current) thumbRef.current.rotation.z = Math.sin(t * 3) * 0.2
-            if (indexRef.current) indexRef.current.rotation.x = Math.sin(t * 4 + 0.5) * 0.3
-            if (middleRef.current) middleRef.current.rotation.x = Math.sin(t * 4 + 1.0) * 0.3
-            if (ringRef.current) ringRef.current.rotation.x = Math.sin(t * 4 + 1.5) * 0.3
-            if (pinkyRef.current) pinkyRef.current.rotation.x = Math.sin(t * 4 + 2.0) * 0.3
-        }
     })
 
     return (
@@ -138,8 +128,6 @@ export default function MemberModel() {
                         <boxGeometry args={[0.1, 0.05, 0.05]} />
                         <meshStandardMaterial color="cyan" emissive="cyan" emissiveIntensity={3} />
                     </mesh>
-
-
                 </group>
             )}
 

src/components/dom/TeamOverlay.tsx

@@ -0,0 +1,159 @@
+"use client"
+
+import { useStore } from "@/store/useStore"
+import { motion, AnimatePresence } from "framer-motion"
+
+const MEMBERS = [
+    {
+        name: "SHUBHAM PODDAR",
+        role: "B.Tech Mechatronics",
+        desc: "Specializing in robotics and integrated systems.",
+        stack: ["Robotics", "IoT", "Embedded Systems"],
+        github: "https://github.com/shubhampoddar013",
+        linkedin: "https://www.linkedin.com/in/shubhamshibupoddar/"
+    },
+    {
+        name: "NEEL PATEL",
+        role: "B.Tech Chemical",
+        desc: "Process optimization and material science expert.",
+        stack: ["Process Design", "Simulink", "MATLAB"],
+        github: "https://github.com/patelramesh7311-code",
+        linkedin: "https://www.linkedin.com/in/neel-patel-0864773a4/"
+    },
+    {
+        name: "VISHAL GALANDE",
+        role: "B.Tech Computer Science",
+        desc: "Full-stack development and cloud architecture.",
+        stack: ["React", "Node.js", "AWS"],
+        github: "https://github.com/vishalgalande/",
+        linkedin: "https://www.linkedin.com/in/vishalgalande/"
+    },
+    {
+        name: "JAIDEEP BISHNOI",
+        role: "B.Tech Computer Science",
+        desc: "Creative technologist and UI/UX visionary.",
+        stack: ["Next.js", "Three.js", "Design Systems"],
+        github: "https://github.com/Jaideep-21",
+        linkedin: "https://www.linkedin.com/in/jaideep-bishnoi-0897a3249/"
+    }
+]
+
+export default function TeamOverlay() {
+    const activeMember = useStore((state) => state.activeMember)
+    const hoveredModel = useStore((state) => state.hoveredModel)
+
+    return (
+        <section className="absolute inset-0 pointer-events-none z-10 flex items-center justify-end px-12 md:px-24">
+            <AnimatePresence mode="wait">
+                {activeMember !== -1 && (
+                    <motion.div
+                        key={activeMember}
+                        initial={{ opacity: 0, x: 50 }}
+                        animate={{ opacity: 1, x: 0 }}
+                        exit={{ opacity: 0, x: 50, transition: { duration: 0.2 } }}
+                        transition={{ type: "spring", stiffness: 100, damping: 20 }}
+                        className={`
+                            relative max-w-md w-full p-8 rounded-xl overflow-hidden
+                            pointer-events-auto backdrop-blur-3xl bg-white/5 border border-white/10
+                            shadow-2xl shadow-cyan-500/10
+                            transition-colors duration-500
+                            ${hoveredModel ? "border-cyan-500/50 bg-white/10" : ""}
+                        `}
+                    >
+                        {/* Decorative scanline */}
+                        <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-cyan-500 to-transparent opacity-50" />
+
+                        {/* Staggered Content */}
+                        <div className="flex flex-col gap-6">
+                            {/* Header */}
+                            <div>
+                                <motion.div
+                                    initial={{ opacity: 0, y: 10 }}
+                                    animate={{ opacity: 1, y: 0 }}
+                                    transition={{ delay: 0.1 }}
+                                    className="flex items-center gap-3 mb-2"
+                                >
+                                    <span className="text-xs font-space-mono text-cyan-400 tracking-widest">
+                                        MEMBER_0{activeMember + 1}
+                                    </span>
+                                    <div className="h-px flex-1 bg-white/20" />
+                                </motion.div>
+
+                                <motion.h2
+                                    initial={{ opacity: 0, y: 10 }}
+                                    animate={{ opacity: 1, y: 0 }}
+                                    transition={{ delay: 0.2 }}
+                                    className="text-4xl md:text-5xl font-michroma text-white drop-shadow-md"
+                                >
+                                    {MEMBERS[activeMember].name.split(" ")[0]}
+                                </motion.h2>
+                                <motion.p
+                                    initial={{ opacity: 0 }}
+                                    animate={{ opacity: 1 }}
+                                    transition={{ delay: 0.3 }}
+                                    className="text-lg text-white/60 font-rajdhani mt-1"
+                                >
+                                    {MEMBERS[activeMember].role}
+                                </motion.p>
+                            </div>
+
+                            {/* Description */}
+                            <motion.p
+                                initial={{ opacity: 0 }}
+                                animate={{ opacity: 1 }}
+                                transition={{ delay: 0.4 }}
+                                className="text-white/80 leading-relaxed font-light"
+                            >
+                                {MEMBERS[activeMember].desc}
+                            </motion.p>
+
+                            {/* Tech Stack Tags */}
+                            <motion.div
+                                initial={{ opacity: 0 }}
+                                animate={{ opacity: 1 }}
+                                transition={{ delay: 0.5 }}
+                                className="flex flex-wrap gap-2"
+                            >
+                                {MEMBERS[activeMember].stack.map((tech) => (
+                                    <span
+                                        key={tech}
+                                        className="px-3 py-1 text-xs font-space-mono text-cyan-200 bg-cyan-900/30 border border-cyan-800/50 rounded-full"
+                                    >
+                                        {tech}
+                                    </span>
+                                ))}
+                            </motion.div>
+
+                            {/* Social Links */}
+                            <motion.div
+                                initial={{ opacity: 0 }}
+                                animate={{ opacity: 1 }}
+                                transition={{ delay: 0.6 }}
+                                className="flex items-center gap-4 mt-2 pt-4 border-t border-white/10"
+                            >
+                                <a
+                                    href={MEMBERS[activeMember].github}
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    className="text-white/50 hover:text-white transition-colors text-sm font-space-mono flex items-center gap-2 group pointer-events-auto"
+                                >
+                                    GITHUB
+                                    <span className="opacity-0 group-hover:opacity-100 transition-opacity">↗</span>
+                                </a>
+                                <a
+                                    href={MEMBERS[activeMember].linkedin}
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    className="text-white/50 hover:text-cyan-400 transition-colors text-sm font-space-mono flex items-center gap-2 group pointer-events-auto"
+                                >
+                                    LINKEDIN
+                                    <span className="opacity-0 group-hover:opacity-100 transition-opacity">↗</span>
+                                </a>
+                            </motion.div>
+                        </div>
+                    </motion.div>
+                )}
+            </AnimatePresence>
+        </section>
+    )
+}