diff --git a/portfolio-view/src/components/hero/HeroSection.tsx b/portfolio-view/src/components/hero/HeroSection.tsx index d3a89b0..6a75c1e 100644 --- a/portfolio-view/src/components/hero/HeroSection.tsx +++ b/portfolio-view/src/components/hero/HeroSection.tsx @@ -1,4 +1,25 @@ +import { useEffect, useState } from 'react' + export function HeroSection() { + const [stage, setStage] = useState(0) + + 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 fadeUp = (active: boolean) => ({ + opacity: active ? 1 : 0, + transform: active ? 'translateY(0)' : 'translateY(16px)', + transition: 'opacity 0.8s ease, transform 0.8s ease', + }) + return (
- {/* Location badge */} -
- - Switzerland, Bern + {/* Location badge — Stage 3 */} +
= 3)}> +
+ + Switzerland, Bern +
- {/* Name */} + {/* Name — animated across 3 stages */}

- Alexander + {/* "b" slides in from the left — Stage 2 */} + = 2 ? 1 : 0, + transform: stage >= 2 ? 'translateX(0)' : 'translateX(-160px)', + transition: 'opacity 1s ease, transform 1s ease', + }} + > + b + + + {/* "Alex" fades in centered — Stage 1 */} + = 1 ? 1 : 0, + transition: 'opacity 0.8s ease', + }} + > + Alex + + + {/* "vic.com" slides in from the right — Stage 2 */} + = 2 ? 1 : 0, + transform: stage >= 2 ? 'translateX(0)' : 'translateX(160px)', + transition: 'opacity 1s ease, transform 1s ease', + }} + > + vic.com +

- {/* Role */} -

- Java / Fullstack Developer -

- - {/* Description */} -

- Building backend systems and intelligent applications with{' '} - Spring Boot,{' '} - React, and{' '} - AI. -

- - {/* CTA buttons */} -
- - - - - Download CV - - - - - - - GitHub - - - - - - - LinkedIn - + {/* Role — Stage 3 */} +
= 3)}> +

+ Java / Fullstack Developer +

- {/* Scroll hint */} -
- SCROLL - - - - + {/* Description — Stage 3 */} +
= 3), transitionDelay: '0.1s' }}> +

+ Building backend systems and intelligent applications with{' '} + Spring Boot,{' '} + React, and{' '} + AI. +

+
+ + {/* CTA buttons — Stage 3 */} +
= 3), transitionDelay: '0.2s' }}> + +
+ + {/* Scroll hint — Stage 3 */} +
= 3), transitionDelay: '0.3s' }}> +
+ SCROLL + + + + +