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,17 @@
+<template>
+    <div class="sm:mt-12 mt-7 m-auto w-fit sm:flex-row flex-col flex">
+        <img class="sm:w-[400px] sm:h-[400px] xl:self-auto self-center w-[80%] h-auto rounded-full" 
+             src="~/assets/img/photo_web.JPG"/>
+        <div class="xl:ml-[90px] ml-0 flex flex-col xl:items-end items-center">
+            <h1 class="sm:text-8xl text-5xl mt-2 mb-2 xl:text-right text-center">
+                Valentin Haudiquet
+            </h1>
+            <h4 class="sm:text-4xl text-3xl mt-2 mb-2 xl:text-right text-center">
+                Software Engineer at Canonical - Ubuntu
+            </h4>
+            <p class="sm:text-4xl text-2xl sm:mr-[-3px] sm:ml-0 mr-1 ml-1 max-w-[770px] font-extralight xl:text-right text-center" id="header-paragraph">
+                Working on Ubuntu support for RISC-V architecture
+            </p>
+        </div>
+    </div>
+</template>
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+defineProps<{
+    title: string,
+    previousLink?: string
+}>()
+</script>
+
+<template>
+  <div class="flex sm:flex-row flex-col xl:w-[1270px] lg:w-[924px] sm:mt-12 mt-4 m-auto">
+
+    <Icon 
+      @click="previousLink == undefined ? $router.back() : $router.replace(previousLink)"
+      name="material-symbols:arrow-back"
+      class="w-8 h-8 mt-auto mb-auto ml-2 mr-10 hover:cursor-pointer sm:order-none order-1 sm:visible collapse" />
+
+    <h1 class="lg:max-w-3xl text-3xl text-left sg:ml-0 sg:mt-0 ml-2 mt-4 m-auto pr-5 sm:order-none order-3">
+        {{ title }}
+    </h1>
+
+    <div @click="$router.replace('/')"
+         class="flex hover:cursor-pointer w-fit sm:m-0 m-auto sm:order-none order-2">
+      <img class="rounded-full sm:w-14 sm:h-14 w-10 h-10 ml-5 mr-0 mt-auto mb-auto" src="~/assets/img/photo_web.JPG"/>
+      <div class="ml-5 mr-5 m-auto flex flex-col">
+            <h1 class="sm:text-xl text-base text-left">Valentin Haudiquet</h1>
+            <h4 class="sm:text-base text-sm text-left">Software Engineer</h4>
+      </div>
+    </div>
+
+  </div>
+</template>
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const props = defineProps<{
+    title: string,
+    description: string
+}>()
+</script>
+
+<template>
+  <div class="h-full w-full flex flex-row">
+    <img class="rounded-full h-[450px] w-[450px] m-10" src="/photo_web.JPG" />
+    <div class="mt-8 flex flex-col">
+        <h1 class="text-6xl w-[640px]">{{ title }}</h1>
+        <h3 class="text-4xl font-normal w-[640px] h-[200px] overflow-hidden text-ellipsis">{{ description }}</h3>
+        <h3 class="text-3xl font-light italic text-gray-500 mt-2 ml-[420px]">Read more...</h3>
+    </div>
+  </div>
+</template>
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const props = defineProps<{
+    title: string
+}>()
+</script>
+
+<template>
+  <div class="h-full w-full flex flex-row">
+    <img class="rounded-full h-[450px] w-[450px] m-10" src="/photo_web.JPG" />
+    <div class="mt-8 flex flex-col">
+        <h1 class="text-8xl w-[640px]">{{ title }}</h1>
+        <h2 class="text-6xl font-normal w-[640px]">Valentin Haudiquet</h2>
+        <h3 class="text-4xl font-normal w-[640px]">Software engineer at Canonical</h3>
+        <h4 class="text-3xl font-normal w-[640px]">Working on Ubuntu support for RISC-V architecture</h4>
+    </div>
+  </div>
+</template>
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+const props = defineProps<{
+    image: string
+}>()
+</script>
+
+<template>
+<img class="object-contain sm:max-w-[85%] max-w-[95%] m-auto" :src="props.image" />
+<div class="ml-auto mr-auto w-fit">
+    <slot />
+</div>
+</template>
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const props = defineProps<{
+    image: string,
+    imageRight?: boolean | string
+}>()
+
+let imagePosition = "sm:flex-row";
+if(props.imageRight == true || props.imageRight == "true") imagePosition = "sm:flex-row-reverse"
+</script>
+
+<template>
+<div :class="imagePosition" class="flex mt-5 mb-4 flex-col">
+    <img class="object-contain sm:max-w-[40%] sm:max-h-[350px] max-h-[300px] max-w-[80%] m-auto" :src="props.image" />
+    <p class="self-center ml-5 sm:mt-2 mt-4">
+        <slot />
+    </p>
+</div>
+</template>
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { TocLink } from '@nuxt/content';
+
+const props = defineProps<{
+    link: TocLink
+}>()
+</script>
+
+<template>
+<li class="mt-1 mb-1"><a :href="`#${link.id}`">{{ link.text }}</a></li>
+<ul class="ml-2 mt-1 mb-1">
+    <BlogTocLink v-for="child in link.children" :link="child" />
+</ul>
+</template>