<script setup lang="ts">
defineOgImageComponent('Site', {
  title: 'vhaudiquet.fr'
})
</script>

<template>

<HeaderBig />

<div class="content-holder">

<!-- Links -->
<div id="links-div" style="grid-column: 1;">
    <a href="/blog" style="grid-column: 1;">
        <img src="~/assets/img/post-outline.svg" 
             class="sm:w-[150px] w-[70px] h-auto m-auto" />
        <p class="text-center sm:text-3xl text-xl">Blog</p>
    </a>

    <a href="/projects">
        <img src="~/assets/img/material-symbols--list-alt-outline.svg" 
             class="sm:w-[150px] w-[70px] h-auto m-auto" />
        <p class="text-center sm:text-3xl text-xl">Projects</p>
    </a>

    <a href="/cv">
        <img src="~/assets/img/icon-park-solid_people.svg" 
             class="sm:w-[150px] w-[70px] h-auto pb-4 p-3 m-auto" />
        <p class="text-center sm:text-3xl text-xl">CV</p>
    </a>
</div>

<div class="lg:w-[350px] w-0 col-2" />

<div id="contact-div" class="mt-12 mb-12">
    <h4 class="sm:text-4xl text-3xl text-left pb-4">Find me on...</h4>

    <a href="https://github.com/vhaudiquet" class="flex">
        <img src="~/assets/img/github-mark.png" class="contact-image"/>
        <p class="contact-text sm:text-3xl text-xl mt-1 mb-1">GitHub</p>
    </a>

    <a href="https://git.vhaudiquet.fr/vhaudiquet/" class="flex">
        <img src="~/assets/img/logo_black.svg" class="contact-image"/>
        <p class="contact-text sm:text-3xl text-xl mt-1 mb-1">Gitea (personal)</p>
    </a>

    <a href="https://launchpad.net/~vhaudiquet" class="flex">
        <img src="~/assets/img/launchpad-white-black.png" class="contact-image"/>
        <p class="contact-text sm:text-3xl text-xl mt-1 mb-1">Launchpad</p>
    </a>

    <a href="mailto:valentin.haudiquet@ens-rennes.fr" class="flex">
        <img src="~/assets/img/arobase.svg" class="contact-image"/>
        <p class="contact-text sm:text-3xl text-xl mt-1 mb-1">Mail</p>
    </a>
</div>

</div>

</template>

<style lang="css" scoped>
.content-holder {
    display: grid; 
    width: fit-content; 
    margin: auto;
    grid-auto-flow: column;
}
.contact-image {
    width: 48px;
    height: 48px;
}
.contact-text {
    text-align: right;
    padding-left: 10px;
    font-size: 28px;
}

#links-div {
    display: grid;
    column-gap: 40px; 
    grid-auto-flow: column; 
    width: fit-content; 
    margin: auto; 
    margin-top: 100px;
}

@media only screen and (max-width: 1000px) {
    #links-div {
        display: grid;
        column-gap: 40px;
        row-gap: 40px;
        width: fit-content; 
        margin: auto;
        margin-top: 100px;
    }

    .content-holder {
        grid-auto-flow: row;
    }
}

@media only screen and (max-width: 450px) {
    #header-div {
        margin-top: 30px;
    }
    #links-div {
        margin-top: 40px;
    }
}
</style>