Finishing Home page

Added Typer effect Changed About to Skills Fixed overlap in navbar with text Fixed problem with Background (display: fixed) Added all font-awesome icons Added router changing language Added cv temporal
MacKey-255 · Jul 23, 2023 · fa18a61 · fa18a61
1 parent b5fca2b
commit fa18a61
Show file tree

Hide file tree

Showing 16 changed files with 207 additions and 39 deletions.
diff --git a/components/AppMenu.vue b/components/AppMenu.vue
@@ -1,6 +1,6 @@
 <template>
   <nav class="navbar dark:text-white">
-    <div class="menu">
+    <div class="menu md:rounded-lg bg-slate-300/[0.8] dark:bg-slate-600/[0.8]">
       <input class="menu_input" id="btn1" name="menu" type="radio" value="1" :checked="activePage === 1"
              @input="updateActivePage" />
       <div class="menu_contain">
@@ -18,7 +18,7 @@
         <label class="menu_label" for="btn2">
           <font-awesome-icon icon="address-card" class="fa-icon"></font-awesome-icon>
           <span class="menu_text">
-            {{ $t('about') }}
+            {{ $t('skills') }}
           </span>
         </label>
       </div>
@@ -93,6 +93,7 @@ export default {
 }
 .menu {
   position: relative;
+  padding: 8px;
 }
 .menu:hover .menu_text {
   display: block;
@@ -172,7 +173,6 @@ export default {
   }
   .menu {
     display: flex;
-    padding: 8px;
   }
   .menu_contain {
     flex-grow: 1;

diff --git a/components/Particles.vue b/components/Particles.vue
@@ -49,7 +49,7 @@ export default {
 
       /* set size canvas */
       canvas_el.style.width = "100%";
-      canvas_el.style.height = "calc(100% - 6px)";
+      canvas_el.style.height = "100%";
 
       /* append canvas */
       const canvas = particlesDiv.appendChild(canvas_el);
@@ -77,8 +77,9 @@ export default {
 </script>
 
 <style scoped>
+
 .particles {
-  position: absolute;
+  position: fixed;
   left: 0;
   top: 0;
   z-index: -1;

diff --git a/components/tabs/Home.vue b/components/tabs/Home.vue
@@ -1,23 +1,123 @@
 <template>
-  <div class="mx-auto">
-    <page-header icon="house" title="home" />
-    <div class="text-center">
-      <img
-        :src="require('@/assets/images/profile.jpg')"
-        class="mx-auto mb-4 w-32 rounded-lg"
-        alt="Avatar" />
-      <h5 class="mb-2 text-xl dark:text-white font-medium leading-tight">Michel Suárez</h5>
-      <p class="text-neutral-500 dark:text-neutral-400">Full Stack web developer</p>
+  <div class="grid gap-x-10 md:grid-cols-3 mt-2">
+    <div class="md:col-span-1 justify-self-center md:justify-self-start md:order-2">
+      <div class="mb-4">
+        <img
+          :src="require('@/assets/images/profile.jpg')"
+          class="img-avatar rounded-t-xl justify-self-center"
+          alt="Avatar" />
+        <div
+          class="flex justify-center gap-4 p-2 rounded-b-lg bg-slate-300/[0.8] text-gray-800 dark:text-gray-200 dark:bg-slate-600/[0.8]">
+          <a
+            class="transition ease-in-out hover:scale-150 hover:-translate-y-1 duration-150"
+            :href="$store.getters.LINKEDIN_PROFILE_URL"
+            target="_blank"
+            aria-label="linkedin url"
+            rel="noreferrer">
+            <font-awesome-icon :icon="['fab', 'linkedin']" />
+          </a>
+
+          <a
+            class="transition ease-in-out hover:scale-150 hover:-translate-y-1 duration-150"
+            :href="$store.getters.GITHUB_PROFILE_URL"
+            target="_blank"
+            rel="noreferrer"
+            aria-label="github url">
+            <font-awesome-icon :icon="['fab', 'github']" />
+          </a>
+
+          <a
+            class="transition ease-in-out hover:scale-150 hover:-translate-y-1 duration-150"
+            :href="get_email"
+            target="_blank"
+            rel="noreferrer"
+            aria-label="send email">
+            <font-awesome-icon icon="envelope" />
+          </a>
+
+          <a
+            class="transition ease-in-out hover:scale-150 hover:-translate-y-1 duration-150"
+            href="/cv/es/portfolio.pdf"
+            target="_blank"
+            rel="noreferrer"
+            aria-label="download cv"
+            download>
+            <font-awesome-icon :icon="['fas', 'file-lines']" />
+          </a>
+        </div>
+      </div>
+    </div>
+
+    <div class="md:col-span-2 justify-self-center md:justify-self-end md:order-1">
+      <h1 class="md:text-right text-4xl dark:text-white font-medium">Michel Suárez</h1>
+      <p class="text-md mb-1 text-justify text-blue-800 dark:text-blue-200 max-w-xl mx-auto md:text-x md:text-right">
+        <vue-typer
+          :text='$t("profile_profession")'
+          :repeat='Infinity'
+          :shuffle='false'
+          initial-action='typing'
+          :pre-type-delay='70'
+          :type-delay='70'
+          :pre-erase-delay='2000'
+          :erase-delay='250'
+          erase-style='select-all'
+          :erase-on-complete='false'
+          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">
+        {{ $t('profile_description') }}
+      </p>
+      <div class="flex mt-2 justify-center md:justify-end">
+        <button class="btn-more bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full"
+                @click="updateActivePage(2)">
+          <span class="mr-2">{{ $t('see_more') }}</span>
+          <font-awesome-icon icon="arrow-right" />
+        </button>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: "Home"
+  name: "Home",
+  props: {
+    activePage: Number,
+  },
+  computed: {
+    get_email() {
+      let subject = 'Oferta%20de%20trabajo';
+      if (this.$i18n.locale === 'en') {
+        subject = 'Work%20offer';
+      }
+      return 'mailto:' + this.$store.getters.EMAIL + '?Subject=' + subject;
+    }
+  },
+  methods: {
+    updateActivePage(page) {
+      this.$emit('update:activePage', page);
+    }
+  },
 }
 </script>
 
-<style scoped>
+<style>
+.vue-typer .custom.char {
+  color: #3b82f6;
+  font-weight: bold;
+}
+.img-avatar {
+  width: 250px;
+  height: 250px;
+}
+.btn-more {
+  margin-top: -15px;
+}
 
+@media only screen and (max-device-width: 640px) {
+  .btn-more {
+    margin-top: 0;
+  }
+}
 </style>
diff --git a/components/tabs/About.vue → components/tabs/Skills.vue b/components/tabs/About.vue → components/tabs/Skills.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="mx-auto">
-    <page-header icon="address-card" title="about" />
+    <page-header icon="address-card" title="skills" />
   </div>
 </template>
 
 <script>
 export default {
-  name: "About"
+  name: "Skills"
 }
 </script>
 

diff --git a/layouts/default.vue b/layouts/default.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="container mx-auto" :class="darkClass">
+  <div :class="darkClass">
     <particles :is-dark-mode="isDarkMode" />
     <AppMenu :activePage.sync="activePage" />
 
-    <div class="content">
-      <NuxtChild :activePage="activePage" />
+    <div class="container px-4 md:mx-auto">
+      <NuxtChild :activePage.sync="activePage" />
     </div>
     <AppFooter />
   </div>
@@ -40,7 +40,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-
-</style>
diff --git a/locales/en-US.js b/locales/en-US.js
@@ -1,8 +1,11 @@
 export default {
   home: 'Home',
   projects: 'Projects',
-  about: 'About us',
+  skills: 'Skills',
   contact: 'Contact',
   language: 'Language',
   dark_mode: 'Dark mode',
+  see_more: 'See more',
+  profile_profession: ['Full Stack Web developer', 'Software Engineer', 'Backend developer'],
+  profile_description: 'I\'m a experienced Software Engineer adept in bringing forth expertise in design, installation, testing and maintenance of software systems. Proficient in various frameworks (FastAPI/Django/Flask), languages (Python/C#/Java), and embedded systems. Able to effectively self-manage during independent projects, as well as collaborate as part of a productive team.',
 };
diff --git a/locales/es-ES.js b/locales/es-ES.js
@@ -1,8 +1,11 @@
 export default {
   home: 'Principal',
   projects: 'Proyectos',
-  about: 'Sobre mi',
+  skills: 'Habilidades',
   contact: 'Contacto',
   language: 'Lenguaje',
   dark_mode: 'Temas',
+  see_more: 'Ver más',
+  profile_profession: ['Desarrollador Web Full Stack', 'Ingeniero de Software', 'Desarrollador Backend'],
+  profile_description: 'Soy un ingeniero de software con experiencia en diseño, codificación, prueba y mantenimiento de sistemas de software. Competente en varios frameworks (Django/FastAPI/Flask), lenguajes (Python/C#/Java) y sistemas embebidos. Capaz de autogestionar mi tiempo de manera efectiva durante los proyectos independientes, así como colaborar formando parte de un equipo de desarrollo.',
 };
diff --git a/nuxt.config.js b/nuxt.config.js
@@ -27,6 +27,8 @@ export default {
 
   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
   plugins: [
+    '~/plugins/vue-typer.client.js',
+    '~/plugins/route-lang.js',
     '~/plugins/fontawesome.js'
   ],
 

diff --git a/package.json b/package.json
@@ -14,7 +14,8 @@
     "nuxt": "^2.15.8",
     "vue": "^2.7.10",
     "vue-server-renderer": "^2.7.10",
-    "vue-template-compiler": "^2.7.10"
+    "vue-template-compiler": "^2.7.10",
+    "vue-typer": "^1.2.0"
   },
   "devDependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.4.0",

diff --git a/pages/index.vue b/pages/index.vue
@@ -1,16 +1,18 @@
 <template>
-  <main class="tab-content">
-    <Home v-if="isActive(1)" />
-    <About v-else-if="isActive(2)" />
-    <Portfolio v-else-if="isActive(3)" />
-    <Contact v-else-if="isActive(4)" />
-    <div v-else>Nothing</div>
+  <main class="tab-content flex items-center md:h-screen">
+    <div class="mx-auto">
+      <Home :activePage.sync="actualActivePage" v-if="isActive(1)" />
+      <Skills v-else-if="isActive(2)" />
+      <Portfolio v-else-if="isActive(3)" />
+      <Contact v-else-if="isActive(4)" />
+      <div v-else>Nothing</div>
+    </div>
   </main>
 </template>
 
 <script>
 import Home from "@/components/tabs/Home";
-import About from "@/components/tabs/About";
+import Skills from "@/components/tabs/Skills";
 import Portfolio from "@/components/tabs/Portfolio";
 import Contact from "@/components/tabs/Contact";
 
@@ -19,11 +21,35 @@ export default {
   props: {
     activePage: Number,
   },
-  components: { Home, About, Portfolio, Contact },
+  data() {
+    return {
+      actualActivePage: this.activePage,
+    }
+  },
+  watch: {
+    actualActivePage: function (newVal) {
+      this.updateActivePage(newVal);
+      return newVal;
+    },
+    activePage: function (newVal) {
+      this.actualActivePage = newVal;
+      return newVal;
+    },
+  },
+  components: { Home, Skills, Portfolio, Contact },
   methods: {
     isActive(pageNumber) {
-      return this.activePage === pageNumber;
+      return this.actualActivePage === pageNumber;
     },
+    updateActivePage(value) {
+      this.$emit('update:activePage', value);
+    }
   },
 }
 </script>
+
+<style scoped>
+.tab-content {
+  padding-bottom: 24px; /* Footer separation */
+}
+</style>
diff --git a/plugins/fontawesome.js b/plugins/fontawesome.js
@@ -3,13 +3,15 @@ import Vue from 'vue';
 import { library, config } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { fas } from '@fortawesome/free-solid-svg-icons';
+import { fab } from '@fortawesome/free-brands-svg-icons';
+import { far } from '@fortawesome/free-regular-svg-icons';
 
 // This is important, we are going to let Nuxt.js worry about the CSS
 config.autoAddCss = false;
 
 // You can add your icons directly in this plugin. See other examples for how you
 // can add other styles or just individual icons.
-library.add(fas);
+library.add(fas, fab, far);
 
 // Register the component globally
 Vue.component('font-awesome-icon', FontAwesomeIcon);
diff --git a/plugins/route-lang.js b/plugins/route-lang.js
@@ -0,0 +1,10 @@
+export default ({ app }) => {
+ // Every time the route changes (fired on initialization too)
+ app.router.beforeEach((to, from, next) => {
+   // Detect language
+   if (to.query.lang) {
+      app.i18n.setLocale(to.query.lang);
+   }
+    next();
+ });
+};
diff --git a/plugins/vue-typer.client.js b/plugins/vue-typer.client.js
@@ -0,0 +1,9 @@
+// Docs: https://github.com/cngu/vue-typer
+// Ref: https://cngu.github.io/vue-typer/?ref=madewithvuejs.com
+import VueTyperPlugin from 'vue-typer';
+import Vue from "vue";
+
+Vue.use(VueTyperPlugin);
+// [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content.
+// This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>.
+// Bailing hydration and performing full client-side render.
diff --git a/static/cv/es/portfolio.pdf b/static/cv/es/portfolio.pdf
diff --git a/store/index.js b/store/index.js
@@ -3,7 +3,10 @@ export const state = () => ({
 });
 
 export const getters = {
-  isDarkMode: (state) => state.isDarkMode
+  isDarkMode: (state) => state.isDarkMode,
+  GITHUB_PROFILE_URL: () => 'https://github.com/MacKey-255',
+  LINKEDIN_PROFILE_URL: () => 'https://www.linkedin.com/in/mackey255/',
+  EMAIL: () => 'mackeyfuturo@gmail.com'
 };
 
 export const mutations = {