abhishek-portfolio-template 1.0.0

package/template/src/components/ui/3d-folder.tsx

@@ -0,0 +1,569 @@
+"use client"
+
+import { useState, useRef, useEffect, useLayoutEffect, useCallback, forwardRef } from "react"
+import { cn } from "@/lib/utils"
+import { X, ExternalLink, ChevronLeft, ChevronRight } from "lucide-react"
+
+interface Project {
+    id: string
+    image: string
+    title: string
+}
+
+interface AnimatedFolderProps {
+    title: string
+    projects: Project[]
+    className?: string
+}
+
+export function AnimatedFolder({ title, projects, className }: AnimatedFolderProps) {
+    const [isHovered, setIsHovered] = useState(false)
+    const [selectedIndex, setSelectedIndex] = useState<number | null>(null)
+    const [sourceRect, setSourceRect] = useState<DOMRect | null>(null)
+    const [hiddenCardId, setHiddenCardId] = useState<string | null>(null)
+    const cardRefs = useRef<(HTMLDivElement | null)[]>([])
+
+    const handleProjectClick = (project: Project, index: number) => {
+        const cardEl = cardRefs.current[index]
+        if (cardEl) {
+            setSourceRect(cardEl.getBoundingClientRect())
+        }
+        setSelectedIndex(index)
+        setHiddenCardId(project.id)
+    }
+
+    const handleCloseLightbox = () => {
+        setSelectedIndex(null)
+        setSourceRect(null)
+    }
+
+    const handleCloseComplete = () => {
+        setHiddenCardId(null)
+    }
+
+    const handleNavigate = (newIndex: number) => {
+        setSelectedIndex(newIndex)
+        setHiddenCardId(projects[newIndex]?.id || null)
+    }
+
+    return (
+        <>
+            <div
+                className={cn(
+                    "relative flex flex-col items-center justify-center",
+                    "p-8 rounded-2xl cursor-pointer",
+                    "bg-card border border-border",
+                    "transition-all duration-500 ease-out",
+                    "hover:shadow-2xl hover:shadow-accent/10",
+                    "hover:border-accent/30",
+                    "group",
+                    className,
+                )}
+                style={{
+                    minWidth: "100%",
+                    minHeight: "auto",
+                    padding: "1rem",
+                    perspective: "1000px",
+                }}
+                onMouseEnter={() => setIsHovered(true)}
+                onMouseLeave={() => setIsHovered(false)}
+            >
+                {/* Subtle background glow on hover */}
+                <div
+                    className="absolute inset-0 rounded-2xl transition-opacity duration-500"
+                    style={{
+                        background: "radial-gradient(circle at 50% 70%, var(--accent) 0%, transparent 70%)",
+                        opacity: isHovered ? 0.08 : 0,
+                    }}
+                />
+
+                <div className="relative flex items-center justify-center mb-4" style={{ height: "160px", width: "200px" }}>
+                    {/* Folder back layer - z-index 10 */}
+                    <div
+                        className="absolute w-32 h-24 bg-folder-back rounded-lg shadow-md"
+                        style={{
+                            transformOrigin: "bottom center",
+                            transform: isHovered ? "rotateX(-15deg)" : "rotateX(0deg)",
+                            transition: "transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1)",
+                            zIndex: 10,
+                        }}
+                    />
+
+                    {/* Folder tab - z-index 10 */}
+                    <div
+                        className="absolute w-12 h-4 bg-folder-tab rounded-t-md"
+                        style={{
+                            top: "calc(50% - 48px - 12px)",
+                            left: "calc(50% - 64px + 16px)",
+                            transformOrigin: "bottom center",
+                            transform: isHovered ? "rotateX(-25deg) translateY(-2px)" : "rotateX(0deg)",
+                            transition: "transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1)",
+                            zIndex: 10,
+                        }}
+                    />
+
+                    {/* Project cards - z-index 20, between back and front */}
+                    <div
+                        className="absolute"
+                        style={{
+                            top: "50%",
+                            left: "50%",
+                            transform: "translate(-50%, -50%)",
+                            zIndex: 20,
+                        }}
+                    >
+                        {projects.slice(0, 3).map((project, index) => (
+                            <ProjectCard
+                                key={project.id}
+                                ref={(el) => {
+                                    cardRefs.current[index] = el
+                                }}
+                                image={project.image}
+                                title={project.title}
+                                delay={index * 80}
+                                isVisible={isHovered}
+                                index={index}
+                                onClick={() => handleProjectClick(project, index)}
+                                isSelected={hiddenCardId === project.id}
+                            />
+                        ))}
+                    </div>
+
+                    {/* Folder front layer - z-index 30 */}
+                    <div
+                        className="absolute w-32 h-24 bg-folder-front rounded-lg shadow-lg"
+                        style={{
+                            top: "calc(50% - 48px + 4px)",
+                            transformOrigin: "bottom center",
+                            transform: isHovered ? "rotateX(25deg) translateY(8px)" : "rotateX(0deg)",
+                            transition: "transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1)",
+                            zIndex: 30,
+                        }}
+                    />
+
+                    {/* Folder shine effect - z-index 31 */}
+                    <div
+                        className="absolute w-32 h-24 rounded-lg overflow-hidden pointer-events-none"
+                        style={{
+                            top: "calc(50% - 48px + 4px)",
+                            background: "linear-gradient(135deg, rgba(255,255,255,0.3) 0%, transparent 50%)",
+                            transformOrigin: "bottom center",
+                            transform: isHovered ? "rotateX(25deg) translateY(8px)" : "rotateX(0deg)",
+                            transition: "transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1)",
+                            zIndex: 31,
+                        }}
+                    />
+                </div>
+            </div>
+
+            <ImageLightbox
+                projects={projects.slice(0, 3)}
+                currentIndex={selectedIndex ?? 0}
+                isOpen={selectedIndex !== null}
+                onClose={handleCloseLightbox}
+                sourceRect={sourceRect}
+                onCloseComplete={handleCloseComplete}
+                onNavigate={handleNavigate}
+            />
+        </>
+    )
+}
+
+interface ImageLightboxProps {
+    projects: Project[]
+    currentIndex: number
+    isOpen: boolean
+    onClose: () => void
+    sourceRect: DOMRect | null
+    onCloseComplete?: () => void
+    onNavigate: (index: number) => void
+}
+
+export function ImageLightbox({
+    projects,
+    currentIndex,
+    isOpen,
+    onClose,
+    sourceRect,
+    onCloseComplete,
+    onNavigate,
+}: ImageLightboxProps) {
+    const [animationPhase, setAnimationPhase] = useState<"initial" | "animating" | "complete">("initial")
+    const [isClosing, setIsClosing] = useState(false)
+    const [shouldRender, setShouldRender] = useState(false)
+    const [internalIndex, setInternalIndex] = useState(currentIndex)
+    const [prevIndex, setPrevIndex] = useState(currentIndex)
+    const [isSliding, setIsSliding] = useState(false)
+    const [slideDirection, setSlideDirection] = useState<"left" | "right">("right")
+    const containerRef = useRef<HTMLDivElement>(null)
+
+    const totalProjects = projects.length
+    const hasNext = internalIndex < totalProjects - 1
+    const hasPrev = internalIndex > 0
+
+    const currentProject = projects[internalIndex]
+
+    useEffect(() => {
+        if (isOpen && currentIndex !== internalIndex && !isSliding) {
+            const direction = currentIndex > internalIndex ? "left" : "right"
+            setSlideDirection(direction)
+            setPrevIndex(internalIndex)
+            setIsSliding(true)
+
+            const timer = setTimeout(() => {
+                setInternalIndex(currentIndex)
+                setIsSliding(false)
+            }, 400)
+
+            return () => clearTimeout(timer)
+        }
+    }, [currentIndex, isOpen])
+
+    useEffect(() => {
+        if (isOpen) {
+            setInternalIndex(currentIndex)
+            setPrevIndex(currentIndex)
+            setIsSliding(false)
+        }
+    }, [isOpen])
+
+    const navigateNext = useCallback(() => {
+        if (internalIndex >= totalProjects - 1 || isSliding) return
+        onNavigate(internalIndex + 1)
+    }, [internalIndex, totalProjects, isSliding, onNavigate])
+
+    const navigatePrev = useCallback(() => {
+        if (internalIndex <= 0 || isSliding) return
+        onNavigate(internalIndex - 1)
+    }, [internalIndex, isSliding, onNavigate])
+
+    const handleClose = useCallback(() => {
+        setIsClosing(true)
+        onClose()
+        setTimeout(() => {
+            setIsClosing(false)
+            setShouldRender(false)
+            setAnimationPhase("initial")
+            onCloseComplete?.()
+        }, 400)
+    }, [onClose, onCloseComplete])
+
+    useEffect(() => {
+        const handleKeyDown = (e: KeyboardEvent) => {
+            if (!isOpen) return
+            if (e.key === "Escape") handleClose()
+            if (e.key === "ArrowRight") navigateNext()
+            if (e.key === "ArrowLeft") navigatePrev()
+        }
+
+        window.addEventListener("keydown", handleKeyDown)
+        if (isOpen) {
+            document.body.style.overflow = "hidden"
+        }
+
+        return () => {
+            window.removeEventListener("keydown", handleKeyDown)
+            document.body.style.overflow = ""
+        }
+    }, [isOpen, handleClose, navigateNext, navigatePrev])
+
+    useLayoutEffect(() => {
+        if (isOpen && sourceRect) {
+            setShouldRender(true)
+            setAnimationPhase("initial")
+            setIsClosing(false)
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    setAnimationPhase("animating")
+                })
+            })
+            const timer = setTimeout(() => {
+                setAnimationPhase("complete")
+            }, 500)
+            return () => clearTimeout(timer)
+        }
+    }, [isOpen, sourceRect])
+
+    const handleDotClick = (idx: number) => {
+        if (isSliding || idx === internalIndex) return
+        onNavigate(idx)
+    }
+
+    if (!shouldRender || !currentProject) return null
+
+    const getInitialStyles = (): React.CSSProperties => {
+        if (!sourceRect) return {}
+
+        const viewportWidth = window.innerWidth
+        const viewportHeight = window.innerHeight
+        const targetWidth = Math.min(768, viewportWidth - 64)
+        const targetHeight = Math.min(viewportHeight * 0.85, 600)
+
+        const targetX = (viewportWidth - targetWidth) / 2
+        const targetY = (viewportHeight - targetHeight) / 2
+
+        const scaleX = sourceRect.width / targetWidth
+        const scaleY = sourceRect.height / targetHeight
+        const scale = Math.max(scaleX, scaleY)
+
+        const translateX = sourceRect.left + sourceRect.width / 2 - (targetX + targetWidth / 2)
+        const translateY = sourceRect.top + sourceRect.height / 2 - (targetY + targetHeight / 2)
+
+        return {
+            transform: `translate(${translateX}px, ${translateY}px) scale(${scale})`,
+            opacity: 1,
+        }
+    }
+
+    const getFinalStyles = (): React.CSSProperties => {
+        return {
+            transform: "translate(0, 0) scale(1)",
+            opacity: 1,
+        }
+    }
+
+    const currentStyles = animationPhase === "initial" && !isClosing ? getInitialStyles() : getFinalStyles()
+
+    return (
+        <div
+            className={cn("fixed inset-0 z-50 flex items-center justify-center p-4 md:p-8")}
+            onClick={handleClose}
+            style={{
+                opacity: isClosing ? 0 : 1,
+                transition: "opacity 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+            }}
+        >
+            <div
+                className="absolute inset-0 bg-background/80 backdrop-blur-xl"
+                style={{
+                    opacity: animationPhase === "initial" && !isClosing ? 0 : 1,
+                    transition: "opacity 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+                }}
+            />
+
+            {/* Close button */}
+            <button
+                onClick={(e) => {
+                    e.stopPropagation()
+                    handleClose()
+                }}
+                className={cn(
+                    "absolute top-5 right-5 z-50",
+                    "w-10 h-10 flex items-center justify-center",
+                    "rounded-full bg-muted/50 backdrop-blur-md",
+                    "border border-border",
+                    "text-muted-foreground hover:text-foreground hover:bg-muted",
+                    "transition-all duration-300 ease-out hover:scale-105 active:scale-95",
+                )}
+                style={{
+                    opacity: animationPhase === "complete" && !isClosing ? 1 : 0,
+                    transform: animationPhase === "complete" && !isClosing ? "translateY(0)" : "translateY(-10px)",
+                    transition: "opacity 300ms ease-out, transform 300ms ease-out",
+                }}
+            >
+                <X className="w-4 h-4" strokeWidth={2.5} />
+            </button>
+
+            <button
+                onClick={(e) => {
+                    e.stopPropagation()
+                    navigatePrev()
+                }}
+                disabled={!hasPrev || isSliding}
+                className={cn(
+                    "absolute left-4 md:left-8 z-50",
+                    "w-12 h-12 flex items-center justify-center",
+                    "rounded-full bg-muted/50 backdrop-blur-md",
+                    "border border-border",
+                    "text-muted-foreground hover:text-foreground hover:bg-muted",
+                    "transition-all duration-300 ease-out hover:scale-110 active:scale-95",
+                    "disabled:opacity-0 disabled:pointer-events-none",
+                )}
+                style={{
+                    opacity: animationPhase === "complete" && !isClosing && hasPrev ? 1 : 0,
+                    transform: animationPhase === "complete" && !isClosing ? "translateX(0)" : "translateX(-20px)",
+                    transition: "opacity 300ms ease-out 150ms, transform 300ms ease-out 150ms",
+                }}
+            >
+                <ChevronLeft className="w-5 h-5" strokeWidth={2.5} />
+            </button>
+
+            <button
+                onClick={(e) => {
+                    e.stopPropagation()
+                    navigateNext()
+                }}
+                disabled={!hasNext || isSliding}
+                className={cn(
+                    "absolute right-4 md:right-8 z-50",
+                    "w-12 h-12 flex items-center justify-center",
+                    "rounded-full bg-muted/50 backdrop-blur-md",
+                    "border border-border",
+                    "text-muted-foreground hover:text-foreground hover:bg-muted",
+                    "transition-all duration-300 ease-out hover:scale-110 active:scale-95",
+                    "disabled:opacity-0 disabled:pointer-events-none",
+                )}
+                style={{
+                    opacity: animationPhase === "complete" && !isClosing && hasNext ? 1 : 0,
+                    transform: animationPhase === "complete" && !isClosing ? "translateX(0)" : "translateX(20px)",
+                    transition: "opacity 300ms ease-out 150ms, transform 300ms ease-out 150ms",
+                }}
+            >
+                <ChevronRight className="w-5 h-5" strokeWidth={2.5} />
+            </button>
+
+            <div
+                ref={containerRef}
+                className="relative z-10 w-full max-w-[95vw]"
+                onClick={(e) => e.stopPropagation()}
+                style={{
+                    ...currentStyles,
+                    transform: isClosing ? "translate(0, 0) scale(0.95)" : currentStyles.transform,
+                    transition:
+                        animationPhase === "initial" && !isClosing
+                            ? "none"
+                            : "transform 400ms cubic-bezier(0.16, 1, 0.3, 1), opacity 400ms ease-out",
+                    transformOrigin: "center center",
+                }}
+            >
+                <div
+                    className={cn("relative overflow-hidden", "rounded-2xl", "bg-card", "ring-1 ring-border", "shadow-2xl")}
+                    style={{
+                        borderRadius: animationPhase === "initial" && !isClosing ? "8px" : "16px",
+                        transition: "border-radius 500ms cubic-bezier(0.16, 1, 0.3, 1)",
+                    }}
+                >
+                    <div className="relative overflow-hidden">
+                        <div
+                            className="flex transition-transform duration-400 ease-out"
+                            style={{
+                                transform: `translateX(-${internalIndex * 100}%)`,
+                                transition: isSliding ? "transform 400ms cubic-bezier(0.32, 0.72, 0, 1)" : "none",
+                            }}
+                        >
+                            {projects.map((project, idx) => (
+                                <img
+                                    key={project.id}
+                                    src={project.image || "/placeholder.svg"}
+                                    alt={project.title}
+                                    className="w-full h-auto max-h-[85vh] object-contain bg-background flex-shrink-0"
+                                    style={{ minWidth: "100%" }}
+                                />
+                            ))}
+                        </div>
+
+                        {/* Subtle vignette effect */}
+                        <div className="absolute inset-0 pointer-events-none bg-gradient-to-t from-card/20 via-transparent to-card/10" />
+                    </div>
+
+                    <div
+                        className={cn("px-6 py-5", "bg-card", "border-t border-border")}
+                        style={{
+                            opacity: animationPhase === "complete" && !isClosing ? 1 : 0,
+                            transform: animationPhase === "complete" && !isClosing ? "translateY(0)" : "translateY(20px)",
+                            transition: "opacity 300ms ease-out 100ms, transform 300ms ease-out 100ms",
+                        }}
+                    >
+                        <div className="flex items-start justify-between gap-4">
+                            <div className="flex-1 min-w-0">
+                                <h3 className="text-lg font-medium text-foreground tracking-tight truncate h-7">
+                                    {currentProject?.title}
+                                </h3>
+                                <div className="flex items-center gap-3 mt-1">
+                                    <p className="text-sm text-muted-foreground">
+                                        <kbd className="px-1.5 py-0.5 mx-0.5 text-xs font-medium bg-muted text-muted-foreground rounded border border-border">
+                                            ←
+                                        </kbd>
+                                        <kbd className="px-1.5 py-0.5 mx-0.5 text-xs font-medium bg-muted text-muted-foreground rounded border border-border">
+                                            →
+                                        </kbd>{" "}
+                                        to navigate
+                                    </p>
+                                    <div className="flex items-center gap-1.5">
+                                        {projects.map((_, idx) => (
+                                            <button
+                                                key={idx}
+                                                onClick={() => handleDotClick(idx)}
+                                                className={cn(
+                                                    "w-2 h-2 rounded-full transition-all duration-300",
+                                                    idx === internalIndex
+                                                        ? "bg-foreground scale-110"
+                                                        : "bg-muted-foreground/40 hover:bg-muted-foreground/60",
+                                                )}
+                                            />
+                                        ))}
+                                    </div>
+                                </div>
+                            </div>
+
+                            <button
+                                className={cn(
+                                    "flex items-center gap-2 px-4 py-2",
+                                    "text-sm font-medium text-muted-foreground",
+                                    "bg-muted/50 hover:bg-muted",
+                                    "rounded-lg border border-border",
+                                    "transition-all duration-200 ease-out",
+                                    "hover:text-foreground",
+                                )}
+                            >
+                                <span>View</span>
+                                <ExternalLink className="w-3.5 h-3.5" />
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+interface ProjectCardProps {
+    image: string
+    title: string
+    delay: number
+    isVisible: boolean
+    index: number
+    onClick: () => void
+    isSelected: boolean
+}
+
+export const ProjectCard = forwardRef<HTMLDivElement, ProjectCardProps>(
+    ({ image, title, delay, isVisible, index, onClick, isSelected }, ref) => {
+        const rotations = [-12, 0, 12]
+        const translations = [-55, 0, 55]
+
+        return (
+            <div
+                ref={ref}
+                className={cn(
+                    "absolute w-20 h-28 rounded-lg overflow-hidden shadow-xl",
+                    "bg-card border border-border",
+                    "cursor-pointer hover:ring-2 hover:ring-accent/50",
+                    isSelected && "opacity-0",
+                )}
+                style={{
+                    transform: isVisible
+                        ? `translateY(-90px) translateX(${translations[index]}px) rotate(${rotations[index]}deg) scale(1)`
+                        : "translateY(0px) translateX(0px) rotate(0deg) scale(0.5)",
+                    opacity: isSelected ? 0 : isVisible ? 1 : 0,
+                    transition: `all 600ms cubic-bezier(0.34, 1.56, 0.64, 1) ${delay}ms`,
+                    zIndex: 10 - index,
+                    left: "-40px",
+                    top: "-56px",
+                }}
+                onClick={(e) => {
+                    e.stopPropagation()
+                    onClick()
+                }}
+            >
+                <img src={image || "/placeholder.svg"} alt={title} className="w-full h-full object-cover" />
+                <div className="absolute inset-0 bg-gradient-to-t from-foreground/60 to-transparent" />
+                <p className="absolute bottom-1.5 left-1.5 right-1.5 text-[10px] font-medium text-foreground truncate">
+                    {title}
+                </p>
+            </div>
+        )
+    },
+)
+
+ProjectCard.displayName = "ProjectCard"

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

@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+const Avatar = React.forwardRef<
+    React.ElementRef<typeof AvatarPrimitive.Root>,
+    React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+    <AvatarPrimitive.Root
+        ref={ref}
+        className={cn(
+            "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+            className,
+        )}
+        {...props}
+    />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+    React.ElementRef<typeof AvatarPrimitive.Image>,
+    React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+    <AvatarPrimitive.Image
+        ref={ref}
+        className={cn("aspect-square h-full w-full", className)}
+        {...props}
+    />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+    React.ElementRef<typeof AvatarPrimitive.Fallback>,
+    React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+    <AvatarPrimitive.Fallback
+        ref={ref}
+        className={cn(
+            "flex h-full w-full items-center justify-center rounded-full bg-muted",
+            className,
+        )}
+        {...props}
+    />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }

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

@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+    "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+    {
+        variants: {
+            variant: {
+                default:
+                    "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+                secondary:
+                    "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+                destructive:
+                    "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+                outline: "text-foreground",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+        },
+    },
+)
+
+export interface BadgeProps
+    extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> { }
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+    return (
+        <div className={cn(badgeVariants({ variant }), className)} {...props} />
+    )
+}
+
+export { Badge, badgeVariants }

package/template/src/components/ui/basic-avatar.tsx

@@ -0,0 +1,12 @@
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+
+const AvatarDemo = () => {
+    return (
+        <Avatar>
+            <AvatarImage src='https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-5.png' alt='Hallie Richards' />
+            <AvatarFallback className='text-xs'>HR</AvatarFallback>
+        </Avatar>
+    )
+}
+
+export default AvatarDemo