tweaks

public/robots.txt

@@ -0,0 +1,27 @@
+# -------|-------------comment-----------------|-----date-------
+# *       created main loop & timing control     14 hours ago
+# |
+# *       enabled config file parsing            9 hours ago
+# |
+# *       misc bugfixes                          5 hours ago
+# |
+# *       code additions/edits                   4 hours ago
+# |
+# *       more code                              4 hours ago
+# |\
+# | *     here have code                         4 hours ago
+# | |
+# | *     aaaaaaaa                               3 hours ago
+# |/
+# *       adkfjslkdfjsdklfj                      2 hours ago
+# |
+# *       my hands are typing words              2 hours ago
+# |
+# *       haaaaaaaaands                          2 hours ago
+# 
+#             As a project drags on, my commit
+#             messages get less and less informative.
+#                      xkcd.com/1296
+
+User-agent: *
+Allow: /

src/routes/*404.css

@@ -0,0 +1,3 @@
+h1 {
+  text-align: center;
+}

src/routes/*404.tsx

@@ -0,0 +1,104 @@
+import { HttpStatusCode } from "@solidjs/start";
+import { Title } from "@solidjs/meta";
+import { onCleanup, onMount } from "solid-js";
+import { createGlobals } from "~/components/global";
+import { createPointers } from "~/components/sim/pointers";
+import { createSim, toggleBaseColor } from "~/components/sim/shaders";
+import "./*404.css";
+
+export default function NotFound() {
+  createGlobals();
+
+  let c: HTMLCanvasElement;
+  onMount(() => {
+    function tripleClick(evt: MouseEvent) {
+      if (evt.detail === 3) {
+        document.body.classList.toggle("light");
+        toggleBaseColor();
+      }
+    }
+    window.addEventListener("click", tripleClick);
+    onCleanup(() => window.removeEventListener("click", tripleClick));
+
+    function hashchange() {
+      document.querySelector(window.location.hash)?.scrollIntoView();
+    }
+    window.addEventListener("hashchange", hashchange);
+    onCleanup(() => window.removeEventListener("hashchange", hashchange));
+
+    function resize() {
+      c.width = window.innerWidth;
+      c.height = window.innerHeight;
+    }
+    window.addEventListener("resize", resize);
+    onCleanup(() => window.removeEventListener("resize", resize));
+    resize();
+
+    try {
+      const pointers = createPointers();
+      const { regl, update, fullscreen, createSplat } = createSim(c);
+      let t = 0;
+      regl.frame(() => {
+        fullscreen(() => {
+          const red = Math.sin(t + 0) * 0.8 + 0.8;
+          const green = Math.sin(t + 2) * 0.8 + 0.8;
+          const blue = Math.sin(t + 4) * 0.8 + 0.8;
+          t += 0.1;
+
+          for (const [, pointer] of pointers) {
+            createSplat(pointer.x, pointer.y, pointer.dx * 10, pointer.dy * 10, [red, green, blue], 0.0005);
+            pointer.dx *= 0.5;
+            pointer.dy *= 0.5;
+          }
+
+          update();
+        });
+      });
+
+      function tripleClick(evt: MouseEvent) {
+        if (evt.detail === 3) {
+          toggleBaseColor();
+        }
+      }
+      window.addEventListener("click", tripleClick);
+      onCleanup(() => window.removeEventListener("click", tripleClick));
+    } catch (e) {
+      console.error(e);
+      c.remove();
+      document.querySelector("#logo-placeholder")!.id = "logo-img";
+    }
+  });
+
+  return (
+    <div>
+      <HttpStatusCode code={404} />
+      <Title>Page not found · milomg.dev</Title>
+      <canvas ref={c!} id="c"></canvas>
+      <nav>
+        <div>
+          <a href="/#top" id="logo">
+            <div id="logo-placeholder" role="img" aria-label="logo"></div>
+          </a>
+        </div>
+        <ol class="links">
+          <li>
+            <a href="/#about">About</a>
+          </li>
+          <li>
+            <a href="/#work">Projects</a>
+          </li>
+          <li>
+            <a href="/#fun">Fun</a>
+          </li>
+        </ol>
+      </nav>
+      <section>
+        <h1>Page not found</h1>
+        <p>
+          I can't find the page you're looking for. Maybe you've mistyped it, or maybe I broke something. In the meantime, enjoy some{" "}
+          <a href="https://open.spotify.com/playlist/37i9dQZF1DX3bH0P2uDnWA">Electro Swing</a>
+        </p>
+      </section>
+    </div>
+  );
+}

src/routes/index.css

@@ -1,13 +1,3 @@
-#c {
-  position: fixed;
-  display: block;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  z-index: -1;
-  background: var(--background);
-}
 .nice {
   color: #fff;
   mix-blend-mode: color-dodge;

src/routes/index.tsx

@@ -83,7 +83,7 @@ const App = () => {
       <nav>
         <div>
           <a href="#top" id="logo">
-            <div id="logo-placeholder"></div>
+            <div id="logo-placeholder" role="img" aria-label="logo"></div>
           </a>
         </div>
         <ol class="links">

src/style.css

@@ -79,7 +79,16 @@ h2 {
 a {
   color: var(--accent);
 }
-
+#c {
+  position: fixed;
+  display: block;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  background: var(--background);
+}
 nav {
   top: 0;
   left: 0;