Moved to Nuxt

NuxtJS, Vue, real web app

Nuxt content: blog

Better mobile/responsive design and practices

Better practices overall

app/pages/index.vue

@@ -0,0 +1,113 @@
+<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>