-

index.html

@@ -97,6 +97,10 @@
             letter-spacing: 4px;
             /* Ein leichter Leuchteffekt passend zum Blau */
             text-shadow: 0 0 10px rgba(23, 147, 209, 0.3), 0 0 20px rgba(23, 147, 209, 0.2);
+            min-height: 1.2em; /* Verhindert das Springen des Layouts */
+            display: flex;
+            justify-content: center;
+            align-items: center;
         }
         p { color: #aaa; line-height: 1.6; margin-bottom: 30px; }
 
@@ -128,7 +132,6 @@
         .command { color: #e0e0e0; }
         .cursor {
             display: inline-block; width: 8px; height: 15px; background: #e0e0e0;
-            animation: blink 1s infinite; vertical-align: middle;
         }
         .title-cursor {
             display: inline-block;
@@ -208,7 +211,7 @@
     </div>
     <div class="container">
         
-        <h1>Helios<span class="title-cursor">_</span></h1>
+        <h1><span id="typewriter"></span><span class="title-cursor">_</span></h1>
 
         <div class="terminal">
     <pre>
@@ -248,6 +251,21 @@
 
         <br><br><br>
     </div>
+<script>
+    const text = "Helios";
+    const speed = 150; // Geschwindigkeit in Millisekunden pro Buchstabe
+    let i = 0;
 
+    function typeWriter() {
+        if (i < text.length) {
+            document.getElementById("typewriter").innerHTML += text.charAt(i);
+            i++;
+            setTimeout(typeWriter, speed);
+        }
+    }
+
+    // Startet den Effekt, wenn die Seite geladen ist
+    window.onload = typeWriter;
+</script>
 </body>
 </html>