// Shared portfolio components (used by all 3 directions) // Exports to window.PFC const { useState, useEffect, useRef, useCallback } = React; /* ── ProjectMock ─────────────────────────────────────────────── Placeholder visual for a project — colored background with project name + a tiny stylized "screenshot" element. */ function ProjectMock({ project, variant = "card", size = "md" }) { const { hue = "#0052FF", accent = "#FFFFFF", name, idx, slug, tags = [] } = project; const isMobile = (tags.includes("Mobile App") || tags.includes("Mobile")) && !tags.includes("Web"); const isWeb = tags.includes("Web") || tags.includes("Enterprise") || tags.includes("Tooling"); const isAI = tags.includes("AI"); // Decide which mini mockup to draw inside the colored swatch const renderInner = () => { if (variant === "logo") { return (
{name}
); } if (isMobile) return ; if (isAI) return ; if (isWeb) return ; return ; }; return (
{/* tag chip top-left */}
{idx} / {tags[0] || "Product"}
{/* name top-right */}
{name}
{/* center visual */}
{renderInner()}
{/* bottom right year */}
{project.year_short}
); } function MiniPhone({ hue, accent, project }) { return (
{/* status notch */}
{/* faux content */}
{project.name}
{/* home indicator */}
); } function MiniWeb({ hue, accent, project }) { return (
{/* topbar */}
{project.name}
); } function MiniAI({ hue, accent, project }) { return (
AI
{project.name}
{/* chat bubbles */}
); } /* ── HoverPreview ────────────────────────────────────────────── Floating image preview that follows the cursor when hovering over a project list row. */ const DWELL_MS = 3000; // pointer must rest this long before the preview shows function useHoverPreview(opts = {}) { const { rich = false, t = (v) => v } = opts; const [active, setActive] = useState(null); const [pos, setPos] = useState({ x: 0, y: 0 }); const rowRef = useRef(null); const timerRef = useRef(0); const pendingRef = useRef(null); const activeRef = useRef(false); const lastRef = useRef({ x: 0, y: 0 }); // Sit right next to the cursor (small offset), but never over the row's // title: if the cursor is on/near the title, the card is nudged just past // the title's right edge. Flips to the left of the cursor when out of room. const place = useCallback((clientX, clientY) => { const w = rich ? 360 : 340; const h = rich ? 430 : 255; const gap = 20; const vw = window.innerWidth, vh = window.innerHeight; const row = rowRef.current; const title = row && row.querySelector("h3"); const tr = title ? title.getBoundingClientRect() : null; const overTitle = tr && clientY >= tr.top - 8 && clientY <= tr.bottom + 8; let x = clientX + gap; // only push past the title when the card would actually overlap the words if (overTitle && x < tr.right + gap) x = tr.right + gap; if (x + w > vw - 16) { const flipped = clientX - gap - w; x = flipped >= 16 && (!overTitle || flipped + w < tr.left - gap) ? flipped : Math.max(16, vw - w - 16); } let y = clientY - h / 2; y = Math.min(Math.max(16, y), Math.max(16, vh - h - 16)); setPos({ x, y }); }, [rich]); const onMove = useCallback((e) => { // remember where the cursor is, but only reveal once it has settled lastRef.current = { x: e.clientX, y: e.clientY }; if (activeRef.current) { place(e.clientX, e.clientY); return; } arm(e.currentTarget); }, [place]); // Reveal only after the pointer rests on the row; any movement, // scroll or leave re-arms/cancels it so scrolling never pops the card. const arm = useCallback((row) => { clearTimeout(timerRef.current); timerRef.current = setTimeout(() => { const p = pendingRef.current; if (!p || !rowRef.current) return; setActive(p); activeRef.current = true; place(lastRef.current.x, lastRef.current.y); }, DWELL_MS); }, [place]); const cancel = useCallback(() => { clearTimeout(timerRef.current); pendingRef.current = null; rowRef.current = null; activeRef.current = false; setActive(null); }, []); useEffect(() => { const onScroll = () => cancel(); window.addEventListener("scroll", onScroll, { passive: true }); window.addEventListener("wheel", onScroll, { passive: true }); return () => { window.removeEventListener("scroll", onScroll); window.removeEventListener("wheel", onScroll); clearTimeout(timerRef.current); }; }, [cancel]); const bind = (project) => ({ onMouseEnter: (e) => { rowRef.current = e.currentTarget; pendingRef.current = project; lastRef.current = { x: e.clientX, y: e.clientY }; arm(e.currentTarget); }, onMouseLeave: cancel, onMouseMove: onMove, }); const Preview = active ? ( rich ? (
{active.name}
{active.idx} / {active.year_short}
{t(active.summary)}
{active.tags.slice(0,2).map(tag => ( {tag} ))}
Read case
) : (
) ) : null; return { bind, Preview }; } /* ── BrandMark ─ small "HV" mark ─────────────────────────────── */ function BrandMark({ size = 28 }) { return (
HV
); } /* ── LangSwitch ─ VI/EN inline toggle ────────────────────────── */ function LangSwitch({ lang, setLang }) { return (
{["vi","en"].map(l => ( ))}
); } /* ── ThemeSwitch ─ light/dark toggle ─────────────────────────── */ function ThemeSwitch({ theme, setTheme }) { return ( ); } /* ── Local theme/lang state hook for one direction artboard ── */ function usePortfolioState() { const [lang, setLang] = useState("vi"); const [theme, setTheme] = useState("light"); return { lang, setLang, theme, setTheme }; } window.PFC = { ProjectMock, BrandMark, LangSwitch, ThemeSwitch, useHoverPreview, usePortfolioState, };