abhishek-portfolio-template 1.0.0

package/template/src/components/ui/signature.tsx

@@ -0,0 +1,173 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { cn } from "@/lib/utils";
+import { sacramento } from "@/lib/fonts";
+
+export function Signature() {
+    const [clickCount, setClickCount] = useState(0);
+    const [isTriggered, setIsTriggered] = useState(false);
+    const lastClickTime = useRef<number>(0);
+    const timerRef = useRef<NodeJS.Timeout | null>(null);
+
+    // USER: Provide your Cloudinary or video URL here. 
+    const VIDEO_SRC = "https://res.cloudinary.com/dap0u41dz/video/upload/v1767179570/james_doakes_dexter_meme_720P_HD_bgahqk.mp4";
+
+    const handleClick = () => {
+        const now = Date.now();
+        const diff = now - lastClickTime.current;
+
+        if (diff < 500) { // Rapid click window
+            setClickCount(prev => {
+                const newCount = prev + 1;
+                if (newCount >= 3) {
+                    setIsTriggered(true);
+                    return 0;
+                }
+                return newCount;
+            });
+        } else {
+            setClickCount(1);
+        }
+
+        lastClickTime.current = now;
+
+        if (timerRef.current) clearTimeout(timerRef.current);
+        timerRef.current = setTimeout(() => {
+            setClickCount(0);
+        }, 1000);
+    };
+
+    useEffect(() => {
+        if (isTriggered) {
+            document.body.style.overflow = "hidden";
+        } else {
+            document.body.style.overflow = "";
+        }
+        return () => { document.body.style.overflow = ""; };
+    }, [isTriggered]);
+
+    // Buttery smooth GSAP-level extreme easing
+    const wipeTransition = {
+        duration: 1.4,
+        ease: [0.22, 1, 0.36, 1] as const
+    };
+
+    return (
+        <>
+            <div
+                onClick={handleClick}
+                className="absolute right-4 bottom-4 md:right-10 md:bottom-10 opacity-30 select-none transition-opacity z-50 mix-blend-overlay cursor-default"
+                style={{ WebkitTapHighlightColor: 'transparent' }}
+            >
+                {/* Signature */}
+                <span className={cn(sacramento.className, "text-4xl md:text-5xl text-white/80")}>
+                    Abhishek Singh
+                </span>
+            </div>
+
+            <AnimatePresence mode="wait">
+                {isTriggered && (
+                    <div className="fixed inset-0 z-[100000] flex items-center justify-center pointer-events-auto">
+                        {/* Global Fade Backdrop for richness */}
+                        <motion.div
+                            initial={{ opacity: 0 }}
+                            animate={{ opacity: 1 }}
+                            exit={{ opacity: 0, transition: { delay: 1.2, duration: 1.5 } }}
+                            transition={{ duration: 1 }}
+                            className="fixed inset-0 bg-black/60 backdrop-blur-md"
+                        />
+
+                        {/* 4 Corners Wipe Panels */}
+                        <motion.div
+                            initial={{ x: "-100%", y: "-100%" }}
+                            animate={{ x: "0%", y: "0%" }}
+                            exit={{ x: "-100%", y: "-100%", transition: { delay: 0.8, duration: 1.4, ease: [0.76, 0, 0.24, 1] } }}
+                            transition={wipeTransition}
+                            className="fixed top-0 left-0 w-1/2 h-1/2 bg-black origin-top-left z-20"
+                        />
+                        <motion.div
+                            initial={{ x: "100%", y: "-100%" }}
+                            animate={{ x: "0%", y: "0%" }}
+                            exit={{ x: "100%", y: "-100%", transition: { delay: 0.8, duration: 1.4, ease: [0.76, 0, 0.24, 1] } }}
+                            transition={wipeTransition}
+                            className="fixed top-0 right-0 w-1/2 h-1/2 bg-black origin-top-right z-20"
+                        />
+                        <motion.div
+                            initial={{ x: "-100%", y: "100%" }}
+                            animate={{ x: "0%", y: "0%" }}
+                            exit={{ x: "-100%", y: "100%", transition: { delay: 0.8, duration: 1.4, ease: [0.76, 0, 0.24, 1] } }}
+                            transition={wipeTransition}
+                            className="fixed bottom-0 left-0 w-1/2 h-1/2 bg-black origin-bottom-left z-20"
+                        />
+                        <motion.div
+                            initial={{ x: "100%", y: "100%" }}
+                            animate={{ x: "0%", y: "0%" }}
+                            exit={{ x: "100%", y: "100%", transition: { delay: 0.8, duration: 1.4, ease: [0.76, 0, 0.24, 1] } }}
+                            transition={wipeTransition}
+                            className="fixed bottom-0 right-0 w-1/2 h-1/2 bg-black origin-bottom-right z-20"
+                        />
+
+                        {/* Dynamic Video Content */}
+                        <motion.div
+                            initial={{ opacity: 0, scale: 0.8, filter: "blur(10px)" }}
+                            animate={{ opacity: 1, scale: 1, filter: "blur(0px)" }}
+                            exit={{
+                                opacity: 0,
+                                scale: 1.1,
+                                filter: "blur(20px)",
+                                transition: { duration: 0.8, ease: [0.4, 0, 0.2, 1] }
+                            }}
+                            transition={{ delay: 0.9, duration: 1.2, ease: [0.22, 1, 0.36, 1] as const }}
+                            className="relative z-30 flex items-center justify-center max-w-[90vw] max-h-[85vh] p-2 sm:p-4"
+                        >
+                            <div className="relative rounded-[32px] overflow-hidden shadow-[0_0_150px_rgba(0,0,0,1)] bg-black/20 ring-1 ring-white/10 group">
+                                {VIDEO_SRC ? (
+                                    <video
+                                        autoPlay
+                                        playsInline
+                                        className="max-w-full max-h-[80vh] w-auto h-auto object-contain rounded-[24px]"
+                                        onEnded={() => setIsTriggered(false)}
+                                        src={VIDEO_SRC}
+                                    >
+                                        Your browser does not support the video tag.
+                                    </video>
+                                ) : (
+                                    <div className="w-[300px] h-[300px] flex flex-col items-center justify-center text-center space-y-4">
+                                        <div className="w-16 h-16 rounded-full border-2 border-white/5 border-t-white/40 animate-spin" />
+                                        <p className="text-white/20 text-xs font-mono uppercase tracking-widest">Awaiting Secret...</p>
+                                    </div>
+                                )}
+
+                                {/* Dynamic Terminate Action */}
+                                <button
+                                    onClick={() => setIsTriggered(false)}
+                                    className="absolute top-4 right-4 sm:top-6 sm:right-6 opacity-0 group-hover:opacity-100 transition-all duration-700 text-white/40 hover:text-red-500 text-[9px] sm:text-xs uppercase tracking-[0.2em] sm:tracking-[0.3em] border border-white/10 px-4 py-2 sm:px-6 sm:py-2.5 rounded-full backdrop-blur-2xl bg-black/40 hover:bg-black/90 shadow-2xl translate-y-1 group-hover:translate-y-0 font-mono z-50"
+                                >
+                                    [ ABORT_SEQUENCE ]
+                                </button>
+                            </div>
+                        </motion.div>
+
+                        {/* Restricted Zone Status HUD - Top Positioned */}
+                        <motion.div
+                            initial={{ opacity: 0, y: -20 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            exit={{ opacity: 0, y: -20, transition: { delay: 0.1 } }}
+                            transition={{ delay: 1.2, duration: 1 }}
+                            className="absolute top-8 sm:top-12 left-1/2 -translate-x-1/2 z-30 flex flex-col items-center space-y-1 sm:space-y-2 w-full px-4 text-center"
+                        >
+                            <span className="text-red-500/60 text-[8px] sm:text-[10px] font-mono tracking-[0.3em] sm:tracking-[0.8em] uppercase whitespace-nowrap animate-pulse">
+                                Restricted Zone Accessed
+                            </span>
+                            <span className="text-white/30 text-[7px] sm:text-[9px] font-mono tracking-[0.2em] sm:tracking-[0.4em] uppercase whitespace-nowrap">
+                                Easter Egg Unlocked • Enjoy the Secret
+                            </span>
+                        </motion.div>
+                    </div>
+                )}
+            </AnimatePresence>
+        </>
+    );
+}

package/template/src/components/ui/smooth-scroll.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { useEffect } from "react";
+import Lenis from "lenis";
+
+export const SmoothScroll = ({ children }: { children: React.ReactNode }) => {
+    useEffect(() => {
+        const lenis = new Lenis({
+            duration: 1.2,
+            easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), // https://www.desmos.com/calculator/brs54l4xou
+            // direction: "vertical", // Removed as it caused type error and is default
+            // gestureDirection: "vertical", // Removed as it caused type error
+            smoothWheel: true,
+            wheelMultiplier: 1,
+            touchMultiplier: 2,
+        });
+
+        function raf(time: number) {
+            lenis.raf(time);
+            requestAnimationFrame(raf);
+        }
+
+        requestAnimationFrame(raf);
+
+        return () => {
+            lenis.destroy();
+        };
+    }, []);
+
+    return <>{children}</>;
+};

package/template/src/components/ui/social-icons.tsx

@@ -0,0 +1,103 @@
+"use client"
+
+import { useState } from "react"
+
+const defaultLinks = {
+    github: "https://github.com",
+    x: "https://x.com",
+    linkedin: "https://linkedin.com",
+    dribbble: "https://dribbble.com"
+};
+
+export function SocialIcons({ links }: { links?: { github?: string, x?: string, linkedin?: string, dribbble?: string } }) {
+    const [hoveredIndex, setHoveredIndex] = useState<number | null>(null)
+
+    const activeLinks = links || defaultLinks;
+
+    const socialItems = [
+        {
+            name: "GitHub",
+            href: activeLinks.github,
+            show: !!activeLinks.github,
+            icon: (
+                <svg viewBox="0 0 24 24" fill="currentColor" className="size-[18px]">
+                    <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+                </svg>
+            ),
+        },
+        {
+            name: "X",
+            href: activeLinks.x,
+            show: !!activeLinks.x,
+            icon: (
+                <svg viewBox="0 0 24 24" fill="currentColor" className="size-[18px]">
+                    <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+                </svg>
+            ),
+        },
+        {
+            name: "LinkedIn",
+            href: activeLinks.linkedin,
+            show: !!activeLinks.linkedin,
+            icon: (
+                <svg viewBox="0 0 24 24" fill="currentColor" className="size-[18px]">
+                    <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
+                </svg>
+            ),
+        },
+        {
+            name: "Dribbble",
+            href: activeLinks.dribbble,
+            show: !!activeLinks.dribbble,
+            icon: (
+                <svg viewBox="0 0 24 24" fill="currentColor" className="size-[18px]">
+                    <path d="M12 24C5.385 24 0 18.615 0 12S5.385 0 12 0s12 5.385 12 12-5.385 12-12 12zm10.12-10.358c-.35-.11-3.17-.953-6.384-.438 1.34 3.684 1.887 6.684 1.992 7.308 2.3-1.555 3.936-4.02 4.395-6.87zm-6.115 7.808c-.153-.9-.75-4.032-2.19-7.77l-.066.02c-5.79 2.015-7.86 6.025-8.04 6.4 1.73 1.358 3.92 2.166 6.29 2.166 1.42 0 2.77-.29 4-.814zm-11.62-2.58c.232-.4 3.045-5.055 8.332-6.765.135-.045.27-.084.405-.12-.26-.585-.54-1.167-.832-1.74C7.17 11.775 2.206 11.71 1.756 11.7l-.004.312c0 2.633.998 5.037 2.634 6.855zm-2.42-8.955c.46.008 4.683.026 9.477-1.248-1.698-3.018-3.53-5.558-3.8-5.928-2.868 1.35-5.01 3.99-5.676 7.17zM9.6 2.052c.282.38 2.145 2.914 3.822 6 3.645-1.365 5.19-3.44 5.373-3.702-1.81-1.61-4.19-2.586-6.795-2.586-.825 0-1.63.1-2.4.285zm10.335 3.483c-.218.29-1.935 2.493-5.724 4.04.24.49.47.985.68 1.486.08.18.15.36.22.53 3.41-.43 6.8.26 7.14.33-.02-2.42-.88-4.64-2.31-6.38z" />
+                </svg>
+            ),
+        },
+    ].filter(item => item.show);
+
+    return (
+        <div className="relative flex items-center gap-0.5 px-1.5 py-1.5 rounded-2xl bg-neutral-950 border border-white/[0.08]">
+            <div className="absolute inset-0 rounded-2xl bg-gradient-to-b from-white/[0.03] to-transparent pointer-events-none" />
+
+            {socialItems.map((social, index) => (
+                <a
+                    key={social.name}
+                    href={social.href}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="group relative flex items-center justify-center size-10 rounded-xl transition-colors duration-200"
+                    onMouseEnter={() => setHoveredIndex(index)}
+                    onMouseLeave={() => setHoveredIndex(null)}
+                    aria-label={social.name}
+                >
+                    <span
+                        className={`absolute inset-1 rounded-lg bg-white/[0.08] transition-all duration-300 ease-out ${hoveredIndex === index ? "opacity-100 scale-100" : "opacity-0 scale-90"
+                            }`}
+                    />
+
+                    <span
+                        className={`relative z-10 transition-all duration-300 ease-out ${hoveredIndex === index ? "text-white scale-110" : "text-neutral-500"
+                            }`}
+                    >
+                        {social.icon}
+                    </span>
+
+                    <span
+                        className={`absolute bottom-1.5 left-1/2 -translate-x-1/2 h-[2px] rounded-full bg-white transition-all duration-300 ease-out ${hoveredIndex === index ? "w-3 opacity-100" : "w-0 opacity-0"
+                            }`}
+                    />
+
+                    <span
+                        className={`absolute -top-10 left-1/2 -translate-x-1/2 px-2.5 py-1 rounded-lg bg-white text-neutral-950 text-[11px] font-medium whitespace-nowrap transition-all duration-300 ease-out ${hoveredIndex === index ? "opacity-100 translate-y-0" : "opacity-0 translate-y-1 pointer-events-none"
+                            }`}
+                    >
+                        {social.name}
+                        <span className="absolute -bottom-1 left-1/2 -translate-x-1/2 size-2 rotate-45 bg-white" />
+                    </span>
+                </a>
+            ))}
+        </div>
+    )
+}