feat(home): improve desing

components/Logo.vue

@@ -1,6 +1,6 @@
 <template>
   <img
-    class="w-20 h-20 rounded-full nuxt-logo"
+    class="w-20 h-20 rounded-full nuxt-logo border-6 border-primary"
     src="https://res.cloudinary.com/de5xzoviz/image/upload/c_scale,q_58,w_640/v1592684920/IMG_6225_brctd5.jpg"
     :alt="$t('general.altLogo')"
   />

components/ui/TheHeader.vue

@@ -1,5 +1,5 @@
 <template>
-  <header class="py-5 bg-green-main-100">
+  <header class="py-5">
     <div class="container flex justify-between items-center">
       <div class="flex items-center">
         <nuxt-link to="/">
@@ -60,6 +60,6 @@ export default {
 }
 
 .link.nuxt-link-active {
-  @apply text-gray-main-600 underline;
+  @apply text-gray-main-600 border-b-4 border-primary pb-2;
 }
 </style>

pages/index.vue

@@ -3,11 +3,13 @@
     <div>
       <!-- TODO: translate and change this text -->
       <h1 class="text-3xl font-semibold">Hola 👋, soy Pablo Sirera</h1>
+      <div class="divider h-2 w-24 bg-primary my-3" />
       <p>
         Soy Senior Frontend y actualmente estoy enfocado al mundo del desarrollo
         web con Vue, Nuxt, JavaScript y Jest, entre otros. Además también he
         hecho proyectos con Ionic, Angular, React, TypeScript.
       </p>
+      <br />
       <p>
         En mis ratos libres creo proyectos open source (los podéis encontrar en
         mi cuenta de github) y comparto conocimiento en twitch y youtube. De vez

tailwind.config.js

@@ -2,6 +2,7 @@ module.exports = {
   theme: {
     extend: {
       colors: {
+        primary: '#9bd681',
         'yellow-main': {
           500: '#f1e05a',
         },
@@ -26,6 +27,9 @@ module.exports = {
           800: '#2c3e50',
         },
       },
+      borderWidth: {
+        6: '6px',
+      },
     },
   },
   variants: {},