abhishek-portfolio-template 1.0.0

package/template/src/components/home/focus-card.tsx

@@ -0,0 +1,171 @@
+"use client";
+
+import { SiReact, SiNextdotjs, SiTypescript, SiTailwindcss, SiSupabase, SiFigma, SiC, SiCplusplus, SiOpenjdk, SiPython, SiPostgresql, SiDocker, SiGo, SiRust, SiNodedotjs, SiMongodb, SiRedis, SiAmazonwebservices, SiGit, SiPostman, SiGithub, SiServerless } from "react-icons/si";
+
+import { useState, useEffect } from "react";
+import { motion } from "framer-motion";
+
+export function FocusCard() {
+    const [isGolden, setIsGolden] = useState(false);
+    const [isHovering, setIsHovering] = useState(false);
+
+    useEffect(() => {
+        if (isGolden) {
+            const timer = setTimeout(() => setIsGolden(false), 5000);
+            return () => clearTimeout(timer);
+        }
+    }, [isGolden]);
+
+    return (
+        <div
+            onDoubleClick={() => setIsGolden(prev => !prev)}
+            onMouseDown={(e) => { if (e.detail > 1) e.preventDefault(); }}
+            onMouseEnter={() => setIsHovering(true)}
+            onMouseLeave={() => setIsHovering(false)}
+            className="w-full h-full bg-[#111111] border border-white/5 rounded-[32px] overflow-hidden flex flex-col p-6 sm:p-8 relative group hover:border-white/10 transition-colors cursor-pointer select-none"
+        >
+            {/* Main Content Layout */}
+            <div className="flex flex-row justify-between items-start h-full pt-2">
+                {/* Left Column - All technology tags */}
+                <div className="flex flex-col gap-6 overflow-y-auto pr-2 pl-2 pb-10 scrollbar-hide mask-image-b w-full relative z-10">
+
+                    {/* Core Stack Section */}
+                    <div className="flex flex-col gap-3">
+                        {/* Header: Core Stack (Blue Dot) */}
+                        <div className="flex items-center gap-3 sticky top-0 bg-[#111111]/95 backdrop-blur-sm py-2 z-20">
+                            <motion.div
+                                style={{
+                                    boxShadow: isGolden
+                                        ? "0 0 2px rgba(234,179,8,0.8)"
+                                        : "0 0 2px rgba(59,130,246,0.8)"
+                                }}
+                                className={`w-1.5 h-1.5 rounded-full ${isGolden ? "bg-yellow-500" : "bg-blue-500"}`}
+                            />
+                            <span className="text-xs font-bold uppercase tracking-widest text-white/40">Core Stack</span>
+                        </div>
+
+                        <div className={`flex items-center gap-4 text-white/50 hover:text-[#61DAFB] transition-all duration-300 group/item pl-1 ${isGolden ? "opacity-100" : "opacity-100"}`}>
+                            <SiNextdotjs className={`w-4 h-4 sm:w-5 sm:h-5 ${isGolden ? "text-[#61DAFB] drop-shadow-[0_0_5px_rgba(97,218,251,0.5)]" : "text-[#61DAFB]"}`} />
+                            <span className={`text-[10px] sm:text-xs font-semibold tracking-wide uppercase font-mono ${isGolden ? "text-[#61DAFB] drop-shadow-[0_0_5px_rgba(97,218,251,0.5)]" : ""}`}>Next.js & React</span>
+                        </div>
+                        <div className={`flex items-center gap-4 text-white/50 hover:text-[#3178C6] transition-all duration-300 group/item pl-1 ${isGolden ? "opacity-100" : "opacity-100"}`}>
+                            <div className="flex gap-2">
+                                <SiNodedotjs className={`w-4 h-4 sm:w-5 sm:h-5 ${isGolden ? "text-[#339933] drop-shadow-[0_0_5px_rgba(51,153,51,0.5)]" : "text-[#339933]"}`} />
+                                <SiTypescript className={`w-4 h-4 sm:w-5 sm:h-5 ${isGolden ? "text-[#3178C6] drop-shadow-[0_0_5px_rgba(49,120,198,0.5)]" : "text-[#3178C6]"}`} />
+                            </div>
+                            <span className="text-[10px] sm:text-xs font-semibold tracking-wide leading-tight uppercase font-mono">
+                                <span className={isGolden ? "text-[#339933] drop-shadow-[0_0_5px_rgba(51,153,51,0.5)]" : ""}>Node.js</span>
+                                <span className={isGolden ? "text-white/50" : ""}> & </span>
+                                <span className={isGolden ? "text-[#3178C6] drop-shadow-[0_0_5px_rgba(49,120,198,0.5)]" : ""}>TS</span>
+                            </span>
+                        </div>
+                        <div className={`flex items-center gap-4 text-white/50 hover:text-[#06B6D4] transition-all duration-300 group/item pl-1 ${isGolden ? "opacity-100" : "opacity-100"}`}>
+                            <SiTailwindcss className={`w-4 h-4 sm:w-5 sm:h-5 ${isGolden ? "text-[#06B6D4] drop-shadow-[0_0_5px_rgba(6,182,212,0.5)]" : "text-[#06B6D4]"}`} />
+                            <span className={`text-[10px] sm:text-xs font-semibold tracking-wide uppercase font-mono ${isGolden ? "text-[#06B6D4] drop-shadow-[0_0_5px_rgba(6,182,212,0.5)]" : ""}`}>Tailwind CSS</span>
+                        </div>
+                    </div>
+
+                    {/* Other Stacks Section */}
+                    <div className="flex flex-col gap-3 mt-2">
+                        {/* Header: Other Stacks (Red Dot) */}
+                        <div className="flex items-center gap-3 sticky top-0 bg-[#111111]/95 backdrop-blur-sm py-2 z-20">
+                            <motion.div
+                                style={{
+                                    boxShadow: isGolden
+                                        ? "0 0 2px rgba(234,179,8,0.8)"
+                                        : "0 0 2px rgba(239,68,68,0.8)"
+                                }}
+                                className={`w-1.5 h-1.5 rounded-full ${isGolden ? "bg-yellow-500" : "bg-red-500"}`}
+                            />
+                            <span className="text-xs font-bold uppercase tracking-widest text-white/40">Other Stacks</span>
+                        </div>
+
+                        <div className={`flex items-center gap-4 text-white/50 hover:text-[#4169E1] transition-all duration-300 group/item pl-1 ${isGolden ? "opacity-100" : "opacity-100"}`}>
+                            <div className="flex gap-1.5">
+                                <SiPostgresql className={`w-4 h-4 ${isGolden ? "text-[#4169E1] opacity-40" : "text-[#4169E1]"}`} />
+                                <SiPostgresql className={`w-4 h-4 ${isGolden ? "text-[#00E599] scale-125 drop-shadow-[0_0_5px_rgba(0,229,153,0.5)]" : "text-[#00E599]"}`} />
+                                <SiMongodb className={`w-4 h-4 ${isGolden ? "text-[#47A248] opacity-40" : "text-[#47A248]"}`} />
+                            </div>
+                            <span className="text-[10px] sm:text-xs font-semibold tracking-wide leading-tight uppercase font-mono">
+                                <span className={isGolden ? "opacity-40" : ""}>SQL, </span>
+                                <span className={isGolden ? "text-[#00E599] drop-shadow-[0_0_5px_rgba(0,229,153,0.5)]" : ""}>Neon</span>
+                                <span className={isGolden ? "opacity-40" : ""}> & NoSQL</span>
+                            </span>
+                        </div>
+                        <div className={`flex items-center gap-4 text-white/50 hover:text-[#FFD43B] transition-all duration-300 group/item pl-1 ${isGolden ? "opacity-100" : "opacity-100"}`}>
+                            <SiPython className={`w-4 h-4 sm:w-5 sm:h-5 ${isGolden ? "text-[#3776AB] drop-shadow-[0_0_5px_rgba(55,118,171,0.5)]" : "text-[#3776AB]"}`} />
+                            <span className={`text-[10px] sm:text-xs font-semibold tracking-wide uppercase font-mono ${isGolden ? "text-[#3776AB] drop-shadow-[0_0_5px_rgba(55,118,171,0.5)]" : ""}`}>Python</span>
+                        </div>
+                        <div className={`flex items-center gap-4 text-white/50 hover:text-[#DEA584] transition-all duration-300 group/item pl-1 ${isGolden ? "opacity-20" : "opacity-100"}`}>
+                            <div className="flex gap-1.5">
+                                <SiGo className="w-4 h-4 text-[#00ADD8]" />
+                                <SiRust className="w-4 h-4 text-[#DEA584]" />
+                            </div>
+                            <span className="text-[10px] sm:text-xs font-semibold tracking-wide uppercase font-mono">Go / Rust (Allegedly 🤷‍♂️)</span>
+                        </div>
+                        <div className={`flex items-center gap-4 text-white/50 hover:text-[#ED8B00] transition-all duration-300 group/item pl-1 ${isGolden ? "opacity-100" : "opacity-100"}`}>
+                            <SiOpenjdk className={`w-4 h-4 sm:w-5 sm:h-5 ${isGolden ? "text-[#ED8B00] drop-shadow-[0_0_5px_rgba(237,139,0,0.5)]" : "text-[#ED8B00]"}`} />
+                            <span className={`text-[10px] sm:text-xs font-semibold tracking-wide uppercase font-mono ${isGolden ? "text-[#ED8B00] drop-shadow-[0_0_5px_rgba(237,139,0,0.5)]" : ""}`}>Java</span>
+                        </div>
+                        <div className={`flex items-center gap-4 text-white/50 hover:text-[#00599C] transition-all duration-300 group/item pl-1 ${isGolden ? "opacity-100" : "opacity-100"}`}>
+                            <div className="flex gap-1.5">
+                                <SiC className={`w-4 h-4 ${isGolden ? "text-[#A8B9CC] drop-shadow-[0_0_4px_rgba(168,185,204,0.5)]" : "text-[#A8B9CC]"}`} />
+                                <SiCplusplus className={`w-4 h-4 ${isGolden ? "text-[#00599C] drop-shadow-[0_0_4px_rgba(0,89,156,0.5)]" : "text-[#00599C]"}`} />
+                            </div>
+                            <span className="text-[10px] sm:text-xs font-semibold tracking-wide uppercase font-mono">
+                                <span className={isGolden ? "text-[#A8B9CC] drop-shadow-[0_0_4px_rgba(168,185,204,0.5)]" : ""}>C</span>
+                                <span className={isGolden ? "text-white/50" : ""}> / </span>
+                                <span className={isGolden ? "text-[#00599C] drop-shadow-[0_0_4px_rgba(0,89,156,0.5)]" : ""}>C++</span>
+                            </span>
+                        </div>
+                        <div className={`flex items-center gap-4 text-white/50 hover:text-[#2496ED] transition-all duration-300 group/item pl-1 ${isGolden ? "opacity-20" : "opacity-100"}`}>
+                            <div className="flex gap-1.5">
+                                <SiDocker className="w-4 h-4 text-[#2496ED]" />
+                                <SiAmazonwebservices className="w-4 h-4 text-[#FF9900]" />
+                            </div>
+                            <span className="text-[10px] sm:text-xs font-semibold tracking-wide uppercase font-mono">Cloud & Docker</span>
+                        </div>
+                        <div className={`flex items-center gap-4 text-white/50 hover:text-[#3ECF8E] transition-all duration-300 group/item pl-1 ${isGolden ? "opacity-100" : "opacity-100"}`}>
+                            <div className="flex gap-1.5">
+                                <SiSupabase className={`w-4 h-4 ${isGolden ? "text-[#3ECF8E] drop-shadow-[0_0_5px_rgba(62,207,142,0.5)]" : "text-[#3ECF8E]"}`} />
+                                <SiServerless className={`w-4 h-4 ${isGolden ? "text-[#F5AC1F] drop-shadow-[0_0_5px_rgba(245,172,31,0.5)]" : "text-[#F5AC1F]"}`} />
+                            </div>
+                            <span className="text-[10px] sm:text-xs font-semibold tracking-wide uppercase font-mono">
+                                <span className={isGolden ? "text-[#3ECF8E] drop-shadow-[0_0_5px_rgba(62,207,142,0.5)]" : ""}>Supabase</span>
+                                <span className={isGolden ? "text-white/50" : ""}> & </span>
+                                <span className={isGolden ? "text-[#F5AC1F] drop-shadow-[0_0_5px_rgba(245,172,31,0.5)]" : ""}>Convex</span>
+                            </span>
+                        </div>
+                        <div className={`flex items-center gap-4 text-white/50 hover:text-[#F05032] transition-all duration-300 group/item pl-1 ${isGolden ? "opacity-100" : "opacity-100"}`}>
+                            <div className="flex gap-1.5">
+                                <SiGit className={`w-4 h-4 ${isGolden ? "text-[#F05032] drop-shadow-[0_0_5px_rgba(240,80,50,0.5)]" : "text-[#F05032]"}`} />
+                                <SiGithub className={`w-4 h-4 ${isGolden ? "text-white drop-shadow-[0_0_5px_rgba(255,255,255,0.5)]" : "text-white"}`} />
+                                <SiPostman className={`w-4 h-4 ${isGolden ? "text-[#FF6C37] opacity-40" : "text-[#FF6C37]"}`} />
+                            </div>
+                            <span className="text-[10px] sm:text-xs font-semibold tracking-wide leading-tight uppercase font-mono">
+                                <span className={isGolden ? "text-[#F05032] drop-shadow-[0_0_5px_rgba(240,80,50,0.5)]" : ""}>Git, </span>
+                                <span className={isGolden ? "text-white drop-shadow-[0_0_5px_rgba(255,255,255,0.5)]" : ""}>GitHub </span>
+                                <span className={isGolden ? "text-[#777]" : ""}>& </span>
+                                <span className={isGolden ? "text-white drop-shadow-[0_0_5px_rgba(255,255,255,0.5)]" : ""}>APIs</span>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+
+                {/* Right Area - Large spinning React icon */}
+                <div className="flex-shrink-0 pt-4 pr-1 sm:pr-4 absolute right-4 top-12 pointer-events-none z-30">
+                    <motion.div
+                        animate={{ rotate: (isHovering || isGolden) ? 360 : 0 }}
+                        transition={{
+                            duration: (isHovering || isGolden) ? 8 : 1.5,
+                            repeat: (isHovering || isGolden) ? Infinity : 0,
+                            ease: (isHovering || isGolden) ? "linear" : "easeOut"
+                        }}
+                    >
+                        <SiReact className={`w-20 h-20 sm:w-28 sm:h-28 rotate-12 transition-all duration-700 ease-in-out ${isGolden ? "text-[#FFD700] drop-shadow-[0_0_15px_rgba(255,215,0,0.5)] opacity-80" : "text-[#61DAFB]/10 opacity-20 sm:opacity-100 group-hover:text-[#61DAFB]/40 group-hover:drop-shadow-[0_0_15px_rgba(97,218,251,0.3)]"}`} />
+                    </motion.div>
+                </div>
+            </div>
+        </div>
+    );
+}

package/template/src/components/home/identity-card.tsx

@@ -0,0 +1,45 @@
+"use client"
+
+import Image from "next/image"
+import Link from "next/link"
+import { motion } from "framer-motion"
+import { LocationTag } from "@/components/ui/location-tag"
+import { UserLocation } from "@/components/ui/user-location"
+
+export function IdentityCard() {
+    return (
+        <div className="relative w-full h-full bg-[#111] rounded-[32px] overflow-hidden group border border-white/5">
+            {/* Background Image */}
+            <div className="absolute inset-0">
+                <Image
+                    src="https://res.cloudinary.com/dap0u41dz/image/upload/v1766771167/file_00000000d51472078b7e2f9d883a6674_majhmb.jpg"
+                    alt="Abhishek Singh"
+                    fill
+                    priority
+                    sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+                    className="object-cover transition-transform duration-700 group-hover:scale-105 opacity-80 group-hover:opacity-60"
+                />
+                <div className="absolute inset-0 bg-gradient-to-t from-black via-black/20 to-transparent opacity-90" />
+            </div>
+
+            {/* Content */}
+            <div className="absolute inset-0 flex flex-col justify-end p-8">
+                <motion.div
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.5, delay: 0.2 }}
+                >
+                    <h2 className="text-3xl font-bold text-white mb-2 leading-tight">Abhishek Singh</h2>
+                    <p className="text-white/60 text-lg font-medium">
+                        Product Engineer.
+                    </p>
+
+                    <div className="mt-6 flex items-center justify-between w-full gap-3 flex-wrap">
+                        <LocationTag className="flex-1 min-w-[140px] !bg-white/10 !backdrop-blur-md !border-white/10" />
+                        <UserLocation className="flex-1 min-w-[140px] !bg-white/10 !backdrop-blur-md !border-white/10" />
+                    </div>
+                </motion.div>
+            </div>
+        </div>
+    )
+}

package/template/src/components/home/philosophy-card.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { ArrowUpRight } from "lucide-react";
+
+export function PhilosophyCard() {
+    return (
+        <motion.a
+            href="/resume.pdf"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="w-full h-full block relative group"
+            initial="initial"
+            whileHover="hover"
+            animate="initial"
+        >
+            <motion.div
+                className="w-full h-full bg-[#1c1c1c] rounded-[32px] p-10 flex flex-col justify-between overflow-hidden border border-white/5 relative z-10"
+                variants={{
+                    initial: {
+                        y: 0,
+                        backgroundColor: "rgba(28, 28, 28, 1)",
+                        borderColor: "rgba(255, 255, 255, 0.05)",
+                        scale: 1,
+                    },
+                    hover: {
+                        y: -4,
+                        backgroundColor: "rgba(32, 32, 32, 1)",
+                        borderColor: "rgba(255, 255, 255, 0.1)",
+                        scale: 1.01, // Subtle scale up
+                        transition: {
+                            duration: 0.4,
+                            ease: [0.25, 1, 0.5, 1]
+                        }
+                    }
+                }}
+            >
+                {/* Header Row */}
+                <div className="flex items-start justify-between relative z-20">
+                    <span className="text-xs font-medium uppercase tracking-[0.2em] text-white/30 group-hover:text-white/50 transition-colors duration-300">
+                        Curriculum Vitae
+                    </span>
+
+                    <div className="relative w-8 h-8 flex items-center justify-center overflow-hidden">
+                        <motion.div
+                            variants={{
+                                initial: { x: 0, y: 0, opacity: 1 },
+                                hover: { x: 20, y: -20, opacity: 0 }
+                            }}
+                            transition={{ duration: 0.4, ease: "circIn" }}
+                            className="absolute"
+                        >
+                            <ArrowUpRight className="w-5 h-5 text-white/40" />
+                        </motion.div>
+                        <motion.div
+                            variants={{
+                                initial: { x: -20, y: 20, opacity: 0 },
+                                hover: { x: 0, y: 0, opacity: 1 }
+                            }}
+                            transition={{ duration: 0.4, ease: "circOut", delay: 0.1 }}
+                            className="absolute"
+                        >
+                            <ArrowUpRight className="w-5 h-5 text-white" />
+                        </motion.div>
+                    </div>
+                </div>
+
+                {/* Main Content */}
+                <div className="mt-auto space-y-4 relative z-20">
+                    <motion.h2
+                        className="text-5xl font-serif font-medium text-white/90 tracking-tight leading-none"
+                        variants={{
+                            initial: { x: 0 },
+                            hover: { x: 4 } // Subtle nudge
+                        }}
+                        transition={{ duration: 0.4, ease: [0.25, 1, 0.5, 1] }}
+                    >
+                        Resume
+                    </motion.h2>
+                    <p className="text-sm text-white/40 leading-relaxed font-light max-w-[90%] group-hover:text-white/60 transition-colors duration-300">
+                        Selected works, experience, and capabilities.
+                    </p>
+                </div>
+
+                {/* Shine Effect */}
+                <motion.div
+                    className="absolute inset-0 z-0 bg-gradient-to-tr from-transparent via-white/[0.03] to-transparent -translate-x-[100%]"
+                    variants={{
+                        initial: { x: "-100%" },
+                        hover: {
+                            x: "100%",
+                            transition: {
+                                duration: 1,
+                                ease: "easeInOut",
+                                repeat: Infinity,
+                                repeatDelay: 1
+                            }
+                        }
+                    }}
+                />
+            </motion.div>
+        </motion.a>
+    )
+}

package/template/src/components/home/skills-in-motion.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { SKILLS, WHY_I_BUILD } from "@/lib/data";
+import { useEffect, useState } from "react";
+import { supabase } from "@/lib/supabase";
+
+export function SkillsInMotion() {
+    const [skills, setSkills] = useState<string[]>(SKILLS);
+    const [profile, setProfile] = useState(WHY_I_BUILD);
+
+    useEffect(() => {
+        async function fetchData() {
+            try {
+                // Fetch Skills
+                const { data: skillsData } = await supabase
+                    .from('skills')
+                    .select('name')
+                    .order('display_order', { ascending: true });
+
+                if (skillsData && skillsData.length > 0) {
+                    setSkills(skillsData.map((s: any) => s.name));
+                }
+
+                // Fetch Profile
+                const { data: profileData } = await supabase
+                    .from('profile')
+                    .select('bio_primary, bio_secondary')
+                    .limit(1)
+                    .single();
+
+                if (profileData) {
+                    setProfile({
+                        primary: profileData.bio_primary,
+                        secondary: profileData.bio_secondary || "",
+                    });
+                }
+            } catch (error) {
+                console.error("Error fetching skills/profile:", error);
+            }
+        }
+
+        fetchData();
+    }, []);
+
+    return (
+        <section id="skills-in-motion" className="py-20">
+            <div className="flex items-center justify-between mb-12 px-2">
+                {/* Section Header */}
+                <h2 className="text-3xl md:text-4xl font-medium text-white/90">
+                    Thinking + Skills
+                </h2>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+
+                {/* Card 1: Skills in Motion */}
+                <motion.div
+                    initial={{ opacity: 0, x: -20 }}
+                    whileInView={{ opacity: 1, x: 0 }}
+                    viewport={{ once: true, margin: "-100px" }}
+                    transition={{ duration: 0.6 }}
+                    className="bg-[#111111] border border-white/5 rounded-[32px] p-8 md:p-10 flex flex-col justify-between min-h-[300px]"
+                >
+                    <div>
+                        <h3 className="text-xl font-medium text-white mb-6">Skills in Motion</h3>
+                        <ul className="space-y-3">
+                            {skills.map((skill, index) => (
+                                <li key={index} className="text-base md:text-lg text-white/60 font-light border-l border-white/10 pl-4 hover:border-white/50 hover:text-white/90 transition-all duration-300">
+                                    {skill}
+                                </li>
+                            ))}
+                        </ul>
+                    </div>
+
+                    <div className="mt-8 text-xs text-white/20 uppercase tracking-widest">
+                        Constantly evolving
+                    </div>
+
+                </motion.div>
+
+                {/* Card 2: Why I Build */}
+                <motion.div
+                    initial={{ opacity: 0, x: 20 }}
+                    whileInView={{ opacity: 1, x: 0 }}
+                    viewport={{ once: true, margin: "-100px" }}
+                    transition={{ duration: 0.6, delay: 0.2 }}
+                    className="bg-[#111111] border border-white/5 rounded-[32px] p-8 md:p-10 flex flex-col justify-center relative overflow-hidden group min-h-[300px]"
+                >
+                    {/* Subtle background gradient/glow */}
+                    <div className="absolute top-0 right-0 w-64 h-64 bg-blue-500/5 rounded-full blur-[80px] -translate-y-1/2 translate-x-1/2 pointer-events-none group-hover:bg-blue-500/10 transition-colors duration-700"></div>
+
+
+                    <div className="relative z-10">
+                        <h3 className="text-2xl font-medium text-white mb-8">Why I Build</h3>
+
+                        <p className="text-xl md:text-3xl font-medium text-white leading-tight mb-6">
+                            "{profile.primary}"
+                        </p>
+                        <p className="text-base md:text-lg text-white/50 leading-relaxed max-w-md">
+                            {profile.secondary}
+                        </p>
+                    </div>
+                </motion.div>
+
+            </div>
+        </section>
+    );
+}

package/template/src/components/home/tech-stack-marquee.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+const TECH_STACK = [
+    "C++",
+    "Java",
+    "HTML",
+    "CSS",
+    "JavaScript",
+    "TypeScript",
+    "React",
+    "Next.js",
+    "Bootstrap",
+];
+
+export function TechStackMarquee() {
+    return (
+        <div className="w-full bg-[#111111] border border-white/5 rounded-[24px] overflow-hidden py-6 relative flex items-center">
+            {/* Label */}
+            <div className="absolute left-8 z-10 bg-[#111111] pr-6 hidden md:block">
+                <div className="flex items-center gap-2">
+                    <div className="w-2 h-2 rounded-full bg-green-500/80 animate-pulse" />
+                    <span className="text-sm font-medium text-white/40 uppercase tracking-widest">Technologies</span>
+                </div>
+            </div>
+
+            {/* Gradient Masks */}
+            <div className="absolute left-0 top-0 bottom-0 w-32 bg-gradient-to-r from-[#111111] to-transparent z-10 pointer-events-none" />
+            <div className="absolute right-0 top-0 bottom-0 w-32 bg-gradient-to-l from-[#111111] to-transparent z-10 pointer-events-none" />
+
+
+            {/* Marquee Container */}
+            <div className="flex overflow-hidden select-none mask-image:linear-gradient(to right, transparent, black 10%, black 90%, transparent)">
+                <motion.div
+                    animate={{ x: ["0%", "-50%"] }}
+                    transition={{
+                        duration: 20,
+                        ease: "linear",
+                        repeat: Infinity,
+                    }}
+                    className="flex gap-12 flex-shrink-0 items-center pr-12 pl-12 md:pl-48" // Added padding-left for label on desktop
+                >
+                    {[...TECH_STACK, ...TECH_STACK].map((tech, index) => (
+                        <span
+                            key={`${tech}-${index}`}
+                            className="text-xl md:text-2xl font-medium text-white/50 whitespace-nowrap hover:text-white transition-colors cursor-default"
+                        >
+                            {tech}
+                        </span>
+                    ))}
+                </motion.div>
+            </div>
+        </div>
+    );
+}