134 lines
10 KiB
React
134 lines
10 KiB
React
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 (
|
|
<>
|
|
<section className="hero" style={{ backgroundImage: `url(${heroBg})` }}>
|
|
<div className="container">
|
|
<h1>
|
|
Welcome to my <span className="gradient-text">Portfolio</span>
|
|
</h1>
|
|
<div className="hero-links">
|
|
<Link to="/about" className="hero-link">About</Link>
|
|
<Link to="/projects" className="hero-link">Projects</Link>
|
|
<Link to="/contact" className="hero-link">Contact</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="slideshow-section">
|
|
<div className="slideshow-track">
|
|
<div ref={ref} className="slideshow-strip">
|
|
{slides.map((s, i) => (
|
|
<div key={i} className="slideshow-slide">
|
|
<img src={s.src} alt={s.alt} className="slideshow-img" />
|
|
<p className="slide-desc">{s.desc}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="foreword-section">
|
|
<div className="container">
|
|
<h2 className="foreword-heading">Foreword</h2>
|
|
<p className="foreword-text">
|
|
Welcome to my portfolio!<br /><br />
|
|
|
|
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.<br />
|
|
<br />
|
|
Feel free to explore, drop a message, or just say hi.<br />
|
|
- Cody Huang
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="links-section">
|
|
<div className="container">
|
|
<h2 className="links-heading">Links</h2>
|
|
<div className="links-bar">
|
|
<a href="https://www.linkedin.com/in/codyy-huang/" target="_blank" rel="noreferrer">
|
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="#0a66c2"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
|
|
LinkedIn
|
|
</a>
|
|
<a href="https://github.com/johnruina" target="_blank" rel="noreferrer">
|
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="#333"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
|
|
GitHub
|
|
</a>
|
|
<a href="https://git.johnruina.xyz/johnruina" target="_blank" rel="noreferrer">
|
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="#609926"><path d="M4.83 2.06c-.36.08-.68.39-.76.76-.05.22-.05 18.12 0 18.34.08.37.39.67.76.75.22.05 14.12.05 14.34 0 .37-.08.67-.38.75-.75.05-.22.05-18.12 0-18.34-.08-.37-.39-.67-.76-.75-.22-.05-14.17-.06-14.33 0zm14.14 1.17c.14.14.15.3.03.44-.07.09-.1.09-7.38.09s-7.31 0-7.38-.09c-.12-.14-.11-.3.03-.44.1-.1.16-.11 7.35-.11s7.25.01 7.35.11zM4.6 6.69c.06-.16.19-.29.35-.35.23-.09 14.02-.09 14.25 0 .16.06.29.19.35.35.09.23.09 5.29 0 5.52-.06.16-.19.29-.35.35-.23.09-14.02.09-14.25 0-.3-.12-.43-.41-.35-.73.02-.07.05-1.84.08-3.95l.04-3.82.07-.15.09-.14V6.3c.03.23.04.37.1.35.05-.02.08-.11.08-.24l.04-3.78.09-.14.07-.15h13.74l.07.15.09.14.04 3.78c0 .13.03.22.08.24.06.02.07-.12.1-.35l.04-3.82.08 3.95c.07 2.11.1 3.88.08 3.95-.08.32-.06.61.06.73.12.13.37.16.66.09.16-.06.29-.19.35-.35.09-.23.09-5.29 0-5.52-.06-.16-.19-.29-.35-.35-.08-.03-.71-.06-1.96-.07l-1.83-.02V2.68l-.09-.14-.07-.15H4.99l-.07.15-.09.14v2.15l-1.83.02c-1.25.01-1.88.04-1.96.07-.16.06-.29.19-.35.35-.09.23-.09 5.29 0 5.52.06.16.19.29.35.35.05.02.19.04.3.04.39 0 .6-.28.6-.78l.01-.58c.01-.35.04-.5.1-.53.06-.02.08.08.08.3 0 .22.02.32.06.32.04 0 .06-.1.06-.32 0-.22.02-.32.06-.32.04 0 .06.1.06.32s.03.33.07.33c.05 0 .07-.16.07-.45l.04-.56.04-.09h-.08c-.02 0-.04 2.45-.04 5.45v5.45h-1.06l-.07.15-.09.14v2.52l.09.14.07.15h14.02l.07-.15.09-.14v-2.52l-.09-.14-.07-.15h-1.06v-5.45c0-3.56-.02-5.45-.07-5.46l-.08-.02-.04.08.04.1v5.75h.18v4.09H6.64l-.08.15-.09.14v1.52l.09.14.08.15h11.4l.08-.15.09-.14v-1.52l-.09-.14-.08-.15H12.9v-4.09h.18V7.9l.07.15.06.14.01 5.29c.01 3.07.02 4.08.06 4.09v.18H6.62v-4.09h.18V8.65c0-2.34-.02-3.38-.06-3.39l-.06-.01-.09.14-.08.15h-.22l.04-.1.03-.11v-.01s.04-.03.06-.07c.03-.04.07-.09.07-.11 0-.02.02-.06.04-.08.04-.05.07-.08.08-.08 0 0 .02-.02.04-.04l.06-.06.04-.04.04-.04.04-.06s.01-.04.02-.08c.01-.04.03-.08.03-.1 0-.03.02-.06.02-.09 0-.03.02-.06.02-.09l.02-.07v-.06l.01-.05c0-.02.01-.04.01-.06v-.12c0-.04-.01-.06-.02-.07l-.03-.13c-.02-.04-.03-.08-.05-.11-.02-.03-.05-.07-.08-.11-.04-.04-.07-.07-.1-.1-.04-.03-.09-.06-.15-.09-.06-.03-.1-.05-.14-.06-.04-.01-.1-.03-.17-.04-.07-.01-.12-.02-.17-.02-.05 0-.1.01-.17.02-.07.01-.13.03-.17.04-.04.01-.08.03-.14.06-.06.03-.11.06-.15.09-.03.03-.06.06-.1.1-.03.04-.06.08-.08.11-.02.03-.03.07-.05.11-.02.04-.03.08-.03.13-.01.01-.02.03-.02.07v.12l-.01.05c0 .02-.01.04-.01.06 0 .02-.01.04-.01.05v.06l-.02.07c0 .03-.02.06-.02.09 0 .03-.02.06-.02.09 0 .02-.02.06-.03.1-.01.04-.02.08-.02.08l-.04.06-.04.04-.04.04-.04.04-.06.06s-.02.02-.04.04c-.01 0-.04.04-.08.08-.02.02-.04.06-.04.08 0 .02-.04.07-.07.11-.02.04-.06.07-.06.07l-.03.11-.04.1h-.22l.08-.15.09-.14.01-5.29c0-4.23.01-5.36.06-5.44.04-.08.11-.15.18-.19.04-.02.14-.04.35-.04l.29-.01V2.66l.07-.15.09-.14H4.99l.09.14.07.15.01 2.15-1.45.02c-.99.02-1.59.06-1.8.12-.23.07-.4.18-.53.34-.09.1-.15.19-.2.31zm.01.56v3.89H4.3v4.09h.38l-.01 4.08-.13.01v-4.09H4.3v-4.09h.31V7.25zm14.96 0v3.89h.31v4.09h-.31v4.09h-.08l-.01-4.08h.02l.01-4.09h-.31l.01-3.89c.05 0 .1-.01.1-.01s.11.0 0 0c.06 0 .13.0.27.01V7.25zm-14.83.31c.04 0 .06.11.07.39s.04.41.07.46c.04.06.07.05.1-.02.03-.09.05-.72.04-1.28l-.01-.48h-.33c-.18 0-.32.02-.32.04 0 .03.02.27.04.55.02.28.04.38.06.37.01 0 .04-.03.08-.05.04-.02.08-.04.1-.04.01.01.04.01.07 0 .04-.01.05-.01.04.02-.01.02-.02.02-.05.02-.09.01-.14.02-.22.06-.08.04-.12.07-.08.07.03 0 .12-.03.21-.06.09-.03.15-.04.15-.02 0 .01-.06.06-.13.1-.07.04-.12.09-.12.1.0 0 .1 0 .22-.05.16-.06.19-.07.18-.01-.02.05-.07.08-.23.14-.07.02-.08.04-.02.04.1 0 .2-.04.2-.08.0-.02.02-.02.04 0 .04.03.03.07-.02.13-.04.04-.09.07-.12.07-.04 0-.09.08-.13.18-.03.1-.08.19-.1.21-.02.01.01.03.07.04.08.01.12.06.12.14 0 .06-.04.13-.09.16-.05.03-.08.08-.07.11.02.02.08 0 .14-.07.11-.12.12-.12.12.01 0 .09-.02.14-.07.2-.04.05-.08.11-.08.14 0 .02.05.04.12.04.09 0 .12-.03.16-.13.03-.08.07-.14.08-.14.02 0 .04.04.04.1 0 .11-.02.14-.12.24-.07.07-.08.1-.03.1.09 0 .17-.07.17-.16v-.07l.06-.03c.05-.02.09-.01.09.02 0 .03-.06.11-.13.18-.1.1-.12.15-.07.15.04 0 .13-.07.19-.15.07-.08.13-.13.15-.1.01.02-.01.08-.05.12-.04.05-.07.12-.07.17 0 .04.02.06.04.04.03-.02.08-.08.12-.14.04-.06.1-.11.14-.11.03 0 .06.03.06.06 0 .08-.12.2-.2.21-.05 0-.06.02-.02.04.1.05.22-.02.22-.13v-.06l.07-.01c.05-.01.08.01.08.04 0 .08-.11.2-.2.23-.06.02-.06.03-.01.05.11.04.21-.02.21-.13 0-.05.02-.06.05-.04.03.02.05.08.05.15-.01.12-.03.15-.13.19-.06.03-.09.06-.06.08.04.02.13 0 .21-.05zM6.18 6.4c.02 0 .04.14.04.3v.3h-.15V6.4h.11zm3.82.07l.04.25h-.12c-.07 0-.12.03-.12.06 0 .04.04.05.13.05.1 0 .12.02.09.06-.04.04-.13.04-.24.01-.1-.03-.15-.02-.15.03 0 .04.04.06.13.06.14 0 .19.06.13.17-.04.08-.05.08-.11.01-.06-.06-.08-.07-.12-.02-.05.06-.05.08.0.13.04.04.02.09-.03.15-.05.05-.1.09-.1.09 0-.01.01-.08.02-.16l.04-.16c.02-.05.01-.09-.03-.09-.04 0-.05.04-.04.15.01.08 0 .15-.02.15-.02 0-.04-.04-.04-.09 0-.06-.03-.11-.06-.12-.04-.01-.06.04-.06.15s-.03.18-.07.18c-.04 0-.05-.08-.03-.22l.03-.23c.01 0 .01.06.01.12s.02.11.03.09c.02-.02.02-.1 0-.18-.02-.1-.01-.14.03-.14.04 0 .05-.04.03-.12-.02-.09-.01-.13.05-.16.05-.02.07-.01.06.02z"/></svg>
|
|
Gitea
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default Home
|