Merge branch 'dev' into main

components/cards/About.vue

@@ -1,31 +1,44 @@
 <template>
-  <NuxtLayout name="card">
-    <div class="flex flex-col justify-between h-full gap-3 relative">
-      <OptionsButton />
+  <div class="h-full p-6">
+    <div class="flex flex-col gap-10">
       <div class="flex flex-col gap-3">
         <h3 class="uppercase">Full Stack Developer</h3>
         <div class="flex text-4xl gap-3">
           <h1 class="font-black">Barabás</h1>
           <h1 class="font-semibold">Balázs</h1>
         </div>
+      </div>
+      <div class="flex flex-col gap-8 text-stone-400">
         <p>
           {{ description }}
         </p>
+        <NuxtLink
+          :to="gmapQuerry"
+          class="text-stone-400 underline-link"
+          target="_blank"
+          >{{ coordinates.displayValue }}</NuxtLink
+        >
+        <div class="flex text-lg gap-6 flex-wrap">
+          <p v-for="(language, index) in languages" :key="index">
+            {{ language }}
+          </p>
+        </div>
+        <div class="flex flex-wrap gap-2 text-sm">
+          <OptionsRedirect
+            v-for="(option, index) in options"
+            :key="index"
+            :option="option"
+          />
+        </div>
       </div>
-      <NuxtLink
-        :to="gmapQuerry"
-        class="text-stone-400 underline-link"
-        target="_blank"
-        >{{ coordinates.displayValue }}</NuxtLink
-      >
     </div>
-  </NuxtLayout>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { aboutItem } from "~/constants/about-items";
 
-const { coordinates, description, options } = aboutItem;
+const { coordinates, description, options, languages } = aboutItem;
 
 provide("options", {
   optionsValues: options,

components/options/Redirect.vue

@@ -0,0 +1,22 @@
+<template>
+  <NuxtLink
+    class="flex text-white underline-link white-underline whitespace-nowrap"
+    :to="option.link"
+    :download="option.download"
+  >
+    <p class="uppercase">{{ option.text }}</p>
+    <img
+      src="assets/app/icons/arrow-up-right.svg"
+      alt="arrow-up-right"
+      class="w-6 h-6"
+    />
+  </NuxtLink>
+</template>
+
+<script setup lang="ts">
+import type { OptionsItem } from "~/constants/project-items";
+
+defineProps<{
+  option: OptionsItem;
+}>();
+</script>

components/swiper/Content.vue

@@ -1,38 +1,28 @@
 <template>
   <div class="relative w-full">
-    <OptionsButton v-if="project.options" />
-
     <div class="flex flex-col justify-between gap-6 h-full">
       <NuxtLink
         class="flex items-center justify-center w-full h-full"
         :to="project.link"
         target="_blank"
       >
-        <div class="w-1/2">
-          <img
-            class="min-w-1/2"
-            :src="project.img"
-            :alt="project.title"
-            loading="lazy"
-          />
-        </div>
+        <img :src="project.img" :alt="project.title" loading="lazy" />
       </NuxtLink>
-      <div class="bg-dark w-full">
-        <div class="flex flex-col gap-3 w-full">
-          <h3 class="uppercase">
-            {{ project.subtitle }}
-          </h3>
-          <NuxtLink :to="project.link" target="_blank"
-            ><h2
-              class="font-semibold text-4xl uppercase underline-link white-underline"
-            >
-              {{ project.title }}
-            </h2></NuxtLink
+      <div class="flex flex-col gap-3 w-full bottom-0">
+        <h3 class="uppercase text-lime">
+          {{ project.subtitle }}
+        </h3>
+        <NuxtLink :to="project.link" target="_blank"
+          ><h2
+            class="font-semibold text-4xl uppercase underline-link white-underline"
           >
-          <p>{{ project.description }}</p>
-        </div>
+            {{ project.title }}
+          </h2></NuxtLink
+        >
+        <p>{{ project.description }}</p>
       </div>
     </div>
+    <!-- <OptionsButton v-if="project.options" /> !-->
   </div>
 </template>
 

constants/about-items.ts

@@ -12,13 +12,14 @@ interface AboutItem {
   coordinates: CoordinateItem;
   description: string;
   options: OptionsItem[];
+  languages: string[];
 }
 
 export const aboutItem = {
   description:
     "Accomplished Full Stack Developer with extensive experience in designing and implementing scalable, multi-layered, and user-friendly web applications. Passionate advocate for automation throughout the development lifecycle, from testing to deployment, ensuring efficiency and reliability. Proficient in four languages, with a keen interest in hiking and a deep appreciation for history.",
   coordinates: {
-    displayValue: `46°46'51.4"N 23°36'15.3"E`,
+    displayValue: `Romania, Cluj, 46°46'51.4"N 23°36'15.3"E`,
     numericalValue: { lat: 46.770439, lng: 23.591423 },
   } as CoordinateItem,
   options: [
@@ -32,4 +33,5 @@ export const aboutItem = {
       link: "https://github.com/Barabasbalazs",
     },
   ] as OptionsItem[],
+  languages: ["English", "German", "Hungarian", "Romanian"],
 } as AboutItem;

constants/project-items.ts

@@ -1,7 +1,7 @@
-import cartOutline from "~/assets/app/icons/cart-outline.svg";
-import mapLegend from "~/assets/app/icons/map-legend.svg";
-import denoWhite from "~/assets/app/logos/deno-white.svg";
-import ocr from "~/assets/app/icons/ocr.svg";
+import b2bMockup from "~/assets/app/images/b2b-mockup.png";
+import esmImport from "~/assets/app/images/esm-import.png";
+import mapAppMockup from "~/assets/app/images/map-app-mockup.png";
+import ocrMockUp from "~/assets/app/images/ocr-mockup.png";
 
 export interface OptionsItem {
   text: string;
@@ -26,7 +26,7 @@ export const projectItems = [
     subtitle: "B2B ecommerce platform",
     description:
       "A modern e-commerce platform featuring a custom admin panel and integrated ERP system, designed to enhance the B2B experience for the Amsterdam-based fashion brand, Bickley + Mitchell.",
-    img: cartOutline,
+    img: b2bMockup,
     link: "https://b2b.bickleyandmitchell.com",
   },
   {
@@ -35,7 +35,7 @@ export const projectItems = [
     subtitle: "Handwritten digit classification model",
     description:
       "Optical Character Recognition (OCR) model for converting images of handwritten digits into machine-readable data using k-nearest neighbors (k-NN) and centroid-based classification methods. ",
-    img: ocr,
+    img: ocrMockUp,
     link: "https://github.com/Barabasbalazs/OCR",
     options: [
       {
@@ -50,7 +50,7 @@ export const projectItems = [
     subtitle: "Full Stack app with real time Tracking",
     description:
       "An intuitive web app with real-time tracking, helping tourists and guides explore and navigate both natural landscapes and urban areas with ease and efficiency.",
-    img: mapLegend,
+    img: mapAppMockup,
     link: "https://balazsmap.live",
     options: [
       {
@@ -74,7 +74,7 @@ export const projectItems = [
     subtitle: "Deno utility script",
     description:
       "A powerful utility script that simplifies rewriting ES imports using just a config file. Built in Deno, leveraging an ES syntax module lexer and Worker modules for efficiency.",
-    img: denoWhite,
+    img: esmImport,
     link: "https://github.com/Barabasbalazs/esm-import-modifier",
     options: [
       {

layouts/default.vue

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

tailwind.config.js

@@ -15,6 +15,7 @@ export default {
       },
       colors: {
         dark: "#1A1A1A",
+        lime: "#98CE00",
       },
     },
   },