Fixing template by removing margins and spacing nicely

vue/src/views/CV/CV.vue

@@ -3,16 +3,16 @@ import { ref, shallowRef, defineAsyncComponent } from "vue";
 import CVGeneral from "./CVGeneral.vue";
 import CVBackend from "./CVBackend.vue";
 import CVFrontend from "./CVFrontend.vue";
+import CVTemp from "./CVTemp.vue";
 
-const CVHospitality = defineAsyncComponent(() =>
+const CVHospitality = defineAsyncComponent(() => import("./CVHospitality.vue"));
-    import("./CVHospitality.vue"),
-);
 
 const templates = [
     { label: "General", component: CVGeneral },
     { label: "Backend", component: CVBackend },
     { label: "Frontend", component: CVFrontend },
     { label: "Hospitality", component: CVHospitality },
+    { label: "Temp", component: CVTemp },
 ];
 
 const selected = ref(0);
@@ -72,7 +72,9 @@ function print() {
     color: #333;
     cursor: pointer;
     font-size: 0.9rem;
-    transition: background 0.15s, color 0.15s;
+    transition:
+        background 0.15s,
+        color 0.15s;
 }
 
 .cv-btn:hover {
@@ -90,7 +92,9 @@ function print() {
 
 .cv-fade-enter-active,
 .cv-fade-leave-active {
-    transition: opacity 0.15s ease, transform 0.15s ease;
+    transition:
+        opacity 0.15s ease,
+        transform 0.15s ease;
 }
 
 .cv-fade-enter-from {

vue/src/views/CV/CVBackend.vue

@@ -5,7 +5,8 @@ import Project from "./Project.vue";
 <template>
     <main>
         <div class="no-print w-full h-20"></div>
-        <div class="a4page">
+        <div class="a4page justify-between">
+            <section>
                 <div class="flex flex-row justify-between">
                     <h1 class="name">Adam French</h1>
                     <div class="contact-details text-right">
@@ -18,22 +19,28 @@ import Project from "./Project.vue";
                         </h4>
                     </div>
                 </div>
+            </section>
 
+            <section>
                 <h2>Profile</h2>
                 <p>
                     First Class Honours graduate in Computer Science with
-                Mathematics from the University of Leeds (81.1%), with a year
+                    Mathematics from the University of Leeds (81.1%), with a
-                abroad at the University of Waterloo. Strong background in
+                    year abroad at the University of Waterloo. Strong background
-                systems programming, API design, database management, and
+                    in systems programming, API design, database management, and
-                infrastructure automation. Keen to build reliable, performant
+                    infrastructure automation. Keen to build reliable,
-                backend services in a collaborative engineering team.
+                    performant backend services in a collaborative engineering
+                    team.
                 </p>
+            </section>
 
+            <section>
                 <h2>Skills</h2>
                 <div class="skills-grid">
                     <div>
                         <strong>Languages</strong><br /><small
-                        >Go, Rust, Python, SQL, JavaScript / TypeScript</small
+                            >Go, Rust, Python, SQL, JavaScript /
+                            TypeScript</small
                         >
                     </div>
                     <div>
@@ -49,7 +56,9 @@ import Project from "./Project.vue";
                         >
                     </div>
                 </div>
+            </section>
 
+            <section>
                 <h2>Projects</h2>
 
                 <Project class="border-b border-dotted">
@@ -64,16 +73,17 @@ import Project from "./Project.vue";
                     </template>
                     <template v-slot:top>
                         <small>
-                        Go, Gin, GraphQL, PostgreSQL, GORM, Docker, Nginx, JWT
+                            Go, Gin, GraphQL, PostgreSQL, GORM, Docker, Nginx,
-                        Auth, Git Actions
+                            JWT Auth, Git Actions
                         </small>
                         <small>2025</small>
                     </template>
                     <p>
                         Self-hosted personal website with a Go backend serving a
-                    GraphQL API, JWT authentication, Spotify OAuth integration,
+                        GraphQL API, JWT authentication, Spotify OAuth
-                    and WebSocket messaging. Fully containerised with Docker
+                        integration, and WebSocket messaging. Fully
-                    Compose and automated CI/CD via Git Actions.
+                        containerised with Docker Compose and automated CI/CD
+                        via Git Actions.
                     </p>
                 </Project>
                 <Project class="border-b border-dotted">
@@ -92,9 +102,9 @@ import Project from "./Project.vue";
                     </template>
                     <p>
                         CLI tool for building and navigating interactive code
-                    tutorials, with version-traversal semantics inspired by Git.
+                        tutorials, with version-traversal semantics inspired by
-                    Designed for robustness with comprehensive error handling
+                        Git. Designed for robustness with comprehensive error
-                    and structured file operations.
+                        handling and structured file operations.
                     </p>
                 </Project>
                 <Project class="border-b border-dotted">
@@ -113,9 +123,9 @@ import Project from "./Project.vue";
                     </template>
                     <p>
                         Parallelised recursive ray tracer leveraging Rust's
-                    ownership model for safe concurrency. Focused on algorithmic
+                        ownership model for safe concurrency. Focused on
-                    efficiency, low-level memory management, and multi-core
+                        algorithmic efficiency, low-level memory management, and
-                    utilisation.
+                        multi-core utilisation.
                     </p>
                 </Project>
                 <Project>
@@ -134,12 +144,15 @@ import Project from "./Project.vue";
                         <small>2024</small>
                     </template>
                     <p>
-                    Research project on Mobile Automata with data visualisation
+                        Research project on Mobile Automata with data
-                    and academic presentation. Delivered within a tight deadline
+                        visualisation and academic presentation. Delivered
-                    in collaboration with academic mentors.
+                        within a tight deadline in collaboration with academic
+                        mentors.
                     </p>
                 </Project>
+            </section>
 
+            <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">
@@ -175,17 +188,21 @@ import Project from "./Project.vue";
                         <ul class="list-disc list-inside">
                             <li>Applied Cryptography</li>
                             <li>Introduction to Computer Graphics</li>
-                        <li>Introduction to Rings and Fields with Applications</li>
+                            <li>
+                                Introduction to Rings and Fields with
+                                Applications
+                            </li>
                             <li>Formal Languages & Finite Automata</li>
                         </ul>
                     </div>
                 </div>
+            </section>
         </div>
 
         <div class="no-print w-full h-20"></div>
 
-        <div class="a4page">
+        <div class="a4page gap-10">
-            <div class="flex-1 pl-3">
+            <section>
                 <h2>Experience</h2>
                 <Project>
                     <template #left>
@@ -203,6 +220,8 @@ import Project from "./Project.vue";
                         in customer-facing roles.
                     </p>
                 </Project>
+            </section>
+            <section>
                 <h2>Interests</h2>
                 <ul class="list-disc list-inside">
                     <li>Leetcode — daily competitive problem solving</li>
@@ -211,7 +230,7 @@ import Project from "./Project.vue";
                     <li>Climbing · Gym</li>
                     <li>Board games · Meetup.com</li>
                 </ul>
-            </div>
+            </section>
         </div>
 
         <div class="no-print w-full h-20"></div>
@@ -267,6 +286,8 @@ import Project from "./Project.vue";
     border: 1px solid var(--primary);
     overflow: hidden;
     margin: auto auto;
+    display: flex;
+    flex-direction: column;
 }
 
 /* Component Styling */
@@ -286,6 +307,7 @@ h1,
 h2,
 h3,
 h4 {
+    margin: 0px;
     border: none;
     color: var(--primary);
     font-family: var(--font-heading);

vue/src/views/CV/CVFrontend.vue

@@ -5,7 +5,8 @@ import Project from "./Project.vue";
 <template>
     <main>
         <div class="no-print w-full h-20"></div>
-        <div class="a4page">
+        <div class="a4page justify-between">
+            <section>
                 <div class="flex flex-row justify-between">
                     <h1 class="name">Adam French</h1>
                     <div class="contact-details text-right">
@@ -18,28 +19,33 @@ import Project from "./Project.vue";
                         </h4>
                     </div>
                 </div>
+            </section>
 
+            <section>
                 <h2>Profile</h2>
                 <p>
                     First Class Honours graduate in Computer Science with
-                Mathematics from the University of Leeds (81.1%), with a year
+                    Mathematics from the University of Leeds (81.1%), with a
-                abroad at the University of Waterloo. Passionate about crafting
+                    year abroad at the University of Waterloo. Passionate about
-                responsive, accessible, and performant user interfaces.
+                    crafting responsive, accessible, and performant user
-                Experienced across multiple frontend frameworks with a solid
+                    interfaces. Experienced across multiple frontend frameworks
-                understanding of the full stack.
+                    with a solid understanding of the full stack.
                 </p>
+            </section>
 
+            <section>
                 <h2>Skills</h2>
                 <div class="skills-grid">
                     <div>
                         <strong>Frontend</strong><br /><small
-                        >Vue, React / Redux, Svelte, Tailwind CSS, HTML / CSS,
+                            >Vue, React / Redux, Svelte, Tailwind CSS, HTML /
-                        WebAssembly</small
+                            CSS, WebAssembly</small
                         >
                     </div>
                     <div>
                         <strong>Languages</strong><br /><small
-                        >JavaScript / TypeScript, Rust, Go, Python, SQL</small
+                            >JavaScript / TypeScript, Rust, Go, Python,
+                            SQL</small
                         >
                     </div>
                     <div>
@@ -49,7 +55,9 @@ import Project from "./Project.vue";
                         >
                     </div>
                 </div>
+            </section>
 
+            <section>
                 <h2>Projects</h2>
 
                 <Project class="border-b border-dotted">
@@ -72,9 +80,9 @@ import Project from "./Project.vue";
                     <p>
                         Personal website SPA built with Vue 3, Tailwind CSS, and
                         Pinia for state management. Features responsive layouts,
-                    dark mode, WebAssembly integration, and a custom component
+                        dark mode, WebAssembly integration, and a custom
-                    library. Iterated through Svelte and React/Redux before
+                        component library. Iterated through Svelte and
-                    settling on Vue.
+                        React/Redux before settling on Vue.
                     </p>
                 </Project>
                 <Project class="border-b border-dotted">
@@ -93,7 +101,8 @@ import Project from "./Project.vue";
                     </template>
                     <p>
                         CLI tool for building and navigating interactive code
-                    tutorials, with version-traversal semantics inspired by Git.
+                        tutorials, with version-traversal semantics inspired by
+                        Git.
                     </p>
                 </Project>
                 <Project class="border-b border-dotted">
@@ -112,8 +121,8 @@ import Project from "./Project.vue";
                     </template>
                     <p>
                         Parallelised recursive ray tracer for realistic 3D
-                    rendering. Emphasised algorithmic efficiency and low-level
+                        rendering. Emphasised algorithmic efficiency and
-                    memory management in Rust.
+                        low-level memory management in Rust.
                     </p>
                 </Project>
                 <Project>
@@ -132,12 +141,15 @@ import Project from "./Project.vue";
                         <small>2024</small>
                     </template>
                     <p>
-                    Research project on Mobile Automata with data visualisation
+                        Research project on Mobile Automata with data
-                    and academic presentation. Delivered within a tight deadline
+                        visualisation and academic presentation. Delivered
-                    in collaboration with academic mentors.
+                        within a tight deadline in collaboration with academic
+                        mentors.
                     </p>
                 </Project>
+            </section>
 
+            <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">
@@ -160,7 +172,10 @@ import Project from "./Project.vue";
                             <li>Compiler Design and Construction</li>
                             <li>Formal Languages & Finite Automata</li>
                             <li>Graph Algorithms & Complexity Theory</li>
-                        <li>Machine Learning & Databases & Computer Processors</li>
+                            <li>
+                                Machine Learning & Databases & Computer
+                                Processors
+                            </li>
                         </ul>
                     </div>
                     <div class="flex-1 pl-3">
@@ -174,16 +189,20 @@ import Project from "./Project.vue";
                         <ul class="list-disc list-inside">
                             <li>Applied Cryptography</li>
                             <li>Introduction to Computer Graphics</li>
-                        <li>Introduction to Rings and Fields with Applications</li>
+                            <li>
+                                Introduction to Rings and Fields with
+                                Applications
+                            </li>
                         </ul>
                     </div>
                 </div>
+            </section>
         </div>
 
         <div class="no-print w-full h-20"></div>
 
-        <div class="a4page">
+        <div class="a4page gap-10">
-            <div class="flex-1 pl-3">
+            <section>
                 <h2>Experience</h2>
                 <Project>
                     <template #left>
@@ -201,6 +220,8 @@ import Project from "./Project.vue";
                         in customer-facing roles.
                     </p>
                 </Project>
+            </section>
+            <section>
                 <h2>Interests</h2>
                 <ul class="list-disc list-inside">
                     <li>Leetcode — daily competitive problem solving</li>
@@ -209,7 +230,7 @@ import Project from "./Project.vue";
                     <li>Climbing · Gym</li>
                     <li>Board games · Meetup.com</li>
                 </ul>
-            </div>
+            </section>
         </div>
 
         <div class="no-print w-full h-20"></div>
@@ -265,6 +286,9 @@ import Project from "./Project.vue";
     border: 1px solid var(--primary);
     overflow: hidden;
     margin: auto auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
 }
 
 /* Component Styling */
@@ -284,6 +308,7 @@ h1,
 h2,
 h3,
 h4 {
+    margin: 0px;
     border: none;
     color: var(--primary);
     font-family: var(--font-heading);

vue/src/views/CV/CVGeneral.vue

@@ -5,7 +5,8 @@ import Project from "./Project.vue";
 <template>
     <main>
         <div class="no-print w-full h-20"></div>
-        <div class="a4page">
+        <div class="a4page justify-between">
+            <section>
                 <div class="flex flex-row justify-between">
                     <h1 class="name">Adam French</h1>
                     <div class="contact-details text-right">
@@ -18,23 +19,28 @@ import Project from "./Project.vue";
                         </h4>
                     </div>
                 </div>
+            </section>
 
+            <section>
                 <h2>Profile</h2>
                 <p>
                     First Class Honours graduate in Computer Science with
-                Mathematics from the University of Leeds (81.1%), with a year
+                    Mathematics from the University of Leeds (81.1%), with a
-                abroad at the University of Waterloo. Proficient in full-stack
+                    year abroad at the University of Waterloo. Proficient in
-                development, systems programming, and CI/CD automation. Eager to
+                    full-stack development, systems programming, and CI/CD
-                contribute to a collaborative engineering team, apply strong
+                    automation. Eager to contribute to a collaborative
-                academic foundations to real-world problems, and grow through
+                    engineering team, apply strong academic foundations to
-                hands-on experience.
+                    real-world problems, and grow through hands-on experience.
                 </p>
+            </section>
 
+            <section>
                 <h2>Skills</h2>
                 <div class="skills-grid">
                     <div>
                         <strong>Languages</strong><br /><small
-                        >Go, Rust, Python, JavaScript / TypeScript, SQL</small
+                            >Go, Rust, Python, JavaScript / TypeScript,
+                            SQL</small
                         >
                     </div>
                     <div>
@@ -50,7 +56,9 @@ import Project from "./Project.vue";
                         >
                     </div>
                 </div>
+            </section>
 
+            <section>
                 <h2>Projects</h2>
 
                 <Project class="border-b border-dotted">
@@ -65,15 +73,16 @@ import Project from "./Project.vue";
                     </template>
                     <template v-slot:top>
                         <small>
-                        Nginx, Vue, Postgres, Docker, Go, Python, Rust → Wasm,
+                            Nginx, Vue, Postgres, Docker, Go, Python, Rust →
-                        Git Actions, JWT Auth
+                            Wasm, Git Actions, JWT Auth
                         </small>
                         <small>2025</small>
                     </template>
                     <p>
-                    Self-hosted personal website with a fully automated CI/CD
+                        Self-hosted personal website with a fully automated
-                    pipeline. Iterated across diverse tech stacks including
+                        CI/CD pipeline. Iterated across diverse tech stacks
-                    Svelte, React/Redux, SQLite, Rust Actix, and Deno.
+                        including Svelte, React/Redux, SQLite, Rust Actix, and
+                        Deno.
                     </p>
                 </Project>
                 <Project class="border-b border-dotted">
@@ -92,7 +101,8 @@ import Project from "./Project.vue";
                     </template>
                     <p>
                         CLI tool for building and navigating interactive code
-                    tutorials, with version-traversal semantics inspired by Git.
+                        tutorials, with version-traversal semantics inspired by
+                        Git.
                     </p>
                 </Project>
                 <Project class="border-b border-dotted">
@@ -111,8 +121,8 @@ import Project from "./Project.vue";
                     </template>
                     <p>
                         Parallelised recursive ray tracer for realistic 3D
-                    rendering. Emphasised algorithmic efficiency and low-level
+                        rendering. Emphasised algorithmic efficiency and
-                    memory management in Rust.
+                        low-level memory management in Rust.
                     </p>
                 </Project>
                 <Project>
@@ -131,12 +141,15 @@ import Project from "./Project.vue";
                         <small>2024</small>
                     </template>
                     <p>
-                    Research project on Mobile Automata with data visualisation
+                        Research project on Mobile Automata with data
-                    and academic presentation. Delivered within a tight deadline
+                        visualisation and academic presentation. Delivered
-                    in collaboration with academic mentors.
+                        within a tight deadline in collaboration with academic
+                        mentors.
                     </p>
                 </Project>
+            </section>
 
+            <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">
@@ -160,7 +173,8 @@ import Project from "./Project.vue";
                             <li>Formal Languages & Finite Automata</li>
                             <li>Graph Algorithms & Complexity Theory</li>
                             <li>
-                            Machine Learning · Databases · Computer Processors
+                                Machine Learning · Databases · Computer
+                                Processors
                             </li>
                         </ul>
                     </div>
@@ -176,17 +190,19 @@ import Project from "./Project.vue";
                             <li>Applied Cryptography</li>
                             <li>Introduction to Computer Graphics</li>
                             <li>
-                            Introduction to Rings and Fields with Applications
+                                Introduction to Rings and Fields with
+                                Applications
                             </li>
                         </ul>
                     </div>
                 </div>
+            </section>
         </div>
 
         <div class="no-print w-full h-20"></div>
 
-        <div class="a4page">
+        <div class="a4page gap-10">
-            <div class="flex-1 pl-3">
+            <section>
                 <h2>Experience</h2>
                 <Project>
                     <template #left>
@@ -204,6 +220,8 @@ import Project from "./Project.vue";
                         in customer-facing roles.
                     </p>
                 </Project>
+            </section>
+            <section>
                 <h2>Interests</h2>
                 <ul class="list-disc list-inside">
                     <li>Leetcode — daily competitive problem solving</li>
@@ -212,7 +230,7 @@ import Project from "./Project.vue";
                     <li>Climbing · Gym</li>
                     <li>Board games · Meetup.com</li>
                 </ul>
-            </div>
+            </section>
         </div>
 
         <div class="no-print w-full h-20"></div>
@@ -268,6 +286,9 @@ import Project from "./Project.vue";
     border: 1px solid var(--primary);
     overflow: hidden;
     margin: auto auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
 }
 
 /* Component Styling */
@@ -287,6 +308,7 @@ h1,
 h2,
 h3,
 h4 {
+    margin: 0px;
     border: none;
     color: var(--primary);
     font-family: var(--font-heading);

vue/src/views/CV/CVHospitality.vue

@@ -5,7 +5,8 @@ import Project from "./Project.vue";
 <template>
     <main>
         <div class="no-print w-full h-20"></div>
-        <div class="a4page">
+        <div class="a4page justify-between">
+            <section>
                 <div class="flex flex-row justify-between">
                     <h1 class="name">Adam French</h1>
                     <div class="contact-details text-right">
@@ -18,17 +19,21 @@ import Project from "./Project.vue";
                         </h4>
                     </div>
                 </div>
+            </section>
 
+            <section>
                 <h2>Profile</h2>
                 <p>
                     First Class Honours graduate in Computer Science with
-                Mathematics from the University of Leeds (81.1%). Dependable and
+                    Mathematics from the University of Leeds (81.1%). Dependable
-                personable team player with five years of hospitality experience
+                    and personable team player with five years of hospitality
-                across busy bars, restaurants, and event venues. Thrives under
+                    experience across busy bars, restaurants, and event venues.
-                pressure, communicates clearly, and takes pride in providing
+                    Thrives under pressure, communicates clearly, and takes
-                excellent customer service.
+                    pride in providing excellent customer service.
                 </p>
+            </section>
 
+            <section>
                 <h2>Experience</h2>
 
                 <Project class="border-b border-dotted">
@@ -40,10 +45,10 @@ import Project from "./Project.vue";
                         <small>2021–2025</small>
                     </template>
                     <p>
-                    Served food and drinks in a high-volume live-music venue in
+                        Served food and drinks in a high-volume live-music venue
-                    Leeds. Handled busy weekend shifts, managed multiple tables
+                        in Leeds. Handled busy weekend shifts, managed multiple
-                    simultaneously, and maintained a calm, friendly demeanour
+                        tables simultaneously, and maintained a calm, friendly
-                    during peak hours.
+                        demeanour during peak hours.
                     </p>
                 </Project>
                 <Project class="border-b border-dotted">
@@ -55,10 +60,10 @@ import Project from "./Project.vue";
                         <small>2020–2021</small>
                     </template>
                     <p>
-                    Worked front-of-house at a busy pub, pulling pints, taking
+                        Worked front-of-house at a busy pub, pulling pints,
-                    orders, and ensuring a welcoming atmosphere. Built rapport
+                        taking orders, and ensuring a welcoming atmosphere.
-                    with regulars and adapted quickly to changing priorities
+                        Built rapport with regulars and adapted quickly to
-                    during service.
+                        changing priorities during service.
                     </p>
                 </Project>
                 <Project class="border-b border-dotted">
@@ -70,19 +75,21 @@ import Project from "./Project.vue";
                         <small>2018–2020</small>
                     </template>
                     <p>
-                    Operated the till, served customers, and helped coordinate
+                        Operated the till, served customers, and helped
-                    table service at a café on London's South Bank. Developed
+                        coordinate table service at a café on London's South
-                    strong cash-handling accuracy and customer interaction
+                        Bank. Developed strong cash-handling accuracy and
-                    skills in a fast-paced environment.
+                        customer interaction skills in a fast-paced environment.
                     </p>
                 </Project>
+            </section>
 
+            <section>
                 <h2>Skills</h2>
                 <div class="skills-grid">
                     <div>
                         <strong>Service</strong><br /><small
-                        >Bar work, Table service, Cash handling, Till operation,
+                            >Bar work, Table service, Cash handling, Till
-                        Food hygiene</small
+                            operation, Food hygiene</small
                         >
                     </div>
                     <div>
@@ -98,7 +105,9 @@ import Project from "./Project.vue";
                         >
                     </div>
                 </div>
+            </section>
 
+            <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">
@@ -127,7 +136,9 @@ import Project from "./Project.vue";
                         </div>
                     </div>
                 </div>
+            </section>
 
+            <section>
                 <h2>Interests</h2>
                 <ul class="list-disc list-inside">
                     <li>Leetcode — daily competitive problem solving</li>
@@ -136,6 +147,7 @@ import Project from "./Project.vue";
                     <li>Climbing · Gym</li>
                     <li>Board games · Meetup.com</li>
                 </ul>
+            </section>
         </div>
 
         <div class="no-print w-full h-20"></div>
@@ -191,6 +203,9 @@ import Project from "./Project.vue";
     border: 1px solid var(--primary);
     overflow: hidden;
     margin: auto auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
 }
 
 /* Component Styling */
@@ -210,6 +225,7 @@ h1,
 h2,
 h3,
 h4 {
+    margin: 0px;
     border: none;
     color: var(--primary);
     font-family: var(--font-heading);

vue/src/views/CV/CVTemp.vue

@@ -0,0 +1,397 @@
+<script setup>
+import Project from "./Project.vue";
+</script>
+
+<template>
+    <main>
+        <div class="no-print w-full h-20"></div>
+        <div class="a4page justify-between">
+            <section class="flex flex-row justify-between">
+                <h1 class="name">Adam French</h1>
+                <div class="contact-details text-right">
+                    <p>+447563266931</p>
+                    <p>adam.a.french@outlook.com</p>
+                    <h4>
+                        <a href="https://www.adam-french.co.uk">
+                            www.adam-french.co.uk
+                        </a>
+                    </h4>
+                </div>
+            </section>
+
+            <section>
+                <h2>Profile</h2>
+                <p>
+                    First Class Honours graduate in Computer Science with
+                    Mathematics from the University of Leeds (81.1%), with a
+                    year abroad at the University of Waterloo. Passionate about
+                    developer productivity, automation infrastructure, and
+                    software testing at scale. Experienced building CI/CD
+                    pipelines, automation tooling, and scalable backend
+                    services. Eager to apply rigorous engineering discipline
+                    within a collaborative platform team.
+                </p>
+            </section>
+
+            <section>
+                <h2>Skills</h2>
+                <div class="skills-grid">
+                    <div>
+                        <strong>Languages</strong><br /><small
+                            >Python, Go, Rust, Swift, JavaScript / TypeScript,
+                            SQL</small
+                        >
+                    </div>
+                    <div>
+                        <strong>Automation &amp; Testing</strong><br /><small
+                            >CI/CD Pipelines, GitHub Actions, Docker, Unit &amp;
+                            Integration Testing, WebAssembly</small
+                        >
+                    </div>
+                    <div>
+                        <strong>Infrastructure</strong><br /><small
+                            >Nginx, PostgreSQL, SQLite, JWT Auth, REST &amp;
+                            GraphQL APIs</small
+                        >
+                    </div>
+                </div>
+            </section>
+
+            <section>
+                <h2>Projects</h2>
+
+                <Project class="border-b border-dotted">
+                    <template v-slot:left>
+                        <h4>
+                            <a
+                                href="https://www.adam-french.co.uk/gitea/adamf/web_server.git"
+                            >
+                                web_server.git
+                            </a>
+                        </h4>
+                    </template>
+                    <template v-slot:top>
+                        <small>
+                            GitHub Actions, Docker, Nginx, Go, Python, Rust →
+                            Wasm, Postgres, JWT Auth
+                        </small>
+                        <small>2025</small>
+                    </template>
+                    <p>
+                        Self-hosted personal website with a fully automated
+                        CI/CD pipeline: lint, build, test, and deploy on every
+                        push. Designed for zero-downtime deployments on
+                        constrained Raspberry Pi hardware. Iterated across
+                        diverse stacks to evaluate tradeoffs in infrastructure
+                        and developer experience.
+                    </p>
+                </Project>
+                <Project class="border-b border-dotted">
+                    <template v-slot:left>
+                        <h4>
+                            <a
+                                href="https://www.adam-french.co.uk/gitea/adamf/tour.git"
+                            >
+                                tour.git
+                            </a>
+                        </h4>
+                    </template>
+                    <template v-slot:top>
+                        <small>Rust, Developer Tooling, CLI</small>
+                        <small>2026</small>
+                    </template>
+                    <p>
+                        Developer productivity CLI for building and navigating
+                        interactive code tutorials with Git-inspired version
+                        traversal. Designed as a reusable automation library
+                        with a clean API surface for embedding in larger
+                        toolchains.
+                    </p>
+                </Project>
+                <Project class="border-b border-dotted">
+                    <template v-slot:left>
+                        <h4>
+                            <a
+                                href="https://www.adam-french.co.uk/gitea/adamf/rust-raytracer.git"
+                            >
+                                rust-raytracer.git
+                            </a>
+                        </h4>
+                    </template>
+                    <template v-slot:top>
+                        <small>Rust, Linear Algebra, Multithreading</small>
+                        <small>2023</small>
+                    </template>
+                    <p>
+                        Parallelised recursive ray tracer for realistic 3D
+                        rendering. Emphasised algorithmic efficiency and
+                        low-level memory management in Rust.
+                    </p>
+                </Project>
+                <Project>
+                    <template #left>
+                        <h4>
+                            <a
+                                class="text-center w-full"
+                                href="https://community.wolfram.com/groups/-/m/t/3210947"
+                            >
+                                Wolfram Summer School
+                            </a>
+                        </h4>
+                    </template>
+                    <template #top>
+                        <small>Wolfram Mathematica</small>
+                        <small>2024</small>
+                    </template>
+                    <p>
+                        Research project on Mobile Automata with data
+                        visualisation and academic presentation. Delivered
+                        within a tight deadline in collaboration with academic
+                        mentors.
+                    </p>
+                </Project>
+            </section>
+        </div>
+
+        <div class="no-print w-full h-20"></div>
+
+        <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">
+                        <h3>
+                            <a
+                                href="https://www.adam-french.co.uk/pdf/transcript.pdf"
+                            >
+                                University of Leeds
+                            </a>
+                        </h3>
+                        <div
+                            class="flex-row flex place-content-between m-auto place-items-center"
+                        >
+                            <small>First Class Honours (81.1%)</small>
+                            <small>2021–2025</small>
+                        </div>
+                        <small>BSc Computer Science with Mathematics </small>
+                        <ul class="list-disc list-inside">
+                            <li>Algorithms & Data Structures I & II</li>
+                            <li>Compiler Design and Construction</li>
+                            <li>Formal Languages & Finite Automata</li>
+                            <li>Graph Algorithms & Complexity Theory</li>
+                            <li>
+                                Machine Learning · Databases · Computer
+                                Processors
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="flex-1 pl-3">
+                        <h3>University of Waterloo</h3>
+                        <div
+                            class="flex-row flex place-content-between m-auto place-items-center"
+                        >
+                            <small>Year abroad</small>
+                            <small>2023–2024</small>
+                        </div>
+                        <ul class="list-disc list-inside">
+                            <li>Applied Cryptography</li>
+                            <li>Introduction to Computer Graphics</li>
+                            <li>
+                                Introduction to Rings and Fields with
+                                Applications
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </section>
+            <section>
+                <h2>Experience</h2>
+                <Project>
+                    <template #left>
+                        <p>Hospitality</p>
+                    </template>
+                    <template #top>
+                        <small>Cashier, Bartender, Waiter</small>
+                        <small>2018–2023</small>
+                    </template>
+                    <p>
+                        Worked at <em>Belgrave Music Hall</em>,
+                        <em>The Crown and Anchor</em>, and
+                        <em>BFI Riverfront Kitchen</em>. Developed
+                        communication, composure under pressure, and reliability
+                        in customer-facing roles.
+                    </p>
+                </Project>
+                <h2>Interests</h2>
+                <ul class="list-disc list-inside">
+                    <li>Leetcode — daily competitive problem solving</li>
+                    <li>iOS/macOS development — personal Swift projects</li>
+                    <li>Learning Mandarin</li>
+                    <li>Rhythm Games</li>
+                    <li>Climbing · Gym</li>
+                    <li>Board games · Meetup.com</li>
+                </ul>
+            </section>
+        </div>
+
+        <div class="no-print w-full h-20"></div>
+    </main>
+</template>
+
+<style scoped>
+/* Fonts */
+@font-face {
+    font-family: "big_noodle_titling";
+    src: url("/fonts/big_noodle_titling.woff2") format("woff2");
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: "CreatoDisplay";
+    src: url("/fonts/CreatoDisplay-Bold.woff2") format("woff2");
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+/* Variables */
+* {
+    --primary: black;
+    --secondary: #0000ff;
+    --tertiary: #ff0000;
+    --quaternary: #cccccc;
+    --background: white;
+
+    --font-heading: big_noodle_titling;
+    --font-text: CreatoDisplay;
+    --font-size-name: 2.5em;
+    --font-size-text: 100%;
+    --font-size-small: 0.9em;
+    --font-size-heading: 2.1em;
+    --font-size-subheading: 1.7em;
+    --font-size-subsubheading: 1.4em;
+}
+
+/* A4 Page */
+.a4page {
+    line-height: 1.6;
+    font-family: var(--font-text);
+    width: 210mm;
+    height: 297mm;
+    padding: 5mm;
+    box-sizing: border-box;
+    background-color: var(--background);
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+    border: 1px solid var(--primary);
+    overflow: hidden;
+    margin: auto auto;
+    display: flex;
+    flex-direction: column;
+}
+
+/* Component Styling */
+main {
+    padding: 0px;
+    display: flex;
+    flex-direction: column;
+    height: fit-content;
+    background-color: white;
+}
+
+span {
+    height: 2em;
+}
+
+h1,
+h2,
+h3,
+h4 {
+    border: none;
+    color: var(--primary);
+    font-family: var(--font-heading);
+    text-transform: capitalize;
+    margin: 0px;
+}
+
+h1 {
+    font-size: var(--font-size-heading);
+}
+
+h2 {
+    border-bottom: 1px solid var(--primary);
+    font-size: var(--font-size-subheading);
+}
+
+h3 {
+    font-size: var(--font-size-subsubheading);
+}
+
+a:hover {
+    color: var(--tertiary);
+}
+a {
+    background-color: transparent;
+    color: var(--secondary);
+}
+
+p {
+    margin-bottom: 0.2em;
+    color: var(--primary);
+    font-size: var(--font-size-text);
+}
+
+table {
+    color: var(--secondary);
+    border-collapse: collapse;
+    border: 1px solid black;
+}
+
+td {
+    color: var(--secondary);
+    border-top: 1px solid var(--tertiary);
+    padding: 1px 10px 1px 10px;
+    font-size: var(--font-size-text);
+    text-align: left;
+}
+
+th {
+    color: var(--secondary);
+    border: 2px solid var(--tertiary);
+    padding: 1px 0px 1px 7px;
+    font-family: var(--font-heading);
+    font-size: var(--font-size-subsubheading);
+    background-color: var(--quaternary);
+    text-align: left;
+}
+
+@media print {
+    .no-print {
+        display: none !important;
+    }
+}
+
+small {
+    font-size: var(--font-size-small);
+    color: var(--primary);
+}
+
+ul {
+    font-size: var(--font-size-small);
+    margin: 0;
+    padding-left: 1.2em;
+}
+
+li {
+    font-size: var(--font-size-small);
+    color: var(--primary);
+}
+
+.skills-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 0.3em 1em;
+    margin-bottom: 0.2em;
+}
+</style>

vue/src/views/CV/Project.vue

@@ -2,7 +2,7 @@
 
 <template>
     <div class="flex-row flex">
-        <div class="w-2/7 p-5 m-auto">
+        <div class="w-2/7 mt-auto mb-auto ml-0">
             <slot name="left" />
         </div>
         <div class="w-full p-2">