adamf/web_server
1
1
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

Make CV pages responsive for mobile viewports
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 20s
Details

Browse Source 
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>
This commit is contained in:
Adam French
2026-03-30 03:11:42 +01:00
parent 08c29a77a0
commit 179f52d1d7
7 changed files with 98 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
vue/src/views/CV/CV.vue
View File

@@ -57,6 +57,7 @@ function print() {
top: 0; top: 0;
z-index: 40; z-index: 40;
display: flex; display: flex;
flex-wrap: wrap;
justify-content: center; justify-content: center;
gap: 0.5rem; gap: 0.5rem;
padding: 0.5rem; padding: 0.5rem;

24
vue/src/views/CV/CVBackend.vue
View File

@@ -7,9 +7,9 @@ import Project from "./Project.vue";
<div class="no-print w-full h-20"></div> <div class="no-print w-full h-20"></div>
<div class="a4page justify-between"> <div class="a4page justify-between">
<section> <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> <h1 class="name">Adam French</h1>
<div class="contact-details text-right"> <div class="contact-details sm:text-right">
<p>+447563266931</p> <p>+447563266931</p>
<p>adam.a.french@outlook.com</p> <p>adam.a.french@outlook.com</p>
<h4> <h4>
@@ -154,8 +154,8 @@ import Project from "./Project.vue";
<section> <section>
<h2>Education</h2> <h2>Education</h2>
<div class="w-full h-fit flex-row flex gap-5"> <div class="w-full h-fit flex flex-col sm:flex-row gap-5">
<div class="flex-1 border-r border-dotted pr-3"> <div class="flex-1 sm:border-r border-dotted sm:pr-3">
<h3> <h3>
<a <a
href="https://www.adam-french.co.uk/pdf/transcript.pdf" href="https://www.adam-french.co.uk/pdf/transcript.pdf"
@@ -177,7 +177,7 @@ import Project from "./Project.vue";
<li>Databases · Computer Processors</li> <li>Databases · Computer Processors</li>
</ul> </ul>
</div> </div>
<div class="flex-1 pl-3"> <div class="flex-1 sm:pl-3">
<h3>University of Waterloo</h3> <h3>University of Waterloo</h3>
<div <div
class="flex-row flex place-content-between m-auto place-items-center" class="flex-row flex place-content-between m-auto place-items-center"
@@ -393,4 +393,18 @@ li {
gap: 0.3em 1em; gap: 0.3em 1em;
margin-bottom: 0.2em; 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> </style>

24
vue/src/views/CV/CVFrontend.vue
View File

@@ -7,9 +7,9 @@ import Project from "./Project.vue";
<div class="no-print w-full h-20"></div> <div class="no-print w-full h-20"></div>
<div class="a4page justify-between"> <div class="a4page justify-between">
<section> <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> <h1 class="name">Adam French</h1>
<div class="contact-details text-right"> <div class="contact-details sm:text-right">
<p>+447563266931</p> <p>+447563266931</p>
<p>adam.a.french@outlook.com</p> <p>adam.a.french@outlook.com</p>
<h4> <h4>
@@ -151,8 +151,8 @@ import Project from "./Project.vue";
<section> <section>
<h2>Education</h2> <h2>Education</h2>
<div class="w-full h-fit flex-row flex gap-5"> <div class="w-full h-fit flex flex-col sm:flex-row gap-5">
<div class="flex-1 border-r border-dotted pr-3"> <div class="flex-1 sm:border-r border-dotted sm:pr-3">
<h3> <h3>
<a <a
href="https://www.adam-french.co.uk/pdf/transcript.pdf" href="https://www.adam-french.co.uk/pdf/transcript.pdf"
@@ -178,7 +178,7 @@ import Project from "./Project.vue";
</li> </li>
</ul> </ul>
</div> </div>
<div class="flex-1 pl-3"> <div class="flex-1 sm:pl-3">
<h3>University of Waterloo</h3> <h3>University of Waterloo</h3>
<div <div
class="flex-row flex place-content-between m-auto place-items-center" class="flex-row flex place-content-between m-auto place-items-center"
@@ -393,4 +393,18 @@ li {
gap: 0.3em 1em; gap: 0.3em 1em;
margin-bottom: 0.2em; 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> </style>

24
vue/src/views/CV/CVGeneral.vue
View File

@@ -7,9 +7,9 @@ import Project from "./Project.vue";
<div class="no-print w-full h-20"></div> <div class="no-print w-full h-20"></div>
<div class="a4page justify-between"> <div class="a4page justify-between">
<section> <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> <h1 class="name">Adam French</h1>
<div class="contact-details text-right"> <div class="contact-details sm:text-right">
<p>+447563266931</p> <p>+447563266931</p>
<p>adam.a.french@outlook.com</p> <p>adam.a.french@outlook.com</p>
<h4> <h4>
@@ -151,8 +151,8 @@ import Project from "./Project.vue";
<section> <section>
<h2>Education</h2> <h2>Education</h2>
<div class="w-full h-fit flex-row flex gap-5"> <div class="w-full h-fit flex flex-col sm:flex-row gap-5">
<div class="flex-1 border-r border-dotted pr-3"> <div class="flex-1 sm:border-r border-dotted sm:pr-3">
<h3> <h3>
<a <a
href="https://www.adam-french.co.uk/pdf/transcript.pdf" href="https://www.adam-french.co.uk/pdf/transcript.pdf"
@@ -178,7 +178,7 @@ import Project from "./Project.vue";
</li> </li>
</ul> </ul>
</div> </div>
<div class="flex-1 pl-3"> <div class="flex-1 sm:pl-3">
<h3>University of Waterloo</h3> <h3>University of Waterloo</h3>
<div <div
class="flex-row flex place-content-between m-auto place-items-center" class="flex-row flex place-content-between m-auto place-items-center"
@@ -393,4 +393,18 @@ li {
gap: 0.3em 1em; gap: 0.3em 1em;
margin-bottom: 0.2em; 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> </style>

24
vue/src/views/CV/CVHospitality.vue
View File

@@ -7,9 +7,9 @@ import Project from "./Project.vue";
<div class="no-print w-full h-20"></div> <div class="no-print w-full h-20"></div>
<div class="a4page justify-between"> <div class="a4page justify-between">
<section> <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> <h1 class="name">Adam French</h1>
<div class="contact-details text-right"> <div class="contact-details sm:text-right">
<p>+447563266931</p> <p>+447563266931</p>
<p>adam.a.french@outlook.com</p> <p>adam.a.french@outlook.com</p>
<h4> <h4>
@@ -109,8 +109,8 @@ import Project from "./Project.vue";
<section> <section>
<h2>Education</h2> <h2>Education</h2>
<div class="w-full h-fit flex-row flex gap-5"> <div class="w-full h-fit flex flex-col sm:flex-row gap-5">
<div class="flex-1 border-r border-dotted pr-3"> <div class="flex-1 sm:border-r border-dotted sm:pr-3">
<h3> <h3>
<a <a
href="https://www.adam-french.co.uk/pdf/transcript.pdf" href="https://www.adam-french.co.uk/pdf/transcript.pdf"
@@ -126,7 +126,7 @@ import Project from "./Project.vue";
</div> </div>
<small>BSc Computer Science with Mathematics </small> <small>BSc Computer Science with Mathematics </small>
</div> </div>
<div class="flex-1 pl-3"> <div class="flex-1 sm:pl-3">
<h3>University of Waterloo</h3> <h3>University of Waterloo</h3>
<div <div
class="flex-row flex place-content-between m-auto place-items-center" class="flex-row flex place-content-between m-auto place-items-center"
@@ -311,4 +311,18 @@ li {
gap: 0.3em 1em; gap: 0.3em 1em;
margin-bottom: 0.2em; 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> </style>

24
vue/src/views/CV/CVTemp.vue
View File

@@ -6,9 +6,9 @@ import Project from "./Project.vue";
<main> <main>
<div class="no-print w-full h-20"></div> <div class="no-print w-full h-20"></div>
<div class="a4page justify-between"> <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> <h1 class="name">Adam French</h1>
<div class="contact-details text-right"> <div class="contact-details sm:text-right">
<p>+447563266931</p> <p>+447563266931</p>
<p>adam.a.french@outlook.com</p> <p>adam.a.french@outlook.com</p>
<h4> <h4>
@@ -158,8 +158,8 @@ import Project from "./Project.vue";
<div class="a4page gap-10"> <div class="a4page gap-10">
<section> <section>
<h2>Education</h2> <h2>Education</h2>
<div class="w-full h-fit flex-row flex gap-5"> <div class="w-full h-fit flex flex-col sm:flex-row gap-5">
<div class="flex-1 border-r border-dotted pr-3"> <div class="flex-1 sm:border-r border-dotted sm:pr-3">
<h3> <h3>
<a <a
href="https://www.adam-french.co.uk/pdf/transcript.pdf" href="https://www.adam-french.co.uk/pdf/transcript.pdf"
@@ -185,7 +185,7 @@ import Project from "./Project.vue";
</li> </li>
</ul> </ul>
</div> </div>
<div class="flex-1 pl-3"> <div class="flex-1 sm:pl-3">
<h3>University of Waterloo</h3> <h3>University of Waterloo</h3>
<div <div
class="flex-row flex place-content-between m-auto place-items-center" class="flex-row flex place-content-between m-auto place-items-center"
@@ -394,4 +394,18 @@ li {
gap: 0.3em 1em; gap: 0.3em 1em;
margin-bottom: 0.2em; 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> </style>

4
vue/src/views/CV/Project.vue
View File

@@ -1,8 +1,8 @@
<script setup></script> <script setup></script>
<template> <template>
<div class="flex-row flex"> <div class="flex flex-col sm:flex-row">
<div class="w-2/7 mt-auto mb-auto ml-0"> <div class="sm:w-2/7 mt-auto mb-auto ml-0">
<slot name="left" /> <slot name="left" />
</div> </div>
<div class="w-full p-2"> <div class="w-full p-2">