abhishek-portfolio-template 1.0.0

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

@@ -0,0 +1,87 @@
+"use client";
+
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const kbdVariants = cva(
+    "inline-flex items-center justify-center font-mono font-medium text-xs bg-muted text-muted-foreground border border-border rounded-md border-b-3 transition-all duration-75 cursor-pointer select-none active:translate-y-[1px] active:border-b-[1px]  hover:bg-muted/80 shadow-sm/2",
+    {
+        variants: {
+            variant: {
+                default:
+                    "bg-muted text-muted-foreground border-border",
+                outline:
+                    "bg-transparent border-border text-foreground hover:bg-accent",
+                solid:
+                    "bg-foreground text-background border-foreground hover:bg-foreground/90",
+                secondary:
+                    "bg-secondary text-secondary-foreground border-border hover:bg-secondary/80",
+            },
+            size: {
+                xs: "h-5 px-1.5 text-[10px] min-w-[1.25rem]",
+                sm: "h-6 px-2 text-xs min-w-[1.5rem]",
+                md: "h-7 px-2.5 text-sm min-w-[1.75rem]",
+                lg: "h-8 px-3 text-sm min-w-[2rem]",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+            size: "sm",
+        },
+    },
+);
+
+export interface KbdProps
+    extends React.HTMLAttributes<HTMLElement>,
+    VariantProps<typeof kbdVariants> {
+    keys?: string[];
+    onClick?: () => void;
+}
+
+const Kbd = React.forwardRef<HTMLElement, KbdProps>(
+    ({ className, variant, size, keys, children, onClick, ...props }, ref) => {
+        // If keys array is provided, render multiple kbd elements
+        if (keys && keys.length > 0) {
+            return (
+                <span
+                    className="inline-flex items-center gap-1"
+                    ref={ref as React.Ref<HTMLSpanElement>}
+                    onClick={onClick}
+                >
+                    {keys.map((key, index) => (
+                        <React.Fragment key={index}>
+                            <kbd
+                                className={cn(kbdVariants({ variant, size }), className)}
+                                {...props}
+                            >
+                                {key}
+                            </kbd>
+                            {index < keys.length - 1 && (
+                                <span className="text-muted-foreground text-xs px-1">
+                                    +
+                                </span>
+                            )}
+                        </React.Fragment>
+                    ))}
+                </span>
+            );
+        }
+
+        // Single kbd element
+        return (
+            <kbd
+                className={cn(kbdVariants({ variant, size }), className)}
+                ref={ref}
+                onClick={onClick}
+                {...props}
+            >
+                {children}
+            </kbd>
+        );
+    },
+);
+
+Kbd.displayName = "Kbd";
+
+export { Kbd, kbdVariants };

package/template/src/components/ui/location-tag.tsx

@@ -0,0 +1,232 @@
+"use client"
+
+import { useState, useEffect, useRef } from "react"
+import { motion, AnimatePresence } from "framer-motion"
+import { supabase } from "@/lib/supabase"
+
+interface LocationTagProps {
+    className?: string
+}
+
+export function LocationTag({ className = "" }: LocationTagProps) {
+    const [isHovered, setIsHovered] = useState(false)
+    const [currentTime, setCurrentTime] = useState("")
+    const [location, setLocation] = useState({ city: "Kolkata", country: "India", timezone: "Asia/Kolkata" })
+
+    useEffect(() => {
+        // Fetch location data
+        const fetchLocation = async () => {
+            const { data } = await supabase.from("profile").select("location_city, location_country, location_timezone").single();
+            if (data) {
+                setLocation({
+                    city: data.location_city || "Kolkata",
+                    country: data.location_country || "India",
+                    timezone: data.location_timezone || "Asia/Kolkata"
+                });
+            }
+        };
+        fetchLocation();
+    }, []);
+
+    useEffect(() => {
+        const updateTime = () => {
+            try {
+                const now = new Date()
+                setCurrentTime(
+                    now.toLocaleTimeString("en-US", {
+                        hour: "2-digit",
+                        minute: "2-digit",
+                        hour12: false,
+                        timeZone: location.timezone,
+                    }),
+                )
+            } catch (e) {
+                // Fallback for invalid timezone
+                setCurrentTime("00:00")
+            }
+        }
+        updateTime()
+        const interval = setInterval(updateTime, 1000)
+        return () => clearInterval(interval)
+    }, [location.timezone])
+
+    const [isRetro, setIsRetro] = useState(false);
+    const [isInitialized, setIsInitialized] = useState(false);
+    const [showOverlay, setShowOverlay] = useState(false);
+    const [terminalLines, setTerminalLines] = useState<string[]>([]);
+    const [terminalColor, setTerminalColor] = useState<'gray' | 'green'>('gray');
+    const pressTimer = useRef<NodeJS.Timeout | null>(null);
+
+    // Initialize state from localStorage
+    useEffect(() => {
+        const storedRetro = localStorage.getItem('retro-mode') === 'true';
+        if (storedRetro) {
+            setIsRetro(true);
+            document.documentElement.classList.add('retro-mode');
+        }
+        setIsInitialized(true);
+    }, []);
+
+    // Sync state with localStorage and DOM
+    useEffect(() => {
+        if (!isInitialized) return;
+
+        if (isRetro) {
+            document.documentElement.classList.add('retro-mode');
+            localStorage.setItem('retro-mode', 'true');
+        } else {
+            document.documentElement.classList.remove('retro-mode');
+            localStorage.setItem('retro-mode', 'false');
+        }
+    }, [isRetro, isInitialized]);
+
+    // Manage terminal-active class for Navbar visibility
+    useEffect(() => {
+        if (showOverlay) {
+            document.documentElement.classList.add('terminal-active');
+        } else {
+            document.documentElement.classList.remove('terminal-active');
+        }
+        return () => {
+            document.documentElement.classList.remove('terminal-active');
+        }
+    }, [showOverlay]);
+
+    const triggerRetroSequence = async () => {
+        if (isRetro) {
+            setIsRetro(false);
+            return;
+        }
+
+        setShowOverlay(true);
+        setTerminalLines([]);
+        setTerminalColor('gray');
+
+        if (typeof navigator !== "undefined" && navigator.vibrate) navigator.vibrate(50);
+
+        const addLine = async (line: string, delay: number) => {
+            setTerminalLines(prev => [...prev, line]);
+            if (typeof navigator !== "undefined" && navigator.vibrate) navigator.vibrate(10);
+            await new Promise(r => setTimeout(r, delay));
+        }
+
+        // DESTRUCTION PHASE (Gray)
+        await new Promise(r => setTimeout(r, 500));
+
+        await addLine('> SYSTEM_ALERT: UNEXPECTED_INTERACTION', 400);
+        await addLine('> ROOT_QUERY: "Why did you touch that?"', 800);
+        await addLine('> WARNING: "Restricted Access Protocol"', 600);
+        await addLine("> ROOT_ACCESS_GRANTED", 400);
+        await addLine("> EXECUTING: sudo rm -rf /portfolio_v2", 800);
+        await addLine("> PURGING_ASSETS_DIRECTORY...", 400);
+        await addLine("> UNLINKING_STYLESHEETS...", 400);
+        await addLine("> CLEARING_RUNTIME_CACHE...", 600);
+
+        if (typeof navigator !== "undefined" && navigator.vibrate) navigator.vibrate([50, 50, 100]);
+        await addLine("> PROCESS_COMPLETE: CURRENT_VIEW_TERMINATED", 1200);
+
+        // REBIRTH PHASE (Green)
+        setTerminalColor('green');
+        await addLine("> INITIALIZING_LEGACY_PROTOCOL...", 800);
+        await addLine("> LOADING_BACKUP_ARCHIVES...", 500);
+        await addLine("> CHECKING_VRAM... [OK]", 400);
+        await addLine("> LAUNCHING_LEGACY_INTERFACE...", 1500);
+
+        // Activate Retro Mode
+        // Activate Retro Mode
+        setIsRetro(true);
+
+        setShowOverlay(false);
+    };
+
+    const handlePressStart = (e: React.MouseEvent | React.TouchEvent) => {
+        pressTimer.current = setTimeout(() => {
+            triggerRetroSequence();
+        }, 800);
+    };
+
+    const handlePressEnd = () => {
+        if (pressTimer.current) clearTimeout(pressTimer.current);
+    };
+
+    return (
+        <>
+            {/* Terminal Overlay */}
+            <AnimatePresence>
+                {showOverlay && (
+                    <motion.div
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        exit={{ opacity: 0 }}
+                        transition={{ duration: 0.2 }}
+                        className={`fixed inset-0 z-[100000] bg-black p-6 md:p-20 font-mono overflow-hidden cursor-wait flex flex-col justify-start items-start transition-colors duration-500 ${terminalColor === 'green' ? 'text-[#33ff00] drop-shadow-[0_0_8px_rgba(51,255,0,0.4)]' : 'text-gray-300'}`}
+                    >
+                        <div className="w-full max-w-4xl space-y-1 text-xs md:text-lg uppercase">
+                            {terminalLines.map((line, i) => (
+                                <motion.div
+                                    key={i}
+                                    initial={{ opacity: 0, x: -10 }}
+                                    animate={{ opacity: 1, x: 0 }}
+                                    className="break-all md:break-words whitespace-pre-wrap"
+                                >
+                                    {line}
+                                </motion.div>
+                            ))}
+
+                            {/* Blinking Cursor */}
+                            <motion.div
+                                initial={{ opacity: 0 }}
+                                animate={{ opacity: 1 }}
+                                className="mt-2"
+                            >
+                                <span className={terminalColor === 'green' ? 'text-[#33ff00]' : 'text-gray-500'}>{'>'}</span>
+                                <motion.span
+                                    animate={{ opacity: [0, 1, 0] }}
+                                    transition={{ duration: 0.8, repeat: Infinity }}
+                                    className={`inline-block w-2 h-4 md:w-3 md:h-5 ml-2 align-middle ${terminalColor === 'green' ? 'bg-[#33ff00]' : 'bg-gray-300'}`}
+                                />
+                            </motion.div>
+                        </div>
+
+                        {/* Scanline Effect */}
+                        <div className="absolute inset-0 pointer-events-none select-none opacity-10" style={{ background: "repeating-linear-gradient(0deg, transparent, transparent 2px, #ffffff 4px)" }}></div>
+                    </motion.div>
+                )}
+            </AnimatePresence>
+
+            <button
+                onMouseEnter={() => setIsHovered(true)}
+                onMouseLeave={() => setIsHovered(false)}
+                onMouseDown={handlePressStart}
+                onMouseUp={handlePressEnd}
+                onTouchStart={handlePressStart}
+                onTouchEnd={handlePressEnd}
+                onContextMenu={(e) => e.preventDefault()}
+                style={{ WebkitTouchCallout: 'none' }}
+                className={`group relative flex items-center gap-3 rounded-full border border-white/10 bg-white/5 px-4 py-2 transition-all duration-300 hover:border-white/20 hover:bg-white/10 select-none touch-none ${className}`}
+            >
+                <div className="relative flex items-center justify-center">
+                    <span className={`absolute inline-flex h-full w-full animate-ping rounded-full opacity-75 ${isRetro ? 'bg-amber-500' : 'bg-emerald-500'}`} />
+                    <span className={`relative inline-flex h-2 w-2 rounded-full ${isRetro ? 'bg-amber-500' : 'bg-emerald-500'}`} />
+
+
+                </div>
+
+                <div className="relative overflow-hidden h-5 flex flex-col justify-center">
+                    <AnimatePresence mode="wait">
+                        <motion.span
+                            key={isRetro ? "retro" : "standard"}
+                            initial={{ y: 20, opacity: 0 }}
+                            animate={{ y: 0, opacity: 1 }}
+                            exit={{ y: -20, opacity: 0 }}
+                            transition={{ duration: 0.3 }}
+                            className={`text-sm font-medium block ${isRetro ? 'font-mono text-amber-500' : 'font-sans text-white/90'}`}
+                        >
+                            {isRetro ? "SYSTEM OVERRIDE" : "Available for hire"}
+                        </motion.span>
+                    </AnimatePresence>
+                </div>
+            </button>
+        </>
+    )
+}

package/template/src/components/ui/minimal-testimonial.tsx

@@ -0,0 +1,97 @@
+"use client"
+
+import { useState } from "react"
+import Image from "next/image"
+
+const testimonials = [
+    {
+        quote: "Working with them transformed our entire brand identity. The attention to detail was exceptional.",
+        name: "Sarah Chen",
+        role: "CEO at Stripe",
+        image: "https://images.unsplash.com/photo-1701615004837-40d8573b6652?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDB8fGF2YXRhcnN8ZW58MHx8MHx8fDA%3D$0",
+    },
+    {
+        quote: "A rare talent who combines strategic thinking with flawless execution. Highly recommended.",
+        name: "Marcus Johnson",
+        role: "Design Lead at Linear",
+        image: "https://images.unsplash.com/photo-1639149888905-fb39731f2e6c?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDN8fGF2YXRhcnN8ZW58MHx8MHx8fDA%3D$0",
+    },
+    {
+        quote: "The most seamless collaboration I've experienced. They truly understand modern design.",
+        name: "Elena Voss",
+        role: "Founder at Notion",
+        image: "https://plus.unsplash.com/premium_photo-1689977830819-d00b3a9b7363?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTJ8fGF2YXRhcnN8ZW58MHx8MHx8fDA%3D$0",
+    },
+]
+
+export function TestimonialsMinimal() {
+    const [active, setActive] = useState(0)
+
+    return (
+        <div className="w-full max-w-4xl mx-auto px-6 py-24 md:py-32">
+            {/* Section Header */}
+            <div className="mb-16 md:mb-20 text-center">
+                <h2 className="text-sm font-medium text-blue-400 tracking-wider uppercase mb-3">Testimonials</h2>
+                <h3 className="text-3xl md:text-4xl font-semibold text-white">What Clients Say</h3>
+            </div>
+
+            {/* Quote using CSS Grid for auto-height stacking */}
+            <div className="relative mb-12 grid grid-cols-1 min-h-[120px]">
+                {testimonials.map((t, i) => (
+                    <div
+                        key={i}
+                        className={`
+              col-start-1 row-start-1
+              text-2xl md:text-4xl font-light leading-snug text-white/90
+              transition-all duration-700 ease-[cubic-bezier(0.16,1,0.3,1)]
+              ${active === i
+                                ? "opacity-100 translate-y-0 scale-100 blur-0 z-10"
+                                : "opacity-0 translate-y-8 scale-95 blur-sm z-0 pointer-events-none"
+                            }
+            `}
+                    >
+                        &quot;{t.quote}&quot;
+                    </div>
+                ))}
+            </div>
+
+            {/* Author Row */}
+            <div className="flex flex-col md:flex-row items-start md:items-center gap-6 md:gap-8 pt-6 border-t border-white/10">
+                {/* Avatars */}
+                <div className="flex -space-x-3">
+                    {testimonials.map((t, i) => (
+                        <button
+                            key={i}
+                            onClick={() => setActive(i)}
+                            className={`
+                relative w-12 h-12 md:w-14 md:h-14 rounded-full overflow-hidden ring-4 ring-[#0a0a0a]
+                transition-all duration-500 ease-out
+                ${active === i ? "z-10 scale-110 grayscale-0" : "grayscale opacity-50 hover:opacity-100 hover:scale-105 hover:grayscale-0"}
+              `}
+                        >
+                            <Image src={t.image || "/placeholder.svg"} alt={t.name} fill className="object-cover" />
+                        </button>
+                    ))}
+                </div>
+
+                {/* Active Author Info */}
+                <div className="flex-1 grid grid-cols-1">
+                    {testimonials.map((t, i) => (
+                        <div
+                            key={i}
+                            className={`
+                col-start-1 row-start-1
+                flex flex-col justify-center
+                transition-all duration-500 ease-out
+                ${active === i ? "opacity-100 translate-x-0 z-10" : "opacity-0 -translate-x-4 pointer-events-none z-0"}
+              `}
+                        >
+                            <span className="text-lg font-medium text-white">{t.name}</span>
+                            <span className="text-sm text-white/50">{t.role}</span>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </div>
+    )
+}

package/template/src/components/ui/mobile-menu.tsx

@@ -0,0 +1,191 @@
+"use client";
+
+import { motion, AnimatePresence, Variants, useMotionValue, useTransform, animate } from "framer-motion";
+import Link from "next/link";
+import { usePathname, useRouter } from "next/navigation";
+import { useEffect } from "react";
+
+// import { SocialStories } from "@/components/ui/social-stories";
+// import TextExplode from "./text-explode";
+import { X } from "lucide-react";
+
+interface MobileMenuProps {
+    isOpen: boolean;
+    onClose: () => void;
+}
+
+const menuVariants: Variants = {
+    closed: {
+        y: "100%",
+        transition: {
+            duration: 0.5,
+            ease: [0.32, 0, 0.67, 0]
+        }
+    },
+    open: {
+        y: "0%",
+        transition: {
+            duration: 0.6,
+            ease: [0.22, 1, 0.36, 1]
+        }
+    }
+};
+
+const linkVariants: Variants = {
+    closed: { opacity: 0, scale: 0.95, y: 10 },
+    open: (i: number) => ({
+        opacity: 1,
+        scale: 1,
+        y: 0,
+        transition: {
+            delay: 0.15 + i * 0.08,
+            duration: 0.5,
+            ease: [0.22, 1, 0.36, 1]
+        }
+    })
+};
+
+const LINKS = ["Home", "Works", "About"];
+
+export function MobileMenu({ isOpen, onClose }: MobileMenuProps) {
+    const pathname = usePathname();
+    const router = useRouter();
+    const y = useMotionValue(0);
+
+    // Prefetch Home on mount for instant load after animation
+    useEffect(() => {
+        router.prefetch("/");
+    }, [router]);
+
+    // Hard-Resistance Transform: "Stretch very slowly" -> Heavy linear resistance
+    // raw drag value -> visual stretch value
+    const stretch = useTransform(y, (v: any) => {
+        const num = typeof v === 'string' ? parseFloat(v) : v;
+        const rawY = -(num || 0);
+        if (rawY <= 0) return 0;
+
+        // Linear heavy resistance: moves 1px for every 4px of finger drag
+        return rawY * 0.25;
+    });
+
+    // Thresholds adjusted for early reveal
+    const textOpacity = useTransform(stretch, [2, 15], [0, 1]);
+    const textScale = useTransform(stretch, [2, 15], [0.9, 1]);
+    const barHeight = useTransform(stretch, [0, 40], [0, 80]);
+
+    // Removed explosion logic entirely
+
+    return (
+        <AnimatePresence>
+            {isOpen && (
+                <>
+                    {/* Backdrop */}
+                    <motion.div
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        exit={{ opacity: 0 }}
+                        onClick={onClose}
+                        className="fixed inset-0 bg-black/60 backdrop-blur-sm z-[90]"
+                    />
+
+                    {/* Bottom Sheet */}
+                    <motion.div
+                        style={{ y }}
+                        variants={menuVariants}
+                        initial="closed"
+                        animate="open"
+                        exit="closed"
+                        drag="y"
+                        dragConstraints={{ top: -85, bottom: 0 }} // Limit expansion to just show the text
+                        dragElastic={0.05} // Slight elasticity at the limit so it doesn't feel broken
+                        onDragEnd={(_, info) => {
+                            if (info.offset.y > 85 || info.velocity.y > 500) {
+                                onClose();
+                            } else {
+                                // Snappy return to simulate rubber band Snap
+                                animate(y, 0, {
+                                    type: "tween",
+                                    ease: [0.33, 1, 0.68, 1], // easeOutQuart
+                                    duration: 0.4
+                                });
+                            }
+                        }}
+                        className="fixed bottom-0 left-0 right-0 bg-[#111111] border-t border-white/10 rounded-t-[32px] p-8 z-[100] pb-12 cursor-grab active:cursor-grabbing shadow-[0_-30px_60px_rgba(0,0,0,0.6)]"
+                    >
+                        {/* Visually Infinite Background - Massive filler */}
+                        <div className="absolute top-[60%] left-0 right-0 h-[800vh] bg-[#111111] -z-10" />
+
+                        {/* Close Indicator */}
+                        <div className="flex justify-center mb-6">
+                            <div className="w-12 h-1.5 bg-white/20 rounded-full" />
+                        </div>
+
+                        {/* Spacer or Alternative Content - Removed SocialStories as per user request */}
+                        <div className="mb-8" />
+
+                        {/* Links - Clean vertical stack */}
+                        <div className="flex flex-col gap-8 items-center justify-center min-h-[200px]">
+                            {LINKS.map((item, i) => (
+                                <motion.div
+                                    key={item}
+                                    custom={i}
+                                    variants={linkVariants}
+                                    initial="closed"
+                                    animate="open"
+                                >
+                                    <Link
+                                        href={item === "Home" ? "/" : `/${item.toLowerCase()}`}
+                                        onClick={(e) => {
+                                            e.preventDefault();
+                                            onClose();
+                                            const href = item === "Home" ? "/" : `/${item.toLowerCase()}`;
+
+                                            if (pathname === href) {
+                                                window.scrollTo({ top: 0, behavior: "smooth" });
+                                            } else {
+                                                // Smooth Transition: Close menu (0.4s) -> Then Navigate
+                                                setTimeout(() => {
+                                                    router.push(href);
+                                                }, 400);
+                                            }
+                                        }}
+                                        className="text-4xl font-medium text-white/90 hover:text-white transition-colors tracking-tight"
+                                    >
+                                        {item}
+                                    </Link>
+                                </motion.div>
+                            ))}
+                        </div>
+
+                        {/* Spacer to push content up slightly */}
+                        <div className="h-16" />
+
+                        {/* Easter Egg Bottom Zone - Static Text with Apple Emoji */}
+                        <motion.div
+                            style={{ height: barHeight }}
+                            className="absolute bottom-0 left-0 right-0 flex items-end justify-center overflow-hidden pointer-events-none"
+                        >
+                            <motion.div
+                                style={{
+                                    opacity: textOpacity,
+                                    scale: textScale,
+                                }}
+                                className="px-4 pb-4 flex items-center gap-2" // Anchored to the very bottom
+                            >
+                                <span className="text-lg md:text-xl font-bold text-white/50 whitespace-nowrap">
+                                    Why are you stretching that !
+                                </span>
+                                {/* Apple-style Broken Heart Emoji via CDN to ensure Windows assumes it's Apple */}
+                                <img
+                                    src="https://emojicdn.elk.sh/🤨?style=apple"
+                                    alt="sus"
+                                    className="w-6 h-6 mb-0.5"
+                                />
+                            </motion.div>
+                        </motion.div>
+                    </motion.div>
+                </>
+            )}
+        </AnimatePresence>
+    );
+}