diff --git a/portfolio-view/src/components/hero/HeroSection.tsx b/portfolio-view/src/components/hero/HeroSection.tsx index 29bb903..6de665f 100644 --- a/portfolio-view/src/components/hero/HeroSection.tsx +++ b/portfolio-view/src/components/hero/HeroSection.tsx @@ -6,10 +6,13 @@ import { useEffect, useState } from 'react' * +1300ms stage 2 — b/vic.com start sliding in; A→a crossfade begins * +4300ms shift — slides done (~3 s), heading drifts left over 3 s * +7300ms stage 3 — shift done; b/vic.com fade out; a→A; heading drifts back - * +9400ms alexOff — b/vic.com nearly gone (2.1 s); Alex starts fading (2.4 s) - * +11800ms reset — Alex gone; hard-reset b/vic.com positions (transition:none) - * 5 000ms pause - * +16800ms — next stage 1 → CYCLE_GAP = 16 800 ms + * +10800ms end — all stage-3 transitions done (longest: a→A = 3.5 s) + * 5 000ms pause — Alex visible, nothing happening + * +15800ms reset — hard-reset b/vic.com positions (transition:none); Alex stays visible + * +16000ms — next stage 1 → CYCLE_GAP = 16 000 ms + * + * Alex (alexOn) is set to true on first cycle and NEVER turned off — stays visible + * between cycles so there is no fade-out / fade-in between repetitions. * * Content (badge, role, desc, buttons, scroll) fades up once at t=3 s, stays forever. */ @@ -26,15 +29,18 @@ export function HeroSection() { const add = (fn: () => void, ms: number) => timers.push(setTimeout(() => { if (alive) fn() }, ms)) - const CYCLE_GAP = 16800 + // 15 800 ms from stage-1 → hard reset (10 800 end-of-animations + 5 000 pause) + // 16 000 ms from stage-1 → next stage-1 (200 ms after reset to let nameStage=0 settle) + const CYCLE_GAP = 16000 const scheduleCycle = (t1: number) => { - add(() => { setNameStage(1); setAlexOn(true) }, t1) - add(() => setNameStage(2), t1 + 1300) - add(() => setShiftLeft(true), t1 + 4300) - add(() => { setNameStage(3); setShiftLeft(false) }, t1 + 7300) - add(() => setAlexOn(false), t1 + 9400) - add(() => setNameStage(0), t1 + 11800) + add(() => { setNameStage(1); setAlexOn(true) }, t1) // Alex in (or stays visible) + add(() => setNameStage(2), t1 + 1300) // b/vic.com slide in + add(() => setShiftLeft(true), t1 + 4300) // drift left + add(() => { setNameStage(3); setShiftLeft(false) }, t1 + 7300) // fade out + drift back + // +10 800: all transitions done — 5 s pause with Alex visible + add(() => setNameStage(0), t1 + 15800) // instant pos-reset (invisible spans) + // alexOn stays true → Alex remains visible the whole time } scheduleCycle(300) diff --git a/portfolio-view/src/components/layout/Header.tsx b/portfolio-view/src/components/layout/Header.tsx index fc3ec8f..302b2b6 100644 --- a/portfolio-view/src/components/layout/Header.tsx +++ b/portfolio-view/src/components/layout/Header.tsx @@ -38,7 +38,7 @@ export function Header() { - bAlex + bAlex