From daaec3e5cf8ef755f34be28ea255444d8fec3d48 Mon Sep 17 00:00:00 2001
From: Arthur DANJOU <arthurdanjou@outlook.fr>
Date: Thu, 22 Feb 2024 21:25:38 +0100
Subject: [PATCH] Change work mobile view

---
 src/pages/talents.vue |  2 +-
 src/pages/work.vue    | 32 ++++++++++++++++++--------------
 2 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/pages/talents.vue b/src/pages/talents.vue
index 5f3bc8d..71c2b61 100644
--- a/src/pages/talents.vue
+++ b/src/pages/talents.vue
@@ -204,7 +204,7 @@ async function suggest() {
                 <h2 class="text-base font-semibold text-zinc-800 dark:text-zinc-100">
                   <div class="absolute -inset-y-2 md:-inset-y-6 -inset-x-4 z-0 scale-95 bg-zinc-50 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 dark:bg-zinc-800/50 sm:-inset-x-6 sm:rounded-2xl" />
                   <NuxtLink :to="talent.website" target="_blank">
-                    <span class="absolute -inset-y-6 -inset-x-4 z-20 sm:-inset-x-6 sm:rounded-2xl" />
+                    <span class="absolute -inset-y-2 md:-inset-y-6 -inset-x-4 z-20 sm:-inset-x-6 sm:rounded-2xl" />
                     <div class="flex gap-2 items-center">
                       <h1 class="relative z-10">
                         {{ talent.name }}
diff --git a/src/pages/work.vue b/src/pages/work.vue
index b5a0cba..7efc9a8 100644
--- a/src/pages/work.vue
+++ b/src/pages/work.vue
@@ -16,26 +16,30 @@ const { data: projects } = await getProjects()
       </p>
     </div>
     <div class="mt-16 md:mt-20">
-      <div class="grid grid-cols-1 gap-x-12 gap-y-16 sm:grid-cols-2 lg:grid-cols-3">
+      <div class="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-3">
         <div
           v-for="project in projects"
           :key="project.name"
           class="group relative flex flex-col justify-between"
         >
-          <div class="relative z-10 flex h-12 w-12 items-center justify-center rounded-full bg-white shadow-md shadow-zinc-800/5 ring-1 ring-zinc-900/5 dark:border dark:border-zinc-700/50 dark:bg-zinc-800 dark:ring-0">
-            <UIcon :name="project.icon" size="24" dynamic />
+          <div class="flex items-start gap-4">
+            <div class="relative z-10 flex p-2 items-center justify-center rounded-full bg-white shadow-md shadow-zinc-800/5 ring-1 ring-zinc-900/5 dark:border dark:border-zinc-700/50 dark:bg-zinc-800 dark:ring-0">
+              <UIcon :name="project.icon" size="24" dynamic />
+            </div>
+            <div>
+              <h2 class="text-base font-semibold text-zinc-800 dark:text-zinc-100">
+                <div class="absolute -inset-y-4 md:-inset-y-6 -inset-x-4 z-0 scale-95 bg-zinc-50 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 dark:bg-zinc-800/50 sm:-inset-x-6 sm:rounded-2xl" />
+                <NuxtLink :to="project.link" target="_blank">
+                  <span class="absolute -inset-y-4 md:-inset-y-6 -inset-x-4 z-20 sm:-inset-x-6 sm:rounded-2xl" />
+                  <span class="relative z-10">{{ project.title }}</span>
+                </NuxtLink>
+              </h2>
+              <p class="relative z-10 text-sm text-zinc-600 dark:text-zinc-400">
+                {{ project.description }}
+              </p>
+            </div>
           </div>
-          <h2 class="mt-6 text-base font-semibold text-zinc-800 dark:text-zinc-100">
-            <div class="absolute -inset-y-6 -inset-x-4 z-0 scale-95 bg-zinc-50 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 dark:bg-zinc-800/50 sm:-inset-x-6 sm:rounded-2xl" />
-            <NuxtLink :to="project.link" target="_blank">
-              <span class="absolute -inset-y-6 -inset-x-4 z-20 sm:-inset-x-6 sm:rounded-2xl" />
-              <span class="relative z-10">{{ project.title }}</span>
-            </NuxtLink>
-          </h2>
-          <p class="relative z-10 my-2 text-sm text-zinc-600 dark:text-zinc-400">
-            {{ project.description }}
-          </p>
-          <div class="flex gap-2 z-10">
+          <div class="mt-2 flex gap-2 z-10 flex-wrap">
             <UBadge
               v-for="tag in project.tags"
               :key="tag"