portfolio anim

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)

portfolio-view/src/components/layout/Header.tsx

@@ -38,7 +38,7 @@ export function Header() {
             <path d="M16 5 L25 27" stroke="#22d3ee" strokeWidth="2.5" strokeLinecap="round"/>
             <line x1="10.5" y1="19" x2="21.5" y2="19" stroke="#22d3ee" strokeWidth="2" strokeLinecap="round"/>
           </svg>
-          b<span className="text-accent">A</span>lex
+          <span className="ml-2">b<span className="text-accent">A</span>lex</span>
         </a>
 
         <nav className="hidden md:flex items-center gap-8">