Moved to Nuxt

NuxtJS, Vue, real web app Nuxt content: blog Better mobile/responsive design and practices Better practices overall
2025-11-18 20:59:23 +01:00
parent 93a4e124ff
commit 99a943eb36
57 changed files with 19126 additions and 718 deletions
@@ -0,0 +1,148 @@
+<script setup lang="ts">
+defineOgImageComponent('Site', {
+  title: 'Projects'
+})
+</script>
+
+<template>
+<HeaderBig />
+
+<!-- Projects -->
+<div id="projects-div">
+
+    <!-- BuildPath -->
+    <a href="https://buildpath.win">
+    <div class="project-div">
+        <h2 class="project-title">BuildPath</h2>
+        <img class="project-img" src="https://buildpath.win/favicon.svg"/>
+        <h3 class="project-link">https://buildpath.win</h3>
+        <p class="project-desc">a tool for League of Legends champions runes and build paths</p>
+    </div>
+    </a>
+
+    <!-- homeprod -->
+    <a href="https://github.com/vhaudiquet/homeprod">
+    <div class="project-div">
+        <h2 class="project-title">homeprod</h2>
+        <img class="project-img" src="https://vhaudiquet.fr/public/github_assets/homeprod/p330_sff.png"/>
+        <h3 class="project-link" style="display: flex;">
+            <img src="~/assets/img/github-mark.png" width="16px" style="margin: auto; display: block; margin-right: 4px;"/>
+            vhaudiquet/homeprod
+        </h3>
+        <p class="project-desc">personal home production environment</p>
+    </div>
+    </a>
+
+    <!-- BladePlayer -->
+    <a href="https://github.com/vhaudiquet/BladePlayer">
+    <div class="project-div">
+        <h2 class="project-title">Blade Player</h2>
+        <img class="project-img" src="~/assets/img/blade-icon.png"/>
+        <h3 class="project-link" style="display: flex;">
+            <img src="~/assets/img/github-mark.png" width="16px" style="margin: auto; display: block; margin-right: 4px;"/>
+            vhaudiquet/BladePlayer
+        </h3>
+        <p class="project-desc">android music player that plays from multiple sources</p>
+    </div>
+    </a>
+
+    <!-- vhaudiquet.fr -->
+    <a href="https://vhaudiquet.fr">
+    <div class="project-div">
+        <h2 class="project-title">vhaudiquet.fr</h2>
+        <img class="project-img" src="~/assets/img/favicon.ico_256x256.png"/>
+        <h3 class="project-link" style="display: flex;">
+            https://vhaudiquet.fr
+        </h3>
+        <p class="project-desc">this website: my personal website with information, CV, projects</p>
+    </div>
+    </a>
+
+</div>
+
+</template>
+
+<style lang="css" scoped>
+#projects-div {
+    display: grid;
+    grid-auto-flow: column;
+    width: fit-content;
+    margin: auto;
+
+    margin-top: 100px;
+
+    column-gap: 40px;
+}
+
+.project-div {
+    max-width: 280px;
+    width: 280px;
+    height: 350px;
+    background-color: #FEFEFE;
+    
+    border-radius: 12px;
+    border: 1px solid #E0E0E0;
+
+    box-shadow: 5px 2px 2px #E0E0E0;
+
+    padding: 10px;
+}
+.project-div:hover {
+    background-color: #EEEEEE;
+}
+.project-title {
+    width: fit-content;
+    margin: auto;
+
+    font-weight: 400;
+
+    font-size: 30px;
+    color: black;
+}
+.project-img {
+    max-width: 140px;
+    max-height: 140px;
+    /* width: fit-content; */
+    margin: auto;
+    display: block;
+
+    margin-top: 10px;
+}
+.project-link {
+    font-size: 12px;
+    width: fit-content;
+    font-weight: 400;
+    margin: auto;
+
+    margin-top: 8px;
+
+    color: black;
+}
+.project-desc {
+    font-size: 16px;
+    margin-left: 5px;
+
+    margin-top: 30px;
+    font-weight: 300;
+
+    color: black;
+
+    text-align: center;
+}
+
+@media only screen and (max-width: 1000px) {
+    #projects-div {
+        grid-auto-flow: row;
+        row-gap: 40px;
+        grid-template-columns: repeat(2, 270px);
+    }
+}
+
+@media only screen and (max-width: 650px) {
+    #projects-div {
+        margin-top: 50px;
+        grid-template-columns: repeat(1, 270px);
+    }
+}
+
+</style>