From bd5a8ff9fae266a2905e8421689caef2197e00cf Mon Sep 17 00:00:00 2001
From: vhaudiquet <valentin.haudiquet@canonical.com>
Date: Sun, 30 Nov 2025 23:46:40 +0100
Subject: [PATCH] Headers: better responsiveness

---
 app/components/HeaderBig.vue     | 12 ++++++------
 app/components/HeaderCompact.vue |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/app/components/HeaderBig.vue b/app/components/HeaderBig.vue
index 741285c..b796cd5 100644
--- a/app/components/HeaderBig.vue
+++ b/app/components/HeaderBig.vue
@@ -1,15 +1,15 @@
 <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" 
+    <div class="lg:mt-12 mt-7 m-auto w-fit sm:flex-row flex-col flex">
+        <img class="md:w-[400px] md:h-[400px] xl:self-auto xl:ml-0 md:ml-4 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">
+        <div class="xl:ml-[90px] ml-0 flex flex-col xl:items-end md:m-auto items-center">
+            <h1 class="lg: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">
+            <h4 class="lg: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">
+            <p class="lg: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>
diff --git a/app/components/HeaderCompact.vue b/app/components/HeaderCompact.vue
index c3b4038..60a2f38 100644
--- a/app/components/HeaderCompact.vue
+++ b/app/components/HeaderCompact.vue
@@ -22,7 +22,7 @@ defineProps<{
       <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>
+            <h4 class="sm:hidden sm:collapse xl:block xl:visible sm:text-base text-sm text-left">Software Engineer</h4>
       </div>
     </div>