update website buttons.

src/components/InfoCard.astro

@@ -3,6 +3,6 @@
 ---
 
 <div class="text-center space-y-2 shadow-lg overflow-hidden border border-neutral-700/60 bg-neutral-900/40 p-8 rounded-xl">
-    <img class="rounded-b-full w-[200px]" src="/Ata.png" alt="Ata"/>
+    <img class="rounded-b-full w-[200px] h-[200px]" src="/Ata.png" alt="Ata"/>
     <h1 class="font-bold text-3xl">prefetcher</h1>
 </div>

src/components/StripeBackground.astro

@@ -4,18 +4,22 @@
 <canvas id="gradient-canvas" class="fixed top-0 left-0 w-screen h-screen -z-10" data-transition-in></canvas>
 
 <script type="module" defer>
-    import { Gradient } from "/gradient.js";
+    import { Gradient } from "/scripts/gradient.js";
     const gradient = new Gradient();
     gradient.initGradient('#gradient-canvas');
 </script>
 
 <style>
     #gradient-canvas {
-        width:100%;
-        height:100%;
         --gradient-color-1: #404040;
         --gradient-color-2: #4d4d4d;
         --gradient-color-3: #3a3a3a;
         --gradient-color-4: #282828;
+        opacity: 0;
+    }
+    
+    .isLoaded {
+        opacity: 1 !important;
+        transition: opacity 0.7s ease-out;
     }
 </style>

src/components/WebsiteButton.astro

@@ -1,8 +1,10 @@
 ---
-const { image, link } = Astro.props;
+const { image, link, person } = Astro.props;
 const actualImage = `/buttons/${image}`;
+
+const alt = `${person}'s site`;
 ---
 
 <a href={link} target="_blank" class="inline-block">
-    <img src={actualImage} />
+    <img src={actualImage} alt={alt} title={alt} loading="lazy" class="overflow-hidden text-xs text-center w-[88px] h-[31px] border border-amber-400 border-dashed" onload="this.classList.remove('border')" />
-</a>
+</a>

src/pages/links.astro

@@ -8,22 +8,29 @@ import WebsiteButton from "../components/WebsiteButton.astro";
 <Layout>
     <h1 class="font-bold text-3xl">88x31 land</h1>
     <div>
-        <WebsiteButton link="https://alyxia.dev" image="alyxia.png" />
+        <WebsiteButton link="https://alyxia.dev" image="alyxia.png" person="alyxia" />
-        <WebsiteButton link="https://marsh.zone" image="marsh.png" />
+        <WebsiteButton link="https://marsh.zone" image="marsh.png" person="marsh" />
-        <WebsiteButton link="https://wamwoowam.co.uk" image="wamwoowam.gif" />
+        <WebsiteButton link="https://wamwoowam.co.uk" image="wamwoowam.gif" person="wam" />
-        <WebsiteButton link="https://erisdump.neocities.org" image="erisdump.gif" />
+        <WebsiteButton link="https://erisdump.neocities.org" image="erisdump.gif" person="eris lund" />
-        <WebsiteButton link="https://buh.moe" image="amemoia.gif" />
+        <WebsiteButton link="https://buh.moe" image="amemoia.gif" person="amemoia" />
-        <WebsiteButton link="https://github.com/kurtbahartr" image="kurtbahartr.png" />
+        <WebsiteButton link="https://github.com/kurtbahartr" image="kurtbahartr.png" person="kurtbahartr" />
-        <WebsiteButton link="https://notnite.com" image="notnite.png" />
+        <WebsiteButton link="https://notnite.com" image="notnite.png" person="notnite" />
-        <WebsiteButton link="https://palaiologos.rocks" image="palaiologos.png" />
+        <WebsiteButton link="https://palaiologos.rocks" image="palaiologos.png" person="palaiologos" />
-        <WebsiteButton link="https://ata.moe" image="ata.png" />
+        <WebsiteButton link="https://ata.moe" image="ata.png" person="ata" />
-        <WebsiteButton link="https://aria.coffee" image="aria.gif" />
+        <WebsiteButton link="https://aria.coffee" image="aria.gif" person="aria" />
-        <WebsiteButton link="https://kapunium.neocities.org" image="kapunium.gif" />
+        <WebsiteButton link="https://kapunium.neocities.org" image="kapunium.gif" person="kapunium" />
-        <WebsiteButton link="https://unevenprankster.neocities.org" image="uneven.png" />
+        <WebsiteButton link="https://unevenprankster.neocities.org" image="uneven.png" person="uneven prankster" />
-        <WebsiteButton link="https://disarray.sh" image="disarray.png" />
+        <WebsiteButton link="https://disarray.sh" image="disarray.png" person="disarray" />
-        <WebsiteButton link="https://pixelde.su" image="pixeldesu.png" />
+        <WebsiteButton link="https://pixelde.su" image="pixeldesu.png" person="pixel" />
+        <WebsiteButton link="https://tengu.space" image="devi.gif" person="devious tengu" />
+        <WebsiteButton link="https://starry-mirai.neocities.org" image="starrymirai.gif" person="starry-mirai" />
+        <WebsiteButton link="https://boogtoons.neocities.org" image="pinkthecat.jpg" person="pinkthecat" />
+        <WebsiteButton link="https://eightyeightthirty.one" image="88x31.png" person="eightyeightthirty.one" />
     </div>
     <p>
         add mine to your site!
     </p>
+    <p>
+        <img src="buttons/prefetcher.gif" alt="prefetcher's 88x31 button" />
+    </p>
 </Layout>