abhishek-portfolio-template 1.0.0

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

@@ -0,0 +1,148 @@
+"use client"
+
+import Link from "next/link"
+import { SocialStories } from "@/components/ui/social-stories"
+import { bolivia } from "@/lib/fonts"
+import { cn } from "@/lib/utils"
+import { useState } from "react"
+import { MobileMenu } from "./mobile-menu"
+import { usePathname } from "next/navigation"
+
+export function NavBar() {
+    const [isMenuOpen, setIsMenuOpen] = useState(false)
+    const pathname = usePathname()
+
+    // Hide Navbar on specific route
+    if (
+        pathname?.includes("/pickup/recycle04") ||
+        pathname?.startsWith("/gaming") ||
+        pathname?.includes("/github/abhisheks04") ||
+        pathname?.startsWith("/works/") ||
+        pathname?.startsWith("/admin")
+    ) return null;
+
+    const handleLogoClick = (e: React.MouseEvent) => {
+        if (pathname === "/") {
+            e.preventDefault()
+            window.scrollTo({ top: 0, behavior: "smooth" })
+        }
+    }
+
+    return (
+        <>
+            <nav
+                className="
+                    fixed z-50 transition-all duration-300
+                    top-4 left-8 right-8 h-13 rounded-full
+                    bg-[#0a0a0a]/60 backdrop-blur-xl
+                    border border-white/5 shadow-sm
+
+                    pl-4 pr-2
+                    flex items-center justify-between
+
+                    md:top-0 md:left-0 md:right-0 md:w-full md:h-16 md:rounded-none
+                    md:bg-[#0a0a0a]/70 md:border-b md:border-white/5 md:shadow-none
+                    md:px-8
+                "
+            >
+                {/* Left: Logo */}
+                <Link
+                    href="/"
+                    onClick={handleLogoClick}
+                    className="flex items-center group"
+                >
+                    <span
+                        className={cn(
+                            bolivia.className,
+                            "text-3xl md:text-4xl text-white/90 group-hover:text-[#007AFF] transition-colors duration-300 tracking-wide pt-1"
+                        )}
+                    >
+                        Abhishek
+                    </span>
+                </Link>
+
+                {/* Center (Desktop only) */}
+                <div className="hidden md:flex items-center gap-1 absolute left-1/2 -translate-x-1/2">
+                    {["Home", "Works", "About"].map(item => (
+                        <Link
+                            key={item}
+                            href={item === "Home" ? "/" : `/${item.toLowerCase()}`}
+                            onClick={(e) => {
+                                if (item === "Home" && pathname === "/") {
+                                    e.preventDefault()
+                                    window.scrollTo({ top: 0, behavior: "smooth" })
+                                }
+                            }}
+                            className="px-4 py-2 rounded-full text-sm font-medium text-white/60 hover:text-white hover:bg-white/5 transition-all uppercase tracking-wider"
+                        >
+                            {item}
+                        </Link>
+                    ))}
+                </div>
+
+                {/* Right Actions */}
+                <div className="flex items-center">
+                    {/* MOBILE ACTION PILL */}
+                    <div
+                        className="
+                            md:hidden
+                            flex items-center
+                            gap-1.5
+                            p-1
+                        "
+                    >
+                        {/* Hamburger */}
+                        <button
+                            onClick={() => setIsMenuOpen(true)}
+                            aria-label="Open Menu"
+                            className="
+                                w-8 h-8
+                                flex items-center justify-center
+                                transition-colors
+                                text-white/90
+                                hover:text-white
+                            "
+                        >
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                width="16"
+                                height="16"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                strokeWidth="2"
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                            >
+                                <line x1="4" x2="20" y1="7" y2="7" />
+                                <line x1="4" x2="20" y1="12" y2="12" />
+                                <line x1="4" x2="20" y1="17" y2="17" />
+                            </svg>
+                        </button>
+
+                        {/* Social Stories */}
+                        <div
+                            className="
+                                w-10 h-10
+                                rounded-full
+                                overflow-hidden
+                                flex items-center justify-center
+                            "
+                        >
+                            <SocialStories id="mobile" />
+                        </div>
+                    </div>
+
+                    {/* DESKTOP */}
+                    <div className="hidden md:flex items-center gap-4">
+                        <div className="w-10 h-10 rounded-full overflow-hidden border border-white/10 hover:border-white/20 transition-colors">
+                            <SocialStories id="desktop" />
+                        </div>
+                    </div>
+                </div>
+            </nav>
+
+            <MobileMenu isOpen={isMenuOpen} onClose={() => setIsMenuOpen(false)} />
+        </>
+    )
+}

package/template/src/components/ui/page-transition.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { motion } from "motion/react";
+import { usePathname } from "next/navigation";
+
+export function PageTransition({ children }: { children: React.ReactNode }) {
+    const pathname = usePathname();
+
+    return (
+        <motion.div
+            key={pathname}
+            initial={{ opacity: 0, y: 10, filter: "blur(5px)" }}
+            animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
+            transition={{
+                duration: 0.25,
+                ease: "easeOut",
+            }}
+            className="w-full h-full"
+            style={{ willChange: "transform, opacity, filter" }}
+        >
+            {children}
+        </motion.div>
+    );
+}

package/template/src/components/ui/pixeleted-404-not-found.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import { ArrowRight } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
+
+interface Error404Props {
+    postcardImage?: string;
+    postcardAlt?: string;
+    curvedTextTop?: string;
+    curvedTextBottom?: string;
+    heading?: string;
+    subtext?: string;
+    backButtonLabel?: string;
+    backButtonHref?: string;
+}
+
+export function Error404({
+    postcardImage = "https://images.unsplash.com/photo-1485871981521-5b1fd3805eee?q=80&w=2070&auto=format&fit=crop",
+    postcardAlt = "New York City Postcard",
+    curvedTextTop = "The General Intelligence",
+    curvedTextBottom = "Company of New York",
+    heading = "(404) Looks like the page you're looking for got lost somewhere.",
+    subtext = "But hey — in New York, even the unexpected detours lead somewhere.",
+    backButtonLabel = "Back to Home",
+    backButtonHref = "/",
+}: Error404Props) {
+    return (
+        <div className="min-h-screen flex items-center justify-center px-4 py-16 bg-[#0a0a0a]">
+            {/* Font import moved to layout or globals is better, but keeping here for single file portability if needed */}
+            <link rel="preconnect" href="https://fonts.googleapis.com" />
+            <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
+            <link href="https://fonts.googleapis.com/css2?family=Doto:wght@100..900&display=swap" rel="stylesheet" />
+
+            <div className="flex flex-col items-center">
+                <div className="relative mb-16">
+                    <svg
+                        className="absolute -top-16 -left-12 w-[140px] h-[140px] pointer-events-none z-20 animate-spin-slow"
+                        viewBox="0 0 140 140"
+                    >
+                        <defs>
+                            <path id="circlePath" d="M 70,70 m -50,0 a 50,50 0 1,1 100,0 a 50,50 0 1,1 -100,0" fill="transparent" />
+                        </defs>
+                        <text
+                            className="text-[11px] fill-white/60 font-serif uppercase"
+                            style={{ fontWeight: 400, letterSpacing: "0.15em" }}
+                        >
+                            <textPath href="#circlePath" startOffset="0%">
+                                {curvedTextTop} • {curvedTextBottom} •
+                            </textPath>
+                        </text>
+                    </svg>
+
+                    <div className="relative z-10">
+                        <div
+                            className="relative p-3 shadow-2xl rotate-[4deg] hover:rotate-0 transition-transform duration-300 bg-[#1a1a1a] border border-white/10"
+                        >
+                            <div className="relative overflow-hidden bg-black">
+                                <img
+                                    src={postcardImage}
+                                    alt={postcardAlt}
+                                    className="w-[360px] h-[220px] object-cover opacity-80"
+                                />
+                                {/* Overlay to make it feel more "postcard-y" */}
+                                <div className="absolute inset-0 bg-black/20 pointer-events-none" />
+                            </div>
+                        </div>
+
+                        {/* Postal cancellation marks */}
+                        <svg className="absolute -right-16 top-1/2 -translate-y-1/2 w-28 h-20 opacity-30 invert" viewBox="0 0 100 60">
+                            <path
+                                d="M 10 15 Q 20 10 30 15 Q 40 20 50 15 Q 60 10 70 15 Q 80 20 90 15"
+                                stroke="currentColor"
+                                strokeWidth="1.5"
+                                fill="none"
+                            />
+                            <path
+                                d="M 10 25 Q 20 20 30 25 Q 40 30 50 25 Q 60 20 70 25 Q 80 30 90 25"
+                                stroke="currentColor"
+                                strokeWidth="1.5"
+                                fill="none"
+                            />
+                            <path
+                                d="M 10 35 Q 20 30 30 35 Q 40 40 50 35 Q 60 30 70 35 Q 80 40 90 35"
+                                stroke="currentColor"
+                                strokeWidth="1.5"
+                                fill="none"
+                            />
+                        </svg>
+                    </div>
+                </div>
+
+                <div className="text-center max-w-2xl">
+                    <h1 className="text-4xl md:text-5xl font-['Doto'] mb-6 text-white text-balance leading-tight">
+                        {heading}
+                    </h1>
+                    <p className="text-white/60 text-base md:text-lg mb-10 font-sans">
+                        {subtext}
+                    </p>
+                    <Button asChild className="rounded-full px-8 py-6 bg-white text-black hover:bg-white/90">
+                        <Link href={backButtonHref} className="flex items-center gap-2">
+                            {backButtonLabel}
+                            <ArrowRight className="w-4 h-4" />
+                        </Link>
+                    </Button>
+                </div>
+            </div>
+        </div>
+    );
+}

package/template/src/components/ui/preloader-wrapper.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import { useState, useEffect, createContext, useContext } from "react";
+import { usePathname } from "next/navigation";
+import { motion, AnimatePresence } from "framer-motion";
+import { Preloader } from "./preloader";
+
+// Module-level variable to persist across route changes within the same session
+let globalHasShownPreloader = false;
+
+interface PreloaderContextType {
+    hasShown: boolean;
+}
+
+const PreloaderContext = createContext<PreloaderContextType | undefined>(undefined);
+
+export function PreloaderWrapper({ children }: { children: React.ReactNode }) {
+    const pathname = usePathname();
+
+    // Initialize state based on session to prevent flash.
+    // Default to TRUE if not in admin, not shown yet, and on a VALID route.
+    const [isVisible, setIsVisible] = useState(() => {
+        if (typeof window !== 'undefined' && globalHasShownPreloader) return false;
+
+        const validRoutes = ["/", "/about", "/works", "/contact"];
+        const isDynamicWork = pathname?.startsWith("/works/");
+        const isAdmin = pathname?.startsWith("/admin");
+
+        const isValidRoute = validRoutes.includes(pathname || "") || isDynamicWork || isAdmin;
+
+        // Skip preloader for admin or invalid (404) routes
+        if (isAdmin || !isValidRoute) return false;
+
+        return true;
+    });
+
+    useEffect(() => {
+        // Remove static splash screen if it exists
+        const staticSplash = document.getElementById('static-splash');
+        if (staticSplash) {
+            staticSplash.style.opacity = '0';
+            setTimeout(() => {
+                staticSplash.remove();
+            }, 300);
+        }
+    }, []);
+
+    useEffect(() => {
+        // Handle overflow lock
+        if (isVisible) {
+            document.body.style.overflow = "hidden";
+        } else {
+            document.body.style.overflow = "";
+        }
+    }, [isVisible]);
+
+    const handleComplete = () => {
+        setIsVisible(false);
+        globalHasShownPreloader = true;
+        document.body.style.overflow = "";
+    };
+
+    return (
+        <PreloaderContext.Provider value={{ hasShown: !isVisible }}>
+            <AnimatePresence mode="wait">
+                {isVisible && (
+                    <motion.div
+                        key="global-preloader"
+                        initial={{ y: 0 }}
+                        exit={{
+                            y: "-100%",
+                            transition: {
+                                duration: 1.2, // Slower for more elegance
+                                ease: [0.83, 0, 0.17, 1] // "Quint" like easing, very dramatic slow start/end
+                            }
+                        }}
+                        className="fixed inset-0 z-[9999] bg-[#050805] flex items-center justify-center"
+                    >
+                        <Preloader onComplete={handleComplete} />
+                    </motion.div>
+                )}
+            </AnimatePresence>
+
+            {/* 
+               Render children immediately. 
+               We REMOVED the opacity toggle so the browser paints the LCP element 
+               instantly behind the preloader layer. This fixes the LCP score.
+            */}
+            <div className="relative">
+                {children}
+            </div>
+        </PreloaderContext.Provider>
+    );
+}
+
+export const usePreloader = () => {
+    const context = useContext(PreloaderContext);
+    if (context === undefined) {
+        throw new Error("usePreloader must be used within a PreloaderWrapper");
+    }
+    return context;
+};

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

@@ -0,0 +1,104 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import { useEffect, useState } from "react";
+import { cn } from "@/lib/utils";
+
+interface Greeting {
+    text: string;
+    language: string;
+}
+
+const greetings: Greeting[] = [
+    { text: "Hello", language: "English" },
+    { text: "Hola", language: "Spanish" },
+    { text: "안녕하세요", language: "Korean" },
+    { text: "Ciao", language: "Italian" },
+    { text: "নমস্কার", language: "Bengali" },
+    { text: "नमस्ते", "language": "Hindi" },
+];
+
+interface PreloaderProps {
+    onComplete: () => void;
+}
+
+export const Preloader = ({ onComplete }: PreloaderProps) => {
+    const [currentIndex, setCurrentIndex] = useState(0);
+    const [dimension, setDimension] = useState({ width: 0, height: 0 });
+
+    useEffect(() => {
+        setDimension({ width: window.innerWidth, height: window.innerHeight });
+    }, []);
+
+    useEffect(() => {
+        if (currentIndex === greetings.length - 1) {
+            // Smoothest exit: hold the last word slightly longer then complete
+            const timeout = setTimeout(() => {
+                onComplete();
+            }, 1000); // 1s hold for the last word
+            return () => clearTimeout(timeout);
+        }
+
+        const isMobile = window.innerWidth < 768;
+        // 1.4s per word as requested
+        const stepDuration = 1400;
+
+        const timeout = setTimeout(() => {
+            setCurrentIndex((prev) => prev + 1);
+        }, stepDuration);
+
+        return () => clearTimeout(timeout);
+    }, [currentIndex, onComplete]);
+
+    const textVariants = {
+        initial: {
+            opacity: 0,
+            y: 40, // Increased movement for more "drama"
+            filter: "blur(12px)", // Stronger blur
+        },
+        animate: {
+            opacity: 1,
+            y: 0,
+            filter: "blur(0px)",
+            transition: {
+                // Reduced duration to fit within 1.4s interval (Wait Mode: Exit + Enter + Static = Interval)
+                // 0.4s Exit + 0.6s Enter = 1.0s. Leaves 0.4s for static readability.
+                duration: 0.6,
+                ease: [0.25, 1, 0.5, 1] as const,
+            }
+        },
+        exit: {
+            opacity: 0,
+            y: -40, // Match entrance movement
+            filter: "blur(12px)",
+            transition: {
+                duration: 0.4,
+                ease: [0.25, 1, 0.5, 1] as const
+            }
+        },
+    };
+
+    return (
+        <div className="fixed inset-0 z-[100] flex items-center justify-center bg-[#050805] cursor-none overflow-hidden">
+            {/* 
+                Use absolute positioning for the text container to prevent any flex-based layout shifts 
+                during size changes (though text is mostly centered, this is safer).
+             */}
+            <AnimatePresence mode="wait">
+                {greetings[currentIndex] && (
+                    <motion.p
+                        key={currentIndex}
+                        variants={textVariants}
+                        initial="initial"
+                        animate="animate"
+                        exit="exit"
+                        className="absolute text-4xl md:text-7xl font-light tracking-tight text-white font-sans mix-blend-difference"
+                        style={{ willChange: "transform, opacity, filter" }}
+                    >
+                        {greetings[currentIndex].text}
+                    </motion.p>
+                )}
+            </AnimatePresence>
+        </div>
+    );
+};

package/template/src/components/ui/project-contributors.tsx

@@ -0,0 +1,57 @@
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
+import Link from 'next/link'
+
+export interface Contributor {
+    id?: string
+    name: string
+    avatar_url: string
+    fallback: string
+    social_url?: string
+    role?: string
+}
+
+interface ProjectContributorsProps {
+    contributors: Contributor[]
+    className?: string
+    size?: 'sm' | 'md' | 'lg'
+}
+
+const ProjectContributors = ({ contributors, className = '', size = 'md' }: ProjectContributorsProps) => {
+    const sizeClasses = {
+        sm: 'size-8',
+        md: 'size-10',
+        lg: 'size-12'
+    }
+
+    return (
+        <div className={`flex -space-x-3 ${className}`}>
+            <TooltipProvider delayDuration={0}>
+                {contributors.map((contributor, index) => (
+                    <Tooltip key={index}>
+                        <TooltipTrigger asChild>
+                            <Link
+                                href={contributor.social_url || '#'}
+                                target={contributor.social_url ? "_blank" : "_self"}
+                                className={`relative transition-transform hover:z-10 hover:scale-110`}
+                            >
+                                <Avatar className={`ring-background ring-2 ${sizeClasses[size]}`}>
+                                    <AvatarImage src={contributor.avatar_url} alt={contributor.name} className="object-cover" />
+                                    <AvatarFallback>{contributor.fallback}</AvatarFallback>
+                                </Avatar>
+                            </Link>
+                        </TooltipTrigger>
+                        <TooltipContent>
+                            <div className="flex flex-col items-center">
+                                <span className="font-semibold text-xs">{contributor.name}</span>
+                                {contributor.role && <span className="text-[10px] text-muted-foreground">{contributor.role}</span>}
+                            </div>
+                        </TooltipContent>
+                    </Tooltip>
+                ))}
+            </TooltipProvider>
+        </div>
+    )
+}
+
+export default ProjectContributors

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

@@ -0,0 +1,117 @@
+"use client";
+
+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const scrollAreaVariants = cva("relative overflow-hidden", {
+    variants: {
+        orientation: {
+            vertical: "h-full",
+            horizontal: "w-full",
+            both: "h-full w-full",
+        },
+    },
+    defaultVariants: {
+        orientation: "vertical",
+    },
+});
+
+const scrollBarVariants = cva("flex touch-none select-none transition-colors", {
+    variants: {
+        orientation: {
+            vertical: "h-full w-2.5 border-l border-l-transparent p-[1px]",
+            horizontal: "h-2.5 w-full border-t border-t-transparent p-[1px]",
+        },
+    },
+    defaultVariants: {
+        orientation: "vertical",
+    },
+});
+
+export interface ScrollAreaProps
+    extends React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>,
+    VariantProps<typeof scrollAreaVariants> {
+    scrollHideDelay?: number;
+    type?: "auto" | "always" | "scroll" | "hover";
+}
+
+const ScrollArea = React.forwardRef<
+    React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+    ScrollAreaProps
+>(
+    (
+        {
+            className,
+            children,
+            orientation,
+            scrollHideDelay = 600,
+            type = "hover",
+            ...props
+        },
+        ref
+    ) => (
+        <ScrollAreaPrimitive.Root
+            ref={ref}
+            className={cn(scrollAreaVariants({ orientation }), className)}
+            {...props}
+        >
+            <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+                {children}
+            </ScrollAreaPrimitive.Viewport>
+            <ScrollBar
+                orientation="vertical"
+                type={type}
+                scrollHideDelay={scrollHideDelay}
+            />
+            {(orientation === "horizontal" || orientation === "both") && (
+                <ScrollBar
+                    orientation="horizontal"
+                    type={type}
+                    scrollHideDelay={scrollHideDelay}
+                />
+            )}
+            <ScrollAreaPrimitive.Corner />
+        </ScrollAreaPrimitive.Root>
+    )
+);
+
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+interface ScrollBarProps
+    extends React.ComponentPropsWithoutRef<
+        typeof ScrollAreaPrimitive.ScrollAreaScrollbar
+    > {
+    scrollHideDelay?: number;
+    type?: "auto" | "always" | "scroll" | "hover";
+}
+
+const ScrollBar = React.forwardRef<
+    React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+    ScrollBarProps
+>(
+    (
+        { className, orientation = "vertical", scrollHideDelay, type, ...props },
+        ref
+    ) => {
+        return (
+            <ScrollAreaPrimitive.ScrollAreaScrollbar
+                ref={ref}
+                orientation={orientation}
+                className={cn(
+                    scrollBarVariants({ orientation }),
+                    "hover:bg-accent",
+                    className
+                )}
+                {...props}
+            >
+                <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border hover:bg-foreground/30 transition-colors" />
+            </ScrollAreaPrimitive.ScrollAreaScrollbar>
+        );
+    }
+);
+
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar, scrollAreaVariants };