Fix mobile hero section by disabling typewriter effect on small screens

Author: NotAwar

index.html

@@ -174,6 +174,37 @@ <h3>Connect</h3>
     opacity: 0;
     animation: fade-in 0.4s ease-in 2.6s forwards;
   }
+  
+  /* Mobile: disable typewriter effect for better readability */
+  @media (max-width: 768px) {
+    .typewriter,
+    .typewriter-delay-1 {
+      animation: none !important;
+      width: auto !important;
+      white-space: normal !important;
+      overflow: visible !important;
+      opacity: 1 !important;
+    }
+    
+    .typewriter::after,
+    .typewriter-delay-1::after {
+      display: none !important;
+    }
+    
+    .typewriter-delay-2 {
+      animation: none !important;
+      opacity: 1 !important;
+    }
+    
+    .typewriter-delay-2::after {
+      display: none !important;
+    }
+    
+    .fade-in-after-typing {
+      animation: none !important;
+      opacity: 1 !important;
+    }
+  }
 </style>
 
 <script>