chore: Local GIFs

components/button-collection.js

@@ -5,67 +5,74 @@ function getButtons() {
 <my-marquee speed="50" direction="left">
     <!-- Socials -->
     <button-8831 href="mailto:tibo@depeuter.dev"
-               src="https://cyber.dabamos.de/88x31/email.gif"
+               src="assets/images/88x31/email.gif"
                hint="Mail Me"></button-8831>
     <button-8831 href="./key.asc"
-               src="https://www.88x31.nl/gifs/pgp-now.gif"
+               src="assets/images/88x31/privacy-now.gif"
                hint="My GPG key"></button-8831>
     <!-- Operating Systems -->
     <button-8831 href="https://www.gnu.org/gnu/linux.html"
-               src="https://www.88x31.nl/gifs/gnu-linux.gif"
+               src="assets/images/88x31/gnu-linux.gif"
                hint="Made on GNU/Linux"></button-8831>
     <!-- Editors -->
     <!-- Services -->
     <button-8831 href="https://www.proxmox.com/"
-               src="https://www.88x31.nl/gifs/proxmox.gif"
+               src="assets/images/88x31/proxmox.gif"
                hint="Proxmox VE"></button-8831>
     <button-8831 href="https://cloud.depeuter.dev/"
-               src="https://www.88x31.nl/gifs/nextcloud.gif"
+               src="assets/images/88x31/nextcloud.gif"
                hint="Nextcloud"></button-8831>
     <button-8831 href="https://ublockorigin.com/"
-               src="https://www.88x31.nl/gifs/ublock-now.png"
+               src="assets/images/88x31/ublock-now.png"
                hint="uBlock Origin Now!"></button-8831>
     <!-- Movements -->
     <button-8831 href="https://home.cern/news/opinion/computing/open-internet-and-free-web"
-               src="https://www.88x31.nl/gifs/fftake.gif"
+               src="assets/images/88x31/firefox-take-back-the-web.gif"
                hint="Take back the web (Firefox)"></button-8831>
     <button-8831 href="https://www.ifixit.com/"
-               src="https://www.88x31.nl/gifs/right-to-repair.png"
+               src="assets/images/88x31/right-to-repair.png"
                hint="I Support Right To Repair"></button-8831>
     <!-- Compatibility -->
     <button-8831 href="https://www.mozilla.org/firefox/"
-               src="https://www.88x31.nl/gifs/firefox4.gif"
+               src="assets/images/88x31/firefox.gif"
                hint="Tested on Firefox"></button-8831>
     <!-- Web -->
     <button-8831 href="https://www.depeuter.dev"
-               src="https://www.88x31.nl/gifs/graphicdesign.gif"
+               src="assets/images/88x31/graphic-design-is-my-passion.gif"
                hint="Graphic Design Is My Passion"></button-8831>
     <button-8831 href="https://developer.mozilla.org/en-US/docs/Web/CSS"
-               src="https://www.88x31.nl/gifs/css.gif"
+               src="assets/images/88x31/made-with-css.gif"
                hint="CSS is awesome"></button-8831>
     <!-- Media -->
     <button-8831 href="https://last.fm/user/fortemfiducia"
-               src="https://www.88x31.nl/gifs/3dot5mmfc-button.gif"
+               src="assets/images/88x31/3dot5mm-jack.gif"
                hint="My Last.fm account"></button-8831>
     <button-8831 href="https://open.spotify.com/user/deyoloboy?si=3bca31169a434d4a"
-               src="https://www.88x31.nl/gifs/spotify.gif"
+               src="assets/images/88x31/spotify.gif"
                hint="My Spotify account"></button-8831>
     <button-8831 href="https://www.blankbanshee.com/"
-               src="https://www.88x31.nl/gifs/banshee.gif"
+               src="assets/images/88x31/blank-banshee.gif"
                hint="Blank Banshee"></button-8831>
     <button-8831 href="https://fmskyline.bandcamp.com/"
-               src="https://www.88x31.nl/gifs/fm.gif"
+               src="assets/images/88x31/fm-skyline.gif"
                hint="FMSkyline"></button-8831>
     <button-8831 href="https://luxuryelite.bandcamp.com/"
-               src="https://capstasher.neocities.org/88x31Buttons/lu.png"
+               src="assets/images/88x31/luxury-elite.png"
                hint="Luxury Elite"></button-8831>
     <button-8831 href="https://nmesh.bandcamp.com/"
-               src="https://www.88x31.nl/gifs/nm.png"
+               src="assets/images/88x31/nmesh.png"
                hint="nmesh"></button-8831>
     <!-- Fun -->
     <button-8831 href="https://www.depeuter.dev"
-               src="https://www.88x31.nl/gifs/thedigitalme.gif"
+               src="assets/images/88x31/the-digital-me.gif"
                hint="The Digital Me"></button-8831>
+    <!-- Other -->
+    <button-8831 href="https://88x31.nl/history.html"
+               src="assets/images/88x31/88x31.gif"
+               hint="88x31?"></button-8831>
+    <button-8831 href="https://www.youtube.com/watch?v=vTBQm9zmw8Y"
+                src="assets/images/88x31/thanks-for-looking.gif"
+                hint="Thanks for looking!"></button-8831>
 </my-marquee>
     `;
 

index.html

@@ -27,38 +27,40 @@
     <link rel="foaf:maker" content="https://tibo.depeuter.dev/">
 
     <link rel="stylesheet" type="text/css" href="style.css">
-    <link rel="shortcut icon" type="image/png" href="assets/owl_circuit.png">
-    <link rel="apple-touch-icon" href="assets/owl_circuit.png">
+    <link rel="shortcut icon" type="image/png" href="assets/images/owl_circuit.png">
+    <link rel="apple-touch-icon" href="assets/images/owl_circuit.png">
 </head>
 <body>
 <div class="wrapper">
-    <div class="quote">
-        <p>My name is Tibo De Peuter.</p>
-        <p>I like working with computers.</p>
-    </div>
+    <main>
+        <div class="landing">
+            <p>My name is Tibo De Peuter.</p>
+            <p>I like working with computers.</p>
+        </div>
 
-    <ul class="links">
-        <li>
-            <a href="mailto:tibo@depeuter.dev" title="My mail address">
-                <img src="assets/icons/mail.svg" alt="Mail me"/>
-            </a>
-        </li>
-        <li>
-            <a href="https://git.depeuter.dev/tdpeuter" title="My personal git">
-                <img src="assets/icons/git.svg" alt="Gitea"/>
-            </a>
-        </li>
-        <li>
-            <a href="https://github.com/tdpeuter" title="My GitHub account">
-                <img src="assets/icons/github.svg" alt="GitHub"/>
-            </a>
-        </li>
-        <li>
-            <a href="https://www.linkedin.com/in/tdpeuter/" title="My LinkedIn account">
-                <img src="assets/icons/linkedin.svg" alt="LinkedIn"/>
-            </a>
-        </li>
-    </ul>
+        <ul class="links">
+            <li>
+                <a href="mailto:tibo@depeuter.dev" title="My mail address">
+                    <img src="assets/images/icons/mail.svg" alt="Mail me"/>
+                </a>
+            </li>
+            <li>
+                <a href="https://git.depeuter.dev/tdpeuter" title="My personal git">
+                    <img src="assets/images/icons/git.svg" alt="Gitea"/>
+                </a>
+            </li>
+            <li>
+                <a href="https://github.com/tdpeuter" title="My GitHub account">
+                    <img src="assets/images/icons/github.svg" alt="GitHub"/>
+                </a>
+            </li>
+            <li>
+                <a href="https://www.linkedin.com/in/tdpeuter/" title="My LinkedIn account">
+                    <img src="assets/images/icons/linkedin.svg" alt="LinkedIn"/>
+                </a>
+            </li>
+        </ul>
+    </main>
 </div>
 <footer>
     <button-collection></button-collection>