From 179f52d1d7b0c31a2f19cec87de8811d529aa40b Mon Sep 17 00:00:00 2001
From: Adam French <adam.a.french@outlook.com>
Date: Mon, 30 Mar 2026 03:11:42 +0100
Subject: [PATCH] Make CV pages responsive for mobile viewports

Add flex-wrap, stacked layouts on small screens, and mobile-friendly
a4page/skills-grid styles across all CV variants.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 vue/src/views/CV/CV.vue            |  1 +
 vue/src/views/CV/CVBackend.vue     | 24 +++++++++++++++++++-----
 vue/src/views/CV/CVFrontend.vue    | 24 +++++++++++++++++++-----
 vue/src/views/CV/CVGeneral.vue     | 24 +++++++++++++++++++-----
 vue/src/views/CV/CVHospitality.vue | 24 +++++++++++++++++++-----
 vue/src/views/CV/CVTemp.vue        | 24 +++++++++++++++++++-----
 vue/src/views/CV/Project.vue       |  4 ++--
 7 files changed, 98 insertions(+), 27 deletions(-)

diff --git a/vue/src/views/CV/CV.vue b/vue/src/views/CV/CV.vue
index 60dab26..7e0e82f 100644
--- a/vue/src/views/CV/CV.vue
+++ b/vue/src/views/CV/CV.vue
@@ -57,6 +57,7 @@ function print() {
     top: 0;
     z-index: 40;
     display: flex;
+    flex-wrap: wrap;
     justify-content: center;
     gap: 0.5rem;
     padding: 0.5rem;
diff --git a/vue/src/views/CV/CVBackend.vue b/vue/src/views/CV/CVBackend.vue
index 38be126..23f5764 100644
--- a/vue/src/views/CV/CVBackend.vue
+++ b/vue/src/views/CV/CVBackend.vue
@@ -7,9 +7,9 @@ import Project from "./Project.vue";
         <div class="no-print w-full h-20"></div>
         <div class="a4page justify-between">
             <section>
-                <div class="flex flex-row justify-between">
+                <div class="flex flex-col sm:flex-row sm:justify-between">
                     <h1 class="name">Adam French</h1>
-                    <div class="contact-details text-right">
+                    <div class="contact-details sm:text-right">
                         <p>+447563266931</p>
                         <p>adam.a.french@outlook.com</p>
                         <h4>
@@ -154,8 +154,8 @@ import Project from "./Project.vue";
 
             <section>
                 <h2>Education</h2>
-                <div class="w-full h-fit flex-row flex gap-5">
-                    <div class="flex-1 border-r border-dotted pr-3">
+                <div class="w-full h-fit flex flex-col sm:flex-row gap-5">
+                    <div class="flex-1 sm:border-r border-dotted sm:pr-3">
                         <h3>
                             <a
                                 href="https://www.adam-french.co.uk/pdf/transcript.pdf"
@@ -177,7 +177,7 @@ import Project from "./Project.vue";
                             <li>Databases · Computer Processors</li>
                         </ul>
                     </div>
-                    <div class="flex-1 pl-3">
+                    <div class="flex-1 sm:pl-3">
                         <h3>University of Waterloo</h3>
                         <div
                             class="flex-row flex place-content-between m-auto place-items-center"
@@ -393,4 +393,18 @@ li {
     gap: 0.3em 1em;
     margin-bottom: 0.2em;
 }
+
+@media (max-width: 640px) {
+    .a4page {
+        width: 100%;
+        height: auto;
+        overflow: visible;
+        box-shadow: none;
+        border: none;
+    }
+
+    .skills-grid {
+        grid-template-columns: 1fr;
+    }
+}
 </style>
diff --git a/vue/src/views/CV/CVFrontend.vue b/vue/src/views/CV/CVFrontend.vue
index 259b4af..63ef1e1 100644
--- a/vue/src/views/CV/CVFrontend.vue
+++ b/vue/src/views/CV/CVFrontend.vue
@@ -7,9 +7,9 @@ import Project from "./Project.vue";
         <div class="no-print w-full h-20"></div>
         <div class="a4page justify-between">
             <section>
-                <div class="flex flex-row justify-between">
+                <div class="flex flex-col sm:flex-row sm:justify-between">
                     <h1 class="name">Adam French</h1>
-                    <div class="contact-details text-right">
+                    <div class="contact-details sm:text-right">
                         <p>+447563266931</p>
                         <p>adam.a.french@outlook.com</p>
                         <h4>
@@ -151,8 +151,8 @@ import Project from "./Project.vue";
 
             <section>
                 <h2>Education</h2>
-                <div class="w-full h-fit flex-row flex gap-5">
-                    <div class="flex-1 border-r border-dotted pr-3">
+                <div class="w-full h-fit flex flex-col sm:flex-row gap-5">
+                    <div class="flex-1 sm:border-r border-dotted sm:pr-3">
                         <h3>
                             <a
                                 href="https://www.adam-french.co.uk/pdf/transcript.pdf"
@@ -178,7 +178,7 @@ import Project from "./Project.vue";
                             </li>
                         </ul>
                     </div>
-                    <div class="flex-1 pl-3">
+                    <div class="flex-1 sm:pl-3">
                         <h3>University of Waterloo</h3>
                         <div
                             class="flex-row flex place-content-between m-auto place-items-center"
@@ -393,4 +393,18 @@ li {
     gap: 0.3em 1em;
     margin-bottom: 0.2em;
 }
+
+@media (max-width: 640px) {
+    .a4page {
+        width: 100%;
+        height: auto;
+        overflow: visible;
+        box-shadow: none;
+        border: none;
+    }
+
+    .skills-grid {
+        grid-template-columns: 1fr;
+    }
+}
 </style>
diff --git a/vue/src/views/CV/CVGeneral.vue b/vue/src/views/CV/CVGeneral.vue
index 21a4867..140a445 100644
--- a/vue/src/views/CV/CVGeneral.vue
+++ b/vue/src/views/CV/CVGeneral.vue
@@ -7,9 +7,9 @@ import Project from "./Project.vue";
         <div class="no-print w-full h-20"></div>
         <div class="a4page justify-between">
             <section>
-                <div class="flex flex-row justify-between">
+                <div class="flex flex-col sm:flex-row sm:justify-between">
                     <h1 class="name">Adam French</h1>
-                    <div class="contact-details text-right">
+                    <div class="contact-details sm:text-right">
                         <p>+447563266931</p>
                         <p>adam.a.french@outlook.com</p>
                         <h4>
@@ -151,8 +151,8 @@ import Project from "./Project.vue";
 
             <section>
                 <h2>Education</h2>
-                <div class="w-full h-fit flex-row flex gap-5">
-                    <div class="flex-1 border-r border-dotted pr-3">
+                <div class="w-full h-fit flex flex-col sm:flex-row gap-5">
+                    <div class="flex-1 sm:border-r border-dotted sm:pr-3">
                         <h3>
                             <a
                                 href="https://www.adam-french.co.uk/pdf/transcript.pdf"
@@ -178,7 +178,7 @@ import Project from "./Project.vue";
                             </li>
                         </ul>
                     </div>
-                    <div class="flex-1 pl-3">
+                    <div class="flex-1 sm:pl-3">
                         <h3>University of Waterloo</h3>
                         <div
                             class="flex-row flex place-content-between m-auto place-items-center"
@@ -393,4 +393,18 @@ li {
     gap: 0.3em 1em;
     margin-bottom: 0.2em;
 }
+
+@media (max-width: 640px) {
+    .a4page {
+        width: 100%;
+        height: auto;
+        overflow: visible;
+        box-shadow: none;
+        border: none;
+    }
+
+    .skills-grid {
+        grid-template-columns: 1fr;
+    }
+}
 </style>
diff --git a/vue/src/views/CV/CVHospitality.vue b/vue/src/views/CV/CVHospitality.vue
index 6b2966e..5b86977 100644
--- a/vue/src/views/CV/CVHospitality.vue
+++ b/vue/src/views/CV/CVHospitality.vue
@@ -7,9 +7,9 @@ import Project from "./Project.vue";
         <div class="no-print w-full h-20"></div>
         <div class="a4page justify-between">
             <section>
-                <div class="flex flex-row justify-between">
+                <div class="flex flex-col sm:flex-row sm:justify-between">
                     <h1 class="name">Adam French</h1>
-                    <div class="contact-details text-right">
+                    <div class="contact-details sm:text-right">
                         <p>+447563266931</p>
                         <p>adam.a.french@outlook.com</p>
                         <h4>
@@ -109,8 +109,8 @@ import Project from "./Project.vue";
 
             <section>
                 <h2>Education</h2>
-                <div class="w-full h-fit flex-row flex gap-5">
-                    <div class="flex-1 border-r border-dotted pr-3">
+                <div class="w-full h-fit flex flex-col sm:flex-row gap-5">
+                    <div class="flex-1 sm:border-r border-dotted sm:pr-3">
                         <h3>
                             <a
                                 href="https://www.adam-french.co.uk/pdf/transcript.pdf"
@@ -126,7 +126,7 @@ import Project from "./Project.vue";
                         </div>
                         <small>BSc Computer Science with Mathematics </small>
                     </div>
-                    <div class="flex-1 pl-3">
+                    <div class="flex-1 sm:pl-3">
                         <h3>University of Waterloo</h3>
                         <div
                             class="flex-row flex place-content-between m-auto place-items-center"
@@ -311,4 +311,18 @@ li {
     gap: 0.3em 1em;
     margin-bottom: 0.2em;
 }
+
+@media (max-width: 640px) {
+    .a4page {
+        width: 100%;
+        height: auto;
+        overflow: visible;
+        box-shadow: none;
+        border: none;
+    }
+
+    .skills-grid {
+        grid-template-columns: 1fr;
+    }
+}
 </style>
diff --git a/vue/src/views/CV/CVTemp.vue b/vue/src/views/CV/CVTemp.vue
index ee2f6a9..7f368b5 100644
--- a/vue/src/views/CV/CVTemp.vue
+++ b/vue/src/views/CV/CVTemp.vue
@@ -6,9 +6,9 @@ import Project from "./Project.vue";
     <main>
         <div class="no-print w-full h-20"></div>
         <div class="a4page justify-between">
-            <section class="flex flex-row justify-between">
+            <section class="flex flex-col sm:flex-row sm:justify-between">
                 <h1 class="name">Adam French</h1>
-                <div class="contact-details text-right">
+                <div class="contact-details sm:text-right">
                     <p>+447563266931</p>
                     <p>adam.a.french@outlook.com</p>
                     <h4>
@@ -158,8 +158,8 @@ import Project from "./Project.vue";
         <div class="a4page gap-10">
             <section>
                 <h2>Education</h2>
-                <div class="w-full h-fit flex-row flex gap-5">
-                    <div class="flex-1 border-r border-dotted pr-3">
+                <div class="w-full h-fit flex flex-col sm:flex-row gap-5">
+                    <div class="flex-1 sm:border-r border-dotted sm:pr-3">
                         <h3>
                             <a
                                 href="https://www.adam-french.co.uk/pdf/transcript.pdf"
@@ -185,7 +185,7 @@ import Project from "./Project.vue";
                             </li>
                         </ul>
                     </div>
-                    <div class="flex-1 pl-3">
+                    <div class="flex-1 sm:pl-3">
                         <h3>University of Waterloo</h3>
                         <div
                             class="flex-row flex place-content-between m-auto place-items-center"
@@ -394,4 +394,18 @@ li {
     gap: 0.3em 1em;
     margin-bottom: 0.2em;
 }
+
+@media (max-width: 640px) {
+    .a4page {
+        width: 100%;
+        height: auto;
+        overflow: visible;
+        box-shadow: none;
+        border: none;
+    }
+
+    .skills-grid {
+        grid-template-columns: 1fr;
+    }
+}
 </style>
diff --git a/vue/src/views/CV/Project.vue b/vue/src/views/CV/Project.vue
index 5985c5c..2378b96 100644
--- a/vue/src/views/CV/Project.vue
+++ b/vue/src/views/CV/Project.vue
@@ -1,8 +1,8 @@
 <script setup></script>
 
 <template>
-    <div class="flex-row flex">
-        <div class="w-2/7 mt-auto mb-auto ml-0">
+    <div class="flex flex-col sm:flex-row">
+        <div class="sm:w-2/7 mt-auto mb-auto ml-0">
             <slot name="left" />
         </div>
         <div class="w-full p-2">