import { useState, useEffect, useRef } from “react”; const PROJECTS = [ { name: “Meditaties voor Kinderen”, slug: “mvk”, role: “Founder · Product Builder”, year: “2018”, desc: “Digitaal platform voor audio-content gericht op kinderen en ouders — van concept tot membership platform met eigen app.”, tags: [“Audio contentbibliotheek”, “Membership”, “Content player”, “App”], url: “https://meditaties-voor-kinderen.nl”, og: “https://meditaties-voor-kinderen.nl/wp-content/uploads/2024/10/MvK-Logo-def-2024_MvK-rechthoekig-300×100.png”, color: “#E8F4F0”, accent: “#2a7d6f”, emoji: “🧘” }, { name: “Excel voor Financials”, slug: “evf”, role: “Platform Builder”, year: “2025”, desc: “Online cursusplatform voor finance professionals om Excel-vaardigheden te verbeteren.”, tags: [“Online cursus”, “Leeromgeving”, “Finance”, “WordPress”], url: “https://excelvoorfinancials.nl”, og: “https://excelvoorfinancials.nl/wp-content/uploads/2024/09/SA-Finance-Logo-def.png”, color: “#E8EEF8”, accent: “#1a4a8a”, emoji: “📊” }, { name: “Stapel van Stenen”, slug: “svs”, role: “Product Builder”, year: “2021”, desc: “Online cursus- en communityplatform in het Nederlands en Engels.”, tags: [“Online cursussen”, “Community”, “Membership”, “NL & EN”], url: “https://stapelvanstenen.nl”, og: null, color: “#EAF0E8”, accent: “#3a6b2a”, emoji: “🪨” }, { name: “Samen Sterke Relaties Bouwen”, slug: “ssrb”, role: “Co-creator · Platform Developer”, year: “2024”, desc: “Content- en communityplatform met podcast, artikelen en geautomatiseerde contentdistributie.”, tags: [“Community”, “Podcast”, “Membership”, “Automatisering”], url: “https://samensterkerelatiesbouwen.nl”, og: null, color: “#F4EEE8”, accent: “#7d5a2a”, emoji: “💬” }, { name: “RelatieHerstelAcademie”, slug: “rha”, role: “Product Builder”, year: “2016”, desc: “Online platform voor coaching en begeleiding, met audio- en videomodules en volledige leeromgeving.”, tags: [“Online platform”, “Video & audio”, “Membershiptoegang”], url: “https://relatieherstelacademie.nl”, og: null, color: “#EEE8F4”, accent: “#5a2a7d”, emoji: “🌿” }, { name: “Online Content Wizard”, slug: “ocw”, role: “Digital Platform Builder”, year: “2024”, desc: “Systemen voor het structureren, publiceren en hergebruiken van content met workflowautomatisering.”, tags: [“Contentarchitectuur”, “Automatisering”, “Integraties”], url: “https://onlinecontentwizard.com”, og: null, color: “#E8EEF4”, accent: “#2a4f7d”, emoji: “⚡” }, ]; const SKILLS = [ { cat: “Productontwikkeling”, icon: “◈”, items: [“Idee → Concept → Werkend Product”, “Platformarchitectuur”, “Membership & community”, “Content structurering”] }, { cat: “Platform & Systemen”, icon: “◎”, items: [“Systeemintegratie”, “Schaalbare structuren”, “Complexe processen vertalen”, “Content + community + auto.”] }, { cat: “Technologie”, icon: “◇”, items: [“WordPress & Plugin Dev”, “REST API & Integraties”, “React Native”, “GitHub · AWS · Make · AI”] }, ]; const TECH = [“WordPress”, “PHP”, “JavaScript”, “React Native”, “REST API”, “GitHub”, “AWS”, “Make”, “AI Tools”]; function useScrollY() { const [y, setY] = useState(0); useEffect(() => { const h = () => setY(window.scrollY); window.addEventListener(“scroll”, h, { passive: true }); return () => window.removeEventListener(“scroll”, h); }, []); return y; } function useWindowWidth() { const [w, setW] = useState(window.innerWidth); useEffect(() => { const h = () => setW(window.innerWidth); window.addEventListener(“resize”, h); return () => window.removeEventListener(“resize”, h); }, []); return w; } function useInView(ref, threshold = 0.12) { const [inView, setInView] = useState(false); useEffect(() => { const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) setInView(true); }, { threshold }); if (ref.current) obs.observe(ref.current); return () => obs.disconnect(); }, []); return inView; } function FadeUp({ children, delay = 0, style = {} }) { const ref = useRef(null); const inView = useInView(ref); return ( ); } function ScaleIn({ children, delay = 0 }) { const ref = useRef(null); const inView = useInView(ref); return ( ); } function ProjectCard({ p, i }) { const [hovered, setHovered] = useState(false); const ref = useRef(null); const inView = useInView(ref); return (