applied bg to whole body and updated pos of swiper buttons

Author: Barabasbalazs

components/swiper/Container.vue

@@ -1,37 +1,36 @@
 <template>
   <div class="relative w-full wrapper-height">
-    <div class="absolute z-10 bottom-0 right-0 flex gap-3">
-      <button
-        class="bg-black rounded-2xl"
-        :class="[
-          { 'brightness-75 grow': currentIndex > 0 },
-          { 'brightness-50': currentIndex === 0 },
-        ]"
-        @click="slideToIndex(currentIndex - 1)"
-      >
-        <img
-          src="assets/app/icons/chevron-left.svg"
-          alt="chevron-left-icon"
-          class="w-10 h-10 md:w-16 md:h-16"
-        />
-      </button>
-      <button
-        class="bg-black rounded-2xl"
-        :class="[
-          {
-            'grow brightness-75': currentIndex < projectItems.length - 1,
-          },
-          { 'brightness-50': currentIndex === projectItems.length - 1 },
-        ]"
-        @click="slideToIndex(currentIndex + 1)"
-      >
-        <img
-          src="assets/app/icons/chevron-right.svg"
-          alt="chevron-right-icon"
-          class="w-10 h-10 md:w-16 md:h-16"
-        />
-      </button>
-    </div>
+    <button
+      class="bg-black rounded-2xl absolute left-0 top-1/2 z-10"
+      :class="[
+        { 'brightness-75 grow': currentIndex > 0 },
+        { 'brightness-50': currentIndex === 0 },
+      ]"
+      @click="slideToIndex(currentIndex - 1)"
+    >
+      <img
+        src="assets/app/icons/chevron-left.svg"
+        alt="chevron-left-icon"
+        class="w-10 h-10 md:w-16 md:h-16"
+      />
+    </button>
+    <button
+      class="bg-black rounded-2xl absolute right-0 top-1/2 z-10"
+      :class="[
+        {
+          'grow brightness-75': currentIndex < projectItems.length - 1,
+        },
+        { 'brightness-50': currentIndex === projectItems.length - 1 },
+      ]"
+      @click="slideToIndex(currentIndex + 1)"
+    >
+      <img
+        src="assets/app/icons/chevron-right.svg"
+        alt="chevron-right-icon"
+        class="w-10 h-10 md:w-16 md:h-16"
+      />
+    </button>
+
     <swiper
       class="w-full h-full"
       @swiper="onSwiper"

constants/head-items.ts

@@ -30,4 +30,5 @@ export const defaultHeadItems = {
   ],
   link: linkItems,
   title: "Barabás Balázs - Full Stack Developer",
+  bodyAttrs: { class: "bg-black" },
 } as MetaObject;

layouts/default.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="p-5 bg-black text-white md:h-screen">
+  <div class="p-5 text-white md:h-screen">
     <NuxtLayout name="cardwrapper" class="w-full h-full" cols>
       <slot
     /></NuxtLayout>