{children}
);
}
function ScaleIn({ children, delay = 0 }) {
const ref = useRef(null);
const inView = useInView(ref);
return (
{children}
);
}
function ProjectCard({ p, i }) {
const [hovered, setHovered] = useState(false);
const ref = useRef(null);
const inView = useInView(ref);
return (
);
}
export default function Portfolio() {
const scrollY = useScrollY();
const vw = useWindowWidth();
const [mousePos, setMousePos] = useState({ x: 0.5, y: 0.5 });
const [menuOpen, setMenuOpen] = useState(false);
const mob = vw < 768;
const tab = vw < 1024;
useEffect(() => {
const h = e => setMousePos({ x: e.clientX / window.innerWidth, y: e.clientY / window.innerHeight });
window.addEventListener(“mousemove”, h);
return () => window.removeEventListener(“mousemove”, h);
}, []);
useEffect(() => { if (menuOpen) document.body.style.overflow = “hidden”; else document.body.style.overflow = “”; }, [menuOpen]);
const scrollTo = id => { document.getElementById(id)?.scrollIntoView({ behavior: “smooth” }); setMenuOpen(false); };
const navBg = scrollY > 60;
const px = mob ? “20px” : “32px”;
const sectionPy = mob ? “80px” : “120px”;
return (
{/* MOBILE MENU OVERLAY */}
{menuOpen && (
Onne
{/* STAT STRIP */}
{/* PROFIEL */}
{/* PROJECTEN */}
{/* SKILLS */}
{/* CONTACT */}
Laten we
{/* FOOTER */}
);
}
{[“profiel”,”projecten”,”skills”,”contact”].map(s => (
))}
)}
{/* NAV */}
{/* HERO */}
Beschikbaar · Remote of Hybride
Onne
Kierkels
Digital Product Builder · Platform Developer
Ik bouw digitale platforms — systemen waarin content, community, automatisering en integraties samenkomen.
Scroll
{[{num:”10+”,label:”Jaar ervaring”},{num:”6″,label:”Live platforms”},{num:”2014″,label:”Gestart”},{num:”∞”,label:”Ideeën → Producten”}].map((s,i) => (
))}
{s.num}
{s.label}
Profiel
Ik bouw platforms,{” “} geen losse websites.
{[
“Sinds 2014 ontwikkel ik als zelfstandig productbouwer platforms voor organisaties en ondernemers. Mijn werk begint bij een idee of probleem en eindigt bij een werkend digitaal product.”,
“Ik werk op het snijvlak van productdenken, platformarchitectuur en implementatie — met WordPress, automatisering en API-integraties als kern.”,
“Mijn achtergrond in Grafisch Vormgeving én Sociaal Pedagogische Hulpverlening zorgt ervoor dat systemen niet alleen werken, maar ook logisch en mooi aanvoelen.”,
“Ik werk graag in kleine productteams waar ideeën snel worden getest en gebouwd. Binnen organisaties die werken met SaaS, digitale platforms en creator tools.”,
].map((t,i) => (
))}
{t}
Projecten
Selectie van werk
{PROJECTS.map((p,i) =>
Skills
Kernvaardigheden
{SKILLS.map((s,i) => (
))}
{s.icon}
{s.cat}
{s.items.map((item,j) => (
{item}
))}
{TECH.map((t,i) => {t})}
Contact
Laten we
kennismaken.
Op zoek naar een Product Builder of Platform Developer? Neem contact op via LinkedIn of e-mail.
{[
{ label: “LinkedIn”, sub: “linkedin.com/in/onnekierkels”, href: “https://www.linkedin.com/in/onnekierkels”, icon: “in”, bg: “#0077b5” },
{ label: “E-mail”, sub: “onne@onlinecursuswebsites.nl”, href: “mailto:onne@onlinecursuswebsites.nl”, icon: “✉”, bg: “#1e1e1e” },
].map((c,i) => (
{ e.currentTarget.style.background=”rgba(255,255,255,0.08)”; e.currentTarget.style.transform=”translateY(-3px)”; }}
onMouseLeave={e => { e.currentTarget.style.background=”rgba(255,255,255,0.04)”; e.currentTarget.style.transform=”none”; }}>
↗
))}
{c.icon}
{c.label}
{c.sub}
