balex74/post-hub-platform-k7m2xq9wnp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

portfolio anim

Browse Source
This commit is contained in:
balex
2026-03-27 18:31:56 +01:00
parent 7754bce7af
commit 73f7e8fcd5
1 changed files with 86 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
portfolio-view/src/components/hero/HeroSection.tsx
View File

@@ -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>
)