Making all CV's abide by same styling

vue/src/assets/styles.css

@@ -161,17 +161,14 @@ h4 {
 h3,
 h4 {
   font-size: 1.125rem;
-    line-height: 1.75rem;
 }
 
 h1 {
   font-size: 1.5rem;
-    line-height: 2rem;
 }
 
 h2 {
   font-size: 1.25rem;
-    line-height: 1.75rem;
 }
 
 p {

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>

vue/src/views/CV/CVBackend.vue

@@ -3,20 +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>
@@ -24,12 +25,11 @@ import Project from "./Project.vue";
       <section>
         <h2>Profile</h2>
         <p>
-                    First Class Honours graduate in Computer Science with
+          First Class Honours graduate in Computer Science with Mathematics from
-                    Mathematics from the University of Leeds (81.1%), with a
+          the University of Leeds (81.1%), with a year abroad at the University
-                    year abroad at the University of Waterloo. Strong background
+          of Waterloo. Strong background in systems programming, API design,
-                    in systems programming, API design, database management, and
+          database management, and infrastructure automation. Keen to build
-                    infrastructure automation. Keen to build reliable,
+          reliable, performant backend services in a collaborative engineering
-                    performant backend services in a collaborative engineering
           team.
         </p>
       </section>
@@ -39,20 +39,17 @@ import Project from "./Project.vue";
         <div class="skills-grid">
           <div>
             <strong>Languages</strong><br /><small
-                            >Go, Rust, Python, SQL, JavaScript /
+              >Go, Rust, Python, SQL, JavaScript / TypeScript</small
-                            TypeScript</small
             >
           </div>
           <div>
             <strong>Backend</strong><br /><small
-                            >REST, GraphQL, gRPC, JWT Auth, WebSockets,
+              >REST, GraphQL, gRPC, JWT Auth, WebSockets, Middleware</small
-                            Middleware</small
             >
           </div>
           <div>
             <strong>Infrastructure</strong><br /><small
-                            >Docker, Nginx, PostgreSQL, SQLite, Git Actions,
+              >Docker, Nginx, PostgreSQL, SQLite, Git Actions, Linux</small
-                            Linux</small
             >
           </div>
         </div>
@@ -73,25 +70,22 @@ import Project from "./Project.vue";
           </template>
           <template v-slot:top>
             <small>
-                            Go, Gin, GraphQL, PostgreSQL, GORM, Docker, Nginx,
+              Go, Gin, GraphQL, PostgreSQL, GORM, Docker, Nginx, JWT Auth, Git
-                            JWT Auth, Git Actions
+              Actions
             </small>
             <small>2025</small>
           </template>
           <p>
-                        Self-hosted personal website with a Go backend serving a
+            Self-hosted personal website with a Go backend serving a GraphQL
-                        GraphQL API, JWT authentication, Spotify OAuth
+            API, JWT authentication, Spotify OAuth integration, and WebSocket
-                        integration, and WebSocket messaging. Fully
+            messaging. Fully containerised with Docker Compose and automated
-                        containerised with Docker Compose and automated CI/CD
+            CI/CD via Git Actions.
-                        via Git Actions.
           </p>
         </Project>
         <Project class="border-b border-dotted">
           <template v-slot:left>
             <h4>
-                            <a
+              <a href="https://www.adam-french.co.uk/gitea/adamf/tour.git">
-                                href="https://www.adam-french.co.uk/gitea/adamf/tour.git"
-                            >
                 tour.git
               </a>
             </h4>
@@ -101,10 +95,10 @@ import Project from "./Project.vue";
             <small>2026</small>
           </template>
           <p>
-                        CLI tool for building and navigating interactive code
+            CLI tool for building and navigating interactive code tutorials,
-                        tutorials, with version-traversal semantics inspired by
+            with version-traversal semantics inspired by Git. Designed for
-                        Git. Designed for robustness with comprehensive error
+            robustness with comprehensive error handling and structured file
-                        handling and structured file operations.
+            operations.
           </p>
         </Project>
         <Project class="border-b border-dotted">
@@ -122,10 +116,9 @@ import Project from "./Project.vue";
             <small>2023</small>
           </template>
           <p>
-                        Parallelised recursive ray tracer leveraging Rust's
+            Parallelised recursive ray tracer leveraging Rust's ownership model
-                        ownership model for safe concurrency. Focused on
+            for safe concurrency. Focused on algorithmic efficiency, low-level
-                        algorithmic efficiency, low-level memory management, and
+            memory management, and multi-core utilisation.
-                        multi-core utilisation.
           </p>
         </Project>
         <Project>
@@ -144,60 +137,51 @@ import Project from "./Project.vue";
             <small>2024</small>
           </template>
           <p>
-                        Research project on Mobile Automata with data
+            Research project on Mobile Automata with data visualisation and
-                        visualisation and academic presentation. Delivered
+            academic presentation. Delivered within a tight deadline in
-                        within a tight deadline in collaboration with academic
+            collaboration with academic mentors.
-                        mentors.
           </p>
         </Project>
       </section>
 
-            <section>
+      <div class="w-full flex flex-col sm:flex-row gap-5">
-                <h2>Education</h2>
+        <section class="flex-1">
-                <div class="w-full h-fit flex flex-col sm:flex-row gap-5">
+          <h2>
-                    <div class="flex-1 sm:border-r border-dotted sm:pr-3">
+            <a href="https://www.adam-french.co.uk/pdf/transcript.pdf">
-                        <h3>
-                            <a
-                                href="https://www.adam-french.co.uk/pdf/transcript.pdf"
-                            >
               University of Leeds
             </a>
-                        </h3>
+          </h2>
           <div
             class="flex-row flex place-content-between m-auto place-items-center"
           >
-                            <small>First Class Honours (81.1%)</small>
+            <small>First Class Honors (81.1%)</small>
-                            <small>2021–2025</small>
+            <small>Sep 2021 – Jun 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>
+            <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>
-                    </div>
+        </section>
-                    <div class="flex-1 sm:pl-3">
+        <section class="flex-1">
-                        <h3>University of Waterloo</h3>
+          <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>
+            <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>
-                            <li>
-                                Introduction to Rings and Fields with
-                                Applications
-                            </li>
-                            <li>Formal Languages & Finite Automata</li>
           </ul>
-                    </div>
-                </div>
         </section>
       </div>
+    </div>
 
     <div class="no-print w-full h-20"></div>
 
@@ -214,9 +198,8 @@ import Project from "./Project.vue";
           </template>
           <p>
             Worked at <em>Belgrave Music Hall</em>,
-                        <em>The Crown and Anchor</em>, and
+            <em>The Crown and Anchor</em>, and <em>BFI Riverfront Kitchen</em>.
-                        <em>BFI Riverfront Kitchen</em>. Developed
+            Developed communication, composure under pressure, and reliability
-                        communication, composure under pressure, and reliability
             in customer-facing roles.
           </p>
         </Project>
@@ -236,175 +219,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.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>

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>

vue/src/views/CV/CVFrontend.vue

@@ -3,20 +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>
@@ -24,12 +25,11 @@ import Project from "./Project.vue";
       <section>
         <h2>Profile</h2>
         <p>
-                    First Class Honours graduate in Computer Science with
+          First Class Honours graduate in Computer Science with Mathematics from
-                    Mathematics from the University of Leeds (81.1%), with a
+          the University of Leeds (81.1%), with a year abroad at the University
-                    year abroad at the University of Waterloo. Passionate about
+          of Waterloo. Passionate about crafting responsive, accessible, and
-                    crafting responsive, accessible, and performant user
+          performant user interfaces. Experienced across multiple frontend
-                    interfaces. Experienced across multiple frontend frameworks
+          frameworks with a solid understanding of the full stack.
-                    with a solid understanding of the full stack.
         </p>
       </section>
 
@@ -38,20 +38,18 @@ import Project from "./Project.vue";
         <div class="skills-grid">
           <div>
             <strong>Frontend</strong><br /><small
-                            >Vue, React / Redux, Svelte, Tailwind CSS, HTML /
+              >Vue, React / Redux, Svelte, Tailwind CSS, HTML / CSS,
-                            CSS, WebAssembly</small
+              WebAssembly</small
             >
           </div>
           <div>
             <strong>Languages</strong><br /><small
-                            >JavaScript / TypeScript, Rust, Go, Python,
+              >JavaScript / TypeScript, Rust, Go, Python, SQL</small
-                            SQL</small
             >
           </div>
           <div>
             <strong>Tooling / Infra</strong><br /><small
-                            >Vite, Docker, Nginx, Git Actions, PostgreSQL,
+              >Vite, Docker, Nginx, Git Actions, PostgreSQL, Figma</small
-                            Figma</small
             >
           </div>
         </div>
@@ -72,25 +70,21 @@ import Project from "./Project.vue";
           </template>
           <template v-slot:top>
             <small>
-                            Vue 3, Tailwind CSS, Vite, Pinia, Responsive Design,
+              Vue 3, Tailwind CSS, Vite, Pinia, Responsive Design, Rust → Wasm
-                            Rust → Wasm
             </small>
             <small>2025</small>
           </template>
           <p>
-                        Personal website SPA built with Vue 3, Tailwind CSS, and
+            Personal website SPA built with Vue 3, Tailwind CSS, and Pinia for
-                        Pinia for state management. Features responsive layouts,
+            state management. Features responsive layouts, dark mode,
-                        dark mode, WebAssembly integration, and a custom
+            WebAssembly integration, and a custom component library. Iterated
-                        component library. Iterated through Svelte and
+            through Svelte and React/Redux before settling on Vue.
-                        React/Redux before settling on Vue.
           </p>
         </Project>
         <Project class="border-b border-dotted">
           <template v-slot:left>
             <h4>
-                            <a
+              <a href="https://www.adam-french.co.uk/gitea/adamf/tour.git">
-                                href="https://www.adam-french.co.uk/gitea/adamf/tour.git"
-                            >
                 tour.git
               </a>
             </h4>
@@ -100,9 +94,8 @@ import Project from "./Project.vue";
             <small>2026</small>
           </template>
           <p>
-                        CLI tool for building and navigating interactive code
+            CLI tool for building and navigating interactive code tutorials,
-                        tutorials, with version-traversal semantics inspired by
+            with version-traversal semantics inspired by Git.
-                        Git.
           </p>
         </Project>
         <Project class="border-b border-dotted">
@@ -120,9 +113,9 @@ import Project from "./Project.vue";
             <small>2023</small>
           </template>
           <p>
-                        Parallelised recursive ray tracer for realistic 3D
+            Parallelised recursive ray tracer for realistic 3D rendering.
-                        rendering. Emphasised algorithmic efficiency and
+            Emphasised algorithmic efficiency and low-level memory management in
-                        low-level memory management in Rust.
+            Rust.
           </p>
         </Project>
         <Project>
@@ -141,30 +134,25 @@ import Project from "./Project.vue";
             <small>2024</small>
           </template>
           <p>
-                        Research project on Mobile Automata with data
+            Research project on Mobile Automata with data visualisation and
-                        visualisation and academic presentation. Delivered
+            academic presentation. Delivered within a tight deadline in
-                        within a tight deadline in collaboration with academic
+            collaboration with academic mentors.
-                        mentors.
           </p>
         </Project>
       </section>
 
-            <section>
+      <div class="w-full flex flex-col sm:flex-row gap-5">
-                <h2>Education</h2>
+        <section class="flex-1">
-                <div class="w-full h-fit flex flex-col sm:flex-row gap-5">
+          <h2>
-                    <div class="flex-1 sm:border-r border-dotted sm:pr-3">
+            <a href="https://www.adam-french.co.uk/pdf/transcript.pdf">
-                        <h3>
-                            <a
-                                href="https://www.adam-french.co.uk/pdf/transcript.pdf"
-                            >
               University of Leeds
             </a>
-                        </h3>
+          </h2>
           <div
             class="flex-row flex place-content-between m-auto place-items-center"
           >
-                            <small>81.1% — First Class Honours</small>
+            <small>First Class Honours (81.1%)</small>
-                            <small>2021–2025</small>
+            <small>Sep 2021 – Jun 2025</small>
           </div>
           <small>BSc Computer Science with Mathematics </small>
           <ul class="list-disc list-inside">
@@ -172,32 +160,25 @@ import Project from "./Project.vue";
             <li>Compiler Design and Construction</li>
             <li>Formal Languages & Finite Automata</li>
             <li>Graph Algorithms & Complexity Theory</li>
-                            <li>
+            <li>Machine Learning, Databases, Computer Processors</li>
-                                Machine Learning & Databases & Computer
-                                Processors
-                            </li>
           </ul>
-                    </div>
+        </section>
-                    <div class="flex-1 sm:pl-3">
+        <section class="flex-1">
-                        <h3>University of Waterloo</h3>
+          <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>
+            <small>Sep 2023 – Apr 2024</small>
           </div>
           <ul class="list-disc list-inside">
             <li>Applied Cryptography</li>
             <li>Introduction to Computer Graphics</li>
-                            <li>
+            <li>Introduction to Rings and Fields with Applications</li>
-                                Introduction to Rings and Fields with
-                                Applications
-                            </li>
           </ul>
-                    </div>
-                </div>
         </section>
       </div>
+    </div>
 
     <div class="no-print w-full h-20"></div>
 
@@ -214,9 +195,8 @@ import Project from "./Project.vue";
           </template>
           <p>
             Worked at <em>Belgrave Music Hall</em>,
-                        <em>The Crown and Anchor</em>, and
+            <em>The Crown and Anchor</em>, and <em>BFI Riverfront Kitchen</em>.
-                        <em>BFI Riverfront Kitchen</em>. Developed
+            Developed communication, composure under pressure, and reliability
-                        communication, composure under pressure, and reliability
             in customer-facing roles.
           </p>
         </Project>
@@ -236,175 +216,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.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>

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>
+          <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>
@@ -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>

vue/src/views/CV/CVHospitality.vue

@@ -3,20 +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>
@@ -24,12 +25,11 @@ import Project from "./Project.vue";
       <section>
         <h2>Profile</h2>
         <p>
-                    First Class Honours graduate in Computer Science with
+          First Class Honours graduate in Computer Science with Mathematics from
-                    Mathematics from the University of Leeds (81.1%). Dependable
+          the University of Leeds (81.1%). Dependable and personable team player
-                    and personable team player with five years of hospitality
+          with five years of hospitality experience across busy bars,
-                    experience across busy bars, restaurants, and event venues.
+          restaurants, and event venues. Thrives under pressure, communicates
-                    Thrives under pressure, communicates clearly, and takes
+          clearly, and takes pride in providing excellent customer service.
-                    pride in providing excellent customer service.
         </p>
       </section>
 
@@ -45,10 +45,9 @@ import Project from "./Project.vue";
             <small>2021–2025</small>
           </template>
           <p>
-                        Served food and drinks in a high-volume live-music venue
+            Served food and drinks in a high-volume live-music venue in Leeds.
-                        in Leeds. Handled busy weekend shifts, managed multiple
+            Handled busy weekend shifts, managed multiple tables simultaneously,
-                        tables simultaneously, and maintained a calm, friendly
+            and maintained a calm, friendly demeanour during peak hours.
-                        demeanour during peak hours.
           </p>
         </Project>
         <Project class="border-b border-dotted">
@@ -60,10 +59,9 @@ import Project from "./Project.vue";
             <small>2020–2021</small>
           </template>
           <p>
-                        Worked front-of-house at a busy pub, pulling pints,
+            Worked front-of-house at a busy pub, pulling pints, taking orders,
-                        taking orders, and ensuring a welcoming atmosphere.
+            and ensuring a welcoming atmosphere. Built rapport with regulars and
-                        Built rapport with regulars and adapted quickly to
+            adapted quickly to changing priorities during service.
-                        changing priorities during service.
           </p>
         </Project>
         <Project class="border-b border-dotted">
@@ -75,10 +73,10 @@ import Project from "./Project.vue";
             <small>2020–2021</small>
           </template>
           <p>
-                        Worked at a bakery in Eastbourne, preparing freshly
+            Worked at a bakery in Eastbourne, preparing freshly baked goods for
-                        baked goods for display, operating the coffee machine,
+            display, operating the coffee machine, and keeping bakery equipment
-                        and keeping bakery equipment spotless. Built rapport
+            spotless. Built rapport with regulars and provided attentive,
-                        with regulars and provided attentive, friendly service.
+            friendly service.
           </p>
         </Project>
         <Project>
@@ -90,10 +88,10 @@ import Project from "./Project.vue";
             <small>2018–2020</small>
           </template>
           <p>
-                        Operated the till, served customers, and helped
+            Operated the till, served customers, and helped coordinate table
-                        coordinate table service at a café on London's South
+            service at a café on London's South Bank. Developed strong
-                        Bank. Developed strong cash-handling accuracy and
+            cash-handling accuracy and customer interaction skills in a
-                        customer interaction skills in a fast-paced environment.
+            fast-paced environment.
           </p>
         </Project>
       </section>
@@ -103,20 +101,19 @@ import Project from "./Project.vue";
         <div class="skills-grid">
           <div>
             <strong>Service</strong><br /><small
-                            >Bar work, Table service, Cash handling, Till
+              >Bar work, Table service, Cash handling, Till operation, Food
-                            operation, Food hygiene</small
+              hygiene</small
             >
           </div>
           <div>
             <strong>Soft Skills</strong><br /><small
-                            >Communication, Teamwork, Time management, Composure
+              >Communication, Teamwork, Time management, Composure under
-                            under pressure</small
+              pressure</small
             >
           </div>
           <div>
             <strong>Technical</strong><br /><small
-                            >EPOS systems, Stock management, Event
+              >EPOS systems, Stock management, Event coordination</small
-                            coordination</small
             >
           </div>
         </div>
@@ -125,9 +122,7 @@ import Project from "./Project.vue";
       <div class="w-full flex flex-col sm:flex-row gap-5">
         <section class="flex-1">
           <h2>
-                        <a
+            <a href="https://www.adam-french.co.uk/pdf/transcript.pdf">
-                            href="https://www.adam-french.co.uk/pdf/transcript.pdf"
-                        >
               University of Leeds
             </a>
           </h2>
@@ -164,176 +159,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.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>

vue/src/views/CV/CVProgramming.vue

@@ -3,12 +3,12 @@ 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="flex-1 name">Adam French</h1>
+          <h1 class="name">Adam French</h1>
           <div class="contact-details">
             <p>London, United Kingdom</p>
             <p>+447563266931</p>
@@ -25,15 +25,13 @@ import Project from "./Project.vue";
       <section>
         <h2>Profile</h2>
         <p contenteditable="true">
-                    Full Stack Developer with a First Class Honours degree in
+          Full Stack Developer with a First Class Honours degree in Computer
-                    Computer Science with Mathematics from the University of
+          Science with Mathematics from the University of Leeds (81.1%) and a
-                    Leeds (81.1%) and a year abroad at the University of
+          year abroad at the University of Waterloo. Proficient in full-stack
-                    Waterloo. Proficient in full-stack development, systems
+          development, systems programming, and CI/CD automation. Strong
-                    programming, and CI/CD automation. Strong problem-solving
+          problem-solving and organisational skills. Eager to contribute to a
-                    and organisational skills. Eager to contribute to a
+          collaborative engineering team, apply strong academic foundations to
-                    collaborative engineering team, apply strong academic
+          real-world problems, and grow through hands-on experience.
-                    foundations to real-world problems, and grow through
-                    hands-on experience.
         </p>
       </section>
 
@@ -42,20 +40,17 @@ import Project from "./Project.vue";
         <div class="skills-grid">
           <div>
             <strong>Languages</strong><br /><small
-                            >Go, Rust, Python, JavaScript / TypeScript,
+              >Go, Rust, Python, JavaScript / TypeScript, SQL</small
-                            SQL</small
             >
           </div>
           <div>
             <strong>Frontend / Web Design</strong><br /><small
-                            >Vue, React / Redux, Svelte, Tailwind CSS,
+              >Vue, React / Redux, Svelte, Tailwind CSS, WebAssembly</small
-                            WebAssembly</small
             >
           </div>
           <div>
             <strong>Backend / Infra</strong><br /><small
-                            >Nginx, Docker, PostgreSQL, SQLite, JWT Auth, Git
+              >Nginx, Docker, PostgreSQL, SQLite, JWT Auth, Git Actions</small
-                            Actions</small
             >
           </div>
         </div>
@@ -76,24 +71,21 @@ import Project from "./Project.vue";
           </template>
           <template v-slot:top>
             <small>
-                            Nginx, Vue, Postgres, Docker, Go, Python, Rust,
+              Nginx, Vue, Postgres, Docker, Go, Python, Rust, Wasm, Git Actions,
-                            Wasm, Git Actions, JWT Auth
+              JWT Auth
             </small>
             <small>2025</small>
           </template>
           <p contenteditable="true">
-                        Self-hosted personal website with a fully automated
+            Self-hosted personal website with a fully automated CI/CD pipeline.
-                        CI/CD pipeline. Iterated across diverse tech stacks
+            Iterated across diverse tech stacks including Svelte, React/Redux,
-                        including Svelte, React/Redux, SQLite, Rust Actix, and
+            SQLite, Rust Actix, and Deno.
-                        Deno.
           </p>
         </Project>
         <Project class="border-b border-dotted">
           <template v-slot:left>
             <h4>
-                            <a
+              <a href="https://www.adam-french.co.uk/gitea/adamf/tour.git">
-                                href="https://www.adam-french.co.uk/gitea/adamf/tour.git"
-                            >
                 tour.git
               </a>
             </h4>
@@ -103,9 +95,8 @@ import Project from "./Project.vue";
             <small>2026</small>
           </template>
           <p contenteditable="true">
-                        CLI tool for building and navigating interactive code
+            CLI tool for building and navigating interactive code tutorials,
-                        tutorials, with version-traversal semantics inspired by
+            with version-traversal semantics inspired by Git.
-                        Git.
           </p>
         </Project>
         <Project class="border-b border-dotted">
@@ -123,9 +114,9 @@ import Project from "./Project.vue";
             <small>2023</small>
           </template>
           <p contenteditable="true">
-                        Parallelised recursive ray tracer for realistic 3D
+            Parallelised recursive ray tracer for realistic 3D rendering.
-                        rendering. Emphasised algorithmic efficiency and
+            Emphasised algorithmic efficiency and low-level memory management in
-                        low-level memory management in Rust.
+            Rust.
           </p>
         </Project>
         <Project>
@@ -144,10 +135,9 @@ import Project from "./Project.vue";
             <small>2024</small>
           </template>
           <p contenteditable="true">
-                        Research project on Mobile Automata with data
+            Research project on Mobile Automata with data visualisation and
-                        visualisation and academic presentation. Delivered
+            academic presentation. Delivered within a tight deadline in
-                        within a tight deadline in collaboration with academic
+            collaboration with academic mentors.
-                        mentors.
           </p>
         </Project>
       </section>
@@ -155,9 +145,7 @@ import Project from "./Project.vue";
       <div class="w-full flex flex-col sm:flex-row gap-5">
         <section class="flex-1">
           <h2>
-                        <a
+            <a href="https://www.adam-french.co.uk/pdf/transcript.pdf">
-                            href="https://www.adam-french.co.uk/pdf/transcript.pdf"
-                        >
               University of Leeds
             </a>
           </h2>
@@ -173,9 +161,7 @@ import Project from "./Project.vue";
             <li>Compiler Design and Construction</li>
             <li>Formal Languages & Finite Automata</li>
             <li>Graph Algorithms & Complexity Theory</li>
-                        <li>
+            <li>Machine Learning, Databases, Computer Processors</li>
-                            Machine Learning, Databases, Computer Processors
-                        </li>
           </ul>
         </section>
         <section class="flex-1">
@@ -189,9 +175,7 @@ import Project from "./Project.vue";
           <ul class="list-disc list-inside">
             <li>Applied Cryptography</li>
             <li>Introduction to Computer Graphics</li>
-                        <li>
+            <li>Introduction to Rings and Fields with Applications</li>
-                            Introduction to Rings and Fields with Applications
-                        </li>
           </ul>
         </section>
       </div>
@@ -213,9 +197,8 @@ import Project from "./Project.vue";
           <p contenteditable="true">
             Worked at <strong>Belgrave Music Hall</strong>,
             <strong>The Crown and Anchor</strong>, and
-                        <strong>BFI Riverfront Kitchen</strong>. Developed
+            <strong>BFI Riverfront Kitchen</strong>. Developed communication,
-                        communication, composure under pressure, and reliability
+            composure under pressure, and reliability in customer-facing roles.
-                        in customer-facing roles.
           </p>
         </Project>
       </section>
@@ -246,199 +229,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-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>

vue/src/views/CV/CVTemp.vue

@@ -3,33 +3,31 @@ 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 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">
+            <a href="https://www.adam-french.co.uk"> www.adam-french.co.uk </a>
-                            www.adam-french.co.uk
+          </p>
-                        </a>
-                    </h4>
         </div>
       </section>
 
       <section>
         <h2>Profile</h2>
         <p>
-                    First Class Honours graduate in Computer Science with
+          First Class Honours graduate in Computer Science with Mathematics from
-                    Mathematics from the University of Leeds (81.1%), with a
+          the University of Leeds (81.1%), with a year abroad at the University
-                    year abroad at the University of Waterloo. Passionate about
+          of Waterloo. Passionate about developer productivity, automation
-                    developer productivity, automation infrastructure, and
+          infrastructure, and software testing at scale. Experienced building
-                    software testing at scale. Experienced building CI/CD
+          CI/CD pipelines, automation tooling, and scalable backend services.
-                    pipelines, automation tooling, and scalable backend
+          Eager to apply rigorous engineering discipline within a collaborative
-                    services. Eager to apply rigorous engineering discipline
+          platform team.
-                    within a collaborative platform team.
         </p>
       </section>
 
@@ -38,20 +36,19 @@ import Project from "./Project.vue";
         <div class="skills-grid">
           <div>
             <strong>Languages</strong><br /><small
-                            >Python, Go, Rust, Swift, JavaScript / TypeScript,
+              >Python, Go, Rust, Swift, JavaScript / TypeScript, SQL</small
-                            SQL</small
             >
           </div>
           <div>
             <strong>Automation &amp; Testing</strong><br /><small
-                            >CI/CD Pipelines, GitHub Actions, Docker, Unit &amp;
+              >CI/CD Pipelines, GitHub Actions, Docker, Unit &amp; Integration
-                            Integration Testing, WebAssembly</small
+              Testing, WebAssembly</small
             >
           </div>
           <div>
             <strong>Infrastructure</strong><br /><small
-                            >Nginx, PostgreSQL, SQLite, JWT Auth, REST &amp;
+              >Nginx, PostgreSQL, SQLite, JWT Auth, REST &amp; GraphQL
-                            GraphQL APIs</small
+              APIs</small
             >
           </div>
         </div>
@@ -72,26 +69,23 @@ import Project from "./Project.vue";
           </template>
           <template v-slot:top>
             <small>
-                            GitHub Actions, Docker, Nginx, Go, Python, Rust →
+              GitHub Actions, Docker, Nginx, Go, Python, Rust → Wasm, Postgres,
-                            Wasm, Postgres, JWT Auth
+              JWT Auth
             </small>
             <small>2025</small>
           </template>
           <p>
-                        Self-hosted personal website with a fully automated
+            Self-hosted personal website with a fully automated CI/CD pipeline:
-                        CI/CD pipeline: lint, build, test, and deploy on every
+            lint, build, test, and deploy on every push. Designed for
-                        push. Designed for zero-downtime deployments on
+            zero-downtime deployments on constrained Raspberry Pi hardware.
-                        constrained Raspberry Pi hardware. Iterated across
+            Iterated across diverse stacks to evaluate tradeoffs in
-                        diverse stacks to evaluate tradeoffs in infrastructure
+            infrastructure and developer experience.
-                        and developer experience.
           </p>
         </Project>
         <Project class="border-b border-dotted">
           <template v-slot:left>
             <h4>
-                            <a
+              <a href="https://www.adam-french.co.uk/gitea/adamf/tour.git">
-                                href="https://www.adam-french.co.uk/gitea/adamf/tour.git"
-                            >
                 tour.git
               </a>
             </h4>
@@ -101,11 +95,10 @@ import Project from "./Project.vue";
             <small>2026</small>
           </template>
           <p>
-                        Developer productivity CLI for building and navigating
+            Developer productivity CLI for building and navigating interactive
-                        interactive code tutorials with Git-inspired version
+            code tutorials with Git-inspired version traversal. Designed as a
-                        traversal. Designed as a reusable automation library
+            reusable automation library with a clean API surface for embedding
-                        with a clean API surface for embedding in larger
+            in larger toolchains.
-                        toolchains.
           </p>
         </Project>
         <Project class="border-b border-dotted">
@@ -123,9 +116,9 @@ import Project from "./Project.vue";
             <small>2023</small>
           </template>
           <p>
-                        Parallelised recursive ray tracer for realistic 3D
+            Parallelised recursive ray tracer for realistic 3D rendering.
-                        rendering. Emphasised algorithmic efficiency and
+            Emphasised algorithmic efficiency and low-level memory management in
-                        low-level memory management in Rust.
+            Rust.
           </p>
         </Project>
         <Project>
@@ -144,10 +137,9 @@ import Project from "./Project.vue";
             <small>2024</small>
           </template>
           <p>
-                        Research project on Mobile Automata with data
+            Research project on Mobile Automata with data visualisation and
-                        visualisation and academic presentation. Delivered
+            academic presentation. Delivered within a tight deadline in
-                        within a tight deadline in collaboration with academic
+            collaboration with academic mentors.
-                        mentors.
           </p>
         </Project>
       </section>
@@ -156,22 +148,18 @@ import Project from "./Project.vue";
     <div class="no-print w-full h-20"></div>
 
     <div class="a4page gap-10">
-            <section>
+      <div class="w-full flex flex-col sm:flex-row gap-5">
-                <h2>Education</h2>
+        <section class="flex-1">
-                <div class="w-full h-fit flex flex-col sm:flex-row gap-5">
+          <h2>
-                    <div class="flex-1 sm:border-r border-dotted sm:pr-3">
+            <a href="https://www.adam-french.co.uk/pdf/transcript.pdf">
-                        <h3>
-                            <a
-                                href="https://www.adam-french.co.uk/pdf/transcript.pdf"
-                            >
               University of Leeds
             </a>
-                        </h3>
+          </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>
+            <small>Sep 2021 – Jun 2025</small>
           </div>
           <small>BSc Computer Science with Mathematics </small>
           <ul class="list-disc list-inside">
@@ -179,31 +167,24 @@ import Project from "./Project.vue";
             <li>Compiler Design and Construction</li>
             <li>Formal Languages & Finite Automata</li>
             <li>Graph Algorithms & Complexity Theory</li>
-                            <li>
+            <li>Machine Learning, Databases, Computer Processors</li>
-                                Machine Learning · Databases · Computer
-                                Processors
-                            </li>
           </ul>
-                    </div>
+        </section>
-                    <div class="flex-1 sm:pl-3">
+        <section class="flex-1">
-                        <h3>University of Waterloo</h3>
+          <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>
+            <small>Sep 2023 – Apr 2024</small>
           </div>
           <ul class="list-disc list-inside">
             <li>Applied Cryptography</li>
             <li>Introduction to Computer Graphics</li>
-                            <li>
+            <li>Introduction to Rings and Fields with Applications</li>
-                                Introduction to Rings and Fields with
-                                Applications
-                            </li>
           </ul>
-                    </div>
-                </div>
         </section>
+      </div>
       <section>
         <h2>Experience</h2>
         <Project>
@@ -216,9 +197,8 @@ import Project from "./Project.vue";
           </template>
           <p>
             Worked at <em>Belgrave Music Hall</em>,
-                        <em>The Crown and Anchor</em>, and
+            <em>The Crown and Anchor</em>, and <em>BFI Riverfront Kitchen</em>.
-                        <em>BFI Riverfront Kitchen</em>. Developed
+            Developed communication, composure under pressure, and reliability
-                        communication, composure under pressure, and reliability
             in customer-facing roles.
           </p>
         </Project>
@@ -237,175 +217,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.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>