Moved to Nuxt

NuxtJS, Vue, real web app

Nuxt content: blog

Better mobile/responsive design and practices

Better practices overall

app/components/HeaderCompact.vue

@@ -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>