From e577d87ce457e08ef72b620297cb441ed063ef2c Mon Sep 17 00:00:00 2001
From: Saahil <neon@saahild.com>
Date: Thu, 24 Jul 2025 11:19:00 -0400
Subject: [PATCH] work

---
 app.vue                      |  6 ++++-
 components/AboutMe.vue       | 13 ++++++++++
 components/FeedbackCards.vue | 49 ++++++++++++++++++++++++++++++++++++
 components/Footer.vue        |  2 +-
 components/SnakeGrid.vue     |  4 +++
 lib/jsscripts/index.ts       | 12 ++++++---
 pages/about.vue              | 15 ++++++++++-
 7 files changed, 94 insertions(+), 7 deletions(-)
 create mode 100644 components/AboutMe.vue
 create mode 100644 components/FeedbackCards.vue
 create mode 100644 components/SnakeGrid.vue

diff --git a/app.vue b/app.vue
index 3b94e475..672c58fb 100644
--- a/app.vue
+++ b/app.vue
@@ -1,9 +1,13 @@
 <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: {
+    
+  },
   noscript: [
     {
       children: `
diff --git a/components/AboutMe.vue b/components/AboutMe.vue
new file mode 100644
index 00000000..72c3c78d
--- /dev/null
+++ b/components/AboutMe.vue
@@ -0,0 +1,13 @@
+<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>
\ No newline at end of file
diff --git a/components/FeedbackCards.vue b/components/FeedbackCards.vue
new file mode 100644
index 00000000..d802cf5c
--- /dev/null
+++ b/components/FeedbackCards.vue
@@ -0,0 +1,49 @@
+<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>
diff --git a/components/Footer.vue b/components/Footer.vue
index bb4c17c9..756ff158 100644
--- a/components/Footer.vue
+++ b/components/Footer.vue
@@ -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"
         >
diff --git a/components/SnakeGrid.vue b/components/SnakeGrid.vue
new file mode 100644
index 00000000..e9f6acfa
--- /dev/null
+++ b/components/SnakeGrid.vue
@@ -0,0 +1,4 @@
+<!-- peak code -->
+<template>
+    <img src="https://raw.githubusercontent.com/NeonGamerBot-QK/NeonGamerBot-QK/output/github-contribution-grid-snake.svg"/>
+</template>
\ No newline at end of file
diff --git a/lib/jsscripts/index.ts b/lib/jsscripts/index.ts
index 01fa40fb..7dc7af53 100644
--- a/lib/jsscripts/index.ts
+++ b/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();
 
@@ -11,9 +13,11 @@ onNuxtReady(() => {
     semi_perm_id: localStorage.getItem("semi_perm_id")
       ? localStorage.getItem("semi_perm_id")
       : (localStorage.semi_perm_id =
-          Math.random().toString(36).substring(2, 15) +
-          Math.random().toString(36).substring(2, 15)),
+        Math.random().toString(36).substring(2, 15) +
+        Math.random().toString(36).substring(2, 15)),
     temp_id: Date.now() + Math.random().toString(36).substring(2, 15),
     user_agent: navigator.userAgent,
   });
-});
+  // });
+
+}
diff --git a/pages/about.vue b/pages/about.vue
index 2bb54f0a..c1b4d7e9 100644
--- a/pages/about.vue
+++ b/pages/about.vue
@@ -1 +1,14 @@
-<template>About who?</template>
+<script lang="ts" setup>
+import FeedbackCards from '~/components/FeedbackCards.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="m-20">
+    <FeedbackCards :cards="cards" />
+</div>
+</template>