finnally learned how to use the layout feature of nuxt so I put the appheader into the newly created default.vue also created a circle that follows the mouse for aestheics I also removed the <AppHeader /> tag from every thing because they are now uneeded due to the default.vue

Author: melloCoding

components/mouseDot.vue

@@ -1,23 +1,29 @@
 <template>
   <div
     ref="circle"
-    class="bg-accent w-3 h-3 rounded-full absolute pointer-events-none"
+    class="backdrop-invert w-3 h-3 rounded-full absolute pointer-events-none z-50"
   ></div>
 </template>
 
 <script>
+import { ref, onMounted } from "vue";
+
 export default {
   setup() {
     const circle = ref(null);
 
     onMounted(() => {
-      document.addEventListener("mousemove", (event) => {
-        if (circle.value) {
-          circle.value.style.left = event.clientX - 6 + "px";
+      if (process.client) {
+        document.addEventListener("mousemove", (event) => {
+          if (circle.value) {
+            const scrollX = window.scrollX || 0;
+            const scrollY = window.scrollY || 0;
 
-          circle.value.style.top = event.clientY - 7 + "px";
-        }
-      });
+            circle.value.style.left = event.clientX + scrollX - 6 + "px";
+            circle.value.style.top = event.clientY + scrollY - 7 + "px";
+          }
+        });
+      }
     });
 
     return { circle };

layouts/default.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <AppHeader />
+    <MouseDot />
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import AppHeader from "~/components/AppHeader.vue";
+</script>

pages/gameDev/clothesConundrum/0.0.1.vue

@@ -1,5 +1,4 @@
 <template>
-  <AppHeader />
   <h1 class="text-center font-bold pb-10 text-4xl">
     Clothes Conundrum Version v0.0.1
   </h1>

pages/gamedev.vue

@@ -1,5 +1,4 @@
 <template>
-  <AppHeader />
   <h1 class="text-center text-5xl font-bold pb-5">Game Development</h1>
   <p class="text-center text-xl px-10">
     I have begun to learn game development as it is something that has

pages/index.vue

@@ -1,7 +1,5 @@
 <template>
   <div>
-    <AppHeader />
-
     <!--Hero for name picture and description-->
     <div class="hero min-h-screen">
       <div class="hero-content flex-col lg:flex-row">

pages/project.vue

@@ -1,6 +1,4 @@
 <template>
-  <AppHeader />
-
   <h1 class="text-5xl font-bold text-center mb-10">Projects</h1>
   <div class="divider px-10"></div>
   <div

pages/projects/hitboxv1.vue

@@ -1,5 +1,4 @@
 <template>
-  <AppHeader />
   <h1 class="text-5xl font-bold text-center mb-10">Hitbox v1</h1>
   <div class="divider px-10"></div>
   <div>
@@ -37,15 +36,14 @@
     </div>
     <div class="px-10">
       <p class="sm:px-5 md:px-10 mb-10">
-        I decided to before makeing any other harware decisions that I should
+        I decided to before making any other harware decisions that I should
         test GP2040-CE on the PS5 what I would be using for playing Tekken at
         the tournaments, and I goti it working however there was a catch. That
         being that the controller was actaully unable too play any games on the
         PS5
       </p>
     </div>
   </div>
-  <mouseDot />
 </template>
 <script setup lang="ts">
 useHead({

pages/robotic/week2.vue

@@ -1,5 +1,4 @@
 <template>
-  <AppHeader />
   <div>
     <h1 class="text-5xl font-bold text-center mb-10">Week Two</h1>
     <div class="sm:px-10 lg:px-44 mb-10">

pages/robotic/weekone.vue

@@ -1,5 +1,4 @@
 <template>
-  <AppHeader />
   <div>
     <h1 class="text-5xl font-bold text-center mb-10">
       First Documented Build Log For the Into the Deep Season

pages/robotics.vue

@@ -1,6 +1,5 @@
 <template>
   <div>
-    <AppHeader />
     <h1 class="text-5xl font-bold text-center mb-10">Robotics page</h1>
     <div class="sm:flex-none md:flex mx-10">
       <div>