Merge pull request #108 from jbolns/dev

Combo of small adjustments
jbolns · Nov 5, 2024 · 4251911 · 4251911
2 parents d0e5aeb + aa04c8d
commit 4251911
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 62 deletions.
diff --git a/src/components/SocialMedia.astro b/src/components/SocialMedia.astro
@@ -8,7 +8,7 @@ import { socials } from "@consts";
   {
     socials.map((social) => (
       <li>
-        <a href={social.href}>
+        <a href={social.href} target="_blank">
           <svg id="darkie" class="w-10 h-10 ml-1 hover:animate-roll">
             <use href={`/icons/${social.icon}.svg#${social.icon}`} aria-label={`Social media icon for ${social.name}`}/>
           </svg>

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -25,22 +25,26 @@ const locale: keyof Multi = defaultLang;
   </head>
   <body>
     <main>
-      <div class="absolute top-1/2 -translate-y-1/2 w-full text-center text-white">
-        <h1 class="enter m-0 p-0 hidden typewriter">Welcome</h1>
-        <p id="glitch" class="enter m-0 p-0 hidden typewriter">{site.description[locale]}</p>
+      <div
+        class="absolute top-1/2 -translate-y-1/2 w-full text-center text-white"
+      >
+        <h1 id="glitch" class="enter m-0 p-0 typewriter hidden">Welcome</h1>
+        <p class="enter m-0 p-0 typewriter hidden">
+          {site.description[locale]}
+        </p>
 
         <ul class="flex items-center justify-center list-none m-0 p-0">
           {
             Object.entries(languages).map(([lang, label]) => (
-              <a href={sanitizeRoutes(`/${lang}/`)}>
-                <li class="flex text-center m-1 enter">
+              <li class="flex text-center m-1 enter" aria-label={label}>
+                <a href={sanitizeRoutes(`/${lang}/`)}>
                   <img
                     src={`/icons/${lang}.svg`}
                     alt={`${label}.`}
-                    class="w-8 h-8"
+                    class="w-8 h-8 hover:animate-roll"
                   />
-                </li>
-              </a>
+                </a>
+              </li>
             ))
           }
         </ul>

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -225,17 +225,20 @@
 		content: "";
 	}
 
-	article.post img {
-		max-width: 60%;
-		transition: 1s ease-in-out;
+	article.post a {
+		text-decoration: underline;
 	}
 
-	article.post img:hover {
-		max-width: 100%;
-	}
+	@media (min-width: 1024px) {
+		article.post img {
+			max-width: 60%;
+			transition: 1s ease-in-out;
+		}
+
+		article.post img:hover {
+			max-width: 100%;
+		}
 
-	article.post a {
-		text-decoration: underline;
 	}
 
 

diff --git a/src/styles/global.js b/src/styles/global.js
@@ -102,31 +102,34 @@ const glitch = () => {
     let str = t.textContent
 
     // Garble string a little
+    let chars = { "letters": "eiou", "symbols": "3!0/" }
     if (out !== true) {
-      str.includes('e')
-        ? str = str.replace('e', '3')
-        : str.includes('i')
-          ? str = str.replace('i', '!')
-          : str.includes('o')
-            ? str = str.replace('o', '&')
-            : out = true
+
+      // Replace random character
+      let r = Math.floor(Math.random() * chars["letters"].length)
+      str = str.replace(chars["letters"][r], chars["symbols"][r])
       t.textContent = str
+
+      // Check if there are more letters to replace, change branch if not
+      var interection = (str.match(new RegExp('[' + chars["letters"] + ']', 'g')) || []).join('');
+      if (interection.length == 0) out = !out
+
     } else if (out === true) {
-      str.includes('!')
-        ? str = str.replace('!', 'i')
-        : str.includes('3')
-          ? str = str.replace('3', 'e')
-          : str.includes('&')
-            ? str = str.replace('&', 'o')
-            : str.includes("*")
-              ? str = str.replace('*', '')
-              : out = false
+
+      // Replace random character
+      let r = Math.floor(Math.random() * chars["letters"].length)
+      str = str.replace(chars["symbols"][r], chars["letters"][r])
       t.textContent = str
+
+      // Check if there are more letters to replace, change branch if not
+      var interection = (str.match(new RegExp('[' + chars["symbols"] + ']', 'g')) || []).join('');
+      if (interection.length == 0) out = !out
     }
   }
 
   const caller = () => {
-    if (c < original.length * 6) {
+    let lim = original.length * (original.toLowerCase() == "welcome" ? 20 : 6)
+    if (c < lim) {
       setTimeout(() => {
         write()
       }, Math.floor(Math.random() * 5000));
@@ -137,45 +140,61 @@ const glitch = () => {
   setInterval(caller, 100)
 }
 
+
 // TYPEWRITER EFFECT
 const typewriter = () => {
 
   const tt = document.querySelectorAll(".typewriter");
 
-  const type = () => {
-    for (let j = 0; j < tt.length; j++) {
-      let t = tt[j]
-      setTimeout(() => {
-        let str = t.textContent
-        t.textContent = "_"
+  if (tt.length != 0) {
+    const write = (t, str) => {
+      let j = 0
+      const effect = () => {
+        if (j < str.length + 1) {
+          const render = str.slice(0, j)
+          t.textContent = render + "_"
+          j++
+          setTimeout(effect, 150)
+        } else {
+          t.textContent = str
+          j++
+        }
+      }
+      effect()
+    }
+
+    const normal = () => {
+      let strs = []
+      tt.forEach((t) => {
+        strs.push(t.textContent)
+        t.textContent = "."
         t.classList.remove("hidden");
-
-        setTimeout(() => {
-          let i = 0
-          const effect = () => {
-
-            if (i < str.length + 1) {
-              const render = str.slice(0, i)
-              t.textContent = render + "_"
-              i++
-              setTimeout(effect, 150)
-            } else {
-              t.textContent = str
-              i++
-            }
-
-          }
-          effect()
-        }, "1000");
-
-      }, 1000 * j);
+        for (let i = 0; i < tt.length; i++) {
+          setTimeout(() => {
+            write(tt[i], strs[i])
+          }, 1000 * i);
+        }
+      })
     }
-  }
 
-  type()
+    const homepage = () => {
+      setTimeout(() => {
+        let hello = ["Bienvenido", "Tervetuloa", "Welcome"]
+        for (let i = 0; i < hello.length; i++) {
+          setTimeout(() => {
+            write(tt[0], hello[i])
+          }, 7000 * i);
+        }
+      }, 2000);
+    }
+
+    normal()
+    homepage()
+  }
 
 }
 
+
 // Function triggers
 nav()
 dark()