personal section

components/PersonalSection.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="grid md:grid-cols-2 p-3 gap-5">
+    <div class="grid md:grid-cols-2 w-full gap-5">
+      <div class="w-full flex items-center justify-center">
+        <h3 class="text-3xl text-left">A few things about me</h3>
+      </div>
+      <img
+        class="w-full"
+        src="assets/app/images/me.png"
+        alt="personalPicture"
+      />
+    </div>
+
+    <div class="w-full flex gap-5">
+      <div
+        v-for="({ title, text }, index) in personalItems"
+        :key="index"
+        class="flex flex-col gap-4"
+      >
+        <h4 class="text-2xl font-bold">{{ title }}</h4>
+        <p class="text-stone-400">{{ text }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { personalItems } from "~/constants/personal-items";
+</script>

constants/personal-items.ts

@@ -0,0 +1,15 @@
+interface PersonalItem {
+  title: string;
+  text: string;
+}
+
+export const personalItems = [
+  {
+    title: "History and Geography",
+    text: "Deeply fascinated by history and geography. Enjoys delving into historical events, in order to better understand the cultural evolution of societies.",
+  },
+  {
+    title: "Hiking, outdoor activities",
+    text: "Passionate about outdoor activities and adventure sports. Enjoys exploring new trails through hiking, kayaking or riding a mountain bike.",
+  },
+] as PersonalItem[];

layouts/default.vue

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