import { useEffect, useRef } from 'react' import { Link } from 'react-router-dom' import img1 from '../assets/leihengblade.png' import img2 from '../assets/slideshow-img.webp' import img3 from '../assets/screenshot.png' import img4 from '../assets/screenshot2.png' import img5 from '../assets/screenshot3.png' import img6 from '../assets/screenshot4.png' import imgRoot from '../assets/root-img.png' import heroBg from '../assets/hero-bg.png' import img9 from '../assets/root-img2.webp' import img10 from '../assets/root-img3.png' import './Home.css' const slides = [ { src: imgRoot, alt: '', desc: '' }, { src: img9, alt: '', desc: '' }, { src: img10, alt: '', desc: '' }, { src: img1, alt: '', desc: '' }, { src: img2, alt: '', desc: '' }, { src: img3, alt: '', desc: '' }, { src: img4, alt: '', desc: '' }, { src: img5, alt: '', desc: '' }, { src: img6, alt: '', desc: '' }, ] function Home() { const ref = useRef(null) useEffect(() => { const el = ref.current if (!el) return let target = 1 let mult = 1 let last = performance.now() const stride = 524 const baseSpeed = stride / 2000 let pos = 0 let id const onEnter = () => { target = 0 } const onLeave = () => { target = 1 } el.addEventListener('mouseenter', onEnter) el.addEventListener('mouseleave', onLeave) function frame(now) { const dt = Math.min(now - last, 100) last = now mult += (target - mult) * Math.min(dt * 0.004, 1) pos += dt * baseSpeed * mult if (pos >= stride) { pos -= stride el.appendChild(el.children[0]) } el.style.transform = `translateX(-${pos}px)` id = requestAnimationFrame(frame) } id = requestAnimationFrame(frame) return () => { cancelAnimationFrame(id) el.removeEventListener('mouseenter', onEnter) el.removeEventListener('mouseleave', onLeave) } }, []) return ( <>

Welcome to my Portfolio

About Projects Contact

{slides.map((s, i) => (

{s.desc}

))}

Foreword

Welcome to my portfolio!

I build things from game engines to operatings systems to simple little websites. I believe that following a whim is the best way to branch out.

Feel free to explore, drop a message, or just say hi.
- Cody Huang

Links

LinkedIn GitHub Gitea

) } export default Home