diff --git a/components/Card.vue b/components/Card.vue
new file mode 100644
index 0000000..e2e0fd0
--- /dev/null
+++ b/components/Card.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="relative mb-4 flex rounded-xl bg-saturate text-gray-900 dark:text-gray-200 bg-clip-border shadow-lg">
+    <div v-if="imageUrl" class="relative pl-2 md:pl-4 pt-2 md:pt-4 overflow-hidden">
+      <img :src="imageUrl" alt="logo icon" class="my-auto rounded-xl" :class="imageClass"/>
+    </div>
+    <div class="p-2 md:p-4">
+      <div class="flex items-center justify-between">
+        <h5 class="block font-sans text-xl font-medium leading-snug tracking-normal antialiased" v-html="title"></h5>
+      </div>
+      <a v-if="url" :href="url" class="text-blue-500 mb-1" target="_blank" rel="noreferrer" v-html="extra"></a>
+      <p v-else class="mb-1" v-html="extra"></p>
+      <p class="mb-3">{{ date_representation }}</p>
+      <div class="block font-sans text-base font-light leading-relaxed antialiased">
+        <ul class="list-disc list-inside">
+          <li v-for="item in description" v-html="item"></li>
+        </ul>
+      </div>
+      <div class="group mt-4 inline-flex flex-wrap items-center gap-3">
+        <span v-for="tech in technologies"
+              class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700">
+          {{ tech }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Card",
+  props: {
+    title: String,
+    description: Array,
+    imageUrl: {
+      type: [String, undefined],
+      default: undefined
+    },
+    imageClass: {
+      type: [String, undefined],
+      default: undefined
+    },
+    extra: {
+      type: [String, undefined],
+      default: undefined
+    },
+    url: {
+      type: [String, undefined],
+      default: undefined
+    },
+    startDate: String,
+    endDate: String,
+    technologies: {
+      type: Array,
+      default: []
+    },
+  },
+  computed: {
+    date_representation() {
+      if (this.endDate && this.endDate.length) {
+        return `${this.startDate} - ${this.endDate}`;
+      }
+      return this.startDate;
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/components/FancyBox.vue b/components/FancyBox.vue
new file mode 100644
index 0000000..dfca4a9
--- /dev/null
+++ b/components/FancyBox.vue
@@ -0,0 +1,40 @@
+<script>
+import { Fancybox } from '@fancyapps/ui';
+import '@fancyapps/ui/dist/fancybox/fancybox.css';
+
+export default {
+  name: "FancyBox",
+  props: {
+    options: Object,
+  },
+  methods: {
+    click() {
+      const node = this.$refs.container.childNodes[0];
+      if (node === undefined) {return;}
+      node.click();
+    }
+  },
+  mounted() {
+    Fancybox.bind(this.$refs.container, '[data-fancybox]', {
+      ...(this.options || {}),
+    });
+  },
+  updated() {
+    Fancybox.unbind(this.$refs.container);
+    Fancybox.close();
+
+    Fancybox.bind(this.$refs.container, '[data-fancybox]', {
+      ...(this.options || {}),
+    });
+  },
+  unmounted() {
+    Fancybox.destroy();
+  },
+};
+</script>
+
+<template>
+  <div ref="container">
+    <slot></slot>
+  </div>
+</template>
diff --git a/components/tabs/Contact.vue b/components/tabs/Contact.vue
index 33ced61..d0ce8a3 100644
--- a/components/tabs/Contact.vue
+++ b/components/tabs/Contact.vue
@@ -2,7 +2,7 @@
   <div class="mx-auto">
     <div class="sm:mt-8"></div>
     <div class="grid gap-x-10 md:gap-y-6 md:grid-cols-2">
-      <div class="md:col-span-1 md:px-6 py-3">
+      <div class="md:col-span-1">
         <!--Introduction-->
         <div class="mb-4 lg:col-span-2 lg:w-full lg:max-w-7xl lg:gap-x-8">
           <div class="lg:pr-4">
@@ -24,7 +24,7 @@
               {{ $t('contact_linkedin_profile') }}
             </div>
             <a :href="linkedin_url"
-               class="font-bold text-blue-500 text-xl mb-2"
+               class="font-bold text-blue-500 text-xl mb-2 wrap-word"
                target="_blank"
                rel="noreferrer"
                aria-label="linkedin url">
@@ -41,7 +41,7 @@
             <div class="font-bold text-gray-900 dark:text-gray-200 text-xl mb-1">
               {{ $t('contact_github_profile') }}
             </div>
-            <a :href="$store.getters.GITHUB_PROFILE_URL" class="font-bold text-blue-500 text-xl mb-2"
+            <a :href="$store.getters.GITHUB_PROFILE_URL" class="font-bold text-blue-500 text-xl mb-2 wrap-word"
                target="_blank"
                rel="noreferrer"
                aria-label="github url">
@@ -58,7 +58,7 @@
             <div class="font-bold text-gray-900 dark:text-gray-200 text-xl mb-1">
               {{ $t('contact_phone') }}
             </div>
-            <a :href="tel_phone" class="font-bold text-blue-500 text-xl mb-2">
+            <a :href="tel_phone" class="font-bold text-blue-500 text-xl mb-2 wrap-word">
               {{ phone }}
             </a>
           </div>
@@ -72,7 +72,7 @@
             <div class="font-bold text-gray-900 dark:text-gray-200 text-xl mb-1">
               {{ $t('contact_email') }}
             </div>
-            <a :href="email" class="font-bold text-blue-500 text-xl mb-2"
+            <a :href="email" class="font-bold text-blue-500 text-xl mb-2 wrap-word"
                target="_blank"
                rel="noreferrer"
                aria-label="email url">
@@ -82,7 +82,7 @@
         </div>
       </div>
 
-      <div class="md:col-span-1 md:px-6 py-3">
+      <div class="md:col-span-1">
         <div class="mb-4 lg:col-span-2 lg:w-full lg:max-w-7xl lg:gap-x-8">
           <div class="lg:pr-4">
             <h1 class="mt-2 text-4xl font-bold tracking-tight text-gray-900 dark:text-gray-200">
@@ -130,19 +130,38 @@
             </div>
 
             <div class="flex items-center rounded-full bg-teal-200 text-teal-900 text-sm font-bold px-4 py-3"
-                 role="alert" v-if="sending">
+                 role="alert" v-if="sent">
               <font-awesome-icon class="text-teal-500 text-lg mr-2" :icon="['fas', 'check']"/>
-              <p>{{$t('contact_email_sent')}}</p>
+              <p>{{ $t('contact_email_sent') }}</p>
             </div>
             <div class="flex items-center rounded-full bg-red-200 text-red-900 text-sm font-bold px-4 py-3"
                  role="alert" v-if="error">
               <font-awesome-icon class="text-red-500 text-md mr-2" :icon="['fas', 'x']"/>
-              <p>{{$t('contact_email_sent_error')}}</p>
+              <p>{{ $t('contact_email_sent_error') }}</p>
             </div>
 
             <div class="w-full">
-              <button class="bg-blue-500 w-100 block text-white p-2 w-full rounded-lg">
-                {{ $t('contact_email_send') }}
+              <button class="p-2 w-full rounded-lg"
+                      :disabled="sending"
+                      :class="!sending ? 'bg-blue-500 w-100 block text-white ' :
+                       'text-gray-900 bg-white border-gray-200 dark:bg-gray-800 dark:text-gray-400'">
+                <span v-if="!sending">{{ $t('contact_email_send') }}</span>
+                <span v-else>
+                  <svg aria-hidden="true"
+                       role="img"
+                       class="inline w-4 h-4 mr-3 text-gray-200 animate-spin dark:text-gray-100"
+                       viewBox="0 0 100 101"
+                       fill="none"
+                       xmlns="http://www.w3.org/2000/svg">
+                    <path
+                      d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+                      fill="currentColor"/>
+                    <path
+                      d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+                      fill="#1C64F2"/>
+                  </svg>
+                  {{ $t('contact_email_sending') }}
+                </span>
               </button>
             </div>
           </form>
@@ -165,6 +184,7 @@ export default {
         email: '',
         message: '',
       },
+      sent: false,
       sending: false,
       error: false,
     }
@@ -186,18 +206,24 @@ export default {
   },
   methods: {
     send_email() {
+      this.sending = true;
       emailjs.send('portfolio', 'template_portfolio', {
         user_name: this.form.name, user_email: this.form.email, message: this.form.message
       }, 'u0e_FkHOlD75wLr8g')
-      .then((_) => {
-        this.sending = true;
-        this.clear_email();
-        setTimeout(() => {this.sending = false}, 5000);
-      }, (_) => {
-        this.error = true;
-        this.clear_email();
-        setTimeout(() => {this.error = false}, 5000);
-      });
+        .then((_) => {
+          this.sent = true;
+          this.sending = false;
+          this.clear_email();
+          setTimeout(() => {
+            this.sent = false
+          }, 5000);
+        }, (_) => {
+          this.error = true;
+          this.sending = false;
+          setTimeout(() => {
+            this.error = false
+          }, 5000);
+        });
     },
     clear_email() {
       this.form = {
diff --git a/components/tabs/Home.vue b/components/tabs/Home.vue
index 96e3f77..89b649d 100644
--- a/components/tabs/Home.vue
+++ b/components/tabs/Home.vue
@@ -53,7 +53,7 @@
             caret-animation='blink'
           ></vue-typer>
         </p>
-        <p class="text-sm text-justify text-gray-800 dark:text-gray-200 max-w-xl mx-auto md:text-xl dark:text-white">
+        <p class="text-xl sm:text-justify text-gray-800 dark:text-gray-200 max-w-xl mx-auto dark:text-white">
           {{ $t('profile_description') }}
         </p>
         <div class="flex mt-2 justify-center md:justify-end">
diff --git a/components/tabs/Portfolio.vue b/components/tabs/Portfolio.vue
index d5941ae..5f42c6a 100644
--- a/components/tabs/Portfolio.vue
+++ b/components/tabs/Portfolio.vue
@@ -1,15 +1,491 @@
 <template>
   <div class="mx-auto">
-    <page-header icon="briefcase" title="projects"/>
+    <div class="sm:mt-8"></div>
+    <div class="grid gap-x-10 md:gap-y-6 md:grid-cols-2">
+      <div class="md:col-span-1 lg:w-full lg:max-w-7xl lg:gap-x-8">
+        <div class="mb-4 ">
+          <h1 class="mt-2 mb-4 text-4xl font-bold tracking-tight text-gray-900 dark:text-gray-200">
+            {{ $t('project_education_title') }}:
+          </h1>
+          <Card v-for="item in educations" v-bind:key="item.title"
+                image-class="img-education"
+                :title="item.title" :description="item.description"
+                :extra="item.institution"
+                :image-url="item.image"
+                :url="item.link"
+                :technologies="item.techs"
+                :end-date="item.endDate"
+                :start-date="item.startDate"/>
+        </div>
+        <div class="mb-4">
+          <h1 class="my-4 text-4xl font-bold tracking-tight text-gray-900 dark:text-gray-200">
+            {{ $t('project_work_title') }}:
+          </h1>
+          <Card v-for="item in works" v-bind:key="item.title"
+                image-class="img-education"
+                :title="item.title" :description="item.description"
+                :extra="item.company"
+                :image-url="item.image"
+                :url="item.link"
+                :technologies="item.techs"
+                :end-date="item.endDate"
+                :start-date="item.startDate"/>
+        </div>
+      </div>
+
+      <div class="md:col-span-1">
+        <h1 class="my-4 text-4xl font-bold tracking-tight text-gray-900 dark:text-gray-200">
+          {{ $t('project_title') }}:
+        </h1>
+        <ol class="border-l border-neutral-300 dark:border-neutral-500 text-gray-900 dark:text-gray-200">
+          <li class="bg-saturate rounded-r-lg" v-for="item in projects" v-bind:key="item.id">
+            <div class="flex-start items-center flex pt-3">
+              <div class="-ml-[8px] mr-3 h-[16px] w-[16px] rounded-full bg-neutral-300 dark:bg-neutral-500"></div>
+              <p class="text-sm">{{ item.date }}</p>
+              <span v-for="item in item.language"
+                    class="inline-block ml-2 bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700">
+                {{item}}
+              </span>
+            </div>
+            <div class="mb-6 px-4 mt-2 pb-3">
+              <client-only placeholder="Loading...">
+                <h4 class="pb-1.5 text-xl font-semibold">
+                  <a class="text-blue-500" target="_blank" rel="noreferrer" :href="item.url" v-if="item.url">
+                    {{ item.title }}
+                    <font-awesome-icon class="text-xs font-normal pb-1" :icon="['fas', 'external-link']"/>
+                  </a>
+                  <span v-else>{{ item.title }}</span>
+                </h4>
+                <p class="pb-3" v-html="item.description"></p>
+
+                <div class="group inline-flex flex-wrap items-center gap-3" v-if="item.images.length > 0">
+                  <button
+                    @click="open_gallery('project_' + item.id)"
+                    type="button"
+                    class="inline-block rounded bg-blue-500 px-4 pb-[5px] pt-[6px] text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#54b4d3] transition duration-150 ease-in-out hover:bg-info-600 hover:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.3),0_4px_18px_0_rgba(84,180,211,0.2)] focus:bg-info-600 focus:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.3),0_4px_18px_0_rgba(84,180,211,0.2)] focus:outline-none focus:ring-0 active:bg-info-700 active:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.3),0_4px_18px_0_rgba(84,180,211,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(84,180,211,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.2),0_4px_18px_0_rgba(84,180,211,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.2),0_4px_18px_0_rgba(84,180,211,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.2),0_4px_18px_0_rgba(84,180,211,0.1)]"
+                    data-te-ripple-init
+                    data-te-ripple-color="light">
+                    {{ $t('see') }}
+                  </button>
+                  <fancy-box :ref="'project_' + item.id">
+                    <span :data-fancybox="item.id" v-for="img in item.images" :data-src="img"></span>
+                  </fancy-box>
+                </div>
+              </client-only>
+            </div>
+          </li>
+        </ol>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: "Portfolio"
+  name: "Portfolio",
+  data() {
+    return {
+      /* Data */
+      project: {
+        es: [
+          {
+            id: 0,
+            title: 'LEVERAGE',
+            description: 'Sitio web del servidor de Minecraft <strong>LEVERAGE</strong>, que ofrece servicios de registro y autenticación para los jugadores, información detallada sobre el estado del servidor y la opción de subir skins personalizadas.',
+            images: ['/projects/web/leverage-v1.jpg', '/projects/web/leverage-v2.jpg', '/projects/web/leverage-v3.jpg'],
+            language: ['PHP'],
+            date: '2015-05-01',
+          },
+          {
+            id: 1,
+            title: 'Chat Faranduleando',
+            description: 'Chat en tiempo real con una sala global para la interacción entre todos a los usuarios. Ofrece iconos, categorías de usuarios y salas privadas.',
+            images: [
+              '/projects/web/faranduleando-outside.jpg', '/projects/web/faranduleando-inside.jpg',
+              '/projects/web/faranduleando-new-outside.jpg', '/projects/web/faranduleando-new-inside.jpg'
+            ],
+            language: ['PHP'],
+            date: '2015-08-01',
+          },
+          {
+            id: 2,
+            title: 'Dota 2 - Sitio de estadísticas',
+            description: 'Sitio web de estadísticas en tiempo real para <strong>Dota 2</strong> que proporciona información sobre los jugadores conectados al servidor y las estadísticas de las partidas jugadas.',
+            images: ['/projects/web/dota-stats.jpg'],
+            language: ['PHP', 'Symfony'],
+            date: '2016-01-01',
+          },
+          {
+            id: 3,
+            title: 'GTA - Portal web',
+            description: 'Portal web con información detallada sobre el servidor de <strong>GTA</strong> y guías útiles para facilitar el acceso y disfrute de la experiencia en dicho servidor.',
+            images: ['/projects/web/gta-website.jpg'],
+            language: ['PHP', 'Symfony'],
+            date: '2016-05-01',
+          },
+          {
+            id: 4,
+            title: 'Proyecto Inyenius',
+            description: 'El proyecto Inyenius incluye un portal web, un foro de juegos y una tienda de compra/venta en línea.',
+            images: ['/projects/web/inyenius-website.jpg', '/projects/web/inyenius-shop.jpg'],
+            language: ['PHP', 'Symfony', 'XenForo', 'Wordpress'],
+            date: '2016-10-01',
+          },
+          {
+            id: 5,
+            title: 'Call of Duty - Sitio de estadísticas',
+            description: 'Sitio web para visualizar los servidores de <strong>Call of Duty</strong> junto con la información de los jugadores actualmente conectados a cada servidor.',
+            images: ['/projects/web/call-website.jpg'],
+            language: ['PHP'],
+            date: '2016-12-01',
+          },
+          {
+            id: 6,
+            title: 'Trunkers - Portal web',
+            description: 'Trunkers.mp proporciona información detallada sobre el servidor de <strong>Euro Truck</strong> y guías útiles para facilitar el acceso y disfrute en el servidor.',
+            images: ['/projects/web/trunkers-website.jpg'],
+            language: ['Wordpress'],
+            date: '2017-03-01',
+          },
+          {
+            id: 7,
+            title: 'Rust legacy - Sitio de estadísticas',
+            description: 'Sitio web de estadísticas para <strong>Rust Legacy</strong> que proporciona información sobre los jugadores conectados al servidor y las estadísticas de las partidas jugadas.',
+            images: ['/projects/web/rust-stats.jpg'],
+            language: ['PHP'],
+            date: '2017-07-01',
+          },
+          {
+            id: 8,
+            title: 'Sitio web - FICI',
+            description: 'Web de la <strong>Facultad Introductoria de Ciencias Informáticas</strong> (FICI), que ofrece noticias e información sobre la facultad de manera accesible y actualizada.',
+            images: ['/projects/web/fici-web.jpg'],
+            language: ['Python', 'Django'],
+            date: '2018-01-01',
+          },
+          {
+            id: 9,
+            title: 'LEVERAGE - Sitio web',
+            description: 'Web de <strong>Minecraft</strong> - LEVERAGE que ofrece un simple sistema anti-trampas, lista de usuarios en tiempo real, estado de los servidores y la opción de subir skins personalizadas.',
+            images: ['/projects/web/leverage-v4-0.jpg', '/projects/web/leverage-v4-1.jpg'],
+            language: ['Python', 'Django'],
+            url: 'https://github.com/MacKey-255/LEVERAGE-Web',
+            date: '2018-06-01',
+          },
+          {
+            id: 10,
+            title: 'LEVERAGE - Lanzador',
+            description: 'Lanzador de <strong>Minecraft</strong> - LEVERAGE que cuenta con un sencillo sistema anti-trampas, gestión de versiones de Minecraft y ofrece la opción de subir skins personalizadas.',
+            images: ['/projects/web/leverage-launcher-0.jpg', '/projects/web/leverage-launcher-1.jpg'],
+            language: ['Java', 'JavaFX'],
+            url: 'https://github.com/MacKey-255/LEVERAGE-Launcher',
+            date: '2018-08-01',
+          },
+          {
+            id: 11,
+            title: 'GoodByeCaptcha',
+            description: 'Una biblioteca asincrónica de Python para automatizar la resolución de ReCAPTCHA v2 utilizando reconocimiento de audio e imágenes.',
+            images: [],
+            language: ['Python'],
+            url: 'https://github.com/MacKey-255/GoodByeCatpcha',
+            date: '2019-07-01',
+          },
+          {
+            id: 12,
+            title: 'KeyMac',
+            description: 'Es un proyecto AntiCheat independiente que busca contribuir a la seguridad y bienestar de la comunidad de <strong>SNET</strong>. Evitando el uso de mecanismos de intervención de juegos o hardware especializado creados para tener ventajas sobre el resto de los jugadores. Un AntiCheat facil de instalar, libre, escalable, gratuito y robusto.',
+            images: [
+              '/projects/web/keymac-v3.jpg', '/projects/web/keymac-all-work.jpg',
+              '/projects/web/keymac-about.jpg', '/projects/web/keymac-loading.jpg',
+              '/projects/web/keymac-web-home.jpg', '/projects/web/keymac-website.jpg',
+              '/projects/web/keymac-tool.jpg'
+            ],
+            language: ['C#', 'Javascript', 'Vue.js'],
+            url: 'https://github.com/CubanKeyDev/KeyMac',
+            date: '2020-02-01',
+          },
+        ],
+        en: [
+          {
+            id: 0,
+            title: 'LEVERAGE',
+            description: 'Website of the Minecraft server <strong>LEVERAGE</strong>, which provides registration and authentication services for players, detailed information about server status and the option to upload custom skins.',
+            images: ['/projects/web/leverage-v1.jpg', '/projects/web/leverage-v2.jpg', '/projects/web/leverage-v3.jpg'],
+            language: ['PHP'],
+            date: '2015-05-01',
+          },
+          {
+            id: 1,
+            title: 'Chat Faranduleando',
+            description: 'Real-time chat with a global room for interaction among all users. It offers icons, user categories, and private rooms.',
+            images: [
+              '/projects/web/faranduleando-outside.jpg', '/projects/web/faranduleando-inside.jpg',
+              '/projects/web/faranduleando-new-outside.jpg', '/projects/web/faranduleando-new-inside.jpg'
+            ],
+            language: ['PHP'],
+            date: '2015-08-01',
+          },
+          {
+            id: 2,
+            title: 'Dota 2 - Stats Website',
+            description: 'Real-time statistics website for <strong>Dota 2</strong> that provides information about the players currently connected to the server and the statistics of the matches played.',
+            images: ['/projects/web/dota-stats.jpg'],
+            language: ['PHP', 'Symfony'],
+            date: '2016-01-01',
+          },
+          {
+            id: 3,
+            title: 'GTA - Web portal',
+            description: 'Web portal with detailed information about the <strong>GTA</strong> server and useful guides to facilitate access and enhance the experience on that server.',
+            images: ['/projects/web/gta-website.jpg'],
+            language: ['PHP', 'Symfony'],
+            date: '2016-05-01',
+          },
+          {
+            id: 4,
+            title: 'Inyenius project',
+            description: 'The Inyenius project includes a web portal, a gaming forum, and an online buying/selling store.',
+            images: ['/projects/web/inyenius-website.jpg', '/projects/web/inyenius-shop.jpg'],
+            language: ['PHP', 'Symfony', 'XenForo', 'Wordpress'],
+            date: '2016-10-01',
+          },
+          {
+            id: 5,
+            title: 'Call of Duty - Stats Website',
+            description: 'Website to view the <strong>Call of Duty</strong> servers along with the information of players currently connected to each server.',
+            images: ['/projects/web/call-website.jpg'],
+            language: ['PHP'],
+            date: '2016-12-01',
+          },
+          {
+            id: 6,
+            title: 'Trunkers - Web portal',
+            description: 'Trunkers.mp provides detailed information about the <strong>Euro Truck</strong> server and useful guides to facilitate access and enjoyment on the server.',
+            images: ['/projects/web/trunkers-website.jpg'],
+            language: ['Wordpress'],
+            date: '2017-03-01',
+          },
+          {
+            id: 7,
+            title: 'Rust legacy - Stats Website',
+            description: 'Website of statistics for <strong>Rust Legacy</strong> that provides information about the players currently connected to the server and the statistics of the matches played.',
+            images: ['/projects/web/rust-stats.jpg'],
+            language: ['PHP'],
+            date: '2017-07-01',
+          },
+          {
+            id: 8,
+            title: 'FICI - Website',
+            description: 'Website of the <strong>Introductory Faculty of Computer Science</strong> (FICI), which provides accessible and up-to-date news and information about the faculty.',
+            images: ['/projects/web/fici-web.jpg'],
+            language: ['Python', 'Django'],
+            date: '2018-01-01',
+          },
+          {
+            id: 9,
+            title: 'LEVERAGE - Website',
+            description: 'Website of <strong>Minecraft</strong> - LEVERAGE that offers a simple anti-cheat system, real-time user list, server status, and the option to upload custom skins.',
+            images: ['/projects/web/leverage-v4-0.jpg', '/projects/web/leverage-v4-1.jpg'],
+            language: ['Python', 'Django'],
+            url: 'https://github.com/MacKey-255/LEVERAGE-Web',
+            date: '2018-06-01',
+          },
+          {
+            id: 10,
+            title: 'LEVERAGE - Launcher',
+            description: '<strong>Minecraft</strong> Launcher - LEVERAGE that features a simple anti-cheat system, Minecraft version management, and provides the option to upload custom skins.',
+            images: ['/projects/web/leverage-launcher-0.jpg', '/projects/web/leverage-launcher-1.jpg'],
+            language: ['Java', 'JavaFX'],
+            url: 'https://github.com/MacKey-255/LEVERAGE-Launcher',
+            date: '2018-08-01',
+          },
+          {
+            id: 11,
+            title: 'GoodByeCaptcha',
+            description: 'An asynchronized Python library to automate solving ReCAPTCHA v2 using audio and image recognition.',
+            images: [],
+            language: ['Python'],
+            url: 'https://github.com/MacKey-255/GoodByeCatpcha',
+            date: '2019-07-01',
+          },
+          {
+            id: 12,
+            title: 'KeyMac',
+            description: 'It is an independent AntiCheat project that aims to contribute to the security and well-being of the <strong>SNET</strong> community. By avoiding the use of game intervention mechanisms or specialized hardware created to gain advantages over other players. An easy-to-install, free, scalable, and robust AntiCheat.',
+            images: [
+              '/projects/web/keymac-v3.jpg', '/projects/web/keymac-all-work.jpg',
+              '/projects/web/keymac-about.jpg', '/projects/web/keymac-loading.jpg',
+              '/projects/web/keymac-web-home.jpg', '/projects/web/keymac-website.jpg',
+              '/projects/web/keymac-tool.jpg'
+            ],
+            language: ['C#', 'Javascript', 'Vue.js'],
+            url: 'https://github.com/CubanKeyDev/KeyMac',
+            date: '2020-02-01',
+          },
+        ],
+      },
+      education: {
+        es: [
+          {
+            title: 'Ingeniero en Ciencias Informáticas, Ingeniería informática',
+            description: [
+              'Destacado en proyectos de investigación y expansión científica.',
+              'Diseñé y desarrollé software de alto impacto en la ciencia médica.'
+            ],
+            institution: 'Universidad de las Ciencias Informáticas (UCI)',
+            image: '/projects/logo/uci.jpeg',
+            link: 'https://www.uci.cu/',
+            techs: ['Python', 'JavaScript', 'Java', 'C#', 'Git', 'Docker', 'Linux', 'PostgreSQL'],
+            startDate: '2017-09-01',
+            endDate: '2022-12-01',
+          },
+        ],
+        en: [
+          {
+            title: 'Computer Science Engineer, Software Engineer',
+            description: [
+              'Excelled in research projects and scientific expansion.',
+              'Designed and developed high-impact software in the medical science.'
+            ],
+            institution: 'University of Informatics Sciences (UCI).',
+            image: '/projects/logo/uci.jpeg',
+            link: 'https://www.uci.cu/en',
+            techs: ['Python', 'JavaScript', 'Java', 'C#', 'Git', 'Docker', 'Linux', 'PostgreSQL'],
+            startDate: '2017-09-01',
+            endDate: '2022-12-01',
+          },
+        ]
+      },
+      work: {
+        es: [
+          {
+            title: 'Ingeniero de software',
+            description: [
+              'Desarrollé scripts automatizados (en Python) para simplificar las tareas comunes y reducir el esfuerzo manual.',
+              'Creé diferentes scrapers/crawlers bots.',
+              'Mejorando el rendimiento de la base de datos a través de la indexación y la optimización de consultas.',
+              'DevOps utilizando Docker y sistema operativo Linux.',
+            ],
+            company: 'Mapio.net',
+            image: '/projects/logo/mapio.png',
+            link: 'https://mapio.net/',
+            techs: ['Python', 'Docker', 'Scrapy', 'Git', 'Linux', 'PostgreSQL'],
+            startDate: '2022-11-01',
+            endDate: '2023-07-01',
+          },
+          {
+            title: 'Desarrollador web',
+            description: [
+              'Desarrollador Web Full Stack (PHP, Symfony, Python, Django, Javascript, Vue.js)',
+              'Creé diferentes bots (Telegram, WhatsApp) para automatizar procesos.',
+              'Desarrollé Scrapy/Crawler y diferentes sistemas automatizados.',
+              'Creé aplicaciones de escritorio con C# (WinForms) y Java (JavaFX).',
+              'Creación de aplicaciones móviles con Java y Android Studio.',
+              'Desarrollé un sistema Anti-Cheat con C# para mantener la seguridad en la intranet de Cuba.',
+              'Implementé bibliotecas independientes y administré algunos servidores Linux.',
+            ],
+            company: 'Freelancer',
+            image: '/projects/logo/freelancer.png',
+            techs: ['Python', 'Django', 'PHP', 'Javascript', 'Vue.js', 'C#', 'GraphQL', 'Git', 'Scrapy', 'Linux', 'MySQL'],
+            startDate: '2016-10-01',
+            endDate: '2022-06-01',
+          },
+        ],
+        en: [
+          {
+            title: 'Software engineer',
+            description: [
+              'Developed automated scripts (in Python) to simplify common tasks and reduce manual effort.',
+              'Created different scrapers/crawlers bots.',
+              'Improved database performance through query optimization and indexing.',
+              'DevOps using Docker and Linux operative system.',
+            ],
+            company: 'Mapio.net',
+            image: '/projects/logo/mapio.png',
+            link: 'https://mapio.net/',
+            techs: ['Python', 'Docker', 'Scrapy', 'Git', 'Linux', 'PostgreSQL'],
+            startDate: '2022-11-01',
+            endDate: '2023-07-01',
+          },
+          {
+            title: 'Web developer',
+            description: [
+              'Full Stack Web Developer (PHP, Symfony, Python, Django, Javascript, Vue.js)',
+              'Created different bots (Telegram, WhatsApp) for automate processes.',
+              'Developed automated scrapers/crawlers.',
+              'Created desktop apps with C# (WinForms) and Java (JavaFX).',
+              'Creation of mobile apps with Java and Android Studio.',
+              'Developed a Anti-Cheat systems with C# for keep the security in Cuba intranet.',
+              'Implemented independent libraries and managed some Linux servers.',
+            ],
+            company: 'Freelancer',
+            image: '/projects/logo/freelancer.png',
+            techs: ['Python', 'Django', 'PHP', 'Javascript', 'Vue.js', 'C#', 'GraphQL', 'Git', 'Scrapy', 'Linux', 'MySQL'],
+            startDate: '2016-10-01',
+            endDate: '2022-06-01',
+          },
+        ],
+      }
+    }
+  },
+  computed: {
+    projects() {
+      return this.project[this.$i18n.locale].map((value) => {
+        return {
+          ...value,
+          date: this.dateToString(new Date(value.date)),
+        };
+      }).sort((a, b) => a.id < b.id);
+    },
+    educations() {
+      return this.education[this.$i18n.locale].map((value) => {
+        const startDate = new Date(value.startDate),
+          endDate = value.endDate === undefined ? undefined : new Date(value.endDate);
+        return {
+          ...value,
+          startDate: this.dateToString(startDate),
+          endDate: this.isSameDate(startDate, endDate) ? undefined : this.dateToString(endDate),
+        };
+      });
+    },
+    works() {
+      return this.work[this.$i18n.locale].map((value) => {
+        const startDate = new Date(value.startDate),
+          endDate = value.endDate === undefined ? undefined : new Date(value.endDate);
+        return {
+          ...value,
+          startDate: this.dateToString(startDate),
+          endDate: this.isSameDate(startDate, endDate) ? undefined : this.dateToString(endDate),
+        };
+      });
+    },
+  },
+  methods: {
+    open_gallery(id) {
+      const element = this.$refs[id][0];
+      if (!element) {
+        return;
+      }
+      element.click();
+    },
+    dateToString(date) {
+      if (date === undefined) {
+        return this.$t('present');
+      }
+      return `${this.$t('months')[date.getMonth()]} ${date.getFullYear()}`;
+    },
+    isSameDate(first, second) {
+      if (first === undefined || second === undefined) {
+        return false;
+      }
+      return first.getMonth() === second.getMonth() && first.getFullYear() === second.getFullYear();
+    }
+  }
 }
 </script>
 
-<style scoped>
-
+<style>
+.img-education {
+  width: 128px;
+}
 </style>
diff --git a/layouts/default.vue b/layouts/default.vue
index 94688b7..45fe6dd 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -39,10 +39,22 @@ export default {
   backdrop-filter: saturate(180%) blur(10px);
 }
 
+/* Ref: https://stackoverflow.com/questions/3247358/how-do-i-wrap-text-with-no-whitespace-inside-a-td#answer-5108367 */
+.wrap-word {
+  white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
+  white-space: -webkit-pre-wrap; /* Chrome & Safari */
+  white-space: -pre-wrap; /* Opera 4-6 */
+  white-space: -o-pre-wrap; /* Opera 7 */
+  word-wrap: break-word; /* Internet Explorer 5.5+ */
+  word-break: break-all;
+  white-space: normal;
+}
+
 .fade-enter-from, .fade-leave-to {
-	opacity: 0;
+  opacity: 0;
 }
+
 .fade-enter-active, .fade-leave-active {
-	transition: opacity 0.1s ease-in-out;
+  transition: opacity 0.1s ease-in-out;
 }
 </style>
diff --git a/locales/en-US.js b/locales/en-US.js
index 441dd53..98ab65e 100644
--- a/locales/en-US.js
+++ b/locales/en-US.js
@@ -26,6 +26,9 @@ export default {
   skills_title_languages: 'Languages',
   skills_languages: [['Spanish', '(Native)'], ['English', '(A2)']],
   /* Projects */
+  project_title: 'Projects',
+  project_education_title: 'Education',
+  project_work_title: 'Work experience',
   /* Contacts */
   contact_title: 'Have a Project in Mind? Let\'s Build Something Great Together!',
   contact_subtitle: 'I\'m excited to hear from you and discuss how we can collaborate to bring your ideas to life. Whether it\'s a web application, API development or any other web solution, let\'s turn your ideas into reality and make an impact in the digital world. Contact me now to get started!',
@@ -40,9 +43,13 @@ export default {
   contact_email_message: 'Message',
   contact_email_message_placeholder: 'Type a message...',
   contact_email_send: 'Submit',
+  contact_email_sending: 'Sending ...',
   contact_email_sent: 'Message sent successfully!',
   contact_email_sent_error: 'Error sending message!',
   /* Utils */
+  see: 'See preview',
   years: 'yrs',
   year: 'yr',
+  present: 'Present',
+  months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
 };
diff --git a/locales/es-ES.js b/locales/es-ES.js
index ffbb127..c998968 100644
--- a/locales/es-ES.js
+++ b/locales/es-ES.js
@@ -26,6 +26,9 @@ export default {
   skills_title_languages: 'Idiomas',
   skills_languages: [['Español', '(Nativo)'], ['Ingles', '(A2)']],
   /* Projects */
+  project_title: 'Proyectos',
+  project_education_title: 'Educación',
+  project_work_title: 'Experiencia laboral',
   /* Contacts */
   contact_title: '¿Tienes un proyecto en mente? ¡Construyamos algo grandioso juntos!',
   contact_subtitle: 'Estoy emocionado por saber de ti y hablar cómo podemos colaborar para dar vida a tus ideas. Ya sea una aplicación web, desarrollo de API o cualquier otra solución web, convertamos tus ideas en realidad y hagamos un impacto en el mundo digital. ¡Contáctame ahora para empezar!',
@@ -40,9 +43,13 @@ export default {
   contact_email_message: 'Mensaje',
   contact_email_message_placeholder: 'Escribe un message...',
   contact_email_send: 'Enviar',
+  contact_email_sending: 'Enviando ...',
   contact_email_sent: '¡Mensaje enviado exitosamente!',
   contact_email_sent_error: '¡Error enviando el mensaje!',
   /* Utils */
+  see: 'Ver vista previa',
   years: 'años',
   year: 'año',
+  present: 'Presente',
+  months: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
 };
diff --git a/package.json b/package.json
index 801b68c..e14850b 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@emailjs/browser": "^3.11.0",
+    "@fancyapps/ui": "^5.0.20",
     "@nuxtjs/i18n": "^7.3.1",
     "core-js": "^3.25.3",
     "nuxt": "^2.15.8",
diff --git a/static/projects/logo/FIAI.jpg b/static/projects/logo/FIAI.jpg
new file mode 100644
index 0000000..ff23711
Binary files /dev/null and b/static/projects/logo/FIAI.jpg differ
diff --git a/static/projects/logo/freelancer.png b/static/projects/logo/freelancer.png
new file mode 100644
index 0000000..7782ca1
Binary files /dev/null and b/static/projects/logo/freelancer.png differ
diff --git a/static/projects/logo/mapio.png b/static/projects/logo/mapio.png
new file mode 100644
index 0000000..6e1780b
Binary files /dev/null and b/static/projects/logo/mapio.png differ
diff --git a/static/projects/logo/uci.jpeg b/static/projects/logo/uci.jpeg
new file mode 100644
index 0000000..e8f9f8a
Binary files /dev/null and b/static/projects/logo/uci.jpeg differ
diff --git a/static/projects/web/call-website.jpg b/static/projects/web/call-website.jpg
new file mode 100755
index 0000000..755ac5b
Binary files /dev/null and b/static/projects/web/call-website.jpg differ
diff --git a/static/projects/web/dota-stats.jpg b/static/projects/web/dota-stats.jpg
new file mode 100755
index 0000000..be027f0
Binary files /dev/null and b/static/projects/web/dota-stats.jpg differ
diff --git a/static/projects/web/faranduleando-inside.jpg b/static/projects/web/faranduleando-inside.jpg
new file mode 100644
index 0000000..a5afbef
Binary files /dev/null and b/static/projects/web/faranduleando-inside.jpg differ
diff --git a/static/projects/web/faranduleando-new-inside.jpg b/static/projects/web/faranduleando-new-inside.jpg
new file mode 100644
index 0000000..542460c
Binary files /dev/null and b/static/projects/web/faranduleando-new-inside.jpg differ
diff --git a/static/projects/web/faranduleando-new-outside.jpg b/static/projects/web/faranduleando-new-outside.jpg
new file mode 100644
index 0000000..f9c4cf5
Binary files /dev/null and b/static/projects/web/faranduleando-new-outside.jpg differ
diff --git a/static/projects/web/faranduleando-outside.jpg b/static/projects/web/faranduleando-outside.jpg
new file mode 100644
index 0000000..59c5c47
Binary files /dev/null and b/static/projects/web/faranduleando-outside.jpg differ
diff --git a/static/projects/web/fici-web.jpg b/static/projects/web/fici-web.jpg
new file mode 100644
index 0000000..b55dc5e
Binary files /dev/null and b/static/projects/web/fici-web.jpg differ
diff --git a/static/projects/web/gta-website.jpg b/static/projects/web/gta-website.jpg
new file mode 100644
index 0000000..baa5ed6
Binary files /dev/null and b/static/projects/web/gta-website.jpg differ
diff --git a/static/projects/web/inyenius-shop.jpg b/static/projects/web/inyenius-shop.jpg
new file mode 100644
index 0000000..8327367
Binary files /dev/null and b/static/projects/web/inyenius-shop.jpg differ
diff --git a/static/projects/web/inyenius-website.jpg b/static/projects/web/inyenius-website.jpg
new file mode 100644
index 0000000..0174c31
Binary files /dev/null and b/static/projects/web/inyenius-website.jpg differ
diff --git a/static/projects/web/keymac-about.jpg b/static/projects/web/keymac-about.jpg
new file mode 100644
index 0000000..c6d5297
Binary files /dev/null and b/static/projects/web/keymac-about.jpg differ
diff --git a/static/projects/web/keymac-all-work.jpg b/static/projects/web/keymac-all-work.jpg
new file mode 100644
index 0000000..cfcf0ed
Binary files /dev/null and b/static/projects/web/keymac-all-work.jpg differ
diff --git a/static/projects/web/keymac-loading.jpg b/static/projects/web/keymac-loading.jpg
new file mode 100644
index 0000000..23c3377
Binary files /dev/null and b/static/projects/web/keymac-loading.jpg differ
diff --git a/static/projects/web/keymac-tool.jpg b/static/projects/web/keymac-tool.jpg
new file mode 100644
index 0000000..ef83295
Binary files /dev/null and b/static/projects/web/keymac-tool.jpg differ
diff --git a/static/projects/web/keymac-v3.jpg b/static/projects/web/keymac-v3.jpg
new file mode 100644
index 0000000..1c8800c
Binary files /dev/null and b/static/projects/web/keymac-v3.jpg differ
diff --git a/static/projects/web/keymac-web-home.jpg b/static/projects/web/keymac-web-home.jpg
new file mode 100644
index 0000000..e6aa8cd
Binary files /dev/null and b/static/projects/web/keymac-web-home.jpg differ
diff --git a/static/projects/web/keymac-website.jpg b/static/projects/web/keymac-website.jpg
new file mode 100644
index 0000000..7de4b01
Binary files /dev/null and b/static/projects/web/keymac-website.jpg differ
diff --git a/static/projects/web/leverage-launcher-0.jpg b/static/projects/web/leverage-launcher-0.jpg
new file mode 100644
index 0000000..35d7ed1
Binary files /dev/null and b/static/projects/web/leverage-launcher-0.jpg differ
diff --git a/static/projects/web/leverage-launcher-1.jpg b/static/projects/web/leverage-launcher-1.jpg
new file mode 100644
index 0000000..0fbe60b
Binary files /dev/null and b/static/projects/web/leverage-launcher-1.jpg differ
diff --git a/static/projects/web/leverage-v1.jpg b/static/projects/web/leverage-v1.jpg
new file mode 100644
index 0000000..96f7047
Binary files /dev/null and b/static/projects/web/leverage-v1.jpg differ
diff --git a/static/projects/web/leverage-v2.jpg b/static/projects/web/leverage-v2.jpg
new file mode 100644
index 0000000..c076df6
Binary files /dev/null and b/static/projects/web/leverage-v2.jpg differ
diff --git a/static/projects/web/leverage-v3.jpg b/static/projects/web/leverage-v3.jpg
new file mode 100644
index 0000000..05d60f7
Binary files /dev/null and b/static/projects/web/leverage-v3.jpg differ
diff --git a/static/projects/web/leverage-v4-0.jpg b/static/projects/web/leverage-v4-0.jpg
new file mode 100644
index 0000000..a47798d
Binary files /dev/null and b/static/projects/web/leverage-v4-0.jpg differ
diff --git a/static/projects/web/leverage-v4-1.jpg b/static/projects/web/leverage-v4-1.jpg
new file mode 100644
index 0000000..1a6b840
Binary files /dev/null and b/static/projects/web/leverage-v4-1.jpg differ
diff --git a/static/projects/web/rust-stats.jpg b/static/projects/web/rust-stats.jpg
new file mode 100644
index 0000000..3acf2c3
Binary files /dev/null and b/static/projects/web/rust-stats.jpg differ
diff --git a/static/projects/web/trunkers-website.jpg b/static/projects/web/trunkers-website.jpg
new file mode 100644
index 0000000..330965c
Binary files /dev/null and b/static/projects/web/trunkers-website.jpg differ
diff --git a/yarn.lock b/yarn.lock
index 611a7d3..3287152 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1285,6 +1285,11 @@
   resolved "https://registry.yarnpkg.com/@emailjs/browser/-/browser-3.11.0.tgz#0e78de2f85096d1a9ad5b5977b060bb5d1784cb4"
   integrity sha512-RkY3FKZ3fPdK++OeF46mRTFpmmQWCHUVHZH209P3NE4D5sg2Atg7S2wa3gw5062Gl4clt4Wn5SyC4WhlVZC5pA==
 
+"@fancyapps/ui@^5.0.20":
+  version "5.0.20"
+  resolved "https://registry.yarnpkg.com/@fancyapps/ui/-/ui-5.0.20.tgz#c9e25d333ad27568ee950e0092d0747ae42b8237"
+  integrity sha512-g7go/W0mIplnpVCWNm6uHF6VZeDSAJnPHzx0bxyETfzyYqtwpv0LpNYP8TbWqFELvXdXwNkQwHvHxkI9FvGlqQ==
+
 "@fortawesome/fontawesome-common-types@6.4.0":
   version "6.4.0"
   resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.0.tgz#88da2b70d6ca18aaa6ed3687832e11f39e80624b"