From 51e3fa1a6512102743985762e6e5cae5025969e0 Mon Sep 17 00:00:00 2001
From: Arthur DANJOU <arthurdanjou@outlook.fr>
Date: Sat, 5 Dec 2020 11:21:07 +0100
Subject: [PATCH] =?UTF-8?q?Improve=20design=20=F0=9F=9B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Header.vue    | 14 +++++-----
 components/Skill.vue     |  4 +--
 components/WorkSkill.vue |  4 +--
 pages/work/_id.vue       | 56 +++++++++++++++++++++-------------------
 pages/work/index.vue     |  2 +-
 5 files changed, 41 insertions(+), 39 deletions(-)

diff --git a/components/Header.vue b/components/Header.vue
index 6e3fdd1..dbc96ca 100644
--- a/components/Header.vue
+++ b/components/Header.vue
@@ -56,10 +56,10 @@
             </nuxt-link>
           </ul>
         </div>
-        <ul class="dark:text-white dark:bg-dark-200 z-index-50 bg-white md:hidden fixed bottom-0 left-0 w-full flex items-center justify-around h-20 border-t border-gray-200 border-solid navbar-bottom-items">
-          <nuxt-link class="w-1/5 red" to="/">
+        <ul class="dark:text-white dark:bg-dark-200 text-sm z-50 bg-white md:hidden fixed bottom-0 left-0 w-full flex items-center justify-around h-20 border-t border-gray-200 border-solid navbar-bottom-items">
+          <nuxt-link to="/" class="w-1/5 red">
             <li class="font-bold flex flex-col items-center justify-center">
-              <svg class="inline-block" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <svg class="inline-block" height="20" width="20" 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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
               </svg>
               {{ $t('part_home') }}
@@ -67,7 +67,7 @@
           </nuxt-link>
           <nuxt-link to="/about" class="w-1/5 orange">
             <li class="font-bold flex flex-col items-center justify-center">
-              <svg class="inline-block" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <svg class="inline-block" height="20" width="20" 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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
               </svg>
               {{ $t('part_about') }}
@@ -75,7 +75,7 @@
           </nuxt-link>
           <nuxt-link to="/blog" class="w-1/5 green">
             <li class="font-bold flex flex-col items-center justify-center">
-              <svg class="inline-block" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <svg class="inline-block" height="20" width="20" 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="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
               </svg>
               {{ $t('part_blog') }}
@@ -83,7 +83,7 @@
           </nuxt-link>
           <nuxt-link to="/work" class="w-1/5 blue">
             <li class="font-bold flex flex-col items-center justify-center">
-              <svg class="inline-block" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <svg class="inline-block" height="20" width="20" 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="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
               </svg>
               {{ $t('part_work') }}
@@ -91,7 +91,7 @@
           </nuxt-link>
           <nuxt-link to="/contact" class="w-1/5 purple">
             <li class="font-bold flex flex-col items-center justify-center">
-              <svg class="inline-block" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <svg class="inline-block" height="20" width="20" 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="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
               </svg>
diff --git a/components/Skill.vue b/components/Skill.vue
index cf3ca6c..8451056 100644
--- a/components/Skill.vue
+++ b/components/Skill.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="mb-3 mr-3 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="mb-3 mr-3 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+'-400'">
     <div class="w-full h-full flex flex-col justify-center items-center">
       <div>
-        <img class="rounded-full" alt="Skill Img" width="95" height="95" :src="'http://localhost:5555/files/' + cover">
+        <img class="rounded-sm" alt="Skill Img" :src="'http://localhost:5555/files/' + cover">
       </div>
       <h1 class="md:text-xl text-lg font-bold text-center">{{ $t(skill) }}</h1>
     </div>
diff --git a/components/WorkSkill.vue b/components/WorkSkill.vue
index b85f6b2..a078e6f 100644
--- a/components/WorkSkill.vue
+++ b/components/WorkSkill.vue
@@ -2,9 +2,9 @@
   <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="w-full h-full flex flex-col justify-center items-center">
       <div>
-        <img class="rounded-full" alt="Skill Img" width="95" height="95" :src="'http://localhost:5555/files/' + cover">
+        <img class="rounded-sm" alt="Skill Img" :src="'http://localhost:5555/files/' + cover">
       </div>
-      <h1 class="md:text-2xl text-lg font-bold">{{ $t(skill) }}</h1>
+      <h1 class="md:text-xl text-lg font-bold text-center">{{ $t(skill) }}</h1>
     </div>
   </div>
 </template>
diff --git a/pages/work/_id.vue b/pages/work/_id.vue
index 1a6df69..cc64624 100644
--- a/pages/work/_id.vue
+++ b/pages/work/_id.vue
@@ -1,31 +1,33 @@
 <template>
-  <main class="flex flex-col lg:flex-row items-center px-5 xl:px-64 mb-16 md:mb-32">
-    <div class="w-full lg:w-1/2 flex flex-col items-center mt-8 md:mt-32">
-      <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"
-        :class="'bg-' + color + '-400 hover:bg-' + color + '-600'"
-        :href="url"
-      >{{formatLink}}</a>
-    </div>
-    <div class="w-full lg:w-1/2 ml-5 ">
-      <h1 class="text-xl lg:text-3xl font-bold">
-        {{ $t(title) }}
-      </h1>
-      <p class="mt-5 mb-10 text-md lg:text-lg text-gray-900 dark:text-dark-900">
-        {{ $t(description) }}
-      </p>
-      <div>
-        <h3 class="text-md lg:text-lg font-bold">
-          {{ $t('work_tech_used') }}
-        </h3>
-        <div class="flex flex-row overflow-x-auto">
-          <div v-for="skill in skills">
-            <WorkSkill
-              :skill="skill.title.code"
-              :color="skill.color"
-              :cover="skill.cover.file_name"
-            />
+  <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 lg:w-1/2 flex flex-col items-center">
+        <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"
+          :class="'bg-' + color + '-400 hover:bg-' + color + '-600'"
+          :href="url"
+        >{{formatLink}}</a>
+      </div>
+      <div class="w-full lg:w-1/2 ml-5 ">
+        <h1 class="text-xl lg:text-3xl font-bold">
+          {{ $t(title) }}
+        </h1>
+        <p class="mt-5 mb-10 text-md lg:text-lg text-gray-900 dark:text-dark-900">
+          {{ $t(description) }}
+        </p>
+        <div>
+          <h3 class="text-md lg:text-lg font-bold">
+            {{ $t('work_tech_used') }}
+          </h3>
+          <div class="flex flex-row w-full overflow-x-auto md:overflow-x-hidden md:flex-wrap space-x-4 md:space-x-0 md:justify-start">
+            <div v-for="skill in skills">
+              <WorkSkill
+                :skill="skill.title.code"
+                :color="skill.color"
+                :cover="skill.cover.file_name"
+              />
+            </div>
           </div>
         </div>
       </div>
diff --git a/pages/work/index.vue b/pages/work/index.vue
index 0f49c06..7d87ae5 100644
--- a/pages/work/index.vue
+++ b/pages/work/index.vue
@@ -11,7 +11,7 @@
     <h1 v-if="works.length === 0" class="text-xl font-bold text-center my-8 w-full">{{ $t('work_no_work') }}</h1>
     <div v-else class="flex flex-col justify-around items-center py-10 w-full">
       <h1 class="text-xl font-bold text-center mb-8">{{ $t('work_description') }}</h1>
-      <div class="flex flex-col items-center md:items-start md:flex-row flex-wrap w-full space-x-4">
+      <div class="flex flex-col items-center md:items-start md:flex-row flex-wrap w-full space-y-3 md:space-y-0 md:space-x-4">
         <div v-for="work in works">
           <nuxt-link :to="'/work/' + work.id">
             <Work