diff --git a/vue/src/assets/styles.css b/vue/src/assets/styles.css
index fcc5b10..743b963 100644
--- a/vue/src/assets/styles.css
+++ b/vue/src/assets/styles.css
@@ -3,230 +3,227 @@
 /* Route transitions */
 .slide-enter-active,
 .slide-leave-active {
-    transition:
-        transform 0.3s ease,
-        opacity 0.3s ease;
+  transition:
+    transform 0.3s ease,
+    opacity 0.3s ease;
 }
 .slide-enter-from {
-    transform: translateX(30px);
-    opacity: 0;
+  transform: translateX(30px);
+  opacity: 0;
 }
 .slide-leave-to {
-    transform: translateX(-30px);
-    opacity: 0;
+  transform: translateX(-30px);
+  opacity: 0;
 }
 
 /* PRINTING */
 @media print {
-    .no-print,
-    .no-print * {
-        display: none !important;
-        margin: 0px;
-        padding: 0px;
-        width: 0x;
-        height: 0px;
-    }
+  .no-print,
+  .no-print * {
+    display: none !important;
+    margin: 0px;
+    padding: 0px;
+    width: 0x;
+    height: 0px;
+  }
 }
 
 /* END OF PRINTING */
 
 /* 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-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;
+  font-family: "CreatoDisplay";
+  src: url("/fonts/CreatoDisplay-Bold.woff2") format("woff2");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
 }
 
 /* END OF FONTS */
 
 /* VARIABLES */
 :root {
-    /* RED, WHITE, BLACK are standard*/
-    --portal_grey: #dddddd;
-    --portal_orange: #ff9a00;
-    --portal_light_orange: #ff5d00;
-    --portal_blue: #0065ff;
-    --portal_light_blue: #00a2ff;
+  /* RED, WHITE, BLACK are standard*/
+  --portal_grey: #dddddd;
+  --portal_orange: #ff9a00;
+  --portal_light_orange: #ff5d00;
+  --portal_blue: #0065ff;
+  --portal_light_blue: #00a2ff;
 
-    /* MAIN COLORS */
-    --primary: #55ffbb;
-    --secondary: #62ff57;
-    --tertiary: #ff579a;
-    --quaternary: #024942;
+  /* MAIN COLORS */
+  --primary: #55ffbb;
+  --secondary: #62ff57;
+  --tertiary: #ff579a;
+  --quaternary: #024942;
 
-    /* BACKGROUND COLORS */
-    --bg_primary: #1b110e;
-    --bg_secondary: #04080f;
-    --bg_tertiary: #0c1c10;
-    --link: #222;
+  /* BACKGROUND COLORS */
+  --bg_primary: #1b110e;
+  --bg_secondary: #04080f;
+  --bg_tertiary: #0c1c10;
+  --link: #222;
 
-    --bdr: 2px;
+  --bdr: 2px;
 
-    --spacing: 3px;
+  --spacing: 3px;
 
-    /* FONTS USED */
-    --font_heading: big_noodle_titling;
-    --font_default: CreatoDisplay;
+  /* FONTS USED */
+  --font_heading: big_noodle_titling;
+  --font_default: CreatoDisplay;
 }
 
 @theme {
-    --color-primary: var(--primary);
-    --color-secondary: var(--secondary);
-    --color-tertiary: var(--tertiary);
-    --color-quaternary: var(--quaternary);
+  --color-primary: var(--primary);
+  --color-secondary: var(--secondary);
+  --color-tertiary: var(--tertiary);
+  --color-quaternary: var(--quaternary);
 
-    --color-bg_primary: var(--bg_primary);
-    --color-bg_secondary: var(--bg_secondary);
-    --color-link: var(--link);
+  --color-bg_primary: var(--bg_primary);
+  --color-bg_secondary: var(--bg_secondary);
+  --color-link: var(--link);
 
-    --borderWidth-primary: var(--primary);
-    --borderWidth-secondary: var(--secondary);
-    --borderWidth-tertiary: var(--tertiary);
+  --borderWidth-primary: var(--primary);
+  --borderWidth-secondary: var(--secondary);
+  --borderWidth-tertiary: var(--tertiary);
 
-    --font-heading: var(--font_heading);
-    --default-font-family: var(--font_default);
+  --font-heading: var(--font_heading);
+  --default-font-family: var(--font_default);
 }
 
 /* END OF VARIABLES */
 /* ELEMENTS */
 body {
-    margin: 0 auto;
-    width: 100%;
-    height: 100vh;
-    overflow-x: hidden;
-    scrollbar-width: thin;
-    scrollbar-color: var(--primary) var(--bg_secondary);
+  margin: 0 auto;
+  width: 100%;
+  height: 100vh;
+  overflow-x: hidden;
+  scrollbar-width: thin;
+  scrollbar-color: var(--primary) var(--bg_secondary);
 }
 
 /* Chrome/Edge scrollbar styling */
 ::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
+  width: 6px;
+  height: 6px;
 }
 
 ::-webkit-scrollbar-track {
-    background: var(--bg_secondary);
+  background: var(--bg_secondary);
 }
 
 ::-webkit-scrollbar-thumb {
-    background: var(--quaternary);
-    border-radius: 3px;
+  background: var(--quaternary);
+  border-radius: 3px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-    background: var(--primary);
+  background: var(--primary);
 }
 
 input {
-    color: var(--secondary);
-    border-color: var(--primary);
-    border-width: 1px;
+  color: var(--secondary);
+  border-color: var(--primary);
+  border-width: 1px;
 }
 
 small {
-    color: var(--tertiary);
+  color: var(--tertiary);
 }
 
 code {
-    color: var(--tertiary);
+  color: var(--tertiary);
 }
 
 ul {
-    color: var(--tertiary);
+  color: var(--tertiary);
 }
 
 li {
-    color: var(--tertiary);
+  color: var(--tertiary);
 }
 
 h1,
 h2,
 h3,
 h4 {
-    margin: 0.25rem;
-    font-family: var(--font_heading);
-    color: var(--primary);
+  margin: 0.25rem;
+  font-family: var(--font_heading);
+  color: var(--primary);
 }
 
 h3,
 h4 {
-    font-size: 1.125rem;
-    line-height: 1.75rem;
+  font-size: 1.125rem;
 }
 
 h1 {
-    font-size: 1.5rem;
-    line-height: 2rem;
+  font-size: 1.5rem;
 }
 
 h2 {
-    font-size: 1.25rem;
-    line-height: 1.75rem;
+  font-size: 1.25rem;
 }
 
 p {
-    color: var(--secondary);
+  color: var(--secondary);
 }
 
 a {
-    color: var(--primary);
-    background-color: var(--link);
-    text-align: center;
-    font-family: var(--font_heading);
-    letter-spacing: 0.025em;
+  color: var(--primary);
+  background-color: var(--link);
+  text-align: center;
+  font-family: var(--font_heading);
+  letter-spacing: 0.025em;
 }
 
 input,
 textarea {
-    color: var(--primary);
-    border-width: 1px;
-    padding: 0.5rem;
-    width: 100%;
+  color: var(--primary);
+  border-width: 1px;
+  padding: 0.5rem;
+  width: 100%;
 }
 
 input::placeholder,
 textarea::placeholder {
-    color: var(--secondary);
-    opacity: 0.5;
+  color: var(--secondary);
+  opacity: 0.5;
 }
 
 table {
-    border-color: var(--primary);
-    border-width: 1px;
-    color: var(--primary);
+  border-color: var(--primary);
+  border-width: 1px;
+  color: var(--primary);
 }
 
 td {
-    gap: 0.25rem;
+  gap: 0.25rem;
 }
 
 tr {
-    border-color: var(--primary);
-    border-bottom-width: 1px;
-    color: var(--primary);
+  border-color: var(--primary);
+  border-bottom-width: 1px;
+  color: var(--primary);
 }
 
 th {
-    padding-right: 0.75rem;
-    padding-left: 0.75rem;
-    border-right-width: 1px;
-    border-style: dotted;
-    border-color: var(--tertiary);
+  padding-right: 0.75rem;
+  padding-left: 0.75rem;
+  border-right-width: 1px;
+  border-style: dotted;
+  border-color: var(--tertiary);
 }
 
 td {
-    padding-right: 0.75rem;
-    padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-left: 0.75rem;
 }
 
 /* END OF ELEMENTS */
@@ -234,146 +231,146 @@ td {
 /* CLASSES */
 
 .img-stamp {
-    width: 99px;
-    height: 55px;
+  width: 99px;
+  height: 55px;
 }
 
 /* BORDERS */
 .bdr-1 {
-    border-width: 30px;
-    border-image: url("/img/borders/border1.gif") 30 round;
+  border-width: 30px;
+  border-image: url("/img/borders/border1.gif") 30 round;
 }
 
 .bdr-1-inv {
-    border-width: 30px;
-    border-image: url("/img/borders/border1inv.gif") 30 round;
+  border-width: 30px;
+  border-image: url("/img/borders/border1inv.gif") 30 round;
 }
 
 .bdr-2 {
-    border-width: 5px;
-    border-image: url("/img/borders/border4.gif") 7 round;
+  border-width: 5px;
+  border-image: url("/img/borders/border4.gif") 7 round;
 }
 
 .bdr-cv {
-    border-width: 30px;
-    border-image: url("/img/borders/bordercv.png") 30 round;
+  border-width: 30px;
+  border-image: url("/img/borders/bordercv.png") 30 round;
 }
 
 /* A5 Page */
 .a5page-landscape {
-    margin: 0;
-    box-sizing: content-box;
-    height: 148mm;
-    width: 210mm;
+  margin: 0;
+  box-sizing: content-box;
+  height: 148mm;
+  width: 210mm;
 }
 
 .a5page-portrait {
-    margin: 0;
-    box-sizing: content-box;
-    width: 148mm;
-    height: 210mm;
+  margin: 0;
+  box-sizing: content-box;
+  width: 148mm;
+  height: 210mm;
 }
 
 /* A4 Page */
 .a4page-portrait {
-    margin: 0;
-    box-sizing: content-box;
-    width: 210mm;
-    height: 297mm;
+  margin: 0;
+  box-sizing: content-box;
+  width: 210mm;
+  height: 297mm;
 }
 
 .a4page-landscape {
-    margin: 0;
-    box-sizing: content-box;
-    height: 210mm;
-    width: 297mm;
+  margin: 0;
+  box-sizing: content-box;
+  height: 210mm;
+  width: 297mm;
 }
 
 /* END OF CLASSES */
 
 /* PHONE */
 @media (max-width: 850px) {
-    .a4page-portrait {
-        width: 100%;
-        /* fill mobile width */
-        height: fit-content;
-        margin: 0 auto;
-        /* center horizontally */
-        box-sizing: border-box;
-    }
+  .a4page-portrait {
+    width: 100%;
+    /* fill mobile width */
+    height: fit-content;
+    margin: 0 auto;
+    /* center horizontally */
+    box-sizing: border-box;
+  }
 
-    .a4page-landscape {
-        width: 100%;
-        /* fill mobile width */
-        height: fit-content;
-        margin: 0 auto;
-        /* center horizontally */
-        box-sizing: border-box;
-    }
+  .a4page-landscape {
+    width: 100%;
+    /* fill mobile width */
+    height: fit-content;
+    margin: 0 auto;
+    /* center horizontally */
+    box-sizing: border-box;
+  }
 }
 
 @media (max-width: 600px) {
-    .a5page-portrait {
-        width: 100%;
-        height: fit-content;
-        margin: 0 auto;
-        box-sizing: border-box;
-    }
+  .a5page-portrait {
+    width: 100%;
+    height: fit-content;
+    margin: 0 auto;
+    box-sizing: border-box;
+  }
 
-    .a5page-landscape {
-        width: 100%;
-        height: fit-content;
-        margin: 0 auto;
-        box-sizing: border-box;
-    }
+  .a5page-landscape {
+    width: 100%;
+    height: fit-content;
+    margin: 0 auto;
+    box-sizing: border-box;
+  }
 }
 
 .tl {
-    position: absolute;
-    top: 0;
-    left: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
 }
 
 .tr {
-    position: absolute;
-    top: 0;
-    right: 0;
+  position: absolute;
+  top: 0;
+  right: 0;
 }
 
 .bl {
-    position: absolute;
-    bottom: 0;
-    left: 0;
+  position: absolute;
+  bottom: 0;
+  left: 0;
 }
 
 .br {
-    position: absolute;
-    bottom: 0;
-    right: 0;
+  position: absolute;
+  bottom: 0;
+  right: 0;
 }
 
 .background {
-    position: fixed;
+  position: fixed;
 }
 
 .halftone {
-    --dot_size: 4px;
-    --bg_size: 12px;
-    --bg_pos: calc(var(--bg_size) / 2);
-    --blur: 0%;
+  --dot_size: 4px;
+  --bg_size: 12px;
+  --bg_pos: calc(var(--bg_size) / 2);
+  --blur: 0%;
 
-    background-color: var(--bg_secondary);
-    background-image:
-        linear-gradient(to top, transparent 0%, var(--bg_primary) 100%),
-        radial-gradient(
-            circle at center,
-            var(--bg_tertiary) var(--dot_size),
-            transparent var(--blur)
-        );
-    background-size:
-        100% 100%,
-        var(--bg_size) var(--bg_size);
-    background-position:
-        0 0,
-        0 0;
+  background-color: var(--bg_secondary);
+  background-image:
+    linear-gradient(to top, transparent 0%, var(--bg_primary) 100%),
+    radial-gradient(
+      circle at center,
+      var(--bg_tertiary) var(--dot_size),
+      transparent var(--blur)
+    );
+  background-size:
+    100% 100%,
+    var(--bg_size) var(--bg_size);
+  background-position:
+    0 0,
+    0 0;
 }
diff --git a/vue/src/views/CV/CV.vue b/vue/src/views/CV/CV.vue
index c13e040..931ce0b 100644
--- a/vue/src/views/CV/CV.vue
+++ b/vue/src/views/CV/CV.vue
@@ -3,6 +3,7 @@ import { ref, shallowRef } from "vue";
 import { RouterLink } from "vue-router";
 import CVGeneral from "./CVGeneral.vue";
 import CVProgramming from "./CVProgramming.vue";
+import CVSecurity from "./CVSecurity.vue";
 import CVBackend from "./CVBackend.vue";
 import CVFrontend from "./CVFrontend.vue";
 import CVTemp from "./CVTemp.vue";
@@ -12,6 +13,7 @@ import CVHospitality from "./CVHospitality.vue";
 const templates = [
   { label: "General", component: CVGeneral },
   { label: "Programming", component: CVProgramming },
+  { label: "Security", component: CVSecurity },
   { label: "Backend", component: CVBackend },
   { label: "Frontend", component: CVFrontend },
   { label: "Temp", component: CVTemp },
@@ -124,3 +126,5 @@ function print() {
   }
 }
 </style>
+
+<style src="./cv-shared.css"></style>
diff --git a/vue/src/views/CV/CVBackend.vue b/vue/src/views/CV/CVBackend.vue
index 23f5764..4f55435 100644
--- a/vue/src/views/CV/CVBackend.vue
+++ b/vue/src/views/CV/CVBackend.vue
@@ -3,408 +3,219 @@ import Project from "./Project.vue";
 </script>
 
 <template>
-    <main>
-        <div class="no-print w-full h-20"></div>
-        <div class="a4page justify-between">
-            <section>
-                <div class="flex flex-col sm:flex-row sm:justify-between">
-                    <h1 class="name">Adam French</h1>
-                    <div class="contact-details sm: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>
-                </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. Strong background
-                    in systems programming, API design, database management, and
-                    infrastructure automation. Keen to build reliable,
-                    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
-                        >
-                    </div>
-                    <div>
-                        <strong>Backend</strong><br /><small
-                            >REST, GraphQL, gRPC, JWT Auth, WebSockets,
-                            Middleware</small
-                        >
-                    </div>
-                    <div>
-                        <strong>Infrastructure</strong><br /><small
-                            >Docker, Nginx, PostgreSQL, SQLite, Git Actions,
-                            Linux</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>
-                            Go, Gin, GraphQL, PostgreSQL, GORM, Docker, Nginx,
-                            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, and WebSocket messaging. Fully
-                        containerised with Docker Compose and automated CI/CD
-                        via Git Actions.
-                    </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, CLI, File I/O</small>
-                        <small>2026</small>
-                    </template>
-                    <p>
-                        CLI tool for building and navigating interactive code
-                        tutorials, with version-traversal semantics inspired by
-                        Git. Designed for robustness with comprehensive error
-                        handling and structured file operations.
-                    </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, Multithreading, Performance</small>
-                        <small>2023</small>
-                    </template>
-                    <p>
-                        Parallelised recursive ray tracer leveraging Rust's
-                        ownership model for safe concurrency. Focused on
-                        algorithmic efficiency, low-level memory management, and
-                        multi-core utilisation.
-                    </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>
-
-            <section>
-                <h2>Education</h2>
-                <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"
-                            >
-                                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>Compiler Design and Construction</li>
-                            <li>Graph Algorithms & Complexity Theory</li>
-                            <li>Algorithms & Data Structures I & II</li>
-                            <li>Databases · Computer Processors</li>
-                        </ul>
-                    </div>
-                    <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"
-                        >
-                            <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>
-                            <li>Formal Languages & Finite Automata</li>
-                        </ul>
-                    </div>
-                </div>
-            </section>
+  <main class="cv-template">
+    <div class="no-print w-full h-20"></div>
+    <div class="a4page justify-between">
+      <section>
+        <div class="flex flex-col sm:flex-row sm:justify-between">
+          <h1 class="name">Adam French</h1>
+          <div class="contact-details">
+            <p>London, United Kingdom</p>
+            <p>+447563266931</p>
+            <p>adam.a.french@outlook.com</p>
+            <p>
+              <a href="https://www.adam-french.co.uk">
+                www.adam-french.co.uk
+              </a>
+            </p>
+          </div>
         </div>
+      </section>
 
-        <div class="no-print w-full h-20"></div>
+      <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. Strong background in systems programming, API design,
+          database management, and infrastructure automation. Keen to build
+          reliable, performant backend services in a collaborative engineering
+          team.
+        </p>
+      </section>
 
-        <div class="a4page gap-10">
-            <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>
-            </section>
-            <section>
-                <h2>Interests</h2>
-                <ul class="list-disc list-inside">
-                    <li>Leetcode — daily competitive problem solving</li>
-                    <li>Learning Mandarin</li>
-                    <li>Rhythm Games</li>
-                    <li>Climbing · Gym</li>
-                    <li>Board games · Meetup.com</li>
-                </ul>
-            </section>
+      <section>
+        <h2>Skills</h2>
+        <div class="skills-grid">
+          <div>
+            <strong>Languages</strong><br /><small
+              >Go, Rust, Python, SQL, JavaScript / TypeScript</small
+            >
+          </div>
+          <div>
+            <strong>Backend</strong><br /><small
+              >REST, GraphQL, gRPC, JWT Auth, WebSockets, Middleware</small
+            >
+          </div>
+          <div>
+            <strong>Infrastructure</strong><br /><small
+              >Docker, Nginx, PostgreSQL, SQLite, Git Actions, Linux</small
+            >
+          </div>
         </div>
+      </section>
 
-        <div class="no-print w-full h-20"></div>
-    </main>
+      <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>
+              Go, Gin, GraphQL, PostgreSQL, GORM, Docker, Nginx, 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, and WebSocket
+            messaging. Fully containerised with Docker Compose and automated
+            CI/CD via Git Actions.
+          </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, CLI, File I/O</small>
+            <small>2026</small>
+          </template>
+          <p>
+            CLI tool for building and navigating interactive code tutorials,
+            with version-traversal semantics inspired by Git. Designed for
+            robustness with comprehensive error handling and structured file
+            operations.
+          </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, Multithreading, Performance</small>
+            <small>2023</small>
+          </template>
+          <p>
+            Parallelised recursive ray tracer leveraging Rust's ownership model
+            for safe concurrency. Focused on algorithmic efficiency, low-level
+            memory management, and multi-core utilisation.
+          </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 class="w-full flex flex-col sm:flex-row gap-5">
+        <section class="flex-1">
+          <h2>
+            <a href="https://www.adam-french.co.uk/pdf/transcript.pdf">
+              University of Leeds
+            </a>
+          </h2>
+          <div
+            class="flex-row flex place-content-between m-auto place-items-center"
+          >
+            <small>First Class Honors (81.1%)</small>
+            <small>Sep 2021 – Jun 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>Computer Processors, Databases, Networks</li>
+          </ul>
+        </section>
+        <section class="flex-1">
+          <h2>University of Waterloo</h2>
+          <div
+            class="flex-row flex place-content-between m-auto place-items-center"
+          >
+            <small>Year abroad</small>
+            <small>Sep 2023 – Apr 2024</small>
+          </div>
+          <ul class="list-disc list-inside">
+            <li>Applied Cryptography</li>
+            <li>Introduction to Rings and Fields with Applications</li>
+            <li>Introduction to Computer Graphics</li>
+          </ul>
+        </section>
+      </div>
+    </div>
+
+    <div class="no-print w-full h-20"></div>
+
+    <div class="a4page gap-10">
+      <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>
+      </section>
+      <section>
+        <h2>Interests</h2>
+        <ul class="list-disc list-inside">
+          <li>Leetcode — daily competitive problem solving</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 {
-    margin: 0px;
-    border: none;
-    color: var(--primary);
-    font-family: var(--font-heading);
-    text-transform: capitalize;
-}
-
-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;
-}
-
-@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/CVElectrical.vue b/vue/src/views/CV/CVElectrical.vue
index 3826efd..4022301 100644
--- a/vue/src/views/CV/CVElectrical.vue
+++ b/vue/src/views/CV/CVElectrical.vue
@@ -3,21 +3,21 @@ import Project from "./Project.vue";
 </script>
 
 <template>
-  <main>
+  <main class="cv-template">
     <div class="no-print w-full h-20"></div>
     <div class="a4page justify-between">
       <section>
         <div class="flex flex-col sm:flex-row sm:justify-between">
           <h1 class="name">Adam French</h1>
-          <div class="contact-details sm:text-right">
+          <div class="contact-details">
             <p>London, United Kingdom</p>
             <p>+447563266931</p>
             <p>adam.a.french@outlook.com</p>
-            <h4>
+            <p>
               <a href="https://www.adam-french.co.uk">
                 www.adam-french.co.uk
               </a>
-            </h4>
+            </p>
           </div>
         </div>
       </section>
@@ -174,150 +174,3 @@ import Project from "./Project.vue";
     <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.6em;
-  --font-size-subsubheading: 1.3em;
-}
-
-/* A4 Page */
-.a4page {
-  line-height: 1.5;
-  font-family: var(--font-text);
-  width: 210mm;
-  height: 297mm;
-  padding: 8mm;
-  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;
-  justify-content: space-between;
-  gap: 0.4em;
-}
-
-/* Component Styling */
-main {
-  padding: 0px;
-  display: flex;
-  flex-direction: column;
-  height: fit-content;
-  background-color: white;
-}
-
-h1,
-h2,
-h3,
-h4 {
-  margin: 0px;
-  border: none;
-  color: var(--primary);
-  font-family: var(--font-heading);
-  text-transform: capitalize;
-}
-
-h1 {
-  font-size: var(--font-size-heading);
-}
-
-h2 {
-  border-bottom: 1px solid var(--primary);
-  font-size: var(--font-size-subheading);
-}
-
-h3,
-h4 {
-  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);
-}
-
-@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;
-}
-
-@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 63ef1e1..7d5ee11 100644
--- a/vue/src/views/CV/CVFrontend.vue
+++ b/vue/src/views/CV/CVFrontend.vue
@@ -3,408 +3,216 @@ import Project from "./Project.vue";
 </script>
 
 <template>
-    <main>
-        <div class="no-print w-full h-20"></div>
-        <div class="a4page justify-between">
-            <section>
-                <div class="flex flex-col sm:flex-row sm:justify-between">
-                    <h1 class="name">Adam French</h1>
-                    <div class="contact-details sm: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>
-                </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
-                    crafting responsive, accessible, and performant user
-                    interfaces. Experienced across multiple frontend frameworks
-                    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, WebAssembly</small
-                        >
-                    </div>
-                    <div>
-                        <strong>Languages</strong><br /><small
-                            >JavaScript / TypeScript, Rust, Go, Python,
-                            SQL</small
-                        >
-                    </div>
-                    <div>
-                        <strong>Tooling / Infra</strong><br /><small
-                            >Vite, Docker, Nginx, Git Actions, PostgreSQL,
-                            Figma</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>
-                            Vue 3, Tailwind CSS, Vite, Pinia, Responsive Design,
-                            Rust → Wasm
-                        </small>
-                        <small>2025</small>
-                    </template>
-                    <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 library. Iterated through Svelte and
-                        React/Redux before settling on Vue.
-                    </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</small>
-                        <small>2026</small>
-                    </template>
-                    <p>
-                        CLI tool for building and navigating interactive code
-                        tutorials, with version-traversal semantics inspired by
-                        Git.
-                    </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>
-
-            <section>
-                <h2>Education</h2>
-                <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"
-                            >
-                                University of Leeds
-                            </a>
-                        </h3>
-                        <div
-                            class="flex-row flex place-content-between m-auto place-items-center"
-                        >
-                            <small>81.1% — First Class Honours</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 sm: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>
+  <main class="cv-template">
+    <div class="no-print w-full h-20"></div>
+    <div class="a4page justify-between">
+      <section>
+        <div class="flex flex-col sm:flex-row sm:justify-between">
+          <h1 class="name">Adam French</h1>
+          <div class="contact-details">
+            <p>London, United Kingdom</p>
+            <p>+447563266931</p>
+            <p>adam.a.french@outlook.com</p>
+            <p>
+              <a href="https://www.adam-french.co.uk">
+                www.adam-french.co.uk
+              </a>
+            </p>
+          </div>
         </div>
+      </section>
 
-        <div class="no-print w-full h-20"></div>
+      <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 crafting responsive, accessible, and
+          performant user interfaces. Experienced across multiple frontend
+          frameworks with a solid understanding of the full stack.
+        </p>
+      </section>
 
-        <div class="a4page gap-10">
-            <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>
-            </section>
-            <section>
-                <h2>Interests</h2>
-                <ul class="list-disc list-inside">
-                    <li>Leetcode — daily competitive problem solving</li>
-                    <li>Learning Mandarin</li>
-                    <li>Rhythm Games</li>
-                    <li>Climbing · Gym</li>
-                    <li>Board games · Meetup.com</li>
-                </ul>
-            </section>
+      <section>
+        <h2>Skills</h2>
+        <div class="skills-grid">
+          <div>
+            <strong>Frontend</strong><br /><small
+              >Vue, React / Redux, Svelte, Tailwind CSS, HTML / CSS,
+              WebAssembly</small
+            >
+          </div>
+          <div>
+            <strong>Languages</strong><br /><small
+              >JavaScript / TypeScript, Rust, Go, Python, SQL</small
+            >
+          </div>
+          <div>
+            <strong>Tooling / Infra</strong><br /><small
+              >Vite, Docker, Nginx, Git Actions, PostgreSQL, Figma</small
+            >
+          </div>
         </div>
+      </section>
 
-        <div class="no-print w-full h-20"></div>
-    </main>
+      <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>
+              Vue 3, Tailwind CSS, Vite, Pinia, Responsive Design, Rust → Wasm
+            </small>
+            <small>2025</small>
+          </template>
+          <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 library. Iterated
+            through Svelte and React/Redux before settling on Vue.
+          </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</small>
+            <small>2026</small>
+          </template>
+          <p>
+            CLI tool for building and navigating interactive code tutorials,
+            with version-traversal semantics inspired by Git.
+          </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 class="w-full flex flex-col sm:flex-row gap-5">
+        <section class="flex-1">
+          <h2>
+            <a href="https://www.adam-french.co.uk/pdf/transcript.pdf">
+              University of Leeds
+            </a>
+          </h2>
+          <div
+            class="flex-row flex place-content-between m-auto place-items-center"
+          >
+            <small>First Class Honours (81.1%)</small>
+            <small>Sep 2021 – Jun 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>
+        </section>
+        <section class="flex-1">
+          <h2>University of Waterloo</h2>
+          <div
+            class="flex-row flex place-content-between m-auto place-items-center"
+          >
+            <small>Year abroad</small>
+            <small>Sep 2023 – Apr 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>
+        </section>
+      </div>
+    </div>
+
+    <div class="no-print w-full h-20"></div>
+
+    <div class="a4page gap-10">
+      <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>
+      </section>
+      <section>
+        <h2>Interests</h2>
+        <ul class="list-disc list-inside">
+          <li>Leetcode — daily competitive problem solving</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 {
-    margin: 0px;
-    border: none;
-    color: var(--primary);
-    font-family: var(--font-heading);
-    text-transform: capitalize;
-}
-
-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;
-}
-
-@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 e4b18b9..ced019d 100644
--- a/vue/src/views/CV/CVGeneral.vue
+++ b/vue/src/views/CV/CVGeneral.vue
@@ -3,21 +3,21 @@ import Project from "./Project.vue";
 </script>
 
 <template>
-  <main>
+  <main class="cv-template">
     <div class="no-print w-full h-20"></div>
     <div class="a4page place-content-between">
       <section>
         <div class="flex flex-col sm:flex-row sm:justify-between">
-          <h1 class="content-center name">Adam French</h1>
-          <div class="contact-details sm:text-right">
+          <h1 class="name">Adam French</h1>
+          <div class="contact-details">
             <p>London, United Kingdom</p>
             <p>+447563266931</p>
             <p>adam.a.french@outlook.com</p>
-            <h4>
+            <p>
               <a href="https://www.adam-french.co.uk">
                 www.adam-french.co.uk
               </a>
-            </h4>
+            </p>
           </div>
         </div>
       </section>
@@ -188,156 +188,3 @@ import Project from "./Project.vue";
     </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: 3.5em;
-  --font-size-text: 0.94em;
-  --font-size-small: 0.9em;
-  --font-size-heading: 1.9em;
-  --font-size-subheading: 1.6em;
-  --font-size-subsubheading: 1.3em;
-}
-
-.name {
-  font-size: var(--font-size-name);
-}
-
-/* A4 Page */
-.a4page {
-  line-height: 1.5;
-  font-family: var(--font-text);
-  width: 210mm;
-  height: 297mm;
-  padding: 8mm;
-  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;
-  gap: 0.4em;
-}
-
-/* Component Styling */
-main {
-  padding: 0px;
-  display: flex;
-  flex-direction: column;
-  height: fit-content;
-  background-color: white;
-}
-
-h1,
-h2,
-h3,
-h4 {
-  margin: 0px;
-  border: none;
-  color: var(--primary);
-  font-family: var(--font-heading);
-  text-transform: capitalize;
-}
-
-h1 {
-  font-size: var(--font-size-heading);
-}
-
-h2 {
-  border-bottom: 1px solid var(--primary);
-  font-size: var(--font-size-subheading);
-}
-
-h3,
-h4 {
-  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);
-}
-
-@media print {
-  .no-print {
-    display: none !important;
-  }
-}
-
-small {
-  font-size: var(--font-size-small);
-  color: var(--primary);
-}
-
-ul {
-  font-size: var(--font-size-text);
-  margin: 0;
-  padding-left: 1.2em;
-}
-
-li {
-  font-size: var(--font-size-text);
-  color: var(--primary);
-  list-style: disc;
-}
-
-.skills-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  gap: 0.3em 1em;
-  margin-bottom: 0.2em;
-}
-
-/* Inline skills: header flows directly into bullet list on same line */
-@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 751d24c..0b19ce5 100644
--- a/vue/src/views/CV/CVHospitality.vue
+++ b/vue/src/views/CV/CVHospitality.vue
@@ -3,337 +3,159 @@ import Project from "./Project.vue";
 </script>
 
 <template>
-    <main>
-        <div class="no-print w-full h-20"></div>
-        <div class="a4page justify-between">
-            <section>
-                <div class="flex flex-col sm:flex-row sm:justify-between">
-                    <h1 class="name">Adam French</h1>
-                    <div class="contact-details sm: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>
-                </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 personable team player with five years of hospitality
-                    experience across busy bars, restaurants, and event venues.
-                    Thrives under pressure, communicates clearly, and takes
-                    pride in providing excellent customer service.
-                </p>
-            </section>
-
-            <section>
-                <h2>Experience</h2>
-
-                <Project class="border-b border-dotted">
-                    <template #left>
-                        <h4>Belgrave Music Hall</h4>
-                    </template>
-                    <template #top>
-                        <small>Bartender & Waiter</small>
-                        <small>2021–2025</small>
-                    </template>
-                    <p>
-                        Served food and drinks in a high-volume live-music venue
-                        in Leeds. Handled busy weekend shifts, managed multiple
-                        tables simultaneously, and maintained a calm, friendly
-                        demeanour during peak hours.
-                    </p>
-                </Project>
-                <Project class="border-b border-dotted">
-                    <template #left>
-                        <h4>The Crown and Anchor</h4>
-                    </template>
-                    <template #top>
-                        <small>Bartender & Waiter</small>
-                        <small>2020–2021</small>
-                    </template>
-                    <p>
-                        Worked front-of-house at a busy pub, pulling pints,
-                        taking orders, and ensuring a welcoming atmosphere.
-                        Built rapport with regulars and adapted quickly to
-                        changing priorities during service.
-                    </p>
-                </Project>
-                <Project class="border-b border-dotted">
-                    <template #left>
-                        <h4>To The Rise Bakery</h4>
-                    </template>
-                    <template #top>
-                        <small>Barista & Front of House</small>
-                        <small>2020–2021</small>
-                    </template>
-                    <p>
-                        Worked at a bakery in Eastbourne, preparing freshly
-                        baked goods for display, operating the coffee machine,
-                        and keeping bakery equipment spotless. Built rapport
-                        with regulars and provided attentive, friendly service.
-                    </p>
-                </Project>
-                <Project>
-                    <template #left>
-                        <h4>BFI Riverfront Kitchen</h4>
-                    </template>
-                    <template #top>
-                        <small>Cashier & Waiter</small>
-                        <small>2018–2020</small>
-                    </template>
-                    <p>
-                        Operated the till, served customers, and helped
-                        coordinate table service at a café on London's South
-                        Bank. Developed strong cash-handling accuracy and
-                        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, Food hygiene</small
-                        >
-                    </div>
-                    <div>
-                        <strong>Soft Skills</strong><br /><small
-                            >Communication, Teamwork, Time management, Composure
-                            under pressure</small
-                        >
-                    </div>
-                    <div>
-                        <strong>Technical</strong><br /><small
-                            >EPOS systems, Stock management, Event
-                            coordination</small
-                        >
-                    </div>
-                </div>
-            </section>
-
-            <div class="w-full flex flex-col sm:flex-row gap-5">
-                <section class="flex-1">
-                    <h2>
-                        <a
-                            href="https://www.adam-french.co.uk/pdf/transcript.pdf"
-                        >
-                            University of Leeds
-                        </a>
-                    </h2>
-                    <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>
-                </section>
-                <section class="flex-1">
-                    <h2>University of Waterloo</h2>
-                    <div
-                        class="flex-row flex place-content-between m-auto place-items-center"
-                    >
-                        <small>Year abroad</small>
-                        <small>2023–2024</small>
-                    </div>
-                </section>
-            </div>
-
-            <section>
-                <h2>Interests</h2>
-                <ul class="list-disc list-inside">
-                    <li>Leetcode</li>
-                    <li>Rhythm Games</li>
-                    <li>Climbing, Gym</li>
-                    <li>Board games, Meetup.com</li>
-                </ul>
-            </section>
+  <main class="cv-template">
+    <div class="no-print w-full h-20"></div>
+    <div class="a4page justify-between">
+      <section>
+        <div class="flex flex-col sm:flex-row sm:justify-between">
+          <h1 class="name">Adam French</h1>
+          <div class="contact-details">
+            <p>London, United Kingdom</p>
+            <p>+447563266931</p>
+            <p>adam.a.french@outlook.com</p>
+            <p>
+              <a href="https://www.adam-french.co.uk">
+                www.adam-french.co.uk
+              </a>
+            </p>
+          </div>
         </div>
+      </section>
 
-        <div class="no-print w-full h-20"></div>
-    </main>
+      <section>
+        <h2>Profile</h2>
+        <p>
+          First Class Honours graduate in Computer Science with Mathematics from
+          the University of Leeds (81.1%). Dependable and personable team player
+          with five years of hospitality experience across busy bars,
+          restaurants, and event venues. Thrives under pressure, communicates
+          clearly, and takes pride in providing excellent customer service.
+        </p>
+      </section>
+
+      <section>
+        <h2>Experience</h2>
+
+        <Project class="border-b border-dotted">
+          <template #left>
+            <h4>Belgrave Music Hall</h4>
+          </template>
+          <template #top>
+            <small>Bartender & Waiter</small>
+            <small>2021–2025</small>
+          </template>
+          <p>
+            Served food and drinks in a high-volume live-music venue in Leeds.
+            Handled busy weekend shifts, managed multiple tables simultaneously,
+            and maintained a calm, friendly demeanour during peak hours.
+          </p>
+        </Project>
+        <Project class="border-b border-dotted">
+          <template #left>
+            <h4>The Crown and Anchor</h4>
+          </template>
+          <template #top>
+            <small>Bartender & Waiter</small>
+            <small>2020–2021</small>
+          </template>
+          <p>
+            Worked front-of-house at a busy pub, pulling pints, taking orders,
+            and ensuring a welcoming atmosphere. Built rapport with regulars and
+            adapted quickly to changing priorities during service.
+          </p>
+        </Project>
+        <Project class="border-b border-dotted">
+          <template #left>
+            <h4>To The Rise Bakery</h4>
+          </template>
+          <template #top>
+            <small>Barista & Front of House</small>
+            <small>2020–2021</small>
+          </template>
+          <p>
+            Worked at a bakery in Eastbourne, preparing freshly baked goods for
+            display, operating the coffee machine, and keeping bakery equipment
+            spotless. Built rapport with regulars and provided attentive,
+            friendly service.
+          </p>
+        </Project>
+        <Project>
+          <template #left>
+            <h4>BFI Riverfront Kitchen</h4>
+          </template>
+          <template #top>
+            <small>Cashier & Waiter</small>
+            <small>2018–2020</small>
+          </template>
+          <p>
+            Operated the till, served customers, and helped coordinate table
+            service at a café on London's South Bank. Developed strong
+            cash-handling accuracy and 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, Food
+              hygiene</small
+            >
+          </div>
+          <div>
+            <strong>Soft Skills</strong><br /><small
+              >Communication, Teamwork, Time management, Composure under
+              pressure</small
+            >
+          </div>
+          <div>
+            <strong>Technical</strong><br /><small
+              >EPOS systems, Stock management, Event coordination</small
+            >
+          </div>
+        </div>
+      </section>
+
+      <div class="w-full flex flex-col sm:flex-row gap-5">
+        <section class="flex-1">
+          <h2>
+            <a href="https://www.adam-french.co.uk/pdf/transcript.pdf">
+              University of Leeds
+            </a>
+          </h2>
+          <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>
+        </section>
+        <section class="flex-1">
+          <h2>University of Waterloo</h2>
+          <div
+            class="flex-row flex place-content-between m-auto place-items-center"
+          >
+            <small>Year abroad</small>
+            <small>2023–2024</small>
+          </div>
+        </section>
+      </div>
+
+      <section>
+        <h2>Interests</h2>
+        <ul class="list-disc list-inside">
+          <li>Leetcode</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;
-    justify-content: space-between;
-}
-
-/* Component Styling */
-main {
-    padding: 0px;
-    display: flex;
-    flex-direction: column;
-    height: fit-content;
-    background-color: white;
-}
-
-span {
-    height: 2em;
-}
-
-h1,
-h2,
-h3,
-h4 {
-    margin: 0px;
-    border: none;
-    color: var(--primary);
-    font-family: var(--font-heading);
-    text-transform: capitalize;
-}
-
-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;
-}
-
-@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/CVProgramming.vue b/vue/src/views/CV/CVProgramming.vue
index 09c18d4..884a871 100644
--- a/vue/src/views/CV/CVProgramming.vue
+++ b/vue/src/views/CV/CVProgramming.vue
@@ -3,442 +3,229 @@ import Project from "./Project.vue";
 </script>
 
 <template>
-    <main>
-        <div class="no-print w-full h-20"></div>
-        <div class="a4page justify-between">
-            <section>
-                <div class="flex flex-col sm:flex-row sm:justify-between">
-                    <h1 class="flex-1 name">Adam French</h1>
-                    <div class="contact-details">
-                        <p>London, United Kingdom</p>
-                        <p>+447563266931</p>
-                        <p>adam.a.french@outlook.com</p>
-                        <p>
-                            <a href="https://www.adam-french.co.uk">
-                                www.adam-french.co.uk
-                            </a>
-                        </p>
-                    </div>
-                </div>
-            </section>
-
-            <section>
-                <h2>Profile</h2>
-                <p contenteditable="true">
-                    Full Stack Developer with a First Class Honours degree in
-                    Computer Science with Mathematics from the University of
-                    Leeds (81.1%) and a year abroad at the University of
-                    Waterloo. Proficient in full-stack development, systems
-                    programming, and CI/CD automation. Strong problem-solving
-                    and organisational skills. Eager to contribute to a
-                    collaborative engineering team, apply strong academic
-                    foundations to 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
-                        >
-                    </div>
-                    <div>
-                        <strong>Frontend / Web Design</strong><br /><small
-                            >Vue, React / Redux, Svelte, Tailwind CSS,
-                            WebAssembly</small
-                        >
-                    </div>
-                    <div>
-                        <strong>Backend / Infra</strong><br /><small
-                            >Nginx, Docker, PostgreSQL, SQLite, JWT Auth, Git
-                            Actions</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>
-                            Nginx, Vue, Postgres, Docker, Go, Python, Rust,
-                            Wasm, Git Actions, JWT Auth
-                        </small>
-                        <small>2025</small>
-                    </template>
-                    <p contenteditable="true">
-                        Self-hosted personal website with a fully automated
-                        CI/CD pipeline. Iterated across diverse tech stacks
-                        including Svelte, React/Redux, SQLite, Rust Actix, and
-                        Deno.
-                    </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</small>
-                        <small>2026</small>
-                    </template>
-                    <p contenteditable="true">
-                        CLI tool for building and navigating interactive code
-                        tutorials, with version-traversal semantics inspired by
-                        Git.
-                    </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 contenteditable="true">
-                        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 contenteditable="true">
-                        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 class="w-full flex flex-col sm:flex-row gap-5">
-                <section class="flex-1">
-                    <h2>
-                        <a
-                            href="https://www.adam-french.co.uk/pdf/transcript.pdf"
-                        >
-                            University of Leeds
-                        </a>
-                    </h2>
-                    <div
-                        class="flex-row flex place-content-between m-auto place-items-center"
-                    >
-                        <small>First Class Honours (81.1%)</small>
-                        <small>Sep 2021 – Jun 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>
-                </section>
-                <section class="flex-1">
-                    <h2>University of Waterloo</h2>
-                    <div
-                        class="flex-row flex place-content-between m-auto place-items-center"
-                    >
-                        <small>Year abroad</small>
-                        <small>Sep 2023 – Apr 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>
-                </section>
-            </div>
+  <main class="cv-template">
+    <div class="no-print w-full h-20"></div>
+    <div class="a4page justify-between">
+      <section>
+        <div class="flex flex-col sm:flex-row sm:justify-between">
+          <h1 class="name">Adam French</h1>
+          <div class="contact-details">
+            <p>London, United Kingdom</p>
+            <p>+447563266931</p>
+            <p>adam.a.french@outlook.com</p>
+            <p>
+              <a href="https://www.adam-french.co.uk">
+                www.adam-french.co.uk
+              </a>
+            </p>
+          </div>
         </div>
+      </section>
 
-        <div class="no-print w-full h-20"></div>
+      <section>
+        <h2>Profile</h2>
+        <p contenteditable="true">
+          Full Stack Developer with a First Class Honours degree in Computer
+          Science with Mathematics from the University of Leeds (81.1%) and a
+          year abroad at the University of Waterloo. Proficient in full-stack
+          development, systems programming, and CI/CD automation. Strong
+          problem-solving and organisational skills. Eager to contribute to a
+          collaborative engineering team, apply strong academic foundations to
+          real-world problems, and grow through hands-on experience.
+        </p>
+      </section>
 
-        <div class="a4page gap-10">
-            <section>
-                <h2>Experience</h2>
-                <Project>
-                    <template #left>
-                        <h4>Hospitality</h4>
-                    </template>
-                    <template #top>
-                        <small>Cashier, Bartender, Waiter</small>
-                        <small>Jan 2018 – Dec 2023</small>
-                    </template>
-                    <p contenteditable="true">
-                        Worked at <strong>Belgrave Music Hall</strong>,
-                        <strong>The Crown and Anchor</strong>, and
-                        <strong>BFI Riverfront Kitchen</strong>. Developed
-                        communication, composure under pressure, and reliability
-                        in customer-facing roles.
-                    </p>
-                </Project>
-            </section>
-            <div class="w-full flex flex-col sm:flex-row gap-5">
-                <section class="flex-1">
-                    <h2>Soft Skills</h2>
-                    <ul class="list-disc list-inside">
-                        <li>Communication & collaboration</li>
-                        <li>Attention to detail</li>
-                        <li>Problem solving</li>
-                        <li>Adaptability</li>
-                        <li>Time management</li>
-                    </ul>
-                </section>
-                <section class="flex-1">
-                    <h2>Interests</h2>
-                    <ul class="list-disc list-inside">
-                        <li>Leetcode</li>
-                        <li>Learning Mandarin</li>
-                        <li>Rhythm Games</li>
-                        <li>Climbing, Gym</li>
-                        <li>Board games, Meetup.com</li>
-                    </ul>
-                </section>
-            </div>
+      <section>
+        <h2>Skills</h2>
+        <div class="skills-grid">
+          <div>
+            <strong>Languages</strong><br /><small
+              >Go, Rust, Python, JavaScript / TypeScript, SQL</small
+            >
+          </div>
+          <div>
+            <strong>Frontend / Web Design</strong><br /><small
+              >Vue, React / Redux, Svelte, Tailwind CSS, WebAssembly</small
+            >
+          </div>
+          <div>
+            <strong>Backend / Infra</strong><br /><small
+              >Nginx, Docker, PostgreSQL, SQLite, JWT Auth, Git Actions</small
+            >
+          </div>
         </div>
+      </section>
 
-        <div class="no-print w-full h-20"></div>
-    </main>
+      <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>
+              Nginx, Vue, Postgres, Docker, Go, Python, Rust, Wasm, Git Actions,
+              JWT Auth
+            </small>
+            <small>2025</small>
+          </template>
+          <p contenteditable="true">
+            Self-hosted personal website with a fully automated CI/CD pipeline.
+            Iterated across diverse tech stacks including Svelte, React/Redux,
+            SQLite, Rust Actix, and Deno.
+          </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</small>
+            <small>2026</small>
+          </template>
+          <p contenteditable="true">
+            CLI tool for building and navigating interactive code tutorials,
+            with version-traversal semantics inspired by Git.
+          </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 contenteditable="true">
+            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 contenteditable="true">
+            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 class="w-full flex flex-col sm:flex-row gap-5">
+        <section class="flex-1">
+          <h2>
+            <a href="https://www.adam-french.co.uk/pdf/transcript.pdf">
+              University of Leeds
+            </a>
+          </h2>
+          <div
+            class="flex-row flex place-content-between m-auto place-items-center"
+          >
+            <small>First Class Honours (81.1%)</small>
+            <small>Sep 2021 – Jun 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>
+        </section>
+        <section class="flex-1">
+          <h2>University of Waterloo</h2>
+          <div
+            class="flex-row flex place-content-between m-auto place-items-center"
+          >
+            <small>Year abroad</small>
+            <small>Sep 2023 – Apr 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>
+        </section>
+      </div>
+    </div>
+
+    <div class="no-print w-full h-20"></div>
+
+    <div class="a4page gap-10">
+      <section>
+        <h2>Experience</h2>
+        <Project>
+          <template #left>
+            <h4>Hospitality</h4>
+          </template>
+          <template #top>
+            <small>Cashier, Bartender, Waiter</small>
+            <small>Jan 2018 – Dec 2023</small>
+          </template>
+          <p contenteditable="true">
+            Worked at <strong>Belgrave Music Hall</strong>,
+            <strong>The Crown and Anchor</strong>, and
+            <strong>BFI Riverfront Kitchen</strong>. Developed communication,
+            composure under pressure, and reliability in customer-facing roles.
+          </p>
+        </Project>
+      </section>
+      <div class="w-full flex flex-col sm:flex-row gap-5">
+        <section class="flex-1">
+          <h2>Soft Skills</h2>
+          <ul class="list-disc list-inside">
+            <li>Communication & collaboration</li>
+            <li>Attention to detail</li>
+            <li>Problem solving</li>
+            <li>Adaptability</li>
+            <li>Time management</li>
+          </ul>
+        </section>
+        <section class="flex-1">
+          <h2>Interests</h2>
+          <ul class="list-disc list-inside">
+            <li>Leetcode</li>
+            <li>Learning Mandarin</li>
+            <li>Rhythm Games</li>
+            <li>Climbing, Gym</li>
+            <li>Board games, Meetup.com</li>
+          </ul>
+        </section>
+      </div>
+    </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-text: 1em;
-    --font-size-small: 0.9em;
-    --font-size-heading: 1.5em;
-    --font-size-subheading: 1.5em;
-    --font-size-subsubheading: 1.3em;
-}
-
-/* A4 Page */
-.a4page {
-    line-height: 1.6;
-    font-family: var(--font-text);
-    width: 210mm;
-    height: 297mm;
-    padding: 10mm;
-    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;
-}
-
-.name {
-    font-size: 2em;
-    font-weight: bold;
-    justify-content: center;
-    align-content: center;
-}
-
-/* Component Styling */
-main {
-    padding: 0px;
-    display: flex;
-    flex-direction: column;
-    height: fit-content;
-    background-color: white;
-}
-
-strong {
-    font-weight: 900;
-}
-
-span {
-    height: 2em;
-}
-
-h1,
-h2,
-h3,
-h4 {
-    margin: 0px 0px 0.2em 0px;
-    border: none;
-    color: var(--primary);
-    font-family: var(--font-heading);
-    text-transform: uppercase;
-}
-
-h1 {
-    font-size: var(--font-size-heading);
-}
-
-h2 {
-    border-bottom: 1px solid var(--primary);
-    font-size: var(--font-size-subheading);
-}
-
-h3,
-h4 {
-    font-size: var(--font-size-subsubheading);
-}
-
-a:hover {
-    color: var(--tertiary);
-}
-
-a {
-    background-color: transparent;
-    color: var(--secondary);
-    font-family: inherit;
-    font-size: var(--font-size-text);
-}
-
-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;
-}
-
-p[contenteditable] {
-    outline: none;
-    cursor: text;
-}
-
-p[contenteditable]:focus {
-    outline: none;
-    background-color: rgba(0, 0, 255, 0.05);
-}
-
-@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 7f368b5..39032cd 100644
--- a/vue/src/views/CV/CVTemp.vue
+++ b/vue/src/views/CV/CVTemp.vue
@@ -3,409 +3,217 @@ 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-col sm:flex-row sm:justify-between">
-                <h1 class="name">Adam French</h1>
-                <div class="contact-details sm: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>
+  <main class="cv-template">
+    <div class="no-print w-full h-20"></div>
+    <div class="a4page justify-between">
+      <section class="flex flex-col sm:flex-row sm:justify-between">
+        <h1 class="name">Adam French</h1>
+        <div class="contact-details">
+          <p>London, United Kingdom</p>
+          <p>+447563266931</p>
+          <p>adam.a.french@outlook.com</p>
+          <p>
+            <a href="https://www.adam-french.co.uk"> www.adam-french.co.uk </a>
+          </p>
         </div>
+      </section>
 
-        <div class="no-print w-full h-20"></div>
+      <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>
 
-        <div class="a4page gap-10">
-            <section>
-                <h2>Education</h2>
-                <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"
-                            >
-                                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 sm: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>
+      <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>
 
-        <div class="no-print w-full h-20"></div>
-    </main>
+      <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">
+      <div class="w-full flex flex-col sm:flex-row gap-5">
+        <section class="flex-1">
+          <h2>
+            <a href="https://www.adam-french.co.uk/pdf/transcript.pdf">
+              University of Leeds
+            </a>
+          </h2>
+          <div
+            class="flex-row flex place-content-between m-auto place-items-center"
+          >
+            <small>First Class Honours (81.1%)</small>
+            <small>Sep 2021 – Jun 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>
+        </section>
+        <section class="flex-1">
+          <h2>University of Waterloo</h2>
+          <div
+            class="flex-row flex place-content-between m-auto place-items-center"
+          >
+            <small>Year abroad</small>
+            <small>Sep 2023 – Apr 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>
+        </section>
+      </div>
+      <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;
-}
-
-@media (max-width: 640px) {
-    .a4page {
-        width: 100%;
-        height: auto;
-        overflow: visible;
-        box-shadow: none;
-        border: none;
-    }
-
-    .skills-grid {
-        grid-template-columns: 1fr;
-    }
-}
-</style>