From 01705aede9507ba9232a7f361096b55f73d6ae96 Mon Sep 17 00:00:00 2001
From: Marios Antonoudiou <m.antonoudiou@celonis.com>
Date: Wed, 6 Dec 2023 18:23:15 +0200
Subject: [PATCH] feat: add personal projects

---
 app.vue                          |  1 +
 components/personal-projects.vue | 66 ++++++++++++++++++++++++++++++++
 components/project.vue           | 33 ++++++++++++++++
 3 files changed, 100 insertions(+)
 create mode 100644 components/personal-projects.vue
 create mode 100644 components/project.vue

diff --git a/app.vue b/app.vue
index 60e722f..d1cab22 100644
--- a/app.vue
+++ b/app.vue
@@ -21,5 +21,6 @@ useHead({
 <template>
   <Introduction />
   <BeenWorkingWith />
+  <PersonalProjects />
   <Connect />
 </template>
diff --git a/components/personal-projects.vue b/components/personal-projects.vue
new file mode 100644
index 0000000..7837794
--- /dev/null
+++ b/components/personal-projects.vue
@@ -0,0 +1,66 @@
+<template>
+  <UContainer class="flex flex-col gap-5">
+    <div class="text-sm text-gray-500">Personal projects</div>
+
+    <div class="grid grid-cols-3 gap-5">
+      <Project
+        title="Places for Zendesk"
+        image="https://990141.apps.zdusercontent.com/990141/assets/1701544308-8c83d0f02afd0b3d7342e5f19304c4b4/logo.png"
+        url="https://www.zendesk.com/marketplace/apps/support/990141/places/?queryID=93faef4132875b9aac529bce8ae24570"
+      >
+        <template v-slot:description>
+          Drive leads and customers straight to your business.
+        </template>
+        <template v-slot:subtitle> Built for Zendesk marketplace </template>
+      </Project>
+
+      <Project
+        title="SneakPeek"
+        image="https://cdn.livechat-files.com/api/file/developers/img/applications/449B6QFGg/icons/AecAyk1Gg-960x960.png"
+        url="https://www.livechat.com/marketplace/apps/sneakpeek"
+        marketplace="LiveChat"
+      >
+        <template v-slot:description
+          >Turn URLs into visual chat-friendly previews</template
+        >
+        <template v-slot:subtitle> Built for LiveChat marketplace </template>
+      </Project>
+
+      <Project
+        title="Currencies"
+        image="https://cdn.livechat-files.com/api/file/developers/img/applications/WA1l7z4Gg/stCs0iVMg-icon-960x960.png"
+        url="https://www.livechat.com/marketplace/apps/currencies"
+        marketplace="LiveChat"
+      >
+        <template v-slot:description
+          >The quickest way to convert currencies.</template
+        >
+        <template v-slot:subtitle> Built for LiveChat marketplace </template>
+      </Project>
+
+      <Project
+        title="Skirthooks"
+        image="https://cdn.livechat-files.com/api/file/developers/img/applications/yn4GN3-7g/icons/37aysFLng-960x960.png"
+        url="https://www.livechat.com/marketplace/apps/skirthooks"
+        marketplace="LiveChat"
+      >
+        <template v-slot:description
+          >Build webhook based apps, without the web servers.</template
+        >
+        <template v-slot:subtitle> Built for LiveChat marketplace </template>
+      </Project>
+
+      <Project
+        title="Places for LiveChat"
+        image="https://cdn.livechat-files.com/api/file/developers/img/applications/vHcaOp3Mg/icons/pPrAdfeGR-960x960.png"
+        url="https://www.livechat.com/marketplace/apps/skirthooks"
+        marketplace="LiveChat"
+      >
+        <template v-slot:description>
+          Guide customers & leads straight to your business.
+        </template>
+        <template v-slot:subtitle> Built for LiveChat marketplace </template>
+      </Project>
+    </div>
+  </UContainer>
+</template>
diff --git a/components/project.vue b/components/project.vue
new file mode 100644
index 0000000..0ea7594
--- /dev/null
+++ b/components/project.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+interface Props {
+  title: string;
+  image: string;
+  url: string;
+  marketplace?: string;
+}
+
+const props = defineProps<Props>();
+</script>
+
+<template>
+  <div class="flex overflow-auto gap-2 flex-col border rounded-lg p-4">
+    <NuxtImg
+      placeholder
+      :src="props.image"
+      :alt="props.title"
+      class="block w-16 h-16"
+    />
+    <ULink
+      class="font-semibold hover:underline hover:underline-offset-4"
+      :to="props.url"
+      target="_blank"
+      >{{ props.title }}</ULink
+    >
+    <div class="text-xs text-slate-600">
+      <slot name="subtitle"></slot>
+    </div>
+    <div class="text-sm">
+      <slot name="description">Lorem ipsum dorcet sit amet</slot>
+    </div>
+  </div>
+</template>