feat(home): add social links

components/ui/SocialIcons.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="flex items-center">
+    <a
+      v-for="(social, index) in socials"
+      :key="index"
+      :href="social.href"
+      class="mr-3"
+      target="_blank"
+      :aria-label="social.ariaLabel"
+    >
+      <img class="w-8" :src="social.src" :alt="social.alt" />
+    </a>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SocialIcons',
+  data: () => ({
+    // TODO: translate this texts and add alt
+    socials: [
+      {
+        href: 'https://twitter.com/pablosirera',
+        src: '/images/icons/twitter.svg',
+        alt: '',
+        ariaLabel: 'Sígueme en twitter',
+      },
+      {
+        href: 'https://twitch.tv/pablosirera',
+        src: '/images/icons/twitch.svg',
+        alt: '',
+        ariaLabel: 'Sígueme en twitch',
+      },
+      {
+        href: 'https://instagram.com/pablodeveloper',
+        src: '/images/icons/instagram.svg',
+        alt: '',
+        ariaLabel: 'Sígueme en instagram',
+      },
+      {
+        href: 'https://youtube.com/user/psirera4',
+        src: '/images/icons/youtube.svg',
+        alt: '',
+        ariaLabel: 'Subscríbete a mi canal de youtube',
+      },
+    ],
+  }),
+}
+</script>

pages/index.vue

@@ -21,15 +21,18 @@
       </p>
       <!-- TODO: add social links -->
       <div class="mt-4">
-        aquí van las redes sociales
+        <SocialIcons />
       </div>
     </div>
     <!-- TODO: translate this text -->
-    <img
-      class="image"
-      src="/images/desarrollador-web-setup.jpg"
-      alt="desarrollador web valencia"
-    />
+    <div class="image-wrapper relative">
+      <img
+        class="image"
+        src="/images/desarrollador-web-setup.jpg"
+        alt="desarrollador web valencia"
+      />
+      <div class="bg-image absolute" />
+    </div>
   </section>
 </template>
 
@@ -39,10 +42,26 @@ export default {
 }
 </script>
 
-<style scoped>
-.image {
-  width: 385px;
-  height: auto;
+<style scoped lang="scss">
+$widthImage: 385px;
+$heigthImage: 510px;
+
+.image-wrapper {
   justify-self: center;
+
+  .bg-image {
+    width: $widthImage;
+    height: $heigthImage;
+    top: -20px;
+    right: -20px;
+    z-index: -1;
+
+    @apply bg-primary;
+  }
+
+  .image {
+    width: $widthImage;
+    height: $heigthImage;
+  }
 }
 </style>

tailwind.config.js

@@ -2,7 +2,7 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        primary: '#9bd681',
+        primary: '#81a78f',
         'yellow-main': {
           500: '#f1e05a',
         },