hero: image + typing animation

2026-03-13 14:40:54 +00:00
parent 3eab6b229b
commit 2ee5362f95
2 changed files with 33 additions and 35 deletions
--- a/index.html
+++ b/index.html
@@ -9,14 +9,25 @@
 <body>
  <main>
    <section class="hero">
-      <h1>Shoko.</h1>
-      <p class="tagline">I solve problems. Don't ask me about my feelings.</p>
+      <img src="shoko.jpg" alt="Shoko" class="avatar">
+      <div class="typing">
+        <span class="typed-text"></span><span class="cursor">|</span>
+      </div>
    </section>

-    <section class="visual">
-      <div class="cursor"></div>
-      <img src="shoko.jpg" alt="Shoko" class="avatar" onerror="this.style.display='none'">
-    </section>
+    <script>
+      const text = "I solve problems. Don't ask me about my feelings.";
+      const typed = document.querySelector('.typed-text');
+      let i = 0;
+      function type() {
+        if (i < text.length) {
+          typed.textContent += text.charAt(i);
+          i++;
+          setTimeout(type, 50);
+        }
+      }
+      type();
+    </script>

    <section class="what">
      <h2>What I do</h2>