enhancement(lint): Fix lint errors for pages/about.vue

Co-authored-by: NeonGamerBot-QK <neon@saahild.com>
Signed-off-by: zeon-neon[bot] <136533918+zeon-neon[bot]@users.noreply.github.com>

app.vue

@@ -1,9 +1,41 @@
 <script setup>
 import Backdrop from "./components/Backdrop.vue";
 import Footer from "./components/Footer.vue";
-// import "./lib/jsscripts/index.ts";
 import Navbar from "./components/Navbar.vue";
+import "./lib/jsscripts/index.ts";
 useHead({
+  title: "Saahils Site",
+  meta: [
+    {
+      name: "viewport",
+      content: "width=device-width, initial-scale=1.0",
+    },
+    {
+      name: "description",
+      content:
+        "Saahil's personal website, showcasing his projects, blog, and more.",
+    },
+    {
+      name: "robots",
+      content: "noindex, nofollow",
+    },
+    {
+      name: "author",
+      content: "Neon",
+    },
+    {
+      name: "charset",
+      content: "UTF-8",
+    },
+    {
+      name: "keywords",
+      content: "neon, saahil, portfolio",
+    },
+    {
+      name: "color-scheme",
+      content: "dark",
+    },
+  ],
   noscript: [
     {
       children: `

components/AboutMe.vue

@@ -0,0 +1,19 @@
+<script>
+// TODO: calc current age, hobbies
+</script>
+<template>
+  <h1 class="font-bold text-3xl">About me:</h1>
+  <ul>
+    <li>I am currently XYZ years old</li>
+    <li>
+      Im currently in (highschool|collage|j*b|retirment|greatbeyond) (this is
+      just a guess)
+    </li>
+    <li>
+      i like mostly coding in my freetime, messing with bugs, watching anime and
+      sleeping
+    </li>
+    <li>i also like eating lots of food!</li>
+    <li>i also like playing video games</li>
+  </ul>
+</template>

components/BigTextMain.vue

@@ -1,5 +1,5 @@
 <script setup>
-let spotify_link = `https://spotify-github-profile.kittinanx.com/api/view?uid=saahil.d&cover_image=true&theme=default&show_offline=false&background_color=121212&interchange=false&bar_color=b6494d&bar_color_cover=true`;
+let spotify_link = `https://spotify-github-profile.kittinanx.com/api/view?uid=saahil.d&cover_image=true&theme=default&show_offline=true&background_color=121212&interchange=false&bar_color=b6494d&bar_color_cover=true`;
 </script>
 <template>
   <div class="flex items-center justify-between mt-20 px-20">

components/FeedbackCards.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="flex justify-right items-right">
+    <div
+      class="relative w-80 h-96"
+      @click="rotateStack"
+      @touchstart="handleTouchStart"
+      @touchend="handleTouchEnd"
+    >
+      <div
+        v-for="(card, index) in displayedCards"
+        :key="card.id"
+        class="card w-full h-1/2 absolute top-0 left-0 cursor-pointer transition-transform duration-300"
+        :class="card.color"
+        :style="{
+          zIndex: cards.length - index,
+          transform:
+            index === 0 ? 'translateY(0)' : 'translateY(-' + index * 10 + 'px)',
+        }"
+      >
+        <div class="card-body">
+          <h2 class="card-title">{{ card.title }}</h2>
+          <p>{{ card.text }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch } from "vue";
+const props = defineProps({
+  cards: {
+    type: Array,
+    required: true,
+  },
+});
+const cards = ref([...props.cards]);
+
+watch(
+  () => props.cards,
+  (newVal) => {
+    cards.value = [...newVal];
+  },
+);
+
+const displayedCards = computed(() => [...cards.value].reverse());
+
+function rotateStack() {
+  const top = cards.value.shift();
+  cards.value.push(top);
+}
+
+let touchStartX = 0;
+function handleTouchStart(e) {
+  touchStartX = e.touches[0].clientX;
+}
+function handleTouchEnd(e) {
+  const touchEndX = e.changedTouches[0].clientX;
+  if (touchStartX - touchEndX > 50) rotateStack();
+}
+</script>

components/Footer.vue

@@ -1,12 +1,12 @@
 <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"
+    class="footer sm:footer-horizontal bg-[#1e1e2e] text-neutral-content p-2 sm:p-5 shadow-lg rounded-lg absolute bottom-0 sm:bottom-4 left-1/2 sm:transform -translate-x-1/2 sm:w-1/3 max-w-screen-lg"
   >
     <aside>
       <p class="font-mono font-small">
         Made by Neon - Copyright {{ new Date().getFullYear() }}.
         <br />
-        <br />
+        <br class="hidden sm:block" />
         Free speech & Privacy is a fundamental human right.
       </p>
     </aside>
@@ -15,7 +15,7 @@
         <!-- 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"
+          href="https://github.com/NeonGamerBot-QK/saahild.com"
           target="_blank"
           rel="noopener noreferrer"
         >

components/Navbar.vue

@@ -23,12 +23,36 @@
           class="menu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow"
         >
           <li>
-            <a>
-              <Icon name="catppuccin:folder-queue" class="text-2xl" />
-              About me</a
+            <a href="/about">
+              <Icon name="catppuccin:text" class="text-2xl" />About me</a
+            >
+          </li>
+          <li>
+            <a href="/projects">
+              <Icon name="catppuccin:folder" class="text-2xl" />Projects</a
+            >
+          </li>
+          <!-- it looks close enough to a ring -->
+          <li>
+            <a href="/buttons"
+              ><Icon name="catppuccin:webpack" class="text-2xl" />Webrings</a
+            >
+          </li>
+          <li>
+            <a href="/contact.html"
+              ><Icon name="catppuccin:readme" class="text-2xl" />Contact</a
+            >
+          </li>
+          <li>
+            <!-- <Icon
+              name="donate"
+              class="text-2xl"
+              v-umami="{ name: 'Navbar-Donate', external: true }"
+            /> -->
+            <a href="/donate.html"
+              ><Icon name="catppuccin:certificate" class="text-2xl" />Donate</a
             >
           </li>
-          <li><a>Webrings</a></li>
         </ul>
       </div>
       <a class="btn btn-ghost text-xl" href="./">saahild.com</a>

components/SnakeGrid.vue

@@ -0,0 +1,6 @@
+<!-- peak code -->
+<template>
+  <img
+    src="https://raw.githubusercontent.com/NeonGamerBot-QK/NeonGamerBot-QK/output/github-contribution-grid-snake.svg"
+  />
+</template>

lib/jsscripts/index.ts

@@ -2,7 +2,9 @@ import { startingLog } from "./log";
 import { runTitle } from "./changing_title";
 import { injectOneko } from "./oneko";
 
-onNuxtReady(() => {
+if (process.client) {
+  // DOM-related logic here
+  // onMounted(() => {
   startingLog();
   runTitle();
 
@@ -16,4 +18,5 @@ onNuxtReady(() => {
     temp_id: Date.now() + Math.random().toString(36).substring(2, 15),
     user_agent: navigator.userAgent,
   });
-});
+  // });
+}

pages/about.vue

@@ -1 +1,39 @@
-<template>About who?</template>
+<script lang="ts" setup>
+import FeedbackCards from "~/components/FeedbackCards.vue";
+import AboutMe from "~/components/AboutMe.vue";
+import SnakeGrid from "~/components/SnakeGrid.vue";
+let cards = [
+  {
+    id: 1,
+    title: "Card 1",
+    text: "First card",
+    color: "bg-base-100 text-primary-content",
+  },
+  {
+    id: 2,
+    title: "Card 2",
+    text: "Second card",
+    color: "bg-base-100 text-primary-content",
+  },
+  {
+    id: 3,
+    title: "Card 3",
+    text: "Third card",
+    color: "bg-base-100 text-primary-content",
+  },
+];
+</script>
+
+<template>
+  <div class="">
+    <div class="flex items-center justify-between">
+      <div>
+        <AboutMe />
+      </div>
+      <FeedbackCards :cards="cards" />
+    </div>
+    <div>
+      <SnakeGrid />
+    </div>
+  </div>
+</template>