The animated code text is a bit broken, i mean the indentation is broken, fix it. Also the switch button works but the UI is a bit broken, the bullet wont go the other side while switching theme

index.html

@@ -93,8 +93,8 @@
           <button id="theme-toggle" class="group relative p-1 rounded-full border border-white/10 bg-white/5 hover:bg-white/10 transition-all duration-300 hover:border-white/20" aria-label="Toggle theme">
             <div class="relative w-11 h-6 bg-white/10 rounded-full transition-all duration-300 group-hover:bg-white/20">
               <div id="theme-toggle-knob" class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full shadow-lg transition-all duration-300 transform group-hover:scale-105">
-                <i id="theme-icon-moon" data-feather="moon" class="absolute inset-0 w-3 h-3 m-1 text-zinc-600 transition-all duration-300 opacity-100 rotate-0"></i>
-                <i id="theme-icon-sun" data-feather="sun" class="absolute inset-0 w-3 h-3 m-1 text-yellow-500 transition-all duration-300 opacity-0 -rotate-90"></i>
+                <i data-feather="moon" class="absolute inset-0 w-3 h-3 m-1 text-zinc-600 transition-all duration-300 opacity-100 rotate-0"></i>
+                <i data-feather="sun" class="absolute inset-0 w-3 h-3 m-1 text-yellow-500 transition-all duration-300 opacity-0 -rotate-90"></i>
               </div>
             </div>
             <div class="absolute inset-0 bg-gradient-to-r from-indigo-500/10 via-purple-500/10 to-emerald-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-full"></div>
@@ -187,36 +187,34 @@
                   </div>
                 </div>
                 <div class="mt-6 rounded-xl bg-black/50 text-zinc-300 p-4 overflow-x-auto text-sm leading-relaxed font-mono relative min-h-[140px]">
-                  <div id="typing-code"></div>
-                  <div class="typing-cursor"></div>
-                </div>
-                <div class="mt-6 grid grid-cols-3 gap-3 text-center">
-                  <div class="rounded-xl bg-white/5 border border-white/10 p-3">
-                    <div class="text-2xl font-extrabold text-zinc-100">5+ yrs</div>
-                    <div class="text-xs text-zinc-400">Experience</div>
-                  </div>
-                  <div class="rounded-xl bg-white/5 border border-white/10 p-3">
-                    <div class="text-2xl font-extrabold text-zinc-100">40+</div>
-                    <div class="text-xs text-zinc-400">Projects</div>
-                  </div>
-                  <div class="rounded-xl bg-white/5 border border-white/10 p-3">
-                    <div class="text-2xl font-extrabold text-zinc-100">100ms</div>
-                    <div class="text-xs text-zinc-400">TTI target</div>
-                  </div>
-                </div>
+              <div id="typing-code"></div>
+              <div class="typing-cursor"></div>
+            </div>
+            <div class="mt-6 grid grid-cols-3 gap-3 text-center">
+              <div class="rounded-xl bg-white/5 border border-white/10 p-3">
+                <div class="text-2xl font-extrabold text-zinc-100">5+ yrs</div>
+                <div class="text-xs text-zinc-400">Experience</div>
               </div>
-<!-- Floating card -->
-              <div class="absolute -right-6 -bottom-6 hidden lg:block">
-                <div class="glass-card rounded-2xl border border-white/10 bg-[color:rgb(var(--bg)_/_0.75)] p-4 shadow-soft">
-                  <div class="flex items-center gap-3">
-                    <span class="h-9 w-9 rounded-lg bg-[color:rgb(var(--color-secondary-500)_/_0.15)] text-[color:rgb(var(--color-secondary-500))] flex items-center justify-center">
-                      <i data-feather="zap"></i>
-                    </span>
-                    <div>
-                      <div class="text-sm font-semibold text-zinc-100">Perf minded</div>
-                      <div class="text-xs text-zinc-400">Core Web Vitals A+</div>
-                    </div>
-                  </div>
+              <div class="rounded-xl bg-white/5 border border-white/10 p-3">
+                <div class="text-2xl font-extrabold text-zinc-100">40+</div>
+                <div class="text-xs text-zinc-400">Projects</div>
+              </div>
+              <div class="rounded-xl bg-white/5 border border-white/10 p-3">
+                <div class="text-2xl font-extrabold text-zinc-100">100ms</div>
+                <div class="text-xs text-zinc-400">TTI target</div>
+              </div>
+            </div>
+          </div>
+          <!-- Floating card -->
+          <div class="absolute -right-6 -bottom-6 hidden lg:block">
+            <div class="glass-card rounded-2xl border border-white/10 bg-[color:rgb(var(--bg)_/_0.75)] p-4 shadow-soft">
+              <div class="flex items-center gap-3">
+                <span class="h-9 w-9 rounded-lg bg-[color:rgb(var(--color-secondary-500)_/_0.15)] text-[color:rgb(var(--color-secondary-500))] flex items-center justify-center">
+                  <i data-feather="zap"></i>
+                </span>
+                <div>
+                  <div class="text-sm font-semibold text-zinc-100">Perf minded</div>
+                  <div class="text-xs text-zinc-400">Core Web Vitals A+</div>
                 </div>
               </div>
             </div>
@@ -224,8 +222,7 @@
         </div>
       </div>
     </section>
-
-    <!-- About -->
+<!-- About -->
     <section id="about" class="relative py-16 md:py-24">
       <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
         <div class="grid lg:grid-cols-3 gap-8 items-start">

script.js

@@ -1,30 +1,53 @@
+
 // Theme handling
 (function initTheme() {
   const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
   const saved = localStorage.getItem('theme');
   const html = document.documentElement;
+  const toggle = document.getElementById('theme-toggle');
+  const knob = document.getElementById('theme-toggle-knob');
+  const sunIcon = toggle?.querySelector('[data-feather="sun"]');
+  const moonIcon = toggle?.querySelector('[data-feather="moon"]');
 
   const applyTheme = (mode) => {
     if (mode === 'light') {
       html.classList.add('light');
+      // Move knob to the right for light mode
+      if (knob) {
+        knob.style.left = 'calc(100% - 1.25rem - 0.125rem)'; // Right position (w-5 = 1.25rem, top-0.5 = 0.125rem)
+      }
+      // Update icons
+      if (moonIcon && sunIcon) {
+        moonIcon.style.opacity = '0';
+        moonIcon.style.transform = 'rotate(90deg)';
+        sunIcon.style.opacity = '1';
+        sunIcon.style.transform = 'rotate(0deg)';
+      }
     } else {
       html.classList.remove('light');
+      // Move knob to the left for dark mode
+      if (knob) {
+        knob.style.left = '0.125rem'; // Left position (top-0.5 = 0.125rem)
+      }
+      // Update icons
+      if (moonIcon && sunIcon) {
+        moonIcon.style.opacity = '1';
+        moonIcon.style.transform = 'rotate(0deg)';
+        sunIcon.style.opacity = '0';
+        sunIcon.style.transform = 'rotate(-90deg)';
+      }
     }
-    const icon = document.getElementById('theme-icon');
-    if (icon) icon.setAttribute('data-feather', mode === 'light' ? 'sun' : 'moon');
   };
 
   const initial = saved || (prefersDark ? 'dark' : 'dark');
   applyTheme(initial);
 
-  document.getElementById('theme-toggle')?.addEventListener('click', () => {
+  toggle?.addEventListener('click', () => {
     const isLight = html.classList.toggle('light');
     localStorage.setItem('theme', isLight ? 'light' : 'dark');
-    const icon = document.getElementById('theme-icon');
-    if (icon) icon.setAttribute('data-feather', isLight ? 'sun' : 'moon');
+    applyTheme(isLight ? 'light' : 'dark');
   });
 })();
-
 // Mobile menu
 const menuToggle = document.getElementById('menu-toggle');
 const mobileMenu = document.getElementById('mobile-menu');
@@ -382,7 +405,6 @@ function initTypingAnimation() {
   let timeoutId;
 
   const cursor = document.querySelector('.typing-cursor');
-
   function typeCharacter() {
     if (currentLine >= codeLines.length) {
       // Finished typing all lines
@@ -415,7 +437,6 @@ function initTypingAnimation() {
     else if (char.type === 'keyword' || char.type === 'function') delay = 120;
     else if (char.type === 'string') delay = 150;
     else if (char.text === ' ') delay = 30;
-    else if (char.text === '\n') delay = 500;
     
     // Add some random variation
     delay += Math.random() * 50;
@@ -424,15 +445,14 @@ function initTypingAnimation() {
 
     // If we finished the current line, move to next line
     if (currentChar >= line.chars.length) {
-      // Add line break
+      // Add line break with proper spacing
       const lineBreak = document.createElement('br');
       codeContainer.appendChild(lineBreak);
       currentLine++;
       currentChar = 0;
     }
   }
-
-  function eraseCharacters() {
+function eraseCharacters() {
     const lastChild = codeContainer.lastElementChild;
     if (!lastChild || (lastChild.tagName === 'BR' && !lastChild.previousElementSibling)) {
       // If only line breaks left, restart typing