4d:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4e:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4f:T427e,"use client"; import { cn } from "@/lib/utils"; import { ArrowUpRight, FolderClosedIcon, FolderOpenIcon, ImageIcon, } from "lucide-react"; import { AnimatePresence, motion, useReducedMotion, useSpring, type MotionProps, } from "motion/react"; import Image from "next/image"; import Link from "next/link"; import { useCallback, useEffect, useMemo, useState, useSyncExternalStore } from "react"; const EASE = [0.22, 1, 0.36, 1] as const; /** * Blur-to-sharp entrance: opacity lands first, the rise settles on a * critically damped spring (so the blur never overshoots into a negative * radius), and the focus resolves last. * * Returns no motion props under `prefers-reduced-motion`, which leaves the * element in its resting state. */ function useBlurReveal({ y = 8, blur = 6, delay = 0, margin = "-40px", }: { y?: number; blur?: number; delay?: number; margin?: string; } = {}): Pick { const prefersReducedMotion = useReducedMotion(); if (prefersReducedMotion) { return {}; } return { initial: { opacity: 0, y, filter: `blur(${blur}px)` }, whileInView: { opacity: 1, y: 0, filter: "blur(0px)", // Clear the filter once it lands: a resting `blur(0px)` keeps the // subtree on its own raster layer for nothing. transitionEnd: { filter: "none" }, }, viewport: { once: true, margin }, transition: { default: { type: "spring", stiffness: 420, damping: 34, mass: 0.7, delay }, opacity: { duration: 0.18, ease: EASE, delay }, filter: { duration: 0.32, ease: EASE, delay }, }, }; } export type ProjectStatus = "building" | "new" | "shipped"; export interface ProjectExplorerItem { id: string; title: string; year: number; description?: string; category?: string; status?: ProjectStatus; href?: string; liveUrl?: string; githubUrl?: string; image?: string; imageAlt?: string; showImage?: boolean; enabled?: boolean; order?: number; } const defaultSampleProjects: ProjectExplorerItem[] = [ { id: "zeno", title: "Zeno — AI Assistant for PostgreSQL", year: 2025, status: "building", category: "ai-tool", href: "https://zeno.example.com", image: "/zeno.png", }, { id: "gridly", title: "Gridly — Modern UI Component Library", year: 2025, status: "new", category: "design-system", href: "https://gridly.example.com", }, { id: "rixel", title: "Rixel — High Performance Pixel Canvas", year: 2024, status: "shipped", category: "webgl", href: "https://rixel.example.com", image: "/rixel.png", }, { id: "aura", title: "Aura — Ambient Audio Workspace", year: 2024, status: "shipped", category: "audio", href: "https://aura.example.com", }, ]; const HOVER_QUERY = "(hover: hover) and (pointer: fine)"; function subscribeHoverCapability(callback: () => void) { const mql = window.matchMedia(HOVER_QUERY); mql.addEventListener("change", callback); return () => mql.removeEventListener("change", callback); } const getHoverSnapshot = () => window.matchMedia(HOVER_QUERY).matches; const getServerSnapshot = () => false; const folderColors = [ { icon: "fill-blue-500/20 text-blue-600 dark:text-blue-400", text: "text-blue-600 dark:text-blue-400", }, { icon: "fill-amber-500/20 text-amber-600 dark:text-amber-400", text: "text-amber-600 dark:text-amber-400", }, { icon: "fill-emerald-500/20 text-emerald-600 dark:text-emerald-400", text: "text-emerald-600 dark:text-emerald-400", }, { icon: "fill-rose-500/20 text-rose-600 dark:text-rose-400", text: "text-rose-600 dark:text-rose-400", }, ]; const PREVIEW_WIDTH = 300; const PREVIEW_HEIGHT = 210; function StatusBadge({ status }: { status: ProjectStatus }) { if (status === "shipped") return null; if (status === "building") { return ( building… ); } return ( new ); } interface PreviewHandlers { onPreviewStart: (project: ProjectExplorerItem, anchor?: DOMRect) => void; onPreviewEnd: () => void; showHoverPreview: boolean; onProjectClick?: (project: ProjectExplorerItem, targetType: "case_study" | "external_url", url: string) => void; } function WorkRow({ project, index, onPreviewStart, onPreviewEnd, showHoverPreview, onProjectClick, }: { project: ProjectExplorerItem; index: number } & PreviewHandlers) { const [name, subtitle] = project.title.split(" — "); const href = project.href ?? project.liveUrl ?? (project.id ? `/project/${project.id}` : "#"); const isExternal = Boolean( project.liveUrl || (project.href && (project.href.startsWith("http://") || project.href.startsWith("https://"))), ); const handleClick = () => { onProjectClick?.(project, isExternal ? "external_url" : "case_study", href); }; // Capped so a long year group still finishes sharpening quickly. const reveal = useBlurReveal({ y: 8, blur: 5, delay: Math.min(index * 0.04, 0.2), }); return ( onPreviewStart(project) : undefined } onMouseLeave={showHoverPreview ? onPreviewEnd : undefined} onFocus={ showHoverPreview ? (event) => onPreviewStart( project, event.currentTarget.getBoundingClientRect(), ) : undefined } onBlur={showHoverPreview ? onPreviewEnd : undefined} className="group micro-transition flex min-h-11 items-center gap-2 rounded-sm px-3 py-2 hover:bg-muted/40 focus-visible:bg-muted/40 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-foreground/20" > {subtitle ? ( <> {name} {subtitle} ) : ( name )} {project.status ? : null} {project.category ? ( {"// "} {project.category} ) : null} ); } export type ProjectExplorerProps = { /** The list of projects to display. If omitted, sample projects will be shown. */ projects?: ProjectExplorerItem[]; /** Section heading text. Default: "Featured Projects". */ title?: string; /** Hide the section label when the explorer lives inside an already-labelled surface. * Also drops the section's top rule. */ showHeading?: boolean; /** Choose whether every year or only the most recent year starts expanded. */ defaultOpen?: "all" | "latest"; /** Enable or disable the floating cursor hover image preview card. Default: true */ showHoverPreview?: boolean; /** Optional callback fired when a project link is clicked. */ onProjectClick?: (project: ProjectExplorerItem, targetType: "case_study" | "external_url", url: string) => void; /** Optional callback fired when a year folder is expanded or collapsed. */ onYearToggle?: (year: number, action: "expand" | "collapse") => void; /** Optional DOM id for the section container */ id?: string; /** Additional classes for the container section */ className?: string; }; export function ProjectExplorer({ projects = defaultSampleProjects, title = "Featured Projects", showHeading = true, defaultOpen = "all", showHoverPreview = true, id, onProjectClick, onYearToggle, className, }: ProjectExplorerProps) { const [activeProject, setActiveProject] = useState(null); const projectsByYear = useMemo(() => { const enabledProjects = projects .filter((item) => item.enabled !== false) .sort((a, b) => (a.order ?? 0) - (b.order ?? 0)); return enabledProjects .reduce<{ year: number; projects: ProjectExplorerItem[] }[]>((groups, project) => { const group = groups.find((g) => g.year === project.year); if (group) { group.projects.push(project); } else { groups.push({ year: project.year, projects: [project] }); } return groups; }, []) .sort((a, b) => b.year - a.year); }, [projects]); const [openYears, setOpenYears] = useState>(() => { const initial: Record = {}; projectsByYear.forEach((group, index) => { initial[group.year] = defaultOpen === "all" || index === 0; }); return initial; }); const toggleYear = useCallback((year: number) => { setOpenYears((prev) => { const willBeOpen = !prev[year]; onYearToggle?.(year, willBeOpen ? "expand" : "collapse"); return { ...prev, [year]: willBeOpen, }; }); }, [onYearToggle]); const canHover = useSyncExternalStore( subscribeHoverCapability, getHoverSnapshot, getServerSnapshot, ); const prefersReducedMotion = useReducedMotion(); const springX = useSpring(0, { stiffness: 260, damping: 26, mass: 0.6 }); const springY = useSpring(0, { stiffness: 260, damping: 26, mass: 0.6 }); useEffect(() => { const hide = () => setActiveProject(null); window.addEventListener("scroll", hide, { passive: true }); return () => window.removeEventListener("scroll", hide); }, []); const handleMouseMove = useCallback( (event: React.MouseEvent) => { if (!showHoverPreview || !activeProject) return; const flip = event.clientX > window.innerWidth - PREVIEW_WIDTH - 48; springX.set(event.clientX + (flip ? -(PREVIEW_WIDTH + 24) : 24)); springY.set( Math.max( 16, Math.min( event.clientY - PREVIEW_HEIGHT / 2, window.innerHeight - PREVIEW_HEIGHT - 24, ), ), ); }, [springX, springY, showHoverPreview, activeProject], ); const handlePreviewStart = useCallback( (project: ProjectExplorerItem, anchor?: DOMRect) => { if (!showHoverPreview) return; setActiveProject(project); if (anchor) { const flip = anchor.right > window.innerWidth - PREVIEW_WIDTH - 48; springX.set( flip ? anchor.left - PREVIEW_WIDTH - 16 : anchor.right + 16, ); springY.set( Math.max( 16, Math.min(anchor.top, window.innerHeight - PREVIEW_HEIGHT - 24), ), ); } }, [springX, springY, showHoverPreview], ); const handlePreviewEnd = useCallback(() => setActiveProject(null), []); const showPreview = showHoverPreview && canHover && !prefersReducedMotion && Boolean(activeProject); const hasImage = Boolean( activeProject?.image && activeProject?.showImage !== false, ); const headingReveal = useBlurReveal({ y: 8, blur: 6, margin: "-100px" }); return (

{showHeading ? ( {title} ) : null}

{projectsByYear.map((group, groupIndex) => { const isOpen = openYears[group.year] ?? true; const FolderIcon = isOpen ? FolderOpenIcon : FolderClosedIcon; return ( {isOpen && ( {group.projects.map((project, index) => ( ))} )} ); })}

{showPreview && activeProject ? ( ) : null}

); } export default ProjectExplorer; 4c:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L4d",null,{"namespace":"@akoder","registryDependencies":[]}]]}],null]}],["$","$L4e",null,{"files":[{"path":"components/project-explorer.tsx","content":"$4f","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]