welcome page

components/HoloButton.vue

@@ -0,0 +1,90 @@
+<script setup>
+import { ref, onMounted } from "vue";
+
+// Define props for dynamic label and link
+const props = defineProps({
+  label: {
+    type: String,
+    required: true,
+  },
+  to: {
+    type: String,
+    required: true,
+  },
+});
+
+// Define the neon cyberpunk colors
+const colors = [
+  "#00FF9C", // Neon Green
+  "#00D4FF", // Electric Blue
+  "#FFEA00", // Cyber Yellow
+  "#9A00FF", // Neon Purple
+];
+
+// Ref to store a random selected color
+const buttonColor = ref("");
+
+// Function to select a random color on component mount
+const getRandomColor = () => {
+  const randomIndex = Math.floor(Math.random() * colors.length);
+  buttonColor.value = colors[randomIndex];
+};
+
+// Use onMounted to select a color as soon as the component is loaded
+onMounted(() => {
+  getRandomColor();
+});
+</script>
+
+<template>
+  <NuxtLink
+    :to="to"
+    class="holo-button"
+    :style="{ '--neon-color': buttonColor }"
+  >
+    {{ label }}
+  </NuxtLink>
+</template>
+
+<style scoped>
+.holo-button {
+  display: inline-block;
+  padding: 12px 24px;
+  font-size: 18px;
+  font-weight: bold;
+  text-transform: uppercase;
+  color: var(--neon-color);
+  background: rgba(0, 0, 0, 0.6);
+  border: 2px solid var(--neon-color);
+  border-radius: 12px;
+  transition: all 0.3s ease;
+  position: relative;
+  text-align: center;
+  cursor: pointer;
+}
+
+/* Neon Glow */
+.holo-button::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 12px;
+  box-shadow: 0 0 15px var(--neon-color), 0 0 30px var(--neon-color);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.holo-button:hover::before {
+  opacity: 1;
+}
+
+.holo-button:hover {
+  transform: scale(1.05);
+  color: #fff;
+  background: var(--neon-color);
+  box-shadow: 0 0 10px #fff, 0 0 20px var(--neon-color);
+}
+</style>

components/HoloImage.vue

@@ -0,0 +1,84 @@
+<script setup>
+import { ref } from 'vue';
+
+// Placeholder for the image prop (dynamic later if needed)
+const imageUrl = ref('https://media.licdn.com/dms/image/v2/C4D03AQGCAvVt2LLNwg/profile-displayphoto-shrink_800_800/profile-displayphoto-shrink_800_800/0/1591485121812?e=1733356800&v=beta&t=JUjtjg5ZAFTKotegSsGnWv1z0_RaUhIae871W0NdF1s');
+</script>
+
+<template>
+  <div class="holo-img-container">
+    <img :src="imageUrl" alt="Hologram Image" class="holo-img" />
+  </div>
+</template>
+
+<style scoped>
+/* Container for the hologram image effect */
+.holo-img-container {
+  position: relative;
+  display: inline-block;
+  border-radius: 50%; /* Circle shape */
+  overflow: hidden;
+  width: 200px;
+  height: 200px;
+  box-shadow: 0 0 15px rgba(0, 255, 204, 0.75), 0 0 25px rgba(0, 255, 204, 0.5);
+}
+
+/* Actual image styling */
+.holo-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 50%; /* Maintain circle shape */
+  transition: transform 0.3s ease;
+}
+
+/* Hologram-like effect with animated borders */
+.holo-img-container::before, .holo-img-container::after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background: rgba(0, 255, 204, 0.1);
+  pointer-events: none;
+  z-index: -1;
+}
+
+.holo-img-container::before {
+  animation: hologram-pulse 2s infinite alternate ease-in-out;
+}
+
+.holo-img-container::after {
+  border: 1px solid rgba(0, 255, 204, 0.5);
+  animation: neon-border 1.5s infinite alternate ease-in-out;
+}
+
+/* Hologram hover effect */
+.holo-img-container:hover .holo-img {
+  transform: scale(1.05);
+  box-shadow: 0 0 25px rgba(0, 255, 204, 1), 0 0 50px rgba(0, 255, 204, 0.8);
+}
+
+/* Hologram-like pulse animation */
+@keyframes hologram-pulse {
+  0% {
+    opacity: 0;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0.6;
+    transform: scale(1.1);
+  }
+}
+
+/* Flickering neon border animation */
+@keyframes neon-border {
+  0% {
+    border-color: rgba(0, 255, 204, 0.2);
+  }
+  100% {
+    border-color: rgba(0, 255, 204, 0.9);
+  }
+}
+</style>

layouts/default.vue

@@ -0,0 +1,95 @@
+<script>
+export default {
+  data() {
+    return {
+      currentSlide: 0,
+    };
+  },
+  methods: {
+    nextSlide() {
+      // Logic for moving to the next slide
+      const totalSlides = this.$refs.slidesWrapper.children.length;
+      if (this.currentSlide < totalSlides - 1) {
+        this.currentSlide++;
+        this.updateSlidePosition();
+      }
+    },
+    prevSlide() {
+      // Logic for moving to the previous slide
+      if (this.currentSlide > 0) {
+        this.currentSlide--;
+        this.updateSlidePosition();
+      }
+    },
+    updateSlidePosition() {
+      const offset = this.currentSlide * -100;
+      this.$refs.slidesWrapper.style.transform = `translateX(${offset}%)`;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="w-screen h-screen overflow-hidden relative">
+    <!-- Slides Wrapper -->
+    <div
+      ref="slidesWrapper"
+      class="flex w-full h-full transition-transform duration-500 ease-out"
+    >
+      <!-- Each Slide Component -->
+      <NuxtPage />
+    </div>
+
+    <!-- Left Arrow -->
+    <button
+      @click="prevSlide"
+      class="absolute left-4 top-1/2 transform -translate-y-1/2 text-white bg-gray-800 p-2 rounded-full focus:outline-none"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="h-6 w-6"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M15 19l-7-7 7-7"
+        />
+      </svg>
+    </button>
+
+    <!-- Right Arrow -->
+    <button
+      @click="nextSlide"
+      class="absolute right-4 top-1/2 transform -translate-y-1/2 text-white bg-gray-800 p-2 rounded-full focus:outline-none"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="h-6 w-6"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M9 5l7 7-7 7"
+        />
+      </svg>
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.page-enter-active,
+.page-leave-active {
+  transition: opacity 0.5s ease;
+}
+.page-enter, .page-leave-to /* .page-leave-active in <2.1.8 */ {
+  opacity: 0;
+}
+</style>

pages/contact.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+</script>
+
+<style>
+
+</style>

pages/education.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+</script>
+
+<style>
+
+</style>

pages/experience.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+</script>
+
+<style>
+
+</style>