feat: refactor, change font to inter

components/ProfileList.vue

 <template>
     <div class="w-full leading-normal">
+        <div @click="redirect_href('blog')" class="flex group cursor-pointer hover:text-white hover:bg-indigo p-4 border-b">
+            <div class="text-lg mb-1 group-hover:text-white fix-fa-inlined">
+                <fa-layers full-width class="fa flex-none align-middle"><fa :icon="faWordpress" /></fa-layers> 
+                <span class="pl-2">Blog</span>
+            </div>
+        </div>
         <div @click="redirect_href('twitter')" class="flex group cursor-pointer hover:text-white hover:bg-indigo p-4 border-b">
-            <p class="font-bold text-lg mb-1 group-hover:text-white fix-fa-inlined"><fa-layers full-width class="fa flex-none align-middle"><fa :icon="faTwitter" /></fa-layers> <span class="pl-2">Twitter</span></p>
+            <div class="text-lg mb-1 group-hover:text-white fix-fa-inlined">
+                <fa-layers full-width class="fa flex-none align-middle"><fa :icon="faTwitter" /></fa-layers> 
+                <span class="pl-2">Twitter</span>
+            </div>
         </div>
         <div @click="redirect_href('github')" class="flex group cursor-pointer hover:text-white hover:bg-indigo p-4 border-b">
-            <p class="font-bold text-lg mb-1 group-hover:text-white fix-fa-inlined"><fa-layers full-width class="fa flex-none align-middle"><fa :icon="faGithub" /></fa-layers> <span class="pl-2">Github</span></p>
+            <div class="text-lg mb-1 group-hover:text-white fix-fa-inlined">
+                <fa-layers full-width class="fa flex-none align-middle"><fa :icon="faGithub" /></fa-layers> 
+                <span class="pl-2">Github</span>
+            </div>
+        </div>
+        <div @click="redirect_href('keybase')" class="flex group cursor-pointer hover:text-white hover:bg-indigo p-4 border-b">
+            <div class="text-lg mb-1 group-hover:text-white fix-fa-inlined">
+                <fa-layers full-width class="fa flex-none align-middle"><fa :icon="faKeybase" /></fa-layers> 
+                <span class="pl-2">Keybase</span>
+            </div>
         </div>
         <div @click="redirect_href('linkedin')" class="flex group cursor-pointer hover:text-white hover:bg-indigo p-4 border-b">
-            <p class="font-bold text-lg mb-1 group-hover:text-white fix-fa-inlined"><fa-layers full-width class="fa flex-none align-middle"><fa :icon="faLinkedin" /></fa-layers> <span class="pl-2">Linkedin</span></p>
+            <div class="text-lg mb-1 group-hover:text-white fix-fa-inlined">
+                <fa-layers full-width class="fa flex-none align-middle"><fa :icon="faLinkedin" /></fa-layers> 
+                <span class="pl-2">Linkedin</span>
+            </div>
         </div>
-        <div @click="redirect_href('blog')" class="flex group cursor-pointer hover:text-white hover:bg-indigo p-4">
-            <p class="font-bold text-lg mb-1 group-hover:text-white fix-fa-inlined"><fa-layers full-width class="fa flex-none align-middle"><fa :icon="faWordpress" /></fa-layers> <span class="pl-2">Blog</span></p>
+        <div @click="redirect_href('youtube')" class="flex group cursor-pointer hover:text-white hover:bg-indigo p-4">
+            <div class="text-lg mb-1 group-hover:text-white fix-fa-inlined">
+                <fa-layers full-width class="fa flex-none align-middle"><fa :icon="faYoutube" /></fa-layers> 
+                <span class="pl-2">Youtube</span>
+            </div>
         </div>
     </div>
 </template>
 
 <script>
-import { faGithub, faLinkedin, faTwitter, faWordpress } from '@fortawesome/free-brands-svg-icons'
+import { faGithub, faLinkedin, faTwitter, faWordpress, faKeybase, faYoutube } from '@fortawesome/free-brands-svg-icons'
 
 export default {
   methods: {
     redirect_href (profile) {
+        var url
         switch (profile) {
             case "linkedin":
-                window.open("//www.linkedin.com/in/rhnvrm/", '_blank')
+                url = "//www.linkedin.com/in/rhnvrm/", '_blank'
                 break;
             case "twitter":
-                window.open("//twitter.com/rhnvrm", '_blank')
+                url = "//twitter.com/rhnvrm", '_blank'
                 break;
             case "github":
-                window.open("//github.com/rhnvrm", '_blank')
+                url = "//github.com/rhnvrm", '_blank'
+                break;
+            case "youtube":
+                url = "//youtube.com/user/TheRohanVerma", '_blank'
                 break;
             case "blog":
-                window.open("//blog.rohanverma.net/", '_blank')
+                url = "//blog.rohanverma.net/", '_blank'
+                break;
+            case "keybase":
+                url = "//keybase.io/rhnvrm", '_blank'
                 break;
 
             default:
+                url = "//rohanverma.net/"
                 break;
         }
+
+        url += "?utm_source=homepage_rohanverma_net&utm_medium=profilelist"
+        window.open(url, '_blank')
     }
   },
   computed: {
     },
     faWordpress () {
         return faWordpress
+    },
+    faKeybase () {
+        return faKeybase
+    },
+    faYoutube () {
+        return faYoutube
     }
   },
 }

components/ProjectList.vue

         <p class="flex flex-col sm:flex-row border-b border-2px py-4">
          <span class="flex-1 text-xl font-bold leading-tight ">Recent Projects</span>
          <span class="flex-none text-sm leading-tight text-grey-dark">
-           <span @click="changePage(-1)" :class="{'line-through': is_first_page, 'cursor-pointer': !is_first_page}">prev</span>
+           <span @click="changePage(-1)" :class="{'line-through': is_first_page, 'cursor-pointer': !is_first_page}">next</span>
             /
-           <span @click="changePage(1)" :class="{'line-through': is_last_page, 'cursor-pointer': !is_last_page}">next</span>
+           <span @click="changePage(1)" :class="{'line-through': is_last_page, 'cursor-pointer': !is_last_page}">prev</span>
           </span>
         </p>
       </div>
       this.total_pages = posts._paging.totalPages
     },
     redirect_href: function (url) {
-       window.open(url, '_blank');
+       window.open(url + "?utm_source=homepage_rohanverma_net&utm_medium=projectlist", '_blank');
     },
     changePage: function (p) {
       var newPage = this.current_page + p

components/TwitterEmbed.vue

 <template>
     <div class="h-64 p-1 overflow-y-scroll">
-        <a class="twitter-timeline" data-link-color="#2B7BB9" data-chrome="nofooter noborders noheader transparent" href="https://twitter.com/rhnvrm?ref_src=twsrc%5Etfw">Loading tweets...</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 
+        <a class="twitter-timeline" data-link-color="#2B7BB9" data-chrome="nofooter noborders noheader transparent" href="https://twitter.com/rhnvrm?ref_src=twsrc%5Etfw">Loading my tweets... Click me if you have content blocking on to view my twitter feed.</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 
     </div>
 </template>

nuxt.config.js

     meta: [
       { charset: 'utf-8' },
       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
-      { hid: 'description', name: 'description', content: 'Personal Website of Rohan Verma' }
+      { name: 'theme-color', content: '#6574cd' },
+      { hid: 'description', name: 'description', content: 'Personal Website of Rohan Verma' },
     ],
     link: [
-      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
+      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
+      { rel: 'stylesheet', href: 'https://rsms.me/inter/inter.css' }
     ]
   },
   /*

tailwind.config.js

 
   fonts: {
     'sans': [
+      'Inter',
       'system-ui',
       'BlinkMacSystemFont',
       '-apple-system',