move js code to the bottom of the page inside body

riwert · Apr 9, 2024 · c4d0f85 · c4d0f85
1 parent c653ceb
commit c4d0f85
Showing 1 changed file with 126 additions and 129 deletions.
diff --git a/index.html b/index.html
@@ -79,133 +79,6 @@
     </style>
 
     <script src="https://cdn.tailwindcss.com"></script>
-    <script>
-      // Tailwind config customization
-      tailwind.config = {
-        theme: {
-          extend: {
-            colors: {
-              softred: '#D95252',
-              softblue: '#33D3EC',
-            }
-          }
-        }
-      }
-
-      // Defer backgrounds on load
-      function deferBackgrounds() {
-        var vp2x = 576
-        var vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
-        var backgrounds = document.querySelectorAll('[data-bg-img]')
-        for (var i = 0, len = backgrounds.length; i < len; i++) {
-          if (backgrounds[i].getAttribute('data-bg-img-2x') && vw >= vp2x) {
-            backgrounds[i].style.backgroundImage = 'url('+backgrounds[i].getAttribute('data-bg-img-2x')+')'
-          } else if (backgrounds[i].getAttribute('data-bg-img')) {
-            backgrounds[i].style.backgroundImage = 'url('+backgrounds[i].getAttribute('data-bg-img')+')'
-          }
-          backgrounds[i].classList.remove('opacity-0')
-        }
-      }
-
-      // Defer sources on load
-      function deferSources() {
-        var vp2x = 576
-        var vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
-        var sources = document.querySelectorAll('[data-src]')
-        for (var i = 0, len = sources.length; i < len; i++) {
-          if (sources[i].getAttribute('data-src')) {
-            if (sources[i].tagName.toLowerCase() == 'video') {
-              var source = document.createElement('source')
-              if (sources[i].getAttribute('data-src-2x') && vw >= vp2x) {
-                source.src = sources[i].getAttribute('data-src-2x')
-                sources[i].setAttribute('width', 1920)
-                sources[i].setAttribute('height', 1080)
-              } else if (sources[i].getAttribute('data-src')) {
-                source.src = sources[i].getAttribute('data-src')
-                sources[i].setAttribute('width', 960)
-                sources[i].setAttribute('height', 540)
-              }
-              if (sources[i].getAttribute('data-type')) {
-                source.type = sources[i].getAttribute('data-type')
-              }
-              sources[i].innerHTML = ''
-              sources[i].appendChild(source)
-              sources[i].load()
-              sources[i].play()
-            } else {
-              sources[i].setAttribute('src', sources[i].getAttribute('data-src'))
-            }
-          }
-        }
-      }
-
-      var welcomesEn = ['Hi!', 'Hey!', 'Hello!', 'Welcome!', 'Good day!', 'Good evening!']
-      var welcomesPl = ['Cześć!', 'Hej!', 'Siemanko!', 'Witaj!', 'Dzień dobry!', 'Dobry wieczór!']
-      var currentIndexEn = 0
-      var currentIndexPl = 0
-
-      function typeWords(words, currentIndex, selector) {
-        var index = 0
-        var terminal = document.getElementById(selector)
-        terminal.innerHTML = ''
-
-        var interval = setInterval(function () {
-          terminal.textContent += words[currentIndex][index]
-          index++
-          if (index === words[currentIndex].length) {
-            clearInterval(interval)
-            setTimeout(function () {
-              terminal.textContent += ' '
-              currentIndex = (currentIndex + 1) % words.length
-              typeWords(words, currentIndex, selector)
-            }, 1500) // 1,5s
-          }
-        }, 500)
-      }
-
-      // AlpineJS
-      function init() {
-        this.bg = localStorage.getItem('bg') || 'vid'
-        this.lang = localStorage.getItem('lang') || 'pl'
-        this.theme = localStorage.getItem('theme') || 'light'
-
-        // Run async
-        setTimeout(function () {
-
-          // Run defer functions
-          deferBackgrounds()
-          deferSources()
-
-          // Start typing words
-          typeWords(welcomesPl, currentIndexPl, 'terminal-pl')
-          typeWords(welcomesEn, currentIndexEn, 'terminal-en')
-
-        }, 1)
-      }
-
-      function changeLang() {
-        localStorage.setItem('lang', this.lang)
-      }
-
-      function toggleBg() {
-        var bg = this.bg === 'vid' ? 'img' : 'vid'
-        localStorage.setItem('bg', bg)
-        this.bg = bg
-      }
-
-      function toggleLang() {
-        var lang = this.lang === 'pl' ? 'en' : 'pl'
-        localStorage.setItem('lang', lang)
-        this.lang = lang
-      }
-
-      function toggleTheme() {
-        var theme = this.theme === 'light' ? 'dark' : 'light'
-        localStorage.setItem('theme', theme)
-        this.theme = theme
-      }
-
-    </script>
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
     <script defer src="https://unpkg.com/popper.js@1/dist/umd/popper.min.js"></script>
     <script defer src="https://unpkg.com/tippy.js@4"></script>
@@ -243,7 +116,7 @@
       <!-- Main Col -->
       <main class="w-full h-auto lg:w-2/5 mx-4 lg:mx-0">
         <!-- Profile Desc -->
-        <div id="profile"class="relative z-10 rounded-lg lg:rounded-l-lg lg:rounded-r-none shadow-xl bg-opacity-75 transition duration-300 py-4 px-6 md:px-10 lg:px-6 text-center lg:text-left"
+        <div id="profile" class="relative z-10 rounded-lg lg:rounded-l-lg lg:rounded-r-none shadow-xl bg-opacity-75 transition duration-300 py-4 px-6 md:px-10 lg:px-6 text-center lg:text-left"
           :class="theme == 'dark' ? 'bg-gray-900' : 'bg-white'"
         >
 
@@ -424,7 +297,6 @@ <h2 class="inline-flex mb-2">
     </div>
 
     <script>
-
       // On load actions
       window.onload = function() {
         // Init tooltips
@@ -433,6 +305,131 @@ <h2 class="inline-flex mb-2">
         })
       }
 
+      // Tailwind config customization
+      tailwind.config = {
+        theme: {
+          extend: {
+            colors: {
+              softred: '#D95252',
+              softblue: '#33D3EC',
+            }
+          }
+        }
+      }
+
+      // Defer backgrounds on load
+      function deferBackgrounds() {
+        var vp2x = 576
+        var vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
+        var backgrounds = document.querySelectorAll('[data-bg-img]')
+        for (var i = 0, len = backgrounds.length; i < len; i++) {
+          if (backgrounds[i].getAttribute('data-bg-img-2x') && vw >= vp2x) {
+            backgrounds[i].style.backgroundImage = 'url('+backgrounds[i].getAttribute('data-bg-img-2x')+')'
+          } else if (backgrounds[i].getAttribute('data-bg-img')) {
+            backgrounds[i].style.backgroundImage = 'url('+backgrounds[i].getAttribute('data-bg-img')+')'
+          }
+          backgrounds[i].classList.remove('opacity-0')
+        }
+      }
+
+      // Defer sources on load
+      function deferSources() {
+        var vp2x = 576
+        var vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
+        var sources = document.querySelectorAll('[data-src]')
+        for (var i = 0, len = sources.length; i < len; i++) {
+          if (sources[i].getAttribute('data-src')) {
+            if (sources[i].tagName.toLowerCase() == 'video') {
+              var source = document.createElement('source')
+              if (sources[i].getAttribute('data-src-2x') && vw >= vp2x) {
+                source.src = sources[i].getAttribute('data-src-2x')
+                sources[i].setAttribute('width', 1920)
+                sources[i].setAttribute('height', 1080)
+              } else if (sources[i].getAttribute('data-src')) {
+                source.src = sources[i].getAttribute('data-src')
+                sources[i].setAttribute('width', 960)
+                sources[i].setAttribute('height', 540)
+              }
+              if (sources[i].getAttribute('data-type')) {
+                source.type = sources[i].getAttribute('data-type')
+              }
+              sources[i].innerHTML = ''
+              sources[i].appendChild(source)
+              sources[i].load()
+              sources[i].play()
+            } else {
+              sources[i].setAttribute('src', sources[i].getAttribute('data-src'))
+            }
+          }
+        }
+      }
+
+      var welcomesEn = ['Hi!', 'Hey!', 'Hello!', 'Welcome!', 'Good day!', 'Good evening!']
+      var welcomesPl = ['Cześć!', 'Hej!', 'Siemanko!', 'Witaj!', 'Dzień dobry!', 'Dobry wieczór!']
+      var currentIndexEn = 0
+      var currentIndexPl = 0
+
+      function typeWords(words, currentIndex, selector) {
+        var index = 0
+        var terminal = document.getElementById(selector)
+        terminal.innerHTML = ''
+
+        var interval = setInterval(function () {
+          terminal.textContent += words[currentIndex][index]
+          index++
+          if (index === words[currentIndex].length) {
+            clearInterval(interval)
+            setTimeout(function () {
+              terminal.textContent += ' '
+              currentIndex = (currentIndex + 1) % words.length
+              typeWords(words, currentIndex, selector)
+            }, 1500) // 1,5s
+          }
+        }, 500)
+      }
+
+      // AlpineJS
+      function init() {
+        this.bg = localStorage.getItem('bg') || 'vid'
+        this.lang = localStorage.getItem('lang') || 'pl'
+        this.theme = localStorage.getItem('theme') || 'light'
+
+        // Run async
+        setTimeout(function () {
+
+          // Run defer functions
+          deferBackgrounds()
+          deferSources()
+
+          // Start typing words
+          typeWords(welcomesPl, currentIndexPl, 'terminal-pl')
+          typeWords(welcomesEn, currentIndexEn, 'terminal-en')
+
+        }, 1)
+      }
+
+      function changeLang() {
+        localStorage.setItem('lang', this.lang)
+      }
+
+      function toggleBg() {
+        var bg = this.bg === 'vid' ? 'img' : 'vid'
+        localStorage.setItem('bg', bg)
+        this.bg = bg
+      }
+
+      function toggleLang() {
+        var lang = this.lang === 'pl' ? 'en' : 'pl'
+        localStorage.setItem('lang', lang)
+        this.lang = lang
+      }
+
+      function toggleTheme() {
+        var theme = this.theme === 'light' ? 'dark' : 'light'
+        localStorage.setItem('theme', theme)
+        this.theme = theme
+      }
+
       // Register the SW from the Workbox CDN
       if ('serviceWorker' in navigator) {
         window.addEventListener('load', function() {