rohanverma.net/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 font-serif">Blog</span>
            </div>
        </div>
        <div @click="redirect_href('twitter')" 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="faTwitter" /></fa-layers> 
                <span class="pl-2 font-serif">Twitter</span>
            </div>
        </div>
        <div @click="redirect_href('github')" 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="faGithub" /></fa-layers> 
                <span class="pl-2 font-serif">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 font-serif">Keybase</span>
            </div>
        </div>
        <div @click="redirect_href('linkedin')" 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="faLinkedin" /></fa-layers> 
                <span class="pl-2 font-serif">Linkedin</span>
            </div>
        </div>
        <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 font-serif">Youtube</span>
            </div>
        </div>
    </div>
</template>

<script>
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":
                url = "//www.linkedin.com/in/rhnvrm/", '_blank'
                break;
            case "twitter":
                url = "//twitter.com/rhnvrm", '_blank'
                break;
            case "github":
                url = "//github.com/rhnvrm", '_blank'
                break;
            case "youtube":
                url = "//youtube.com/user/TheRohanVerma", '_blank'
                break;
            case "blog":
                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: {
    faGithub () {
        return faGithub
    },
    faLinkedin () {
        return faLinkedin
    },
    faTwitter () {
        return faTwitter
    },
    faWordpress () {
        return faWordpress
    },
    faKeybase () {
        return faKeybase
    },
    faYoutube () {
        return faYoutube
    }
  },
}
</script>