optimize images, blobs, and redo node stats page

src/components/Head.tsx

@@ -21,7 +21,7 @@ export const RouterHead = component$(() => {
       <link rel="preload" as="font" href="/fonts/MinecraftBoldItalic.otf" crossOrigin="anonymous" />
 
       <link rel="canonical" href={loc.url.href} />
-      <link rel="icon" type="image/png" href="/branding/apple-icon.png" />
+      <link rel="icon" type="image/png" href="/branding/icon.svg" />
       <link rel="apple-touch-icon" href="/branding/apple-icon.png" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 

src/components/elements/Card.tsx

@@ -51,7 +51,7 @@ export default component$(({ color, darker, href, onClick$, extraClass, row }: a
         {color && (
           <div class="absolute -z-10 inset-0 w-full h-full transition-all overflow-clip" style={{ containerType: 'size' }}>
             <div class={{
-              'absolute top-0 w-32 h-32 rounded-full opacity-20 ease-in-out filter blur-xl': true,
+              'absolute top-0 w-[30cqw] h-[30cqw] rounded-full opacity-20 ease-in-out blur-xl': true,
               'animate-blob': blob === 0,
               'animate-blob1': blob === 1,
               'animate-blob2': blob === 2,
@@ -69,7 +69,7 @@ export default component$(({ color, darker, href, onClick$, extraClass, row }: a
               'bg-gray-400': color === 'gray',
             }}></div>
             <div class={{
-              'absolute top-0 w-32 h-32 rounded-full opacity-20 ease-in-out filter blur-xl': true,
+              'absolute top-0 w-[30cqw] h-[30cqw] rounded-full opacity-20 ease-in-out blur-xl': true,
               '-animation-delay-5': true,
               'animate-blob': blob === 0,
               'animate-blob1': blob === 1,
@@ -88,7 +88,7 @@ export default component$(({ color, darker, href, onClick$, extraClass, row }: a
               'bg-gray-500': color === 'gray',
             }}></div>
             <div class={{
-              'absolute top-0 w-32 h-32 rounded-full opacity-20 ease-in-out filter blur-xl': true,
+              'absolute top-0 w-[30cqw] h-[30cqw] rounded-full opacity-20 ease-in-out blur-xl': true,
               '-animation-delay-10': true,
               'animate-blob': blob === 0,
               'animate-blob1': blob === 1,

src/routes/[...404]/index.tsx

@@ -1,31 +1,29 @@
 import { component$ } from '@builder.io/qwik';
 import { type DocumentHead } from '@builder.io/qwik-city';
+import { SPAButton } from '~/components/elements/Button';
 import BirdflopConfused from '~/components/icons/BirdflopConfused';
-import background from '~/components/images/background.png';
+import Background from '~/components/images/background.png?jsx';
 
 export default component$(() => {
   return (
     <section class="flex mx-auto max-w-7xl px-6 sm:items-center justify-center min-h-[calc(100lvh-68px)]" >
-      <picture class="fixed bottom-0 scale-110 overflow-hidden -z-10 h-[100lvh] w-[100lvw] bg-red-500/40" id="bg">
-        <img
-          width={1920}
-          height={1080}
-          src={background}
-          class="object-cover object-center h-full w-full opacity-55 grayscale blur-xl"
-          alt="Background"
-        />
-      </picture>
-      <div class="font-bold text-red-400 text-4xl mb-12">
+      <Background class="fixed bottom-0 scale-110 overflow-hidden -z-10 h-[100lvh] w-[100lvw] object-cover object-center opacity-45 grayscale blur-xl" id="bg" />
+      <div class="text-red-400 text-4xl">
         <div class="hidden sm:flex">
           <BirdflopConfused width={200} />
         </div>
         <div class="sm:hidden">
           <BirdflopConfused width={100} />
         </div>
-        <h1 class="mt-12">404: Page not found</h1>
+        <h1 class="font-bold mb-4 mt-12">404: Page not found</h1>
         <p class="font-italic text-gray-400 text-xl">
-          Whoops! You've hit a dead-end. <a href="/" class="text-blue-300/50 underline">Go back home</a>
+          Whoops! You've hit a dead-end.
         </p>
+        <div class="flex mt-4">
+          <SPAButton href="/" big color="blue">
+            Go back home
+          </SPAButton>
+        </div>
       </div>
     </section>
   );

src/routes/index.tsx

@@ -7,7 +7,7 @@ import Chart from '~/components/elements/Chart';
 import Birdflop from '~/components/icons/Birdflop';
 import { initiateTyper } from '~/components/util/Typer';
 
-import background from '~/components/images/background.png';
+import Background from '~/components/images/background.png?jsx';
 import { ExternalButton, SPAButton } from '~/components/elements/Button';
 
 export default component$(() => {
@@ -25,15 +25,7 @@ export default component$(() => {
 
   return <>
     <section class="flex mx-auto max-w-7xl px-6 items-center justify-center min-h-[calc(100dvh-56px)]">
-      <picture class="fixed bottom-0 scale-110 overflow-hidden -z-10 h-[100lvh] w-[100lvw]" id="bg">
-        <img
-          width={1920}
-          height={1080}
-          src={background}
-          class="object-cover object-center h-full w-full opacity-55"
-          alt="Background"
-        />
-      </picture>
+      <Background class="fixed bottom-0 scale-110 overflow-hidden -z-10 h-[100lvh] w-[100lvw] object-cover object-center opacity-55" id="bg" />
       <div class="text-center justify-center flex relative align-center w-full">
         <div class="flex flex-col gap-2 sm:gap-6 w-full px-4">
           <div class="flex relative justify-center align-center fade-in animation-delay-100 mb-8 drop-shadow-2xl">

src/routes/node-stats/index.tsx

@@ -1,40 +1,40 @@
 import { component$ } from '@builder.io/qwik';
 import type { DocumentHead } from '@builder.io/qwik-city';
-import background from '~/components/images/background.png';
+import { ExternalButton } from '~/components/elements/Button';
+import Card, { CardHeader } from '~/components/elements/Card';
+import Background from '~/components/images/background.png?jsx';
 
 export default component$(() => {
   return (
     <section class="flex flex-col gap-3 mx-auto max-w-7xl px-6 sm:items-center justify-center min-h-[calc(100svh-100px)]">
-      <picture class="fixed bottom-0 scale-110 overflow-hidden -z-10 h-[100lvh] w-[100lvw]" id="bg">
-        <img
-          width={1920}
-          height={1080}
-          src={background}
-          class="object-cover object-center h-full w-full opacity-55 blur-xl"
-          alt="Background"
-        />
-      </picture>
+      <Background class="fixed bottom-0 scale-110 overflow-hidden -z-10 h-[100lvh] w-[100lvw] object-cover object-center opacity-45 blur-xl" id="bg" />
       <h1 class="font-bold text-gray-50 text-2xl sm:text-4xl mb-2">
         Node Stats
       </h1>
       <div class="flex gap-3 justify-center">
-        <a href="https://status.birdflop.com/" class="flex transition duration-200 rounded-xl bg-blue-600/80 hover:bg-sky-600 border-sky-600 border-2 px-6 py-3 font-bold text-sky-100 md:py-4 md:px-8 md:text-lg whitespace-nowrap justify-center">
+        <ExternalButton href="https://status.birdflop.com/" big>
           Overview
-        </a>
-        <a href="https://netdata.birdflop.com/panel" class="flex transition duration-200 rounded-xl bg-blue-600/80 hover:bg-sky-600 border-sky-600 border-2 px-6 py-3 font-bold text-sky-100 md:py-4 md:px-8 md:text-lg whitespace-nowrap justify-center">
+        </ExternalButton>
+        <ExternalButton href="https://netdata.birdflop.com/panel" big>
           Web Services
-        </a>
+        </ExternalButton>
       </div>
       <div class="flex gap-3 justify-center">
-        <a href="https://netdata.birdflop.com/crabwings" class="flex transition duration-200 rounded-xl bg-blue-600/80 hover:bg-sky-600 border-sky-600 border-2 px-6 py-3 font-bold text-sky-100 md:py-4 md:px-8 md:text-lg whitespace-nowrap justify-center">
-          Crabwings (NYC)
-        </a>
-        <a href="http://impeyes.birdflop.com:19999/" class="flex transition duration-200 rounded-xl bg-blue-600/80 hover:bg-blue-600 border-sky-600 border-2 px-6 py-3 font-bold text-sky-100 md:py-4 md:px-8 md:text-lg whitespace-nowrap justify-center">
-          Impeyes (EU)
-        </a>
-        <a href="http://goosegills.birdflop.com:19999/" class="flex transition duration-200 rounded-xl bg-blue-600/80 hover:bg-blue-600 border-sky-600 border-2 px-6 py-3 font-bold text-sky-100 md:py-4 md:px-8 md:text-lg whitespace-nowrap justify-center">
-          Impeyes (EU)
-        </a>
+        <Card href="/resources/animtexture" color="red">
+          <CardHeader subheader="US">
+            Crabwings
+          </CardHeader>
+        </Card>
+        <Card href="/resources/colorstrip" color="orange">
+          <CardHeader subheader="EU">
+            Impeyes
+          </CardHeader>
+        </Card>
+        <Card href="/resources/presettools" color="yellow">
+          <CardHeader subheader="EU">
+            Jellyfishjaws
+          </CardHeader>
+        </Card>
       </div>
     </section>
   );

tailwind.config.js

@@ -1,7 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 
 function getBlobKeyFrame() {
-  const translateXPercentages = [0, 18, 35, 52, 70];
+  const translateXPercentages = [0, 19, 38, 57, 76];
   const translateYPercentages = [0, 12, 25, 38, 50];
   const scaleValues = [0.8, 1, 1.2, 1.4];