update: idk what me code is anymore zeon:ai_comment

app.vue

@@ -5,9 +5,28 @@ import Navbar from "./components/Navbar.vue";
 import "./lib/jsscripts/index.ts";
 useHead({
   title: "Saahils Site",
-  meta: {
+  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/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/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>

components/Navbar.vue

@@ -22,13 +22,36 @@
           tabindex="0"
           class="menu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow"
         >
-          <li>
+ <li>
-            <a>
+          <a href="/about">
-              <Icon name="catppuccin:folder-queue" class="text-2xl" />
+            <Icon name="catppuccin:text" class="text-2xl" />About me</a
-              About me</a
+          >
-            >
+        </li>
-          </li>
+        <li>
-          <li><a>Webrings</a></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>
         </ul>
       </div>
       <a class="btn btn-ghost text-xl" href="./">saahild.com</a>

pages/about.vue

@@ -1,5 +1,7 @@
 <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' },
@@ -8,7 +10,15 @@ let cards = [
 </script>
 
 <template>
-<div class="m-20">
+<div class="">
+  <div class="flex items-center justify-between">
+    <div>
+  <AboutMe />
+    </div>
     <FeedbackCards :cards="cards" />
+  </div>
+<div>
+  <SnakeGrid />
+</div>
 </div>
 </template>