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

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="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>