// portfolio.jsx — main app for Lin Nora's UX portfolio const { useState, useEffect, useRef, useMemo, useCallback, useLayoutEffect } = React; // ──────────────────────────────────────────────────────────────────────────── // DATA // ──────────────────────────────────────────────────────────────────────────── const ROTATOR_WORDS = ["Interaction", "Strategic", "Product", "Innovative", "Human-Centered", "AI", "System-Oriented", "Multidisciplinary"]; const SECTIONS = [ { id: "ux", label: "UX Design", projects: [ { num: "01", title: "Atlas", line: "An AI agent that automates repetitive fault-ticket decisions inside Telenor's broadband support workflow.", collab: "Telenor", year: "2026", tags: ["AI/LLM Evaluation", "Decision Logic Design", "Applied AI"], href: "atlas.html", cardVideo: "assets/atlas/project-card-video.mov" }, { num: "02", title: "Volunteering, my way", line: "Redefining how young people connect with volunteering.", collab: "Red Cross", year: "2024", tags: ["Interaction and Service Design"], href: "volunteering.html", cardVideo: "assets/volunteering/project-card-video.mov" }, { num: "03", title: "Mixed Signals", line: "How the lack of information integrity influences the Armenian people and their democratic process.", collab: "UNDP", year: "2025", tags: ["Systems Oriented Design"], href: "armenia.html", cardImg: "assets/armenia/slides/mixed-signals.svg" }, { num: "04", title: "Everyday Innovation", line: "Helping a public hospital find the innovation that was already happening, and the language to see it.", collab: "Rigshospitalet", year: "2026", tags: ["Process Consultancy", "UX Strategy"], href: "everyday-innovation.html", cardVideo: "assets/everyday-innovation/project-card-video.mov" }, { num: "05", title: "More Than a Trip", line: "Exploring how to motivate eco-conscious travel through personal incentives.", collab: "Entur", year: "2024", tags: ["Service Design", "UX Design"], href: "project.html", cardVideo: "assets/project/project-card-video.mov" }, { num: "06", title: "Tøyen Takt", line: "Turning a building without an identity into a neighbourhood's reason to come back.", collab: "AHO", year: "2023", tags: ["Service Design", "UX Design"], href: "toyen-takt.html", cardVideo: "assets/toyen-takt/project-card-video.mov" }, { num: "07", title: "EVA: Emotional Vehicle Assistant", line: "Designing AI for human-centered mobility.", collab: "HUF", year: "2025", tags: ["Interaction Design", "AI Design"], href: "eva.html", cardVideo: "assets/eva/project-card-video.mov", cardLogo: "assets/eva/huf-logo-card.svg" }, { num: "08", title: "Worth it?", line: "Data as a design material for digital services.", collab: "Æra", year: "2023", tags: ["UI Design", "Design Systems"], href: "worth-it.html", cardVideo: "assets/worth-it/project-card-video.mov" }, ], }, { id: "hacks", label: "Hackathons", projects: [ { num: "01", title: "Stackt", line: "A gamified financial literacy app that teaches 17–21 year olds how to think about money, not just what to know about it.", collab: "Work in Fintech", year: "2026", tags: ["Product Design", "UX Design", "FinTech"], href: "stackt.html", cardVideo: "assets/stackt/project-card.mov" }, { num: "02", title: "Togather", line: "Relationship-first calendar.", collab: "Royal Hacks", year: "2026", tags: ["UX Design", "Product Design"], href: "togather.html", cardVideo: "assets/togather/project-card-video.mov" }, { num: "03", title: "Carbon", line: "A regulator-supervised on-chain exchange for EU compliance carbon credits.", collab: "ETH Prague", year: "2026", tags: ["UX Design", "Web3"], href: "carbon-dex.html", cardImg: "assets/carbon-dex/card.svg", cardLattice: true }, { num: "04", title: "Ankr", line: "An AI mentor app that helps Danish gymnasium students figure out what to study, and stay on track once they do.", collab: "TechLabs Copenhagen", year: "2026", tags: ["UX/UI Design", "Product Design", "Ed-tech"], href: "ankr.html", cardVideo: "assets/ankr/project-card-video.mov" }, { num: "05", title: "Teddy", line: "Step-by-step travel companion helping neurodivergent travelers navigate overwhelming journeys.", collab: "Disability Tech", year: "2026", tags: ["UX Design", "Inclusive Design"], href: "teddy.html", cardImg: "assets/teddy/project-card.svg", cardImgZoom: 1.3 }, { num: "06", title: "Local", line: "Helping global marketing teams adapt campaigns across markets: AI that supports rather than replaces.", collab: "CBS AI Academy", year: "2026", tags: ["AI Product Design", "UX Design"], href: "local.html", cardVideo: "assets/local/project-card-video.mov" }, ], }, ]; const SKILLS = [ { group: "i", label: "I-shaped", items: ["UX Research (qual + quant)", "Interaction Design", "Design Systems", "Information Architecture", "Digital Prototyping (Figma)", "WCAG / Accessibility", "Drawing"] }, { group: "t", label: "T-shaped", items: ["Design Thinking", "Co-creation", "Workshop Facilitation", "Interdisciplinary Collaboration", "Teaching Design", "Project Management"] }, { group: "pi", label: "Pi-shaped", items: ["Agentic & AI System Design", "System-Oriented / Service Design", "Future Scenario Building", "Product-Service System Design", "Strategic Storytelling"] }, { group: "tools", label: "Programs", items: ["Figma", "Adobe", "Miro", "Notion", "Excel", "Cursor", "Claude Code", "Lovable"] }, ]; // ──────────────────────────────────────────────────────────────────────────── // CUSTOM CURSOR — follower + magnetic + project-hover "See project" pill // ──────────────────────────────────────────────────────────────────────────── function Cursor({ mode, label }) { const dotRef = useRef(null); const ringRef = useRef(null); const target = useRef({ x: -100, y: -100 }); const ring = useRef({ x: -100, y: -100 }); useEffect(() => { const onMove = (e) => { target.current.x = e.clientX; target.current.y = e.clientY; }; window.addEventListener("mousemove", onMove); let raf; const tick = () => { ring.current.x += (target.current.x - ring.current.x) * 0.18; ring.current.y += (target.current.y - ring.current.y) * 0.18; if (dotRef.current) { dotRef.current.style.transform = `translate3d(${target.current.x}px, ${target.current.y}px, 0)`; } if (ringRef.current) { ringRef.current.style.transform = `translate3d(${ring.current.x}px, ${ring.current.y}px, 0)`; } raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => { window.removeEventListener("mousemove", onMove); cancelAnimationFrame(raf); }; }, []); const isProject = mode === "project"; const isLink = mode === "link"; return ( <>
{isProject && ( {label || "See project"} → )}
); } // ──────────────────────────────────────────────────────────────────────────── // MAGNETIC button — subtle pull toward cursor // ──────────────────────────────────────────────────────────────────────────── function Magnetic({ children, strength = 0.35, className, style, onMouseEnter, onMouseLeave, ...rest }) { const ref = useRef(null); useEffect(() => { const el = ref.current; if (!el) return; const move = (e) => { const r = el.getBoundingClientRect(); const x = e.clientX - (r.left + r.width / 2); const y = e.clientY - (r.top + r.height / 2); el.style.transform = `translate(${x * strength}px, ${y * strength}px)`; }; const leave = () => { el.style.transform = "translate(0,0)"; }; el.addEventListener("mousemove", move); el.addEventListener("mouseleave", leave); return () => { el.removeEventListener("mousemove", move); el.removeEventListener("mouseleave", leave); }; }, [strength]); return ( {children} ); } // ──────────────────────────────────────────────────────────────────────────── // TYPEWRITER ROTATOR // ──────────────────────────────────────────────────────────────────────────── function Typewriter({ words }) { const [idx, setIdx] = useState(0); const [text, setText] = useState(""); const [phase, setPhase] = useState("typing"); // typing | hold | deleting useEffect(() => { const word = words[idx]; let t; if (phase === "typing") { if (text.length < word.length) { t = setTimeout(() => setText(word.slice(0, text.length + 1)), 70 + Math.random() * 40); } else { t = setTimeout(() => setPhase("hold"), 1400); } } else if (phase === "hold") { t = setTimeout(() => setPhase("deleting"), 600); } else { if (text.length > 0) { t = setTimeout(() => setText(word.slice(0, text.length - 1)), 35); } else { setPhase("typing"); setIdx((i) => (i + 1) % words.length); } } return () => clearTimeout(t); }, [text, phase, idx, words]); return ( {text} ); } // ──────────────────────────────────────────────────────────────────────────── // RESPONSIVE HELPERS // ──────────────────────────────────────────────────────────────────────────── // true once viewport width is at or below the breakpoint used to switch // hover-only interactions to tap-driven ones and to disable the custom cursor function useIsMobile(breakpoint = 768) { const [isMobile, setIsMobile] = useState( () => typeof window !== "undefined" && window.innerWidth <= breakpoint ); useEffect(() => { const mq = window.matchMedia(`(max-width: ${breakpoint}px)`); const onChange = () => setIsMobile(mq.matches); onChange(); mq.addEventListener("change", onChange); return () => mq.removeEventListener("change", onChange); }, [breakpoint]); return isMobile; } // scroll-reveal fade + rise once, the first time an element enters the viewport const REVEAL_TRANSITION = "opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1)"; function useReveal(threshold = 0.2) { const ref = useRef(null); const [visible, setVisible] = useState(false); useEffect(() => { const el = ref.current; if (!el) return; const io = new IntersectionObserver(([entry]) => { if (entry.isIntersecting) { setVisible(true); io.unobserve(el); } }, { threshold }); io.observe(el); return () => io.disconnect(); }, [threshold]); return [ref, visible]; } function revealStyle(visible, delayMs = 0) { return { opacity: visible ? 1 : 0, transform: visible ? "translateY(0)" : "translateY(24px)", transition: REVEAL_TRANSITION, transitionDelay: delayMs ? `${delayMs}ms` : undefined, }; } // keyframes injected once const KEYFRAMES = ` @keyframes blink { 0%,49%{opacity:1} 50%,100%{opacity:0} } @keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} } @keyframes cardEnter { from { transform: scale(0.88) translateY(20px); opacity: 0; } to { transform: scale(1) translateY(0px); opacity: 1; } } /* .rise intentionally a no-op in canvas mode — animations stutter inside the pan/zoom transform context */ .rise { opacity: 1; } .dots-bg { background-image: radial-gradient(circle, var(--dashed) 1px, transparent 1px); background-size: 14px 14px; } .process-step + .process-step { border-top: 1px solid var(--line-soft); padding-top: 40px; margin-top: 8px; } `; // ──────────────────────────────────────────────────────────────────────────── // MEDIA STACK — shared across all project pages // Every image/video for a step is laid out full-width in a vertical sequence, // at its own natural aspect ratio, so the whole step is visible by scrolling // rather than clicking through a carousel. Small numbered captions, editorial // magazine style. // ──────────────────────────────────────────────────────────────────────────── function MediaStack({ items, featured }) { const isMobile = useIsMobile(); const CHECKER = "repeating-conic-gradient(#E6E3DC 0deg 90deg, #F0EEE8 90deg 180deg) 0 0 / 20px 20px"; if (!items || items.length === 0) return
; // opt-in layout for exactly 3 items: first image runs full-width on top, // the other two sit side by side underneath if (!isMobile && featured && items.length === 3) { return (
); } // a lone image next to a long paragraph used to leave dead space below it — // reserve room and center it instead, still at its own natural ratio if (!isMobile && items.length === 1) { return ( ); } // exactly two items: stacked instead of side-by-side, so each image stays // legible (e.g. diagrams with fine print) — slightly narrower than full // width so they don't dominate the row if (!isMobile && items.length === 2) { return (
{items.map((src, i) => ( ))}
); } // three or more items: bound the stack to a 2-col grid on desktop so a step // with many assets doesn't tower over its neighbors (odd count spans the // last item). Same dead-space fix as the single-item case: reserve room and // center the grid vertically when it's shorter than the text column beside it. if (!isMobile && items.length > 2) { return (
{items.map((src, i) => { const isLastOdd = items.length % 2 === 1 && i === items.length - 1; return ( ); })}
); } return (
{items.map((src, i) => ( ))}
); } // one image/video within a MediaStack fades + rises in on its own as it // scrolls into view, giving the stack a light staggered feel function StackItem({ src, index, total, style }) { const [ref, visible] = useReveal(0.1); const isVideo = /\.(mov|mp4|webm)$/i.test(src); const pad2 = (n) => String(n).padStart(2, "0"); return (
{isVideo ?
{total > 1 && (

({pad2(index + 1)} / {pad2(total)})

)}
); } // ──────────────────────────────────────────────────────────────────────────── // SECTION NAV — shared sidebar/pill nav for project pages; highlights the // section currently in view as the user scrolls (scroll-spy) // ──────────────────────────────────────────────────────────────────────────── function SectionNav() { const isMobile = useIsMobile(); const [active, setActive] = React.useState("overview"); const [progress, setProgress] = React.useState(0); const links = [ ["overview", "TLTR"], ["role", "My role"], ["process", "Design process"], ["outcome", "Outcome"] ]; // discrete active-section highlight React.useEffect(() => { const watchIds = ["overview", "role", "process", "outcome"]; const sections = watchIds.map((id) => document.getElementById(id)).filter(Boolean); if (!sections.length) return; const io = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { setActive(entry.target.id); } }); }, { rootMargin: "-15% 0px -70% 0px", threshold: 0 }); sections.forEach((s) => io.observe(s)); return () => io.disconnect(); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); // continuous reading progress across the overview → outcome range — drives // the mobile horizontal progress bar (desktop's floating nav doesn't need it) React.useEffect(() => { const first = document.getElementById(links[0][0]); const last = document.getElementById(links[links.length - 1][0]); if (!first || !last) return; let raf = null; const update = () => { const firstTop = first.getBoundingClientRect().top + window.scrollY; const lastBottom = last.getBoundingClientRect().bottom + window.scrollY; const total = Math.max(1, lastBottom - firstTop); const anchor = window.scrollY + window.innerHeight * 0.3; setProgress(Math.min(1, Math.max(0, (anchor - firstTop) / total))); raf = null; }; const onScroll = () => { if (raf == null) raf = requestAnimationFrame(update); }; update(); window.addEventListener("scroll", onScroll, { passive: true }); window.addEventListener("resize", onScroll); return () => { window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); if (raf) cancelAnimationFrame(raf); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, []); const linkStyle = (isActive) => ({ color: isActive ? "var(--ink)" : "var(--muted)", textDecoration: "none", fontFamily: "'Hanken Grotesk', sans-serif", fontSize: 13, letterSpacing: "-0.005em", fontWeight: isActive ? 500 : 400, transition: "color .3s, font-weight .3s" }); if (isMobile) { return ( ); } // desktop: a small, subtle floating glass pill bar centered at the top of // the viewport — the active section stays slightly larger/darker, the rest // recede, so it reads as a quiet jump-to-section control rather than a UI block return ( ); } // ──────────────────────────────────────────────────────────────────────────── // PROCESS STEP — shared design-process step block for project pages; fades + // rises into view as the user scrolls to it. Handles both single- and // multi-paragraph bodies, and any of the items/photos/videos data shapes. // ──────────────────────────────────────────────────────────────────────────── function ProcessStep({ step }) { const isMobile = useIsMobile(); const [ref, visible] = useReveal(0.15); const items = step.items || step.photos || step.videos || null; const paragraphs = (step.body || "").split("\n\n"); const pad2 = (n) => String(n).padStart(2, "0"); return (
Step {pad2(step.num)}

{step.title}

{paragraphs.map((para, i) => (

{para}

))}
); } // ──────────────────────────────────────────────────────────────────────────── // CARBON LATTICE — graphene-lattice Three.js visual, ported from the Carbon // product site's carbon-lattice.js. Bounded to its own container (rather than // the viewport), waits for a "carbon-three-ready" event fired by a //