vhaudiquet
99a943eb36
pipeline / build-and-push-images (push) Successful in 3m12s
NuxtJS, Vue, real web app Nuxt content: blog Better mobile/responsive design and practices Better practices overall
113 lines
2.8 KiB
Vue
113 lines
2.8 KiB
Vue
<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> |