const { useState, useEffect, useRef } = React; // ─── Dark mode hook ─────────────────────────────────────────────────────────── function useDarkMode() { const [dark, setDark] = useState(() => { const stored = localStorage.getItem("uai-theme"); if (stored) return stored === "dark"; return window.matchMedia("(prefers-color-scheme: dark)").matches; }); useEffect(() => { document.documentElement.setAttribute("data-theme", dark ? "dark" : "light"); localStorage.setItem("uai-theme", dark ? "dark" : "light"); }, [dark]); // Listen for OS preference changes (only if user hasn't explicitly chosen) useEffect(() => { const mq = window.matchMedia("(prefers-color-scheme: dark)"); const handler = (e) => { if (!localStorage.getItem("uai-theme")) setDark(e.matches); }; mq.addEventListener("change", handler); return () => mq.removeEventListener("change", handler); }, []); return [dark, setDark]; } function useReveal(threshold = 0.12) { const ref = useRef(null); const [visible, setVisible] = useState(false); useEffect(() => { const el = ref.current; if (!el) return; const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setVisible(true); obs.disconnect(); } }, { threshold }); obs.observe(el); return () => obs.disconnect(); }, []); return [ref, visible]; } function Reveal({ children, delay = 0, className = "", style = {} }) { const [ref, visible] = useReveal(); return (

{children}

); } // ─── Lucide icons (inline SVG wrappers) ────────────────────────────────────── const icons = { BarChart2: () => ( ), TrendingDown: () => ( ), Settings: () => ( ), Database: () => ( ), Github: () => ( ), Linkedin: () => ( ), Mail: () => ( ), ChevronDown: ({ size = 18 }) => ( ), Menu: () => ( ), X: () => ( ), ArrowUpRight: () => ( ), Terminal: () => ( ), Award: () => ( ), Sun: () => ( ), Moon: () => ( ), BookOpen: () => ( ) }; // ─── NAV ───────────────────────────────────────────────────────────────────── function Nav({ t, lang, setLang, dark, setDark }) { const [scrolled, setScrolled] = useState(false); const [menuOpen, setMenuOpen] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 24); window.addEventListener("scroll", onScroll); return () => window.removeEventListener("scroll", onScroll); }, []); const links = [ { label: t.nav.services, href: "#services" }, { label: t.nav.portfolio, href: "#portfolio" }, { label: t.nav.about, href: "#about" }, { label: t.nav.blog, href: "#blog" }, { label: t.nav.contact, href: "#contact" } ]; const scrollTo = (href) => { setMenuOpen(false); const el = document.querySelector(href); if (el) el.scrollIntoView({ behavior: "smooth" }); }; return ( ); } // ─── DATA NETWORK CANVAS ────────────────────────────────────────────────────── function DataNetworkCanvas({ accent, dark }) { const canvasRef = useRef(null); const animRef = useRef(null); const imgRef = useRef(null); const nodesRef = useRef([]); useEffect(() => { const img = new Image(); img.src = "assets/images/alexis-pic.png"; imgRef.current = img; const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext("2d"); const dpr = window.devicePixelRatio || 1; const LOGICAL = 480; canvas.width = LOGICAL * dpr; canvas.height = LOGICAL * dpr; canvas.style.width = "100%"; canvas.style.maxWidth = LOGICAL + "px"; canvas.style.height = "auto"; ctx.scale(dpr, dpr); const W = LOGICAL; const H = LOGICAL; const cx = W / 2; const cy = H / 2; const portraitR = 88; const exclusionR = portraitR + 24; // Parse accent color to rgb function hexToRgb(hex) { const r = parseInt(hex.slice(1, 3), 16); const g = parseInt(hex.slice(3, 5), 16); const b = parseInt(hex.slice(5, 7), 16); return { r, g, b }; } const rgb = hexToRgb(accent || "#D97706"); // Generate nodes — avoid portrait center const NODE_COUNT = 34; const nodes = []; let attempts = 0; while (nodes.length < NODE_COUNT && attempts < 2000) { attempts++; const x = 28 + Math.random() * (W - 56); const y = 28 + Math.random() * (H - 56); const dx = x - cx, dy = y - cy; if (Math.sqrt(dx * dx + dy * dy) < exclusionR) continue; const bright = Math.random() > 0.72; const size = bright ? 3 + Math.random() * 2.5 : 1.5 + Math.random() * 2; nodes.push({ x, y, vx: (Math.random() - 0.5) * 0.28, vy: (Math.random() - 0.5) * 0.28, size, bright, phase: Math.random() * Math.PI * 2, speed: 0.012 + Math.random() * 0.018, pulseAmp: 0.4 + Math.random() * 0.6 }); } nodesRef.current = nodes; let t = 0; function draw() { t += 1; ctx.clearRect(0, 0, W, H); // Faint radial glow behind portrait const glow = ctx.createRadialGradient(cx, cy, 0, cx, cy, portraitR * 2.2); glow.addColorStop(0, `rgba(${rgb.r},${rgb.g},${rgb.b},0.10)`); glow.addColorStop(1, "rgba(0,0,0,0)"); ctx.fillStyle = glow; ctx.fillRect(0, 0, W, H); // Draw edges for (let i = 0; i < nodes.length; i++) { for (let j = i + 1; j < nodes.length; j++) { const dx = nodes[i].x - nodes[j].x; const dy = nodes[i].y - nodes[j].y; const dist = Math.sqrt(dx * dx + dy * dy); if (dist < 110) { const alpha = (1 - dist / 110) * 0.18; ctx.beginPath(); ctx.strokeStyle = `rgba(${rgb.r},${rgb.g},${rgb.b},${alpha})`; ctx.lineWidth = 1; ctx.moveTo(nodes[i].x, nodes[i].y); ctx.lineTo(nodes[j].x, nodes[j].y); ctx.stroke(); } } } // Lines from nodes to portrait center (brightest nodes only) nodes.forEach(n => { if (!n.bright) return; const dx = cx - n.x, dy = cy - n.y; const dist = Math.sqrt(dx * dx + dy * dy); const alpha = Math.max(0, (1 - dist / 260) * 0.12); ctx.beginPath(); ctx.strokeStyle = `rgba(${rgb.r},${rgb.g},${rgb.b},${alpha})`; ctx.lineWidth = 0.8; ctx.setLineDash([3, 6]); ctx.moveTo(n.x, n.y); // Stop at portrait edge const ux = dx / dist, uy = dy / dist; ctx.lineTo(n.x + ux * (dist - exclusionR), n.y + uy * (dist - exclusionR)); ctx.stroke(); ctx.setLineDash([]); }); // Draw nodes nodes.forEach(n => { const pulse = 1 + Math.sin(n.phase + t * n.speed) * n.pulseAmp * 0.18; const r = n.size * pulse; if (n.bright) { // Glow ring const g2 = ctx.createRadialGradient(n.x, n.y, 0, n.x, n.y, r * 3.5); g2.addColorStop(0, `rgba(${rgb.r},${rgb.g},${rgb.b},0.22)`); g2.addColorStop(1, "rgba(0,0,0,0)"); ctx.fillStyle = g2; ctx.beginPath(); ctx.arc(n.x, n.y, r * 3.5, 0, Math.PI * 2); ctx.fill(); // Core dot ctx.beginPath(); ctx.arc(n.x, n.y, r, 0, Math.PI * 2); ctx.fillStyle = `rgba(${rgb.r},${rgb.g},${rgb.b},0.9)`; ctx.fill(); } else { ctx.beginPath(); ctx.arc(n.x, n.y, r, 0, Math.PI * 2); ctx.fillStyle = `rgba(${rgb.r},${rgb.g},${rgb.b},0.28)`; ctx.fill(); } // Move node n.x += n.vx; n.y += n.vy; // Bounce off walls if (n.x < 20 || n.x > W - 20) n.vx *= -1; if (n.y < 20 || n.y > H - 20) n.vy *= -1; // Repel from portrait const ndx = n.x - cx, ndy = n.y - cy; const nd = Math.sqrt(ndx * ndx + ndy * ndy); if (nd < exclusionR + 8) { n.x = cx + (ndx / nd) * (exclusionR + 8); n.y = cy + (ndy / nd) * (exclusionR + 8); n.vx += (ndx / nd) * 0.3; n.vy += (ndy / nd) * 0.3; } // Speed cap const spd = Math.sqrt(n.vx * n.vx + n.vy * n.vy); if (spd > 0.5) { n.vx = (n.vx / spd) * 0.5; n.vy = (n.vy / spd) * 0.5; } }); // Portrait circle clip ctx.save(); ctx.beginPath(); ctx.arc(cx, cy, portraitR, 0, Math.PI * 2); ctx.clip(); if (imgRef.current && imgRef.current.complete && imgRef.current.naturalWidth > 0) { const iw = imgRef.current.naturalWidth; const ih = imgRef.current.naturalHeight; const scale = (portraitR * 2) / Math.min(iw, ih); const dw = iw * scale, dh = ih * scale; if (dark) ctx.filter = "brightness(0.8) contrast(1.05)"; ctx.drawImage(imgRef.current, cx - dw / 2, cy - dh / 2 - portraitR * 0.08, dw, dh); ctx.filter = "none"; } else { ctx.fillStyle = `rgba(${rgb.r},${rgb.g},${rgb.b},0.15)`; ctx.fillRect(0, 0, W, H); } ctx.restore(); // Portrait ring ctx.beginPath(); ctx.arc(cx, cy, portraitR, 0, Math.PI * 2); ctx.strokeStyle = `rgba(${rgb.r},${rgb.g},${rgb.b},0.55)`; ctx.lineWidth = 2.5; ctx.stroke(); // Outer dashed orbit ring ctx.beginPath(); ctx.arc(cx, cy, portraitR + 18, 0, Math.PI * 2); ctx.strokeStyle = `rgba(${rgb.r},${rgb.g},${rgb.b},0.10)`; ctx.lineWidth = 1; ctx.setLineDash([4, 8]); ctx.stroke(); ctx.setLineDash([]); // Name label under portrait ctx.font = '600 13px "DM Sans", sans-serif'; ctx.textAlign = "center"; ctx.textBaseline = "top"; ctx.fillStyle = `rgba(${rgb.r},${rgb.g},${rgb.b},0.9)`; ctx.fillText("Alexis", cx, cy + portraitR + 24); animRef.current = requestAnimationFrame(draw); } img.onload = () => { }; animRef.current = requestAnimationFrame(draw); return () => cancelAnimationFrame(animRef.current); }, [accent, dark]); return (

{t.hero.headline}

{t.services.title}

{s.title}

{t.portfolio.title}

{p.title}

{t.projects.title}

{t.about.title}

{t.blog.title}

{b.title}

{t.faq.title}