From 728a0261af81ac61271b84bcb3dc07cab15c1d61 Mon Sep 17 00:00:00 2001
From: Arthur DANJOU <arthurdanjou@outlook.fr>
Date: Sun, 6 Dec 2020 12:57:50 +0100
Subject: [PATCH] Improve work design + add go back arrow

---
 components/Work.vue      |  2 +-
 components/WorkSkill.vue |  2 +-
 pages/work/_id.vue       | 24 ++++++++++++++++++++++--
 3 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/components/Work.vue b/components/Work.vue
index 3396218..097b715 100644
--- a/components/Work.vue
+++ b/components/Work.vue
@@ -2,7 +2,7 @@
   <div class="p-1 md:p-2 h-64 w-64 border-gray-900 dark:border-dark-800 border-2 duration-300 rounded-3xl hover:bg-opacity-25 hover:scale-105 transform cursor-pointer" :class="'hover:bg-'+color+ '-600'">
     <div class="w-full h-full flex flex-col justify-center items-center">
       <div>
-        <img alt="Project Img" width="95" height="95" :src="'http://localhost:5555/files/' + cover">
+        <img alt="Project Img" class="rounded-md" width="150" :src="'http://localhost:5555/files/' + cover">
       </div>
       <div class="text-center">
         <h1 class="md:text-2xl text-lg font-bold">{{ $t(title) }}</h1>
diff --git a/components/WorkSkill.vue b/components/WorkSkill.vue
index a078e6f..418384c 100644
--- a/components/WorkSkill.vue
+++ b/components/WorkSkill.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="m-4 p-1 md:p-2 h-48 w-48 border-gray-900 dark:border-dark-800 border-2 duration-300 rounded-3xl hover:bg-opacity-25" :class="'hover:bg-'+color+'-600'">
+  <div class="m-2 p-1 md:p-2 h-48 w-48 border-gray-900 dark:border-dark-800 border-2 duration-300 rounded-3xl hover:bg-opacity-25" :class="'hover:bg-'+color+'-600'">
     <div class="w-full h-full flex flex-col justify-center items-center">
       <div>
         <img class="rounded-sm" alt="Skill Img" :src="'http://localhost:5555/files/' + cover">
diff --git a/pages/work/_id.vue b/pages/work/_id.vue
index cc64624..69c5784 100644
--- a/pages/work/_id.vue
+++ b/pages/work/_id.vue
@@ -1,7 +1,21 @@
 <template>
   <main class="px-5 xl:px-64 mb-16 md:mb-32">
-    <div class="w-full flex flex-col lg:flex-row items-center mt-8 md:mt-32">
+    <div class="w-full flex flex-col lg:flex-row items-center md:items-start mt-8 md:mt-32">
       <div class="w-full lg:w-1/2 flex flex-col items-center">
+        <div class="md:mb-24">
+          <div class="mb-4 flex">
+            <nuxt-link to="/work" class="back-arrow flex">
+              <div class="duration-300 arrow">
+                <svg height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
+                </svg>
+              </div>
+              <div class="ml-2">
+                {{ $t('work_go_back') }}
+              </div>
+            </nuxt-link>
+          </div>
+        </div>
         <img class="w-4/5 rounded-xl" :src="'http://localhost:5555/files/' + cover" alt="Project Img" />
         <a
           class="mt-4 py-3 px-6 rounded-full cursor-pointer duration-300 mb-10 lg:mb-0"
@@ -75,6 +89,12 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+.back-arrow:hover .arrow {
+  transform: translate(-8px, -1px);
+}
 
+.arrow {
+  transform: translate(3px, -1px);
+}
 </style>