af/pages/contact.vue

<template><NuxtLayout name="default">
    <template #headline>{{ headline }}</template>
    <template #tagline>{{ tagline }}</template>

    <div class="container mx-auto max-w-screen-lg sm:px-12 px-2 mb-12 prose">
        <article class="body grid sm:grid-cols-2 grid-cols-1 gap-x-12 gap-y-0">
            <section class="links">
                <p>You can find me on these web sites…</p>
                <div class="text-center ml-2">
                    <a rel="me" href="https://blog.morpheu5.net"><client-only><fa-icon icon="fa-solid fa-blog" alt="MorphLog" style="color: black" aria-hidden="true" /></client-only></a>
                    <a rel="me" href="https://orcid.org/0000-0001-8665-6147"><client-only><fa-icon icon="fa-brands fa-orcid" alt="ORCID" style="color: #a6cf39" aria-hidden="true" /></client-only></a>
                    <a rel="me" href="https://www.linkedin.com/in/andreafranceschini"><client-only><fa-icon icon="fa-brands fa-linkedin" alt="LinkedIn" style="color: #0077b5" aria-hidden="true" /></client-only></a>
                    <a rel="me" href="https://github.com/Morpheu5"><client-only><fa-icon icon="fa-brands fa-github" alt="GitHub" style="color: black" aria-hidden="true" /></client-only></a>
                </div>
                <div class="mt-4 text-center">
                    <a rel="me" href="https://apps.apple.com/it/developer/andrea-franceschini/id454062630"><client-only><fa-icon icon="fa-brands fa-app-store-ios" alt="App Store" style="color: #2296f3" aria-hidden="true" /></client-only></a>
                    <a rel="me" href="http://play.google.com/store/apps/developer?id=Andrea+Franceschini&amp;hl=it_IT"><client-only><fa-icon icon="fa-brands fa-google-play" alt="Google Play" style="color: #3BCCFF" aria-hidden="true" /></client-only></a>
                    <a rel="me" href="https://twitter.com/morpheu5"><client-only><fa-icon icon="fa-brands fa-twitter" alt="Twitter" style="color: #55acee" aria-hidden="true" /></client-only></a>
                    <a rel="me" href="https://livellosegreto.it/@morpheu5"><client-only><fa-icon icon="fa-brands fa-mastodon" alt="Mastodon" style="color: #6364FF" aria-hidden="true" /></client-only></a>
                </div>
                <div class="mt-4 text-center">
                    <a rel="me" href="https://instagram.com/ilmoppe"><client-only><fa-icon icon="fa-brands fa-instagram" alt="Instagram" style="color: #E1306C" aria-hidden="true" /></client-only></a>
                    <a rel="me" href="https://www.flickr.com/photos/morpheu5"><client-only><fa-icon icon="fa-brands fa-flickr" alt="Flickr" style="color: #0062DD" aria-hidden="true" /></client-only></a>
                    <a rel="me" href="https://soundcloud.com/ilmoppe"><client-only><fa-icon icon="fa-brands fa-soundcloud" alt="SoundClound" style="color: #FE5000" aria-hidden="true" /></client-only></a>
                </div>
                <div class="mt-4 text-center">
                    <a rel="me" href="https://www.youtube.com/user/therealmorpheu5"><client-only><fa-icon icon="fa-brands fa-youtube" alt="YouTube" style="color: #FF0000" aria-hidden="true" /></client-only></a>
                    <a rel="me" href="https://deviantart.com/morpheu5"><client-only><fa-icon icon="fa-brands fa-deviantart" alt="DeviantArt" style="color: #4DC47D" aria-hidden="true" /></client-only></a>
                </div>
            </section>
            <section class="email">
                <p>… or drop me an email at<br /><a :href="`mailto:${emailUser}\u0040${emailDomain}`"><client-only><fa-icon icon="fa fa-envelope" alt="Email" aria-hidden="true" /></client-only>&ensp;{{emailUser}}{{'\u0040'}}{{emailDomain}}</a></p>
            </section>
        </article>
    </div>
</NuxtLayout></template>

<style lang="pcss" scoped>
.links a {
    @apply text-4xl;
    @apply mr-6;

    @media screen(sm) {
        @apply text-5xl;
    }
}
</style>

<script lang="ts" setup>
definePageMeta({
    layout: false
});
const headline = "Contact";
const tagline = "";

const title = `${headline} ••• Andrea Franceschini, PhD`;
const keywords = "contact, music, learning, tabletop, research, the open university, university of cambridge, isaac physics, reactable";
const description = "Everything you need to know to get in touch with me.";

useState('pageClasses', () => ['contact', 'page']);
useHead({
    title,
    meta: [
        { property: 'keywords', content: keywords },
        { property: 'DC.Title', content: title },
        { property: 'twitter:title', content: title },
        { property: 'og:title', content: title },
        { property: 'description', content: description },
        { property: 'DC.Description', content: description },
        { property: 'twitter:description', content: description },
        { property: 'og:description', content: description },
    ]
});

const emailUser = computed(() => '\u0061\u006e\u0064\u0072\u0065\u0061\u002e\u0066\u0072\u0061\u006e\u0063\u0065\u0073\u0063\u0068\u0069\u006e\u0069');
const emailDomain = computed(() => '\u0067\u006d\u0061\u0069\u006c\u002e\u0063\u006f\u006d');
</script>