From ecdcf36acdc179e5bff2d4b667b6bfd783b5f1ef Mon Sep 17 00:00:00 2001
From: Marios Antonoudiou <m.antonoudiou@celonis.com>
Date: Wed, 6 Dec 2023 18:35:43 +0200
Subject: [PATCH] chore: amend mobile layout

---
 components/personal-projects.vue |  2 +-
 components/project.vue           | 44 ++++++++++++++++++--------------
 2 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/components/personal-projects.vue b/components/personal-projects.vue
index 7837794..4e2960a 100644
--- a/components/personal-projects.vue
+++ b/components/personal-projects.vue
@@ -2,7 +2,7 @@
   <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">
+    <div class="grid grid-cols-1 gap-10 md:grid-cols-3 md:gap-5">
       <Project
         title="Places for Zendesk"
         image="https://990141.apps.zdusercontent.com/990141/assets/1701544308-8c83d0f02afd0b3d7342e5f19304c4b4/logo.png"
diff --git a/components/project.vue b/components/project.vue
index c623692..1d4f4d0 100644
--- a/components/project.vue
+++ b/components/project.vue
@@ -10,26 +10,32 @@ 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"
-    />
-    <div>
-      <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
+    class="flex overflow-auto gap-2 items-center md:items-start md:flex-col md:border md:rounded-lg md:p-4"
+  >
+    <ULink :to="props.url" target="_blank">
+      <NuxtImg
+        placeholder
+        :src="props.image"
+        :alt="props.title"
+        class="block w-16 h-16"
+      />
+    </ULink>
+    <div class="grid row-span-3 gap-2">
+      <div>
+        <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>
+      <div class="text-sm md:block hidden">
+        <slot name="description">Lorem ipsum dorcet sit amet</slot>
       </div>
-    </div>
-    <div class="text-sm">
-      <slot name="description">Lorem ipsum dorcet sit amet</slot>
     </div>
   </div>
 </template>