Separate data and busyness layer

Cleanup code
MacKey-255 · Aug 1, 2023 · b6b192d · b6b192d
1 parent cdb57e0
commit b6b192d
Show file tree

Hide file tree

Showing 14 changed files with 503 additions and 432 deletions.
diff --git a/components/layout/AppMenu.vue b/components/layout/AppMenu.vue
@@ -164,6 +164,7 @@ export default {
 .dark .menu_input[type=radio]:checked + .menu_contain .menu_label {
   background-color: rgba(255, 255, 255, 0.3);
 }
+
 .menu_input[type=radio]:checked + .menu_contain .menu_label {
   background-color: rgba(0, 0, 0, 0.1);
 }

diff --git a/components/layout/LangSwitcher.vue b/components/layout/LangSwitcher.vue
@@ -17,8 +17,9 @@ export default {
     changeLocale(locale) {
       this.$i18n.setLocale(locale);
       const hash = ['', '#'].includes(this.$router.currentRoute.hash) ? {} : {
-        hash: this.$router.currentRoute.hash.replace('#', '')};
-      this.$router.push({ path: '', query: { lang: locale }, ...hash});
+        hash: this.$router.currentRoute.hash.replace('#', '')
+      };
+      this.$router.push({path: '', query: {lang: locale}, ...hash});
     }
   }
 }

diff --git a/components/tabs/Contact.vue b/components/tabs/Contact.vue
@@ -28,7 +28,7 @@
                target="_blank"
                rel="noreferrer"
                aria-label="linkedin url">
-              {{ $store.getters.LINKEDIN_PROFILE_URL }}
+              {{ linkedin }}
             </a>
           </div>
         </div>
@@ -41,11 +41,11 @@
             <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 wrap-word"
+            <a :href="github_profile" class="font-bold text-blue-500 text-xl mb-2 wrap-word"
                target="_blank"
                rel="noreferrer"
                aria-label="github url">
-              {{ $store.getters.GITHUB_PROFILE_URL }}
+              {{ github_profile }}
             </a>
           </div>
         </div>
@@ -59,7 +59,7 @@
               {{ $t('contact_location_title') }}
             </div>
             <span class="font-bold text-blue-500 text-xl mb-2 wrap-word">
-              {{ $t('contact_location') }}
+              {{ location }}
             </span>
           </div>
         </div>
@@ -86,11 +86,11 @@
             <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 wrap-word"
+            <a :href="contact_email" class="font-bold text-blue-500 text-xl mb-2 wrap-word"
                target="_blank"
                rel="noreferrer"
                aria-label="email url">
-              {{ $store.getters.EMAIL }}
+              {{ email }}
             </a>
           </div>
         </div>
@@ -187,12 +187,12 @@
 
 <script>
 import emailjs from '@emailjs/browser';
+import {contact} from "@/store/resume.data";
 
 export default {
   name: "Contact",
   data() {
     return {
-      phone: '+34 604256897',
       form: {
         name: '',
         email: '',
@@ -204,18 +204,33 @@ export default {
     }
   },
   computed: {
+    phone() {
+      return contact.phone;
+    },
     tel_phone() {
       return 'tel:' + this.phone;
     },
+    location() {
+      return contact.location[this.$i18n.locale];
+    },
+    linkedin() {
+      return contact.linkedin_profile;
+    },
     linkedin_url() {
-      return this.$store.getters.LINKEDIN_PROFILE_URL + '?locale=' + (this.$i18n.locale === 'en' ? 'en_US' : 'es_ES');
+      return contact.linkedin_profile + '?locale=' + (this.$i18n.locale === 'en' ? 'en_US' : 'es_ES');
     },
     email() {
+      return contact.email;
+    },
+    contact_email() {
       let subject = 'Oferta%20de%20trabajo';
       if (this.$i18n.locale === 'en') {
         subject = 'Job%20offer';
       }
-      return 'mailto:' + this.$store.getters.EMAIL + '?Subject=' + subject;
+      return 'mailto:' + contact.email + '?Subject=' + subject;
+    },
+    github_profile() {
+      return contact.github_profile;
     }
   },
   methods: {

diff --git a/components/tabs/Home.vue b/components/tabs/Home.vue
@@ -10,15 +10,15 @@
           <div
             class="flex justify-center gap-4 p-2 rounded-b-lg bg-gray-300/[0.8] text-gray-800 dark:text-gray-200 dark:bg-slate-600/[0.8] shadow-lg">
             <a class="transition ease-in-out hover:scale-150 hover:-translate-y-1 duration-150"
-               :href="$store.getters.LINKEDIN_PROFILE_URL"
+               :href="linkedin_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"
+               :href="github_url"
                target="_blank"
                rel="noreferrer"
                aria-label="github url">
@@ -38,10 +38,10 @@
 
       <div class="md:col-span-2 justify-self-center md:justify-self-start md:order-1">
         <bg-saturate class="p-4 md:p-6 rounded-xl">
-          <h1 class="text-4xl dark:text-white font-medium">Michel Suárez</h1>
+          <h1 class="text-4xl dark:text-white font-medium">{{ full_name }}</h1>
           <p class="text-md mb-2 text-justify text-blue-800 dark:text-blue-200 max-w-xl mx-auto">
             <vue-typer
-              :text='$t("profile_profession")'
+              :text='profile_professions'
               :repeat='Infinity'
               :shuffle='false'
               initial-action='typing'
@@ -55,7 +55,7 @@
             ></vue-typer>
           </p>
           <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') }}
+            {{ description }}
           </p>
         </bg-saturate>
         <div class="flex mt-2 justify-center md:justify-end">
@@ -82,18 +82,34 @@
 <script>
 import {mapMutations} from "vuex";
 import BgSaturate from "@/components/layout/BgSaturate";
+import {contact, profile} from "@/store/resume.data";
 
 export default {
   name: "Home",
   components: {BgSaturate},
   computed: {
+    full_name() {
+      return `${profile.name} ${profile.last_name}`;
+    },
+    description() {
+      return profile.description[this.$i18n.locale];
+    },
+    profile_professions() {
+      return profile.professions[this.$i18n.locale];
+    },
     email() {
       let subject = 'Oferta%20de%20trabajo';
       if (this.$i18n.locale === 'en') {
         subject = 'Job%20offer';
       }
-      return 'mailto:' + this.$store.getters.EMAIL + '?Subject=' + subject;
-    }
+      return 'mailto:' + contact.email + '?Subject=' + subject;
+    },
+    github_url() {
+      return contact.github_profile;
+    },
+    linkedin_url() {
+      return contact.linkedin_profile + '?locale=' + (this.$i18n.locale === 'en' ? 'en_US' : 'es_ES');
+    },
   },
   methods: {
     ...mapMutations(["SET_PAGE"]),