/* Shared site chrome — Victor Chiemerie portfolio
Used by index.html, Work.html, Case Study.html, About.html, Services.html */
const { useState, useEffect, useRef } = React;
/* ============ Cursor ============ */
function Cursor() {
const dot = useRef(null);
const [variant, setVariant] = useState("default");
const [label, setLabel] = useState("");
useEffect(() => {
let x = window.innerWidth / 2,y = window.innerHeight / 2;
let tx = x,ty = y;
let raf;
const move = (e) => {tx = e.clientX;ty = e.clientY;};
const tick = () => {
x += (tx - x) * 0.22;
y += (ty - y) * 0.22;
if (dot.current) dot.current.style.transform = `translate(${x}px, ${y}px) translate(-50%, -50%)`;
raf = requestAnimationFrame(tick);
};
window.addEventListener("mousemove", move);
raf = requestAnimationFrame(tick);
const onOver = (e) => {
const t = e.target.closest("[data-cursor]");
if (t) {setVariant(t.dataset.cursor || "hover");setLabel(t.dataset.cursorLabel || "");} else
{setVariant("default");setLabel("");}
};
document.addEventListener("mouseover", onOver);
return () => {cancelAnimationFrame(raf);window.removeEventListener("mousemove", move);document.removeEventListener("mouseover", onOver);};
}, []);
return (
{label}
);
}
/* ============ Reveal hook ============ */
function useReveal(deps = []) {
useEffect(() => {
const els = document.querySelectorAll(".reveal-line, .reveal-fade");
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => {if (e.isIntersecting) e.target.classList.add("in");});
}, { threshold: 0.15, rootMargin: "0px 0px -10% 0px" });
els.forEach((el) => io.observe(el));
return () => io.disconnect();
}, deps);
}
/* ============ Magnetic wrap ============ */
function Magnetic({ children, strength = 0.35 }) {
const ref = useRef(null);
useEffect(() => {
const el = ref.current;if (!el) return;
if (window.matchMedia("(hover: none)").matches) return;
const move = (e) => {
const r = el.getBoundingClientRect();
const cx = r.left + r.width / 2,cy = r.top + r.height / 2;
el.style.transform = `translate(${(e.clientX - cx) * strength}px, ${(e.clientY - cy) * strength}px)`;
};
const reset = () => {el.style.transform = "translate(0, 0)";};
el.addEventListener("mousemove", move);
el.addEventListener("mouseleave", reset);
return () => {el.removeEventListener("mousemove", move);el.removeEventListener("mouseleave", reset);};
}, [strength]);
return {children}
;
}
/* ============ Reveal helpers ============ */
function RevealLine({ children, delay = 0, as = "span", style }) {
const Tag = as;
return (
{children}
);
}
function RevealFade({ children, delay = 0, as = "div", className = "" }) {
const Tag = as;
return {children};
}
/* ============ Arrow ============ */
function Arrow(props) {
return (
);
}
/* ============ Curtain (page transition) ============ */
function Curtain({ active, onDone, label }) {
useEffect(() => {
if (!active) return;
const t1 = setTimeout(() => {
const c = document.querySelector(".curtain");
if (c) {c.classList.remove("is-in");c.classList.add("is-out");}
}, 900);
const t2 = setTimeout(() => {onDone();}, 1700);
return () => {clearTimeout(t1);clearTimeout(t2);};
}, [active]);
return (
);
}
/* ============ Nav (page-aware) ============ */
const NAV_LINKS = [
{ id: "work", label: "Work", href: "Work.html" },
{ id: "services", label: "Services", href: "Services.html" },
{ id: "about", label: "About", href: "About.html" },
{ id: "contact", label: "Contact", href: "index.html#contact" }];
function Nav({ page = "home", onCurtain }) {
const [stuck, setStuck] = useState(false);
const [menuOpen, setMenuOpen] = useState(false);
useEffect(() => {
const onScroll = () => setStuck(window.scrollY > 40);
window.addEventListener("scroll", onScroll);
return () => window.removeEventListener("scroll", onScroll);
}, []);
useEffect(() => {
document.documentElement.style.overflow = menuOpen ? "hidden" : "";
return () => {document.documentElement.style.overflow = "";};
}, [menuOpen]);
const go = (e, link) => {
e.preventDefault();
setMenuOpen(false);
// contact on home = smooth scroll; everything else = curtain + navigate
if (link.id === "contact" && page === "home") {
const el = document.getElementById("contact");
if (el) window.scrollTo({ top: el.offsetTop - 60, behavior: "smooth" });
return;
}
if (link.id === page) return;
if (onCurtain) {
onCurtain(link.label.toLowerCase());
setTimeout(() => {window.location.href = link.href;}, 800);
} else {
window.location.href = link.href;
}
};
const goHome = (e) => {
e.preventDefault();
setMenuOpen(false);
if (page === "home") {window.scrollTo({ top: 0, behavior: "smooth" });return;}
if (onCurtain) {
onCurtain("home");
setTimeout(() => {window.location.href = "index.html";}, 800);
} else {
window.location.href = "index.html";
}
};
return (
<>
);
}
/* ============ Footer ============ */
function Footer() {
return (
© Victor Chiemerie · Designed & built 2026
);
}
/* ============ Theme toggle ============ */
function ThemeToggle({ theme, setTheme }) {
return (
);
}
/* ============ Scroll progress ============ */
function ScrollBar() {
const ref = useRef(null);
useEffect(() => {
const onScroll = () => {
const h = document.documentElement.scrollHeight - window.innerHeight;
const pct = h > 0 ? Math.min(100, Math.max(0, window.scrollY / h * 100)) : 0;
if (ref.current) ref.current.style.width = pct + "%";
};
onScroll();window.addEventListener("scroll", onScroll);
return () => window.removeEventListener("scroll", onScroll);
}, []);
return ;
}
/* ============ Theme state (shared persistence via tweaks host) ============ */
const SITE_TWEAK_DEFAULTS = { theme: "light" };
function useSiteTheme() {
const tweaks = window.useTweaks ? window.useTweaks(SITE_TWEAK_DEFAULTS) : useState(SITE_TWEAK_DEFAULTS);
const [vals, setVals] = tweaks;
const [theme, setThemeRaw] = useState(vals.theme || "light");
useEffect(() => {document.documentElement.dataset.theme = theme;}, [theme]);
useEffect(() => {setThemeRaw(vals.theme || "light");}, [vals.theme]);
const setTheme = (t) => {setThemeRaw(t);setVals({ theme: t });};
return [theme, setTheme, vals, setVals];
}
Object.assign(window, {
Cursor, useReveal, Magnetic, RevealLine, RevealFade, Arrow,
Curtain, Nav, Footer, ThemeToggle, ScrollBar, useSiteTheme
});