af/app/pages/index.vue

<template><NuxtLayout name="default">
    <main class="container mx-auto max-w-screen-xl md:px-12 sm:px-0 px-0" aria-label="Home page">
        <h3 class="sm:text-5xl text-3xl text-center -mt-6 sm:-mt-16 font-display">
            I do things.
        </h3>
        <div class="grid sm:grid-cols-2 gap-6 mx-auto sm:py-8 py-6 col">
            <div class="aspect-w-16 aspect-h-9 shadow-lg">
                <a href="https://edugames.andreafranceschini.org/">
                    <video autoplay loop muted class="rounded">
                        <source src="/images/gneg.mp4" type="video/mp4" />
                        Your browser does not support the video tag.
                    </video>
                    <caption class="hidden">Title card for project EduGames</caption>
                </a>
            </div>
            <div class="aspect-w-16 aspect-h-9 shadow-lg">
                <a href="https://edugames.andreafranceschini.org/cash-or-card"><figure>
                    <picture>
                        <source srcset="/images/cash_or_card-2x.webp" type="image/webp" />
                        <source srcset="/images/cash_or_card.jpg 1x, /images/cash_or_card-2x.jpg 2x" type="image/jpeg" />
                        <img class="rounded" srcset="/images/cash_or_card.jpg" alt="Circular Bells" />
                    </picture>
                    <caption class="hidden">Title screen for the game "Cash or Card?"</caption>
                </figure></a>
            </div>
            <!-- <div class="aspect-w-16 aspect-h-9 shadow-lg hidden sm:block">
                <iframe ref="video" lang="en" loading="lazy" data-src="https://www.youtube-nocookie.com/embed/AszBiqrvAaU" title="How to make your computer go BOOP" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div> -->
        </div>
        <h3 class="sm:text-4xl text-3xl pb-8 text-center">
            <span class="scroll-down sm:hidden">
                <ScrollDownSVG />
            </span>
            What can I do for you?
            <span class="scroll-down sm:hidden">
                <ScrollDownSVG />
            </span>
        </h3>
        <nav id="home_bars" class="flex flex-row sm:max-w-screen-lg mx-auto">
            <a href="/research" class="research flex-1"><span>Research</span></a>
            <a href="/development" class="development flex-1"><span>Development</span></a>
            <a href="/writing" class="writing flex-1"><span>Technical Writing</span></a>
            <a href="/contact" class="other flex-1"><span>Something else</span></a>
        </nav>
    </main>
</NuxtLayout></template>

<style lang="pcss">
@reference '../assets/css/main.css';

@keyframes floating {
    0% { transform: translate(0,  -5px); }
    50%   { transform: translate(0, 0px); }   
    100%   { transform: translate(0, -5px); }   
}

.scroll-down {
    svg {
        width: 25px;
        height: 25px;
        display: inline;
        animation-name: floating;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
        opacity: 50%;
    }
}

html.no-webp {
    #home_bars a {
        &.research {
            background-image: url(../images/home-research-2x.png);
        }
        &.development {
            background-image: url(../images/home-development-2x.png);
        }
        &.writing {
            background-image: url(../images/home-writing-2x.png);
        }
        &.other {
            background-image: url(../images/home-contact-2x.png);
        }
    }
}
#home_bars {
    a {
        width: 25%;
        height: 250px;
        padding: 0;
        margin: 0;
        position: relative;
        background: grey;

        &.research {
            background-image: url(../images/home-research-2x.webp);
            background-position: 100% 100%;
            background-size: cover;
        }
        &.development {
            background-image: url(../images/home-development-2x.webp);
            background-position: 100% 100%;
            background-size: cover;
        }
        &.writing {
            background-image: url(../images/home-writing-2x.webp);
            background-position: 100% 100%;
            background-size: cover;
        }
        &.other {
            background-image: url(../images/home-contact-2x.webp);
            background-position: 100% 100%;
            background-size: cover;
        }

        span {
            position: absolute;
            color: #fff;
            font-family: Oswald,sans-serif;
            font-size: 30px;
            white-space: nowrap;
            transform-origin: bottom left;
            transform: rotate(-90deg);
            display: block;
            bottom: 0.5em;
            left: 1.6667em;
            overflow: visible;
        }
    }
}
</style>

<script lang="ts" setup>
definePageMeta({
    layout: false
});
const title = "Hello, I'm Andrea Franceschini, PhD";
const keywords = "music, learning, tabletop, research, the open university, university of cambridge, isaac physics, reactable";

useState('pageClasses', () => ['index', 'page']);
useState('headline', () => "Hello");
useState('tagline', () => "I'm Andrea");
useHead({
    title,
    meta: [
        { property: 'keywords', content: keywords },
        { property: 'DC.Title', content: title },
        { property: 'twitter:title', content: title },
        { property: 'og:title', content: title },
    ]
});

// const video = ref<HTMLIFrameElement>();

// onMounted(() => {
//     const src = video.value?.dataset['src'];
//     video.value?.setAttribute('src', src || '');
// });
</script>