// portfolio.jsx — Christopher Williams portfolio app const { useState, useEffect, useRef, useMemo } = React; // ── Hooks ──────────────────────────────────────────────────────────────────── function useTypewriter(words, { typeSpeed = 90, deleteSpeed = 40, pause = 1400 } = {}) { const [idx, setIdx] = useState(0); const [sub, setSub] = useState(0); const [deleting, setDeleting] = useState(false); const word = words[idx % words.length]; useEffect(() => { if (!deleting && sub === word.length) { const t = setTimeout(() => setDeleting(true), pause); return () => clearTimeout(t); } if (deleting && sub === 0) { setDeleting(false); setIdx((i) => (i + 1) % words.length); return; } const t = setTimeout( () => setSub((s) => s + (deleting ? -1 : 1)), deleting ? deleteSpeed : typeSpeed ); return () => clearTimeout(t); }, [sub, deleting, word, words.length, typeSpeed, deleteSpeed, pause]); return word.slice(0, sub); } function useInView(opts = { threshold: 0.25 }) { const ref = useRef(null); const [inView, setInView] = useState(false); useEffect(() => { const el = ref.current; if (!el) return; const obs = new IntersectionObserver(([entry]) => { if (entry.isIntersecting) { setInView(true); obs.disconnect(); } }, opts); obs.observe(el); return () => obs.disconnect(); }, []); return [ref, inView]; } function useCountUp(target, { duration = 1600, start = false } = {}) { const [n, setN] = useState(0); useEffect(() => { if (!start) return; let raf, t0; const tick = (t) => { if (!t0) t0 = t; const p = Math.min(1, (t - t0) / duration); const eased = 1 - Math.pow(1 - p, 3); setN(Math.round(eased * target)); if (p < 1) raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [target, duration, start]); return n; } function useScrollSpy(ids) { const [active, setActive] = useState(ids[0]); useEffect(() => { const onScroll = () => { const y = window.scrollY + 120; let cur = ids[0]; for (const id of ids) { const el = document.getElementById(id); if (el && el.offsetTop <= y) cur = id; } setActive(cur); }; onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, [ids.join(",")]); return active; } // ── Inline icons ───────────────────────────────────────────────────────────── const Icon = { arrow: (p) => (), download: (p) => (), mail: (p) => (), linkedin: (p) => (), github: (p) => (), twitter: (p) => (), // Stat icons briefcase: (p) => (), chart: (p) => (), users: (p) => (), award: (p) => (), // Skill / domain icons database: (p) => (), bars: (p) => (), py: (p) => (), excel: (p) => (), brain: (p) => (), flow: (p) => (), layers: (p) => (), }; // ── Section: Nav ───────────────────────────────────────────────────────────── function Nav({ active, t }) { const [scrolled, setScrolled] = useState(false); const [open, setOpen] = useState(false); useEffect(() => { const f = () => setScrolled(window.scrollY > 24); f(); window.addEventListener("scroll", f, { passive: true }); return () => window.removeEventListener("scroll", f); }, []); const links = ["about", "skills", "stats", "portfolio", "contact"]; return ( ); } // ── Section: Hero ──────────────────────────────────────────────────────────── function Hero({ t }) { const word = useTypewriter(["Data Analyst", "SQL Developer", "Tableau Specialist"]); return (
); } // ── Section: Marquee ───────────────────────────────────────────────────────── function Marquee({ t }) { const items = [ { l: "SQL", star: true }, { l: "Tableau", star: false }, { l: "Available Q3 2026", star: true }, { l: "Python", star: false }, { l: "HTML/CSS", star: false }, { l: "Woodstock → everywhere",star: true }, { l: "JavaScript", star: false }, { l: "Webflow", star: false }, { l: "let's build", star: true }, { l: "A/B testing", star: false }, { l: "Power BI", star: false }, ]; const colors = [t.teal, "#fbbf24", "#f97366", "#8b5cf6", "#0ea5e9", "#ec4899", "#22c55e"]; const row = (
{items.map((it, i) => ( {it.l} ✦ ))}
); return ( ); } // ── Section: About ─────────────────────────────────────────────────────────── function About({ t }) { return (
A pragmatic analyst who likes the boring questions.} t={t} />
Christopher Williams
★ 4 yrs experience
◉ Woodstock, GA

For the last four years I've worked in data analytics at Pilot Flying J — a Fortune 500 trucking and travel center company — building SQL pipelines, Tableau dashboards and SSRS reports that went directly to C-suite leadership. The work speaks for itself.

{[ { l: "SQL", c: t.teal }, { l: "Tableau", c: "#f97366" }, { l: "Power BI", c: "#fbbf24" }, { l: "SSRS", c: "#22c55e" }, { l: "Excel", c: "#8b5cf6" }, { l: "Python", c: "#0ea5e9" }, { l: "HTML/CSS", c: "#ec4899" }, ].map((tag) => ( {tag.l} ))}
Tableau Desktop Specialist
Credly · Verified Certification
— Chris
); } function SectionHead({ num, eyebrow, title, t, align = "left" }) { return (
{num} {eyebrow}

{title}

); } // ── Section: Skills (circular progress) ────────────────────────────────────── function CircleSkill({ label, value, sub, icon: I, color, animate }) { const r = 52; const c = 2 * Math.PI * r; const [shown, setShown] = useState(0); useEffect(() => { if (!animate) return; let raf, t0; const dur = 1400; const tick = (t) => { if (!t0) t0 = t; const p = Math.min(1, (t - t0) / dur); const eased = 1 - Math.pow(1 - p, 3); setShown(eased * value); if (p < 1) raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [animate, value]); const offset = c - (shown / 100) * c; return (
{Math.round(shown)}%
{label}
{sub}
); } function Skills({ t }) { const [ref, inView] = useInView(); const trackRef = useRef(null); const [page, setPage] = useState(0); const [pageCount, setPageCount] = useState(1); const items = [ { label: "SQL", value: 95, sub: "T-SQL · Joins · Stored Procedures", icon: Icon.database, color: t.teal }, { label: "Tableau", value: 92, sub: "Dashboards · LOD calcs", icon: Icon.bars, color: "#f97366" }, { label: "Python", value: 84, sub: "pandas · automation", icon: Icon.py, color: "#fbbf24" }, { label: "Excel", value: 90, sub: "Models · Power Query", icon: Icon.excel, color: "#22c55e" }, { label: "Statistics", value: 78, sub: "A/B testing · regression", icon: Icon.brain, color: "#8b5cf6" }, { label: "Power BI", value: 82, sub: "DAX · Data Modeling", icon: Icon.bars, color: "#0ea5e9" }, { label: "SSRS", value: 85, sub: "Paginated Reports · Subscriptions", icon: Icon.chart, color: "#a78bfa" }, { label: "HTML/CSS", value: 88, sub: "Responsive · Flexbox · Grid", icon: Icon.flow, color: "#ec4899" }, { label: "JavaScript", value: 75, sub: "DOM · Fetch · ES6+", icon: Icon.brain, color: "#0d9488" }, { label: "Webflow", value: 82, sub: "Layout · CMS · Interactions", icon: Icon.layers, color: "#f59e0b" }, ]; // Compute pages based on visible cards useEffect(() => { const recalc = () => { const el = trackRef.current; if (!el) return; const card = el.querySelector(".skill"); if (!card) return; const cardW = card.getBoundingClientRect().width + 20; // gap const visible = Math.max(1, Math.round(el.clientWidth / cardW)); setPageCount(Math.max(1, Math.ceil(items.length / visible))); }; recalc(); const ro = new ResizeObserver(recalc); if (trackRef.current) ro.observe(trackRef.current); return () => ro.disconnect(); }, [items.length]); const scrollByDir = (dir) => { const el = trackRef.current; if (!el) return; const card = el.querySelector(".skill"); const cardW = card ? card.getBoundingClientRect().width + 28 : el.clientWidth * 0.85; el.scrollBy({ left: dir * cardW, behavior: "smooth" }); }; const onScroll = () => { const el = trackRef.current; if (!el) return; const p = Math.round((el.scrollLeft / el.scrollWidth) * pageCount); setPage(Math.min(pageCount - 1, p)); }; // Auto-cycle through cards const [paused, setPaused] = useState(false); useEffect(() => { if (paused || !inView) return; const id = setInterval(() => { const el = trackRef.current; if (!el) return; const card = el.querySelector(".skill"); const cardW = card ? card.getBoundingClientRect().width + 28 : 320; const atEnd = el.scrollLeft + el.clientWidth >= el.scrollWidth - 8; if (atEnd) { el.scrollTo({ left: 0, behavior: "smooth" }); } else { el.scrollBy({ left: cardW, behavior: "smooth" }); } }, 3200); return () => clearInterval(id); }, [paused, inView]); return (
The tools I reach for, ranked honestly.} t={t} />
setPaused(true)} onMouseLeave={() => setPaused(false)} onTouchStart={() => setPaused(true)} > {items.map((s) => ( ))}
{Array.from({ length: pageCount }).map((_, i) => (
); } // ── Section: Stats ─────────────────────────────────────────────────────────── function StatCard({ value, suffix, label, icon: I, color, animate }) { const n = useCountUp(value, { start: animate, duration: 1800 }); return (
{n.toLocaleString()}{suffix}
{label}
); } function Stats({ t }) { const [ref, inView] = useInView(); const items = [ { value: 4, suffix: "", label: "Years in analytics", icon: Icon.briefcase, color: t.teal }, { value: 17, suffix: "", label: "Tableau dashboards published", icon: Icon.chart, color: "#fbbf24" }, { value: 348, suffix: "", label: "Books read", icon: Icon.users, color: "#f97366" }, { value: 150, suffix: "+", label: "Queries & reports delivered", icon: Icon.award, color: "#8b5cf6" }, ]; return (
By the numbers
{items.map((s) => ( ))}
); } // ── Section: Portfolio ─────────────────────────────────────────────────────── const TABLEAU_DASHBOARDS = [ { id: 1, name: "SpotifyData_16583152459990/MutiPlot", label: "Spotify · Multi Plot Analysis", cat: "tableau" }, { id: 2, name: "SalesToGeoLocation/SalesbyCity", label: "Sales by City · Geo Analysis", cat: "tableau" }, { id: 4, name: "WorldDemographics_16567800470460/WroldDemorgraphics", label: "World Demographics", cat: "tableau" }, { id: 5, name: "KivaLoans_16596964291920/KivaLoansDashboard", label: "Kiva Loans Dashboard", cat: "tableau" }, ]; const PORTFOLIO_FILTERS = [ { key: "all", label: "All" }, { key: "tableau", label: "Tableau Dashboards" }, { key: "web", label: "Web Projects" }, ]; function TableauCard({ dash, t }) { const src = `https://public.tableau.com/views/${dash.name}?:showVizHome=no&:tabs=no&:toolbar=no`; const publicUrl = `https://public.tableau.com/views/${dash.name}`; return (