portfolio anim
This commit is contained in:
@@ -1,23 +1,65 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
|
||||
/**
|
||||
* nameStage:
|
||||
* 0 – all hidden, b/vic.com reset to off-screen (transition: none)
|
||||
* 1 – "Alex" fades in, b/vic.com still off-screen
|
||||
* 2 – b slides in from left, vic.com from right; "A" → "a"
|
||||
* 3 – b/vic.com fade out in-place; "a" → "A"
|
||||
*
|
||||
* Cycle: 0→1 (300ms) →2 (1600ms) →3 (4600ms) →0 (7400ms) → repeat every 7600ms
|
||||
* Content (subtitle, buttons, etc.) fades in once at 3000ms and stays.
|
||||
*/
|
||||
|
||||
export function HeroSection() {
|
||||
const [stage, setStage] = useState(0)
|
||||
const [nameStage, setNameStage] = useState(0)
|
||||
const [contentVisible, setContentVisible] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
const t1 = setTimeout(() => setStage(1), 300)
|
||||
const t2 = setTimeout(() => setStage(2), 1600)
|
||||
const t3 = setTimeout(() => setStage(3), 3000)
|
||||
return () => {
|
||||
clearTimeout(t1)
|
||||
clearTimeout(t2)
|
||||
clearTimeout(t3)
|
||||
const timers: ReturnType<typeof setTimeout>[] = []
|
||||
let alive = true
|
||||
const add = (fn: () => void, ms: number) =>
|
||||
timers.push(setTimeout(() => { if (alive) fn() }, ms))
|
||||
|
||||
const CYCLE = 7600
|
||||
|
||||
const scheduleCycle = (offset: number) => {
|
||||
add(() => setNameStage(1), offset + 300)
|
||||
add(() => setNameStage(2), offset + 1600)
|
||||
add(() => setNameStage(3), offset + 4600)
|
||||
add(() => setNameStage(0), offset + 7400)
|
||||
}
|
||||
|
||||
scheduleCycle(0)
|
||||
add(() => setContentVisible(true), 3000)
|
||||
|
||||
for (let i = 1; i <= 40; i++) scheduleCycle(CYCLE * i)
|
||||
|
||||
return () => { alive = false; timers.forEach(clearTimeout) }
|
||||
}, [])
|
||||
|
||||
const fadeUp = (active: boolean) => ({
|
||||
/** Styles for the sliding "b" and "vic.com" spans */
|
||||
const sideStyle = (side: 'left' | 'right'): React.CSSProperties => {
|
||||
const offscreen = side === 'left' ? 'translateX(-110vw)' : 'translateX(110vw)'
|
||||
const reset = nameStage === 0
|
||||
const visible = nameStage === 2
|
||||
const fadingOut = nameStage === 3
|
||||
return {
|
||||
display: 'inline-block',
|
||||
color: '#22d3ee',
|
||||
opacity: visible ? 1 : 0,
|
||||
transform: visible || fadingOut ? 'translateX(0)' : offscreen,
|
||||
transition: reset
|
||||
? 'none'
|
||||
: 'opacity 0.7s ease-out, transform 1s ease-out',
|
||||
}
|
||||
}
|
||||
|
||||
/** Generic fade-up for content blocks */
|
||||
const fadeUp = (active: boolean, delay = '0s'): React.CSSProperties => ({
|
||||
opacity: active ? 1 : 0,
|
||||
transform: active ? 'translateY(0)' : 'translateY(16px)',
|
||||
transition: 'opacity 0.8s ease, transform 0.8s ease',
|
||||
transform: active ? 'translateY(0)' : 'translateY(18px)',
|
||||
transition: `opacity 0.8s ease ${delay}, transform 0.8s ease ${delay}`,
|
||||
})
|
||||
|
||||
return (
|
||||
@@ -39,64 +81,54 @@ export function HeroSection() {
|
||||
<div className="absolute top-1/3 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 rounded-full bg-accent/5 blur-3xl pointer-events-none" />
|
||||
|
||||
<div className="relative z-10 max-w-4xl mx-auto px-6 py-24 text-center">
|
||||
{/* Location badge — Stage 3 */}
|
||||
<div style={fadeUp(stage >= 3)}>
|
||||
|
||||
{/* Location badge */}
|
||||
<div style={fadeUp(contentVisible)}>
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1.5 mb-8 rounded-full border border-zinc-800 bg-zinc-900/60 text-xs text-zinc-400 font-mono tracking-wider">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-accent animate-pulse" />
|
||||
Switzerland, Bern
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Name — animated across 3 stages */}
|
||||
<h1 className="font-heading font-extrabold text-6xl md:text-8xl tracking-tight mb-4 leading-none">
|
||||
{/* "b" slides in from the left — Stage 2 */}
|
||||
<span
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
color: '#22d3ee',
|
||||
opacity: stage >= 2 ? 1 : 0,
|
||||
transform: stage >= 2 ? 'translateX(0)' : 'translateX(-160px)',
|
||||
transition: 'opacity 1s ease, transform 1s ease',
|
||||
}}
|
||||
>
|
||||
b
|
||||
</span>
|
||||
{/* ── Animated heading ── */}
|
||||
<h1
|
||||
className="font-heading font-extrabold mb-4 leading-none"
|
||||
style={{
|
||||
fontSize: 'clamp(3rem, 9.5vw, 7.5rem)',
|
||||
letterSpacing: '-0.02em',
|
||||
whiteSpace: 'nowrap',
|
||||
transform: 'scaleX(0.84)',
|
||||
transformOrigin: 'center center',
|
||||
}}
|
||||
>
|
||||
{/* "b" — slides in from the left */}
|
||||
<span style={sideStyle('left')}>b</span>
|
||||
|
||||
{/* "Alex" fades in centered — Stage 1 */}
|
||||
{/* "Alex" / "alex" — fades in first */}
|
||||
<span
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
color: 'white',
|
||||
opacity: stage >= 1 ? 1 : 0,
|
||||
transition: 'opacity 0.8s ease',
|
||||
opacity: nameStage >= 1 ? 1 : 0,
|
||||
transition: nameStage === 0 ? 'none' : 'opacity 0.8s ease-out',
|
||||
}}
|
||||
>
|
||||
Alex
|
||||
{nameStage === 2 ? 'alex' : 'Alex'}
|
||||
</span>
|
||||
|
||||
{/* "vic.com" slides in from the right — Stage 2 */}
|
||||
<span
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
color: '#22d3ee',
|
||||
opacity: stage >= 2 ? 1 : 0,
|
||||
transform: stage >= 2 ? 'translateX(0)' : 'translateX(160px)',
|
||||
transition: 'opacity 1s ease, transform 1s ease',
|
||||
}}
|
||||
>
|
||||
vic.com
|
||||
</span>
|
||||
{/* "vic.com" — slides in from the right */}
|
||||
<span style={sideStyle('right')}>vic.com</span>
|
||||
</h1>
|
||||
|
||||
{/* Role — Stage 3 */}
|
||||
<div style={fadeUp(stage >= 3)}>
|
||||
{/* Role */}
|
||||
<div style={fadeUp(contentVisible, '0s')}>
|
||||
<p className="font-heading font-medium text-2xl md:text-3xl text-gradient mb-6 tracking-tight">
|
||||
Java / Fullstack Developer
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Description — Stage 3 */}
|
||||
<div style={{ ...fadeUp(stage >= 3), transitionDelay: '0.1s' }}>
|
||||
{/* Description */}
|
||||
<div style={fadeUp(contentVisible, '0.1s')}>
|
||||
<p className="text-zinc-400 text-lg max-w-xl mx-auto mb-10 font-body leading-relaxed">
|
||||
Building backend systems and intelligent applications with{' '}
|
||||
<span className="text-zinc-200 font-mono text-base">Spring Boot</span>,{' '}
|
||||
@@ -105,8 +137,8 @@ export function HeroSection() {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* CTA buttons — Stage 3 */}
|
||||
<div style={{ ...fadeUp(stage >= 3), transitionDelay: '0.2s' }}>
|
||||
{/* CTA buttons */}
|
||||
<div style={fadeUp(contentVisible, '0.2s')}>
|
||||
<div className="flex flex-wrap items-center justify-center gap-4">
|
||||
<a
|
||||
href="/static/cv.pdf"
|
||||
@@ -150,30 +182,17 @@ export function HeroSection() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Scroll hint — Stage 3 */}
|
||||
<div style={{ ...fadeUp(stage >= 3), transitionDelay: '0.3s' }}>
|
||||
{/* Scroll hint */}
|
||||
<div style={fadeUp(contentVisible, '0.3s')}>
|
||||
<div className="mt-16 flex flex-col items-center gap-2 text-zinc-600 text-xs font-mono tracking-widest">
|
||||
<span>SCROLL</span>
|
||||
<svg
|
||||
width="14"
|
||||
height="20"
|
||||
viewBox="0 0 14 20"
|
||||
fill="none"
|
||||
className="animate-bounce"
|
||||
>
|
||||
<rect
|
||||
x="1"
|
||||
y="1"
|
||||
width="12"
|
||||
height="18"
|
||||
rx="6"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
/>
|
||||
<svg width="14" height="20" viewBox="0 0 14 20" fill="none" className="animate-bounce">
|
||||
<rect x="1" y="1" width="12" height="18" rx="6" stroke="currentColor" strokeWidth="1.5" />
|
||||
<circle cx="7" cy="6" r="1.5" fill="currentColor" className="animate-pulse" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user