My portfolio has moved 👋
I’ve created a new home for my latest work, projects, and case studies.
My portfolio has moved 👋
I’ve created a new home for my latest work, projects, and case studies.
Portfolio
Create a free website with Framer, the website builder loved by startups, designers and agencies.
import { forwardRef, useEffect, createElement, type ComponentType, } from "react" export function withNavScrollSpy(Component: ComponentType): ComponentType { return forwardRef((props: any, ref: any) => { useEffect(() => { const sections = ["home", "projects", "about", "contact"] const getLinks = () => Array.from(document.querySelectorAll("a")).filter((a) => { const label = (a.textContent || "").trim().split("\n")[0] return /^(Home|About|Projects|Contact)$/i.test(label) }) const onScroll = () => { let current = "home" for (const id of sections) { const el = document.getElementById(id) if (!el) continue if (el.getBoundingClientRect().top <= window.innerHeight * 0.35) { current = id } } getLinks().forEach((a) => { const label = (a.textContent || "") .trim() .split("\n")[0] .toLowerCase() a.setAttribute( "data-active", label === current ? "true" : "false" ) }) } onScroll() window.addEventListener("scroll", onScroll, { passive: true }) return () => window.removeEventListener("scroll", onScroll) }, []) return createElement(Component, { ...props, ref }) }) } import { forwardRef, useEffect, createElement, type ComponentType } from "react" export function withNavScrollSpy(Component: ComponentType): ComponentType { return forwardRef((props: any, ref: any) => { useEffect(() => { const sections = ["home", "projects", "about", "contact"] const getLinks = () => Array.from(document.querySelectorAll("a")).filter((a) => { const label = (a.textContent || "").trim().split("\n")[0] return /^(Home|About|Projects|Contact)$/i.test(label) }) const onScroll = () => { let current = "home" for (const id of sections) { const el = document.getElementById(id) if (!el) continue if (el.getBoundingClientRect().top <= window.innerHeight * 0.35) { current = id } } getLinks().forEach((a) => { const label = (a.textContent || "") .trim() .split("\n")[0] .toLowerCase() a.setAttribute( "data-active", label === current ? "true" : "false" ) }) } onScroll() window.addEventListener("scroll", onScroll, { passive: true }) return () => window.removeEventListener("scroll", onScroll) }, []) return createElement(Component as any, { ...props, ref }) }) }