update

index.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Alfieking.dev</title>
     <link rel="icon" href="/static/content/icon.webp">
-    <link rel="stylesheet" href="/static/css/index.css">
+    <link rel="stylesheet" href="/static/css/main.css">
     <meta name="description" content="Alfie King's personal website.">
     <meta name="keywords" content="Alfie King, Alfie, King, Alfieking, Alfieking.dev">
     <meta name="author" content="Alfie King">
@@ -145,9 +145,43 @@ ZZZzz /,`.-'`'    -.  ;-;;,_
                 <a href="https://aur.archlinux.org/packages?K=acetheking987&SeB=m">
                     <img src="static/content/Arch-linux-logo.webp" alt="aur">
                 </a>
-                <a href="https://ne0nbandit.neocities.org/">
-                    <img class="btn" src="https://ne0nbandit.github.io/assets/img/btn/mine/nbbanner.png">
-                </a>
+                <div class="blinkies">
+                    <a href="https://ne0nbandit.neocities.org/">
+                        <img class="btn" src="https://ne0nbandit.github.io/assets/img/btn/mine/nbbanner.png">
+                    </a>
+                    <a href="https://dimden.dev/">
+                        <img class="btn" src="https://dimden.dev/images/88x31.gif">
+                    </a>
+                </div>
+                <iframe width="120" height="120" style="border:none" src="https://dimden.neocities.org/navlink/" name="neolink"></iframe>
+                <div class="blinkies">
+                    <a href="https://thinliquid.dev">
+                        <img class="btn" src="https://thinliquid.dev/thnlqd.png" alt="thinliquid's button" />
+                    </a>
+                    <a href="https://nekoweb.org/">
+                        <img class="btn" src="https://nekoweb.org/assets/buttons/button3.gif">
+                    </a>
+                </div>
+                <div class="blinkies">
+                    <a href="https://beeps.website/">
+                        <img class="btn" src="static/content/bleeps.gif" alt="bleeps website" />
+                    </a>
+                </div>
+            </div>
+            <h2>Buttons!!! :3</h2>
+            <div class="btns">
+                <img src="static/content/btns/archlinux.gif" alt="archlinux">
+                <img src="static/content/btns/discord.gif" alt="discord">
+                <img src="static/content/btns/firefoxget.gif" alt="firefox">
+                <img src="static/content/btns/handcoded.gif" alt="handcoded">
+                <img src="static/content/btns/use-discord.gif" alt="use discord">
+                <img src="static/content/btns/vscbutton.gif" alt="vscode">
+                <img src="static/content/btns/deltarune.png" alt="deltarune">
+                <img src="static/content/btns/no_web3.gif" alt="no web3">
+                <img src="static/content/btns/learn_html.gif" alt="learn html">
+                <img src="static/content/btns/ublock_origin_now.png" alt="ublock origin">
+                <img src="static/content/btns/anything_but_chrome.gif" alt="naythong but chrome">
+                <img src="static/content/btns/made_with_paws.png" alt="made with paws">
             </div>
         </section>
     </main>

static/css/main.css

@@ -64,6 +64,7 @@ nav ul li a:hover img {
 }
 
 nav ul li#music {
+    z-index: 100;
     margin-top: auto;
     padding-bottom: 2rem;
     display: none;
@@ -252,10 +253,23 @@ main section a:hover {
 
 .links a img {
     height: 120px;
-    transition: all 0.3s ease-in-out;
+    transition: all 0.2s ease-in-out;
 }
 
-.links a img:hover {
+.links a:nth-child(even) img:hover {
+    transform: scale(1.1) rotate(5deg);
+}
+
+.links a:nth-child(odd) img:hover {
+    transform: scale(1.1) rotate(-5deg);
+}
+
+.links iframe {
+    height: 120px;
+    transition: all 0.2s ease-in-out;
+}
+
+.links iframe:hover {
     transform: scale(1.1);
 }
 
@@ -266,10 +280,39 @@ main section a:hover {
 
 .blinkies a img {
     height: 60px;
-    transition: all 0.3s ease-in-out;
+    transition: all 0.2s ease-in-out;
+}
+
+.blinkies a {
+    height: 60px;
 }
 
 img.btn {
-    height: 50px !important;
-    transition: all 0.3s ease-in-out;
+    height: 60px !important;
+    transition: all 0.2s ease-in-out;
+}
+
+#links h2 {
+    margin-top: 2rem;
+}
+
+.btns {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin-top: 2rem;
+}
+
+.btns img {
+    height: 40px;
+    transition: all 0.2s ease-in-out;
+}
+
+.btns img:hover:nth-child(even) {
+    transform: scale(1.3) rotate(5deg);
+}
+
+.btns img:hover:nth-child(odd) {
+    transform: scale(1.3) rotate(-5deg);
 }

static/js/music.js

@@ -64,8 +64,9 @@ function hideUi() {
 
 function update() {
     fetchData().then(data => { 
+        console.log(data);
         if (data.item != null) {
-            hideUi();
+            updateUi(data);
         }
         else {
             hideUi();

static/js/typing.js

@@ -1,9 +1,36 @@
-const values = ["Web developer", "Pc games enjoyer", "Server backend survivor", "python programmer", "Javascript disliker"];
+const values = [
+    "Web developer", 
+    "Pc games enjoyer", 
+    "Server backend survivor", 
+    "python programmer", 
+    "Javascript disliker",
+    "I use Arch btw",
+    "Owo, what's this?",
+    "Ultimate procrastinator",
+    "Ultrakill gaming",
+    "00111010 00110011",
+    "fistful of dollar",
+    "Thy end is now!!!",
+    "Possibly a furry",
+    "Prepare thyself!!!",
+    "Spegatti code master",
+    "Ethernet cable untangler",
+    "Caffeine addict",
+    "I'm not a robot ☑",
+    "Loud Music enjoyer",
+    "part time femboy :<",
+];
 var direction = 1;
 var text = "";
 var speed = 100; 
 var selectedValue = 0;
 var currentValueIndex = 0;
+var pause = false;
+
+function randomValue() {
+    selectedValue = Math.floor(Math.random() * values.length);
+    currentValueIndex = 0;
+}
 
 function type() {
     if (direction == 1) {
@@ -12,7 +39,7 @@ function type() {
             currentValueIndex++;
         } else {
             direction = -1;
-            speed = 1500;
+            pause = true;
         }
     } else {
         if (currentValueIndex > 0) {
@@ -20,10 +47,7 @@ function type() {
             currentValueIndex--;
         } else {
             direction = 1;
-            selectedValue++;
-            if (selectedValue >= values.length) {
-                selectedValue = 0;
-            }
+            randomValue();
         }
     }
 }
@@ -36,7 +60,12 @@ function typing() {
     } else {
         speed = 60 + (Math.random() * 100) / 2;
     }
-    setTimeout(typing, speed);
+    if (!pause) {
+        setTimeout(typing, speed);
+    } else {
+        setTimeout(typing, 500);
+        pause = false;
+    }
 }
 
 typing();