rebrand, new parallax, new fonts, new 88x31, add bluesky, 404 page st…

…uffs

package.json

@@ -11,22 +11,21 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.8.3",
-    "@astrojs/mdx": "^3.1.5",
+    "@astrojs/mdx": "^3.1.6",
     "@astrojs/prism": "^3.1.0",
     "@astrojs/sitemap": "^3.1.6",
     "@astrojs/tailwind": "^5.1.0",
-    "@biomejs/biome": "^1.8.3",
-    "@fontsource/iosevka-curly-slab": "^5.0.11",
-    "@fontsource/lora": "^5.0.19",
-    "astro": "^4.15.4",
+    "@biomejs/biome": "^1.9.1",
+    "@fontsource/forum": "^5.1.0",
+    "astro": "^4.15.6",
     "astro-auto-import": "^0.4.2",
     "biome": "^0.3.3",
     "prettier": "^3.3.3",
     "prettier-plugin-astro": "^0.13.0",
     "sharp": "^0.33.5",
-    "shiki": "^1.16.2",
-    "tailwindcss": "^3.4.10",
-    "typescript": "^5.5.4",
+    "shiki": "^1.17.7",
+    "tailwindcss": "^3.4.11",
+    "typescript": "^5.6.2",
     "unist-util-visit": "^5.0.0"
   }
 }

src/components/Buttons.astro

@@ -4,7 +4,7 @@ import { Image } from "astro:assets";
 const buttons = [
   '<a href="https://i1vy.moe/" target="_blank"><img src="https://stuff.i1vy.moe/88x31.png" /></a>',
   '<a href="https://maggiepi.site/" target="_blank"><img src="https://maggiepi.site/88x31s/maggie8831.gif" /></a>',
-  '<a href="https://amemoia.nekoweb.org/" target="_blank"><img src="https://amemoia.nekoweb.org/resources/buttons/amemoia.png"></a>',
+  '<a href="https://amemoia.github.io/" target="_blank"><img src="https://amemoia.github.io/resources/buttons/88x31.png"></a>',
   '<Image src="https://cyber.dabamos.de/88x31/88x31.gif" alt="88x31" width="88" height="31" />',
   '<Image src="https://cyber.dabamos.de/88x31/blink-0.gif" alt="blink" width="88" height="31" />',
   '<Image src="https://cyber.dabamos.de/88x31/bu12.gif" alt="bu12" width="88" height="31" />',

src/components/Icon.astro

@@ -6,10 +6,11 @@ interface Props {
 const { icon } = Astro.props;
 
 const icons: Record<string, any> = {
-  fedi: `<svg viewBox="0 0 512 512" role="img" xmlns="http://www.w3.org/2000/svg"><title>Akkoma</title><path d="M 238.07737,86.478754 C 326.85973,17.68622 371.94004,-8.2776922 382.86502,2.2646391 394.88154,13.86028 367.05652,45.585704 353.80752,98.61021 c -2.5037,10.02018 -3.86839,28.15497 -4.09407,54.40439 83.57836,46.40673 123.96143,82.58474 121.14923,108.53401 -1.48156,13.671 -41.07138,11.41797 -118.76945,-6.7591 37.01185,90.50363 48.20985,163.674 33.59398,219.51109 -15.79294,60.33387 -79.93191,37.06479 -103.64427,-1.79775 -20.63025,-33.81123 -29.0031,-88.87378 -40.55678,-86.96884 C 214.97918,389.9044 178.82068,522.02067 85.328002,511.39166 37.260413,505.92694 36.368733,438.64824 45.530324,382.12699 59.249736,297.48684 90.65481,230.85995 139.74554,182.24632 80.808623,154.74299 53.005347,136.31768 56.335716,126.97041 c 8.803587,-24.70883 66.769624,-19.4799 97.400174,-20.13327 9.47037,-0.202 25.17147,0.73812 47.1033,2.82039 17.68256,-9.917883 30.09529,-17.644141 37.23818,-23.178776 z M 211.97763,210 c -37.46882,11.38803 -56.12743,35.95829 -55.9758,73.71077 0.0989,24.63099 40.95072,34.7816 70.8282,30.23261 60.24423,-9.17248 48.86363,-41.21507 40.18206,-62.65399 -2.71247,-6.69837 -9.60638,-16.24915 -20.68174,-28.65233 z" /></svg>`,
-  kofi: `<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M23.881 8.948c-.773-4.085-4.859-4.593-4.859-4.593H.723c-.604 0-.679.798-.679.798s-.082 7.324-.022 11.822c.164 2.424 2.586 2.672 2.586 2.672s8.267-.023 11.966-.049c2.438-.426 2.683-2.566 2.658-3.734 4.352.24 7.422-2.831 6.649-6.916zm-11.062 3.511c-1.246 1.453-4.011 3.976-4.011 3.976s-.121.119-.31.023c-.076-.057-.108-.09-.108-.09-.443-.441-3.368-3.049-4.034-3.954-.709-.965-1.041-2.7-.091-3.71.951-1.01 3.005-1.086 4.363.407 0 0 1.565-1.782 3.468-.963 1.904.82 1.832 3.011.723 4.311zm6.173.478c-.928.116-1.682.028-1.682.028V7.284h1.77s1.971.551 1.971 2.638c0 1.913-.985 2.667-2.059 3.015z"/></svg>`,
-  linktree: `<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m13.73635 5.85251 4.00467-4.11665 2.3248 2.3808-4.20064 4.00466h5.9085v3.30473h-5.9365l4.22865 4.10766-2.3248 2.3338L12.0005 12.099l-5.74052 5.76852-2.3248-2.3248 4.22864-4.10766h-5.9375V8.12132h5.9085L3.93417 4.11666l2.3248-2.3808 4.00468 4.11665V0h3.4727zm-3.4727 10.30614h3.4727V24h-3.4727z"/></svg>`,
-  youtube: `<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>`,
+  fedi: `<svg viewBox="0 0 512 512" role="img" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M 238.07737,86.478754 C 326.85973,17.68622 371.94004,-8.2776922 382.86502,2.2646391 394.88154,13.86028 367.05652,45.585704 353.80752,98.61021 c -2.5037,10.02018 -3.86839,28.15497 -4.09407,54.40439 83.57836,46.40673 123.96143,82.58474 121.14923,108.53401 -1.48156,13.671 -41.07138,11.41797 -118.76945,-6.7591 37.01185,90.50363 48.20985,163.674 33.59398,219.51109 -15.79294,60.33387 -79.93191,37.06479 -103.64427,-1.79775 -20.63025,-33.81123 -29.0031,-88.87378 -40.55678,-86.96884 C 214.97918,389.9044 178.82068,522.02067 85.328002,511.39166 37.260413,505.92694 36.368733,438.64824 45.530324,382.12699 59.249736,297.48684 90.65481,230.85995 139.74554,182.24632 80.808623,154.74299 53.005347,136.31768 56.335716,126.97041 c 8.803587,-24.70883 66.769624,-19.4799 97.400174,-20.13327 9.47037,-0.202 25.17147,0.73812 47.1033,2.82039 17.68256,-9.917883 30.09529,-17.644141 37.23818,-23.178776 z M 211.97763,210 c -37.46882,11.38803 -56.12743,35.95829 -55.9758,73.71077 0.0989,24.63099 40.95072,34.7816 70.8282,30.23261 60.24423,-9.17248 48.86363,-41.21507 40.18206,-62.65399 -2.71247,-6.69837 -9.60638,-16.24915 -20.68174,-28.65233 z" /></svg>`,
+  bluesky: `<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z"/></svg>`,
+  kofi: `<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M23.881 8.948c-.773-4.085-4.859-4.593-4.859-4.593H.723c-.604 0-.679.798-.679.798s-.082 7.324-.022 11.822c.164 2.424 2.586 2.672 2.586 2.672s8.267-.023 11.966-.049c2.438-.426 2.683-2.566 2.658-3.734 4.352.24 7.422-2.831 6.649-6.916zm-11.062 3.511c-1.246 1.453-4.011 3.976-4.011 3.976s-.121.119-.31.023c-.076-.057-.108-.09-.108-.09-.443-.441-3.368-3.049-4.034-3.954-.709-.965-1.041-2.7-.091-3.71.951-1.01 3.005-1.086 4.363.407 0 0 1.565-1.782 3.468-.963 1.904.82 1.832 3.011.723 4.311zm6.173.478c-.928.116-1.682.028-1.682.028V7.284h1.77s1.971.551 1.971 2.638c0 1.913-.985 2.667-2.059 3.015z"/></svg>`,
+  linktree: `<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="m13.73635 5.85251 4.00467-4.11665 2.3248 2.3808-4.20064 4.00466h5.9085v3.30473h-5.9365l4.22865 4.10766-2.3248 2.3338L12.0005 12.099l-5.74052 5.76852-2.3248-2.3248 4.22864-4.10766h-5.9375V8.12132h5.9085L3.93417 4.11666l2.3248-2.3808 4.00468 4.11665V0h3.4727zm-3.4727 10.30614h3.4727V24h-3.4727z"/></svg>`,
+  youtube: `<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>`,
   newtablink: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M14 2.5a.5.5 0 0 0-.5-.5h-6a.5.5 0 0 0 0 1h4.793L2.146 13.146a.5.5 0 0 0 .708.708L13 3.707V8.5a.5.5 0 0 0 1 0z"/></svg>`,
 };
 

src/components/Link.astro

@@ -2,22 +2,22 @@
 import Icon from "./Icon.astro";
 
 interface Props {
-    href: string;
-    name: string;
-    icon: string;
+  href: string;
+  name: string;
+  icon: string;
 }
 
 const { href, name, icon } = Astro.props;
 ---
 
 <a
-    rel="me"
-    href={href}
-    title={name}
-    aria-label={icon}
-    class="w-16 h-16 p-2 fill-current transition-all rounded-full backdrop-blur-md backdrop-saturate-200 bg-zinc-900/50 border border-zinc-400/20 text-red-100 select-none inline-flex items-center justify-center hover:bg-red-50 hover:text-zinc-950"
+  rel="me"
+  href={href}
+  title={name}
+  aria-label={icon}
+  class="w-16 h-16 max-[333px]:w-12 max-[333px]:h-12 p-2 fill-current transition-all rounded-full backdrop-blur-md backdrop-saturate-200 bg-zinc-900/50 border border-zinc-400/20 text-red-100 select-none inline-flex items-center justify-center hover:bg-red-50 hover:text-zinc-950"
 >
-    <div class="w-3/5 h-3/5 self-center">
-        <Icon icon={icon} />
-    </div>
-</a>
+  <div class="w-3/5 h-3/5 self-center">
+    <Icon icon={icon} />
+  </div>
+</a>

src/layouts/Layout.astro

@@ -1,39 +1,43 @@
 ---
 interface Props {
-    title: string;
-    class?: string;
+  title: string;
+  class?: string;
 }
 
 const { class: className, title } = Astro.props;
 
-// Iosevka and Lora are licensed under SIL OFL
-import "@fontsource/iosevka-curly-slab";
-import "@fontsource/lora";
+// fonts used are licensed under SIL OFL
+import "@fontsource/forum";
 ---
 
 <!doctype html>
 <html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <meta name="description" content="my personal website" />
-        <meta name="viewport" content="width=device-width" />
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="description" content="my personal website" />
+    <meta name="viewport" content="width=device-width" />
 
-        <link rel="shortcut icon" href="/favicon.png" />
-        <link rel="apple-touch-icon" href="/favicon.png" />
+    <link rel="shortcut icon" href="/favicon.png" />
+    <link rel="apple-touch-icon" href="/favicon.png" />
 
-        <meta name="generator" content={Astro.generator} />
-        <meta content={title} property="og:title" />
-        <meta content="where all goes to die. /ᐠ - ˕ -マ Ⳋ" property="og:description" />
-        <meta content="https://nvkomata.github.io" property="og:url" />
-        <meta
-            content="https://nvkomata.github.io/favicon.png"
-            property="og:image"
-        />
-        <meta content="#020001" data-react-helmet="true" name="theme-color" />
+    <meta name="generator" content={Astro.generator} />
+    <meta content={title} property="og:title" />
+    <meta
+      content="where all goes to die. /ᐠ - ˕ -マ Ⳋ"
+      property="og:description"
+    />
+    <meta content="https://nvkomata.github.io" property="og:url" />
+    <meta
+      content="https://nvkomata.github.io/favicon.png"
+      property="og:image"
+    />
+    <meta content="#020001" data-react-helmet="true" name="theme-color" />
 
-        <title>{title}</title>
-    </head>
-    <body class:list={['w-screen h-screen overflow-hidden bg-black text-red-50 font-sans', className]}>
-        <slot />
-    </body>
-</html>
+    <title>{title}</title>
+  </head>
+  <body
+    class:list={["w-screen h-screen bg-black text-red-50 font-sans", className]}
+  >
+    <slot />
+  </body>
+</html>

src/pages/404.astro

@@ -3,28 +3,57 @@ import Layout from "../layouts/Layout.astro";
 ---
 
 <Layout title="404 - NVKOMATA">
-    <main
-        class="select-none font-mono mx-auto px-4 h-screen text-sm flex flex-col justify-center items-center"
+  <main
+    class="select-none font-mono mx-auto px-4 h-screen text-sm flex flex-col justify-center items-center"
+  >
+    <video
+      class="w-lg"
+      autoplay
+      loop
+      muted
+      playsinline
+      poster="ChiyoTsukidate.jpg"
+      id="404-main-show"
     >
-        <video
-            class="w-lg"
-            autoplay
-            loop
-            muted
-            playsinline
-            poster="ChiyoTsukidate.jpg"
-        >
-            <source src="outoftouch.mp4" />
-        </video>
-        <div class="max-w-lg mt-4">
-            <h1 class="flex justify-between text-4xl"><span>4</span><span>0</span><span>4</span></h1>
-            <p class="flex justify-between"><span>n</span><span>o</span><span>t</span><span> </span><span>f</span><span>o</span><span>u</span><span>n</span><span>d</span></p>
-            <p class="text-center mt-4">
-                sorry, <del>couldn't <br />find this page</del><br />you're out
-                of touch
-            </p>
-        </div>
-        <img class="invert hidden md:block mb-4 max-w-24 relative left-32 bottom-32 -mb-24 opacity-10" src="heart.svg" alt="</3" />
-        <a class="border-t border-red-200/20 transition-all mt-4 px-4 py-2 font-bold hover:bg-red-100 hover:text-zinc-950" href="/">go back</a>
-    </main>
+    </video>
+    <div class="max-w-lg mt-4">
+      <h1 class="flex justify-between text-4xl">
+        <span>4</span><span>0</span><span>4</span>
+      </h1>
+      <p class="flex justify-between">
+        <span>n</span><span>o</span><span>t</span><span> </span><span>f</span
+        ><span>o</span><span>u</span><span>n</span><span>d</span>
+      </p>
+      <p class="text-center mt-4" id="404-comment"></p>
+    </div>
+    <img
+      class="invert hidden md:block max-w-24 relative left-32 bottom-32 -mb-24 opacity-10"
+      src="heart.svg"
+      alt="</3"
+    />
+    <a
+      class="border-t border-red-200/20 transition-all mt-4 px-4 py-2 font-bold hover:bg-red-100 hover:text-zinc-950"
+      href="/">go back</a
+    >
+  </main>
 </Layout>
+
+<script is:inline>
+  var d = Math.random();
+  const video = document.getElementById("404-main-show");
+  const comment = document.getElementById("404-comment");
+  if (d <= 0.98) {
+    video.innerHTML = `<source src="outoftouch.mp4" />`;
+    comment.innerHTML = `sorry, <del>couldn't <br />find this page</del><br />you're out of touch`;
+    document.body.classList.add(
+      "bg-gradient-to-b",
+      "from-black",
+      "to-[#282128]",
+    );
+  } else {
+    video.setAttribute("poster", "15.png");
+    video.classList.add("max-w-lg", "w-[100%]");
+    comment.innerHTML = `NOTHING'S GONNA <br />CHANGE THE WORLD`;
+    document.body.classList.add("bg-gradient-to-t", "from-black", "to-red-950");
+  }
+</script>