src/components/ComptenceView.vue

 <template>
   <TitleComposant label="Compétences" class="q-mt-xl" />
   <div class="text-h5 row justify-evenly q-my-lg" style="row-gap: 80px; column-gap: 25px">
-    <q-btn v-for="comptence in comptences" :key="comptence.name" class="col-3 text-center text-bold non-selectable cursor-pointer hoverBtn q-pt-sm" style="transition: 0.2s;" @click="isActive = (isActive !== comptence.name && comptence.name)" :class="{activeBtn: isActive === comptence.name}" unelevated rounded>
+    <q-btn v-for="comptence in comptences" :key="comptence.name" class="text-center text-bold non-selectable cursor-pointer hoverBtn q-pt-sm" style="transition: 0.2s;" @click="isActive = (isActive !== comptence.name && comptence.name)" :class="{
+  activeBtn: isActive === comptence.name,
+  'col-4': $q.screen.lt.md,
+  'col-3': !$q.screen.lt.md
+}" unelevated rounded>
       <img style="max-width: 100%; border-radius: 20px;border: 3px solid #FFFFFF" :style="isActive === comptence.name && 'border-color: #eeea14 !important;'" :src="'/clement.franckelemon.etu/portfolio-2025/spa/'+comptence.src">
-      <span class="q-ma-xs text-h6 text-bold">{{comptence.name}}</span>
+      <span class="q-ma-xs text-h6 text-bold sub-title" :style="$q.screen.lt.md && 'font-size: 15px;'" >{{comptence.name}}</span>
       <q-popup-proxy v-close-popup @hide="isActive === comptence.name ? isActive = '' : '' " :offset="[10, 10]">
         <div class="q-ma-sm text-secondary text-bold">
           <q-icon name="info" size="md" class="q-mr-xs" />

src/components/ContactView.vue

@@ -4,8 +4,8 @@
       <TitleComposant label="Contacts" class="q-mt-xl" />
     </a>
     <div class="q-ml-xl text-bold text-h6">
-      <p class="flex items-center"><img class="q-mr-xs non-selectable" src="/clement.franckelemon.etu/portfolio-2025/spa/images/Contact/mail.png"/>Clement.Franckelemon@gmail.com</p>
-      <p class="flex items-center"><img class="q-mr-xs non-selectable" src="/clement.franckelemon.etu/portfolio-2025/spa/images/Contact/telephone.png"/>07 66 55 76 78</p>
+      <p class="flex items-center" :class="$q.screen.lt.md ? 'q-mr-xl text-subtitle2': ''"><img class="q-mr-xs non-selectable" src="/clement.franckelemon.etu/portfolio-2025/spa/images/Contact/mail.png"/>Clement.Franckelemon@gmail.com</p>
+      <p class="flex items-center" ><img class="q-mr-xs non-selectable" src="/clement.franckelemon.etu/portfolio-2025/spa/images/Contact/telephone.png"/>07 66 55 76 78</p>
       <a class="text-secondary" href="https://www.linkedin.com/in/cl%C3%A9ment-franckelemon-88976b26b/"><p class="flex items-center"><img class="q-mr-xs non-selectable" src="/clement.franckelemon.etu/portfolio-2025/spa/images/Contact/linkedin.png"/>Linkedin</p></a>
     </div>
   </div>

src/components/HomeView.vue

 <template>
   <div class="column items-center full-width non-selectable">
-    <div class="col-3" style="max-width: 450px;">
+    <div class="col-3" style="max-width: 450px; width: 75%">
       <img :src="src"
            style="border-radius: 50%; width: 100%; height: 100%; object-fit: cover;"
            class="full-height full-width">
     </div>
-    <div class="col-6 column items-center text-h2 text-bold text-secondary">
+    <div class="col-6 column items-center text-h2 text-bold text-secondary" :class="$q.screen.lt.md ? 'text-h4' : 'text-h2' ">
       <span class="arial text-uppercase">{{first}}</span>
       <span class="arial text-uppercase" >{{ second }}</span>
-      <span class="text-dark text-h6" >{{accent}}</span>
+      <span class="text-dark text-h6 text-center" >{{accent}}</span>
     </div>
   </div>
 </template>

src/components/ProjetView.vue

@@ -10,13 +10,13 @@
     />
     <div class="text-secondary text-bold" style="font-size: 1.1em">Chargement...</div>
   </div>
-  <div v-else v-for="projet in projetSorted" :key="projet.id" class="text-secondary q-ml-xl q-mt-xl">
+  <div v-else v-for="projet in projetSorted" :key="projet.id" class="text-secondary q-ml-xl q-mt-xl" >
     <span class="text-h4 text-bold">{{projet.title}}</span>
-    <div class="q-mx-xl text-h6">
+    <div class="text-h6" :class="$q.screen.lt.md ? 'q-mr-xl' : 'q-mx-xl' ">
       <span>{{projet.littleDescription}}</span>
     </div>
     <div class="row justify-center">
-      <q-btn :to="`/projet/${projet.id}`" style="padding: 0 25%; border-radius: 10px" class="bg-secondary text-primary text-bold text-h6 q-mt-sm" label="en savoir plus" />
+      <q-btn :to="`/projet/${projet.id}`" style="padding: 0 25%; border-radius: 10px" class="bg-secondary text-primary text-bold text-h6 q-mt-sm" :class="$q.screen.lt.md ? 'q-mr-xl text-subtitle2' : '' " label="en savoir plus" />
     </div>
   </div>
 </template>

src/components/TitleComposant.vue

 <template>
-  <div class="text-h3 text-bold text-uppercase non-selectable q-mb-xl">
+  <div class="text-h3 text-bold text-uppercase non-selectable q-mb-xl" :class="$q.screen.lt.md ? 'text-h4' : 'text-h3'">
     <span class="titre">{{label}}</span>
-    <span class="double" >{{label}}</span>
+    <span class="double" :style="$q.screen.lt.md ? 'font-size: 42px;' : 'font-size: 75px;'" >{{label}}</span>
   </div>
 </template>
 
@@ -21,7 +21,6 @@ defineProps({
   font-family: arial;
   color: var(--q-secondary);
   opacity: 0.1;
-  font-size: 75px;
   position: absolute;
   margin: 0px;
   left:0.6%;