added contact footer

Author: Barabasbalazs

components/ContactFooter.vue

@@ -0,0 +1,24 @@
+<template>
+  <NuxtLayout name="card">
+    <div class="grid lg:grid-cols-4 items-center justify-between gap-3">
+      <div class="w-full">
+        <p class="text-stone-400">{{ description }}</p>
+      </div>
+
+      <div
+        v-for="(item, index) in contactItems"
+        :key="index"
+        class="flex items-center lg:justify-end"
+      >
+        <OptionsRedirect
+          :option="item"
+          additional-class="text-4xl font-bold !items-start w-full flex items-center"
+        />
+      </div>
+    </div>
+  </NuxtLayout>
+</template>
+
+<script setup lang="ts">
+import { description, contactItems } from "~/constants/contact-items";
+</script>

components/cards/Contact.vue

@@ -1,5 +1,5 @@
 <template>
-  <NuxtLayout name="card">
+  <NuxtLayout name="card" class="min-h-60">
     <div class="relative h-full w-full flex justify-center">
       <div class="flex items-center justify-center h-full w-full">
         <!--Main line-->

components/cards/Timeline.vue

@@ -1,6 +1,7 @@
 <template>
   <NuxtLink
     class="flex text-white underline-link white-underline whitespace-nowrap items-center"
+    :class="additionalClass"
     :to="option.link"
     :download="option.download"
     target="_blank"
@@ -19,5 +20,6 @@ import type { OptionsItem } from "~/constants/project-items";
 
 defineProps<{
   option: OptionsItem;
+  additionalClass?: string;
 }>();
 </script>

components/options/Redirect.vue

@@ -6,7 +6,7 @@
         :to="project.link"
         target="_blank"
       >
-        <img :src="project.img" :alt="project.title" loading="lazy" />
+        <img :src="project.img" :alt="project.title" loading="eager" />
       </NuxtLink>
       <div class="flex flex-col gap-3 w-full bottom-0">
         <h3 class="uppercase text-lime">

components/swiper/Content.vue

@@ -1,19 +1,19 @@
-interface ContactItem {
-  title: string;
-  link: string;
-}
+import type { OptionsItem } from "~/constants/project-items";
 
 export const contactItems = [
   {
-    title: "Github",
+    text: "Github",
     link: "https://github.com/Barabasbalazs",
   },
   {
-    title: "Email",
+    text: "Email",
     link: "[email protected]",
   },
   {
-    title: "LinkedIn",
+    text: "LinkedIn",
     link: "https://www.linkedin.com/in/balazs-barabas-6a8946292/",
   },
-] as ContactItem[];
+] as OptionsItem[];
+
+export const description =
+  "I am available for hire in Romania as well as abroad remotely. \nDo not hesitate to contact me!";

constants/contact-items.ts

@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-dark rounded-3xl p-6 min-h-60 min-w-80">
+  <div class="bg-dark rounded-3xl p-6 min-w-80">
     <slot />
   </div>
 </template>

layouts/card.vue

@@ -1,7 +1,8 @@
 <template>
-  <div class="p-5 text-white h-full">
+  <div class="p-5 text-white h-full flex flex-col gap-5">
     <NuxtLayout name="cardwrapper" class="w-full h-full" cols>
       <slot
     /></NuxtLayout>
+    <ContactFooter />
   </div>
 </template>