footer

app.vue

@@ -1,9 +1,11 @@
 <script>
 import Backdrop from "./components/Backdrop.vue";
+import Footer from "./components/Footer.vue";
 </script>
 <template>
   <div>
     <Backdrop />
     <router-view />
+    <Footer />
   </div>
 </template>

components/Backdrop.vue

@@ -20,7 +20,7 @@ class Char {
   draw() {
     const distToCursor = Math.hypot(
       this.x - cursor.value.x,
-      this.y - cursor.value.y,
+      this.y - cursor.value.y
     );
 
     const highlight = Math.max(0, 0.5 - distToCursor / 250);
@@ -66,7 +66,7 @@ const init = () => {
   const minColumns = 15; // Ensure at least this many columns on mobile
   const columns = Math.max(
     minColumns,
-    Math.floor(window.innerWidth / columnSpacing),
+    Math.floor(window.innerWidth / columnSpacing)
   );
 
   // Adjust rows based on screen height
@@ -75,7 +75,7 @@ const init = () => {
   const maxRows = 25; // Cap for performance on large screens
   const rows = Math.min(
     maxRows,
-    Math.max(minRows, Math.floor(window.innerHeight / rowSpacing)),
+    Math.max(minRows, Math.floor(window.innerHeight / rowSpacing))
   );
 
   chars = [];
@@ -84,7 +84,7 @@ const init = () => {
       const x = i * (window.innerWidth / columns); // Evenly distribute columns
       const y = j * rowSpacing - Math.random() * window.innerHeight;
       const char = String.fromCharCode(
-        0x2729 + Math.floor(Math.random() * 706),
+        0x2729 + Math.floor(Math.random() * 706)
       );
       chars.push(new Char(x, y, char));
     }
@@ -130,6 +130,31 @@ const handleResize = () => {
 onMounted(() => {
   init();
   animate();
+  // if im holding down shift how can i make it go faster? code it
+  window.addEventListener("keydown", (e) => {
+    if (e.key === "Shift") {
+      chars.forEach((char) => {
+        char.speed *= 10; // Double the speed when Shift is pressed
+      });
+    }
+    if (e.ctrlKey) {
+      chars.forEach((char) => {
+        char.speed *= 1.1; // Halve the speed when Ctrl is pressed
+      });
+    }
+    if (e.altKey) {
+      chars.forEach((char) => {
+        char.speed *= 0.9; // Halve the speed when Alt is pressed
+      });
+    }
+  });
+  window.addEventListener("keyup", (e) => {
+    if (e.key === "Shift") {
+      chars.forEach((char) => {
+        char.speed /= 10; // Reset the speed when Shift is released
+      });
+    }
+  });
   window.addEventListener("mousemove", handleMouseMove);
   window.addEventListener("resize", handleResize);
 });

components/Footer.vue

@@ -0,0 +1,44 @@
+<template>
+  <footer
+    class="footer sm:footer-horizontal bg-[#1e1e2e] text-neutral-content p-5 shadow-lg rounded-lg absolute bottom-5 left-1/2 transform -translate-x-1/2 w-1/3 max-w-screen-lg"
+  >
+    <aside>
+      <p class="font-mono font-small">
+        Made by Neon - Copyright {{ new Date().getFullYear() }}.
+        <br />
+        <br />
+        Freedom of speech is a fundamental human right.
+      </p>
+    </aside>
+    <nav>
+      <div class="grid grid-flow-col gap-2">
+        <!-- Social icons go here -->
+        <!-- TODO: make sure the bento icon is here, pgp, and canary and source link -->
+        <a
+          href="https://github.com/saahild.com"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Icon
+            name="mdi:github"
+            class="text-2xl hover:scale-110 transition-transform duration-300"
+          />
+        </a>
+        <a href="https://saahild.com/creds/public.pgp.txt">
+          <Icon
+            name="mdi:key"
+            class="text-2xl hover:scale-110 transition-transform duration-300"
+          />
+        </a>
+        <!-- <Icon name="catppuccin:folder-queue" class="text-2xl" /> -->
+        <a>
+          <!-- <img
+            src="/bento.svg"
+            alt="Bento Icon"
+            class="w-8 h-8 hover:scale-110 transition-transform duration-300"
+          /> -->
+        </a>
+      </div>
+    </nav>
+  </footer>
+</template>

package.json

@@ -23,5 +23,8 @@
     "tailwindcss": "^4.1.10",
     "vue": "^3.5.16",
     "vue-router": "^4.5.1"
+  },
+  "devDependencies": {
+    "@iconify-json/catppuccin": "^1.2.11"
   }
 }

pages/index.vue

@@ -1,15 +1 @@
-<template>
-  <div class="hero min-h-screen">
-    <div class="hero-content text-center">
-      <div class="max-w-md">
-        <h1 class="text-5xl font-bold">Hello there</h1>
-        <p class="py-6">
-          Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda
-          excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a
-          id nisi.
-        </p>
-        <button class="btn btn-primary">Get Started</button>
-      </div>
-    </div>
-  </div>
-</template>
+<template>meow</template>