/* eslint-disable no-undef */ /* Home page — hero + selected works (3) + skills (with upward float) + contact */ const { useState: useStateH, useEffect: useEffectH, useRef: useRefH } = React; function HomePage({ go }) { const [open, setOpen] = useStateH(null); const techRef = useRefH(null); const viewAllRef = useRefH(null); // re-triggerable reveal observer — adds .in on enter, removes on leave useEffectH(() => { const sel = ".reveal, .reveal-left, .reveal-pop, .flip-reveal, .flip-reveal-alt, .flip-reveal-x, .stagger-flip"; const els = document.querySelectorAll(sel); const io = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) e.target.classList.add("in"); else e.target.classList.remove("in"); }); }, { threshold: 0.1 }); els.forEach(e => io.observe(e)); return () => io.disconnect(); }, []); // scroll-darken: fill the "View all projects" button when it scrolls into view useEffectH(() => { const btn = viewAllRef.current; if (!btn) return; const io = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) btn.classList.add("scrolled-in"); else btn.classList.remove("scrolled-in"); }); }, { threshold: 0.5 }); io.observe(btn); return () => io.disconnect(); }, []); return (
{/* ───────────── HERO ───────────── */}
{/* left: status + name */}
Available for work — Index · 2018 → 2026
{/* Greeting with typewriter */}
Hey, a quick hello

I’m ,
a .

{PROFILE.location} · {PROFILE.tz}  ·  {PROFILE.mode}

{PROFILE.blurb}

{/* right: portrait */}
Uduak Afang
Index card
Lagos · 2026
U.AFANG · BI ANALYST
{/* metric strip — numbers count up when visible */}
{[ { n: 3, suffix: "+", k: "Years", s: "BI experience" }, { n: 2, suffix: "×", k: "Tableau", s: "Viz of the Day" }, { n: 4, suffix: "×", k: "Vizzies", s: "Awards nominee" }, { n: 8, suffix: "+", k: "Shipped", s: "End-to-end builds" }, ].map((s, i) => (
{s.k}
{s.s}
))}
{/* ───────────── SELECTED WORKS (only three) ───────────── */}
§ 02 · Selected Works

SELECTED{" "} works.

Three projects, picked because the work behind them was the most honest. The rest live in the archive.

{SELECTED_WORKS.map((w, i) => (
))}
{/* ───────────── HOW I CAN HELP YOU ───────────── */} {/* ───────────── PLAYBOOK TEASER ───────────── */}
§ 03 · The Playbook

How data looks
is how data speaks.

Or as I like to say — the food can be sweet, but if the plating is ugly, nobody eats.

I take dashboard design as seriously as the SQL behind it. After every data exploration, I sketch 4-5 mockups in Figma, test the user flow, and only build the one that makes sense on a Monday morning. The numbers have to be right — but if they don't look right, nobody trusts them.

★
On craft

"Your audience should never have to work hard to understand your visual."

CNK
— Cole Nussbaumer Knaflic
{/* ───────────── SKILLS + TECH STACK ───────────── Wrapped in a single section that lifts upward as the next one enters */}
{/* Skills */}
§ 04.1 · Skills

Self-assessed
depth

Ordered by what I reach for most. Numbers are honest, not aspirational.

{SKILLS.map((s, i) => ( ))}
{/* Tech stack */}
§ 04.2 · Tech Stack

Daily
rotation

Tools I use most weeks across BI, ETL, and the occasional full-stack build.

{TOOLS.map((t, i) => (
{t}
{String(i + 1).padStart(2, "0")}
))}
{/* ───────────── OFF THE CLOCK (about widgets) ───────────── */} {/* ───────────── CONTACT ───────────── */}
§ 06 · Contact

LET’S{" "} talk.

{PROFILE.email}
{PROFILE.location} · {PROFILE.tz} · {PROFILE.mode}
{[ { label: "LinkedIn", href: PROFILE.linkedin }, { label: "GitHub", href: PROFILE.github }, { label: "Tableau Public", href: PROFILE.tableau }, ].map((x) => ( {x.label} ))}
{open && setOpen(null)} />}
); } /* ── Animated counter — counts from 0 to `to` when visible ────────────── */ function CountUp({ to, suffix = "", delay = 0 }) { const ref = useRefH(null); const [val, setVal] = React.useState(0); const [started, setStarted] = React.useState(false); useEffectH(() => { const el = ref.current; if (!el) return; const io = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting && !started) setStarted(true); }); }, { threshold: 0.3 }); io.observe(el); return () => io.disconnect(); }, [started]); useEffectH(() => { if (!started) return; const duration = 1200; const start = performance.now() + delay; let raf; const tick = (now) => { const elapsed = Math.max(0, now - start); const t = Math.min(1, elapsed / duration); // ease-out cubic const eased = 1 - Math.pow(1 - t, 3); setVal(Math.round(eased * to)); if (t < 1) raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [started, to, delay]); return {val}{suffix}; } /* ── Skill row that fills on scroll ───────────────────────────────────── */ function SkillRow({ skill, index }) { const ref = useRefH(null); const fillRef = useRefH(null); useEffectH(() => { const el = ref.current; if (!el) return; const io = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting && fillRef.current) { fillRef.current.style.transition = `width 1.2s cubic-bezier(.2,.6,.2,1) ${index * 0.06}s`; fillRef.current.style.width = skill.pct + "%"; } }); }, { threshold: 0.3 }); io.observe(el); return () => io.disconnect(); }, [skill.pct, index]); return (
{skill.note} {String(index + 1).padStart(2, "0")}
{/* background row */}
{skill.name[0]}
{skill.name}
{skill.pct}%
{/* filled overlay (clipped) */}
{skill.name[0]}
{skill.name}
{skill.pct}%
); } window.HomePage = HomePage;