🐐

script.js

@@ -1,14 +1,55 @@
+// ── Hero typewriter ────────────────────────────────────────────
+function startHeroTypewriter(nameEl, fullName, restEls) {
+  const cursor = document.createElement('span');
+  cursor.className = 'hero-cursor';
+  nameEl.appendChild(cursor);
+
+  let i = 0;
+  function typeNext() {
+    if (i < fullName.length) {
+      nameEl.insertBefore(document.createTextNode(fullName[i]), cursor);
+      i++;
+      setTimeout(typeNext, 95);
+    } else {
+      // Cursor done — fade it out, then reveal the rest
+      cursor.style.transition = 'opacity 0.3s';
+      cursor.style.opacity = '0';
+      setTimeout(() => {
+        cursor.remove();
+        restEls.forEach((el, idx) => {
+          setTimeout(() => el.classList.add('visible'), idx * 110);
+        });
+      }, 0);
+    }
+  }
+  typeNext();
+}
+
 // ── Loader ────────────────────────────────────────────────────
 (function () {
-  const loader = document.getElementById('loader');
-  const pctEl  = document.getElementById('loaderPct');
+  const loader  = document.getElementById('loader');
+  const pctEl   = document.getElementById('loaderPct');
+  const nameEl  = document.querySelector('.hero-name');
+  const restEls = [...document.querySelectorAll('.hero-role, .hero-pronouns, .hero-links, .hero-visual')];
+
+  // Store the name and clear it immediately (loader covers the page anyway)
+  const fullName = nameEl.textContent.trim();
+  nameEl.textContent = '';
+
+  // Hide hero elements that reveal after typing
+  restEls.forEach(el => el.classList.add('fade-up'));
+
   let pct = 0;
   const tick = setInterval(() => {
-    pct += Math.random() * 20;
+    pct += Math.random() * 15;
     if (pct >= 100) {
       pct = 100;
       clearInterval(tick);
-      setTimeout(() => loader.classList.add('hide'), 300);
+      setTimeout(() => {
+        loader.classList.add('hide');
+        // Wait for the loader fade-out (0.6s), then start typing
+        setTimeout(() => startHeroTypewriter(nameEl, fullName, restEls), 600);
+      }, 300);
     }
     pctEl.textContent = Math.floor(pct) + '%';
   }, 110);
@@ -166,7 +207,7 @@
 (function () {
   const targets = document.querySelectorAll(
     '.section-header, .about-grid, .skill-card, .timeline-item, ' +
-    '.project-card, .edu-card, .hero-content, .hero-visual'
+    '.project-card, .edu-card'
   );
   targets.forEach(el => el.classList.add('fade-up'));