From f3ea83c477d571d767572f5671f64e13ced89841 Mon Sep 17 00:00:00 2001
From: Adam French <adam.a.french@outlook.com>
Date: Fri, 20 Feb 2026 16:13:01 +0000
Subject: [PATCH] changed cv

---
 nginx/vue/src/router/index.js      | 116 +++---
 nginx/vue/src/views/CV.vue         | 603 -----------------------------
 nginx/vue/src/views/CV/CV.vue      | 334 ++++++++++++++++
 nginx/vue/src/views/CV/Project.vue |  17 +
 4 files changed, 409 insertions(+), 661 deletions(-)
 delete mode 100644 nginx/vue/src/views/CV.vue
 create mode 100644 nginx/vue/src/views/CV/CV.vue
 create mode 100644 nginx/vue/src/views/CV/Project.vue

diff --git a/nginx/vue/src/router/index.js b/nginx/vue/src/router/index.js
index da5a06a..bd1d93e 100644
--- a/nginx/vue/src/router/index.js
+++ b/nginx/vue/src/router/index.js
@@ -2,64 +2,64 @@ import { createRouter, createWebHistory } from "vue-router";
 import Home from "@/views/home/Home.vue";
 
 const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
-  routes: [
-    {
-      path: "/",
-      name: "home",
-      component: Home,
-    },
-    {
-      path: "/cv",
-      name: "cv",
-      component: () => import("../views/CV.vue"),
-    },
-    {
-      path: "/admin",
-      name: "admin",
-      component: () => import("../views/Admin.vue"),
-    },
-    {
-      path: "/bookmarks",
-      name: "bookmarks",
-      component: () => import("../views/Bookmarks.vue"),
-    },
-    {
-      path: "/notes/:path(.*)*",
-      name: "notes",
-      component: () => import("../views/Notes.vue"),
-    },
-    {
-      path: "/shrines",
-      name: "shrine links",
-      component: () => import("../views/Shrines.vue"),
-    },
-    {
-      path: "/shrines/gto",
-      name: "gto shrine",
-      component: () => import("../views/shrines/GTO.vue"),
-    },
-    {
-      path: "/shrines/skipskipbenben",
-      name: "skipskipbenben shrine",
-      component: () => import("../views/shrines/Skipskipbenben.vue"),
-    },
-    {
-      path: "/shrines/evangelion",
-      name: "evangelion shrine",
-      component: () => import("../views/shrines/Evangelion.vue"),
-    },
-    {
-      path: "/shrines/demoman",
-      name: "demoman shrine",
-      component: () => import("../views/shrines/Demoman.vue"),
-    },
-    {
-      path: "/:pathMatch(.*)*",
-      name: "404",
-      component: () => import("../views/404.vue"),
-    },
-  ],
+    history: createWebHistory(import.meta.env.BASE_URL),
+    routes: [
+        {
+            path: "/",
+            name: "home",
+            component: Home,
+        },
+        {
+            path: "/cv",
+            name: "cv",
+            component: () => import("../views/CV/CV.vue"),
+        },
+        {
+            path: "/admin",
+            name: "admin",
+            component: () => import("../views/Admin.vue"),
+        },
+        {
+            path: "/bookmarks",
+            name: "bookmarks",
+            component: () => import("../views/Bookmarks.vue"),
+        },
+        {
+            path: "/notes/:path(.*)*",
+            name: "notes",
+            component: () => import("../views/Notes.vue"),
+        },
+        {
+            path: "/shrines",
+            name: "shrine links",
+            component: () => import("../views/Shrines.vue"),
+        },
+        {
+            path: "/shrines/gto",
+            name: "gto shrine",
+            component: () => import("../views/shrines/GTO.vue"),
+        },
+        {
+            path: "/shrines/skipskipbenben",
+            name: "skipskipbenben shrine",
+            component: () => import("../views/shrines/Skipskipbenben.vue"),
+        },
+        {
+            path: "/shrines/evangelion",
+            name: "evangelion shrine",
+            component: () => import("../views/shrines/Evangelion.vue"),
+        },
+        {
+            path: "/shrines/demoman",
+            name: "demoman shrine",
+            component: () => import("../views/shrines/Demoman.vue"),
+        },
+        {
+            path: "/:pathMatch(.*)*",
+            name: "404",
+            component: () => import("../views/404.vue"),
+        },
+    ],
 });
 
 export default router;
diff --git a/nginx/vue/src/views/CV.vue b/nginx/vue/src/views/CV.vue
deleted file mode 100644
index 3b1a787..0000000
--- a/nginx/vue/src/views/CV.vue
+++ /dev/null
@@ -1,603 +0,0 @@
-<template>
-    <main>
-        <div class="a4page">
-            <div class="contact">
-                <h1>Adam French</h1>
-                <!-- <a href="covers.html"><img width=25 height=50 src="img/rune.png"></a> -->
-                <div class="contact-details">
-                    <p>+447563266931</p>
-                    <p>adam.a.french@outlook.com</p>
-                    <p>www.adam-french.co.uk</p>
-                </div>
-            </div>
-
-            <h2>Profile</h2>
-            <p>
-                Recently graduated from the University of Leeds with a BSc
-                Computer Science with Mathematics (International) degree.
-                Currently self-studying and building projects aligned with the
-                type of roles I am seeking. I have a strong background across a
-                variety of programming languages and will be able to quickly get
-                on board with any codebase.
-            </p>
-            <p>
-                I am most keen to work for a company with altruistic values and
-                a focus on durable solutions. Looking forward to learning from
-                experts and collaborating with motivated individuals.
-            </p>
-
-            <h2>Personal Projects</h2>
-            <table>
-                <thead>
-                    <tr>
-                        <th>Project</th>
-                        <th>Skills</th>
-                        <th>Date</th>
-                        <th>Description</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>Personal Websites</td>
-                        <td>Nginx, Vue, Postgres, Docker, Go, Python</td>
-                        <td>Ongoing</td>
-                        <td class="row-leftalign">
-                            My personal site, Currently
-                            <b>self hosted</b>
-                            using <b>listed skills</b>. In the past, I have used
-                            Svelte, React/Redux, SQLite, Rust and Deno.
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>Computer Graphics</td>
-                        <td>Rust, Linear Algebra, Multithreading</td>
-                        <td>2023</td>
-                        <td class="row-leftalign">
-                            A multithreaded, recursive ray tracer implemented in
-                            Rust.
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>Mobile Automata</td>
-                        <td>Mathematica, JS</td>
-                        <td>2024</td>
-                        <td class="row-leftalign">
-                            Investigated properties of cellular automata by
-                            observing emergent behaviors through custom
-                            simulations.
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>Arduino Programming & Circuits</td>
-                        <td>C++, Soldering, Embedded Systems</td>
-                        <td>2022 - 2025</td>
-                        <td class="row-leftalign">
-                            Created decorations using salvaged components from
-                            discarded electronics.
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>Memory Palace Website</td>
-                        <td>TS, Rust, React, Redux, SQLite</td>
-                        <td>2025</td>
-                        <td class="row-leftalign">
-                            Full-stack web application aiming to make the
-                            “memory palace” memorization technique easy.
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>3D Printing</td>
-                        <td>FreeCAD</td>
-                        <td>Ongoing</td>
-                        <td class="row-leftalign">
-                            Designing quality of life objects using FreeCAD and
-                            printing with a BambuLab A1.
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-
-            <h2>Education</h2>
-            <table>
-                <thead>
-                    <tr>
-                        <th>Location</th>
-                        <th>Date</th>
-                        <th>Description</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>The University of Leeds</td>
-                        <td>
-                            <!-- <div style="display: flex; flex-direction: column; align-items: center;"> -->
-                            <!--     <span>2021</span> -->
-                            <!--     <span>to</span> -->
-                            <!--     <span>2025</span> -->
-                            <!-- </div> -->
-                            2021-2025
-                        </td>
-                        <td class="row-leftalign">
-                            <strong
-                                >BSc Computer Science with Mathematics
-                                (International)</strong
-                            ><br />
-                            <strong
-                                >Average:
-                                81.1%&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;(First
-                                Class Honours) </strong
-                            ><br />
-                            <strong>Relevant Courses: </strong>
-                            Procedural Programming, Object Oriented Programming,
-                            Algorithms and Data Structures I & II, Databases,
-                            Computer Processors, Compiler Design and
-                            Construction, Formal Languages and Finite Automata,
-                            Probability and Statistics I, Machine Learning,
-                            Graph Algorithms & Complexity Theory
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>The University of Waterloo</td>
-                        <td>
-                            <!-- <div style="display: flex; flex-direction: column; align-items: center;"> -->
-                            <!--     <span>2023</span> -->
-                            <!--     <span>to</span> -->
-                            <!--     <span>2024</span> -->
-                            <!-- </div> -->
-                            2023-2024
-                        </td>
-                        <td class="row-leftalign">
-                            <strong>Average: 74.5%</strong>
-                            <br />
-                            <strong>Relevant Courses:</strong>
-                            Applied Cryptography, Introduction to Computer
-                            Graphics, Introduction to Rings and Fields with
-                            Applications<br /><br />
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-        <div class="a4page">
-            <h2>Experience</h2>
-            <table>
-                <thead>
-                    <tr>
-                        <th>Role</th>
-                        <th>Location</th>
-                        <th>Date</th>
-                        <th>Duties</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>Student</td>
-                        <td>Wolfram Summer School</td>
-                        <td>2024</td>
-                        <td class="row-leftalign">
-                            Designed and completed a time-constrained research
-                            project exploring Mobile Automata and conditions for
-                            computational reversibility. Communicated findings
-                            through visualizations and presentations.
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>Bartender, Waiter, Cashier</td>
-                        <td>Hospitality Venues</td>
-                        <td>2018-2023</td>
-                        <td class="row-leftalign">
-                            Delivered heartfelt customer service in various
-                            fast-paced, high-pressure hospitality environments.
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-            <h2>Commitments</h2>
-            <table>
-                <thead>
-                    <tr>
-                        <th>Activity</th>
-                        <th>Date</th>
-                        <th>Details</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>Learning Mandarin</td>
-                        <td>Ongoing</td>
-                        <td class="row-leftalign">
-                            Aiming to complete HSK 3 proficiency exam by
-                            December 2026
-                        </td>
-                    </tr>
-                    <!-- <tr> -->
-                    <!--     <td>Cybersecurity Training</td> -->
-                    <!--     <td>Ongoing</td> -->
-                    <!--     <td class="row-leftalign"> -->
-                    <!--     Using <em>pwn.college, tryhackme.com</em> to learn pentesting techniques.</td> -->
-                    <!-- </tr> -->
-                    <tr>
-                        <td>Sports Activities</td>
-                        <td>Ongoing</td>
-                        <td class="row-leftalign">
-                            Run weekly, active gym attendee, regularly go
-                            hiking.
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>meetup.com</td>
-                        <td>Ongoing</td>
-                        <td class="row-leftalign">
-                            Attending various tech meetups and social events.
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>Boardgames</td>
-                        <td>Ongoing</td>
-                        <td class="row-leftalign">
-                            Meet up regularly to play the game
-                            <i>Root</i>.
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>Leetcode</td>
-                        <td>Ongoing</td>
-                        <td class="row-leftalign">
-                            Do the leetcode daily challenge and hone in on
-                            different programming languages.
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>Construction and Landscaping</td>
-                        <td>Ongoing</td>
-                        <td class="row-leftalign">
-                            Involved in building a house in Bulgaria.
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>University of Waterloo Film Club</td>
-                        <td>2023-2024</td>
-                        <td class="row-leftalign">
-                            Worked on student films <em>“Moon King”</em> and
-                            <em>“HAM”</em>, available online.
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>Socratica</td>
-                        <td>2023-2024</td>
-                        <td class="row-leftalign">
-                            Worked with individuals exploring innovative tech.
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>University of Leeds Hockey Club</td>
-                        <td>2022-2023</td>
-                        <td class="row-leftalign">
-                            Played for the University of Leeds Hockey Club.
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>Royal Air Force Air Cadets</td>
-                        <td>2017-2020</td>
-                        <td class="row-leftalign">
-                            Achieved the role of Sergeant and “Best Cadet"
-                            award.
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-
-            <!-- <div class="interests"> -->
-            <!--     <table> -->
-            <!--         <tr><th>Personal qualities</th></tr> -->
-            <!--         <tr><td>Intuitive</td></tr> -->
-            <!--         <tr><td>Communicative</td></tr> -->
-            <!--         <tr><td>Adaptable</td></tr> -->
-            <!--         <tr><td>Versatile</td></tr> -->
-            <!--         <tr><td>Diligent</td></tr> -->
-            <!--     </table> -->
-            <!--     <table> -->
-            <!--         <tr><th>Interests</th></tr> -->
-            <!--         <tr><td>Neuroscience</td></tr> -->
-            <!--         <tr><td>Bouldering</td></tr> -->
-            <!--         <tr><td>Science Fiction</td></tr> -->
-            <!--         <tr><td>Mathematics</td></tr> -->
-            <!--         <tr><td>Hiking</td></tr> -->
-            <!--     </table> -->
-            <!--     <table> -->
-            <!--         <tr><th>Languages</th></tr> -->
-            <!--         <tr><td>Rust</td></tr> -->
-            <!--         <tr><td>HTML/JS</td></tr> -->
-            <!--         <tr><td>C/C++</td></tr> -->
-            <!--         <tr><td>React/Vue</td></tr> -->
-            <!--         <tr><td>Python</td></tr> -->
-            <!--     </table> -->
-            <!-- </div> -->
-        </div>
-    </main>
-</template>
-
-<style scoped>
-/* Fonts */
-/*@font-face {
-    font-family: "AldoTheApache";
-    src: url("/fonts/AldotheApache.ttf") format("truetype");
-    font-weight: normal;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: "RobotFont";
-    src: url("/fonts/Robot_Font.otf") format("opentype");
-    font-weight: normal;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: "m12";
-    src: url("/fonts/m12.ttf") format("truetype");
-    font-weight: normal;
-    font-style: normal;
-}*/
-
-@font-face {
-    font-family: "big_noodle_titling";
-    src: url("/fonts/big_noodle_titling.ttf") format("truetype");
-    font-weight: normal;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: "CreatoDisplay";
-    src: url("/fonts/CreatoDisplay-Bold.otf") format("opentype");
-    font-weight: normal;
-    font-style: normal;
-}
-
-/* Variables */
-* {
-    /* Blue - Beige */
-    /* --primary: #153448;
-  --secondary: #3C5B6F;
-  --tertiary: #948979;
-  --quaternary: #f5bb78;
-  --background: #DFD0B8; */
-
-    /* Blue - Turqouise */
-    /* --primary: #161D6F;
-  --secondary: #0B2F9F;
-  --tertiary: #98DED9;
-  --quaternary: #C7FFD8;
-  --background: #C2EFD1; */
-
-    /* Red - Blue */
-    /* --primary: #ff204e; */
-    /* --secondary: #a0153e; */
-    /* --tertiary: #5d0341; */
-    /* --quaternary: #3a0e41; */
-    /* --background: #00224d; */
-
-    /* Blue - Brown */
-    /* --primary: #35374B; */
-    /* --secondary: #344955; */
-    /* --tertiary: #50727b; */
-    /* --quaternary: #78a083; */
-    /* --background: #c7b077; */
-
-    /* Black - White */
-    --primary: black;
-    --secondary: black;
-    --tertiary: black;
-    --quaternary: #cccccc;
-    --background: white;
-
-    /* Blue - White */
-    /* --primary: #201e43; */
-    /* --secondary: #134b70; */
-    /* --tertiary: #508c9b; */
-    /* --quaternary: #cceeee; */
-    /* --background: #eeeeee; */
-
-    --font-heading: big_noodle_titling;
-    --font-text: CreatoDisplay;
-    --font-size-text: 90%;
-    --font-size-heading: 2.5em;
-    --font-size-subheading: 1.5em;
-    --font-size-tableheading: 1.2em;
-}
-
-/* A5 Page */
-.a5page {
-    /* overflow: scroll; */
-    display: flex;
-    flex-direction: column;
-    font-family: var(--font-text);
-    height: 148mm;
-    width: 210mm;
-    padding: 4mm;
-    box-sizing: border-box;
-    background-color: var(--background);
-    box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2);
-    border: solid 2px var(--primary);
-}
-
-/* A4 Page */
-.a4page {
-    line-height: 1.6;
-    font-family: var(--font-text);
-    width: 210mm;
-    /* Standard A4 width */
-    height: 297mm;
-    /* Standard A4 height */
-    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: auto;
-    /* Enables scrolling when content exceeds height */
-    margin: auto auto;
-    /* Centers the page horizontally */
-}
-
-/* Component Styling */
-main {
-    padding: 0px;
-    display: flex;
-    flex-direction: column;
-    height: fit-content;
-}
-
-span {
-    height: 2em;
-}
-
-h1,
-h2,
-h3,
-h4 {
-    border: none;
-    color: var(--primary);
-    font-family: var(--font-heading);
-    text-transform: capitalize;
-    text-align: center;
-}
-
-h1 {
-    font-size: var(--font-size-heading);
-}
-
-h2 {
-    margin: 0px;
-    margin-bottom: 3px;
-    border-bottom: 1px solid var(--primary);
-    font-size: var(--font-size-subheading);
-}
-
-p {
-    color: var(--secondary);
-    font-size: var(--font-size-text);
-    margin-top: 0.3em;
-    margin-bottom: 0.5em;
-}
-
-table {
-    color: var(--secondary);
-    border-collapse: collapse;
-    border: 1px solid black;
-}
-
-td {
-    /* border: 2px solid var(--tertiary); */
-    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-tableheading);
-    background-color: var(--quaternary);
-    text-align: left;
-}
-
-a {
-    text-decoration: none;
-    color: inherit;
-}
-
-a:hover,
-a:visited {
-    color: inherit;
-}
-
-/* Classes */
-/* Cover Navigation (for ease of use) */
-.cover-nav {
-    position: fixed;
-    top: 0.5vh;
-    /* Position the element at the top of the screen */
-    left: 80vw;
-    /* Position the element at the left of the screen */
-    border: 2px solid var(--tertiary);
-    width: 19.5vw;
-    /* Make the element span the width of the screen (optional) */
-    background-color: var(--background);
-    /* Set a background color to avoid overlap issues */
-    z-index: 1000;
-    /* Ensures the element is above other content */
-}
-
-.cover-nav td,
-tr {
-    font-family: var(--font-text);
-    border: 0;
-}
-
-.cover-nav th {
-    text-align: center;
-    align-items: center;
-    border-bottom: 2px solid var(--tertiary);
-}
-
-@media print {
-    .no-print {
-        display: none !important;
-    }
-}
-
-/* Cover letter styling */
-textarea {
-    width: 100%;
-    height: 100%;
-    padding: 10px;
-    box-sizing: border-box;
-    border: 0px solid var(--primary);
-    resize: none;
-    font-family: var(--font-text);
-}
-
-/* Contact At Top of Page */
-.contact {
-    all: unset;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    border-bottom: 1px solid var(--primary);
-}
-
-.contact-details {
-    all: unset;
-    display: flex;
-    flex-direction: column;
-    text-align: right;
-}
-
-.contact-details p {
-    margin: 1px 0;
-}
-
-/* Interests and Skills at bottom of page */
-.interests {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    border-top: solid 2px var(--primary);
-}
-
-.interests td,
-tr,
-th {
-    border: 0;
-}
-
-.row-leftalign {
-    /* background-image: url("https://www.fridakahlo.org/assets/img/paintings/without-hope.jpg"); */
-    text-align: left;
-}
-</style>
diff --git a/nginx/vue/src/views/CV/CV.vue b/nginx/vue/src/views/CV/CV.vue
new file mode 100644
index 0000000..927b786
--- /dev/null
+++ b/nginx/vue/src/views/CV/CV.vue
@@ -0,0 +1,334 @@
+<script setup>
+import Project from "./Project.vue";
+</script>
+
+<template>
+    <main>
+        <div class="a4page">
+            <div class="flex flex-row justify-between">
+                <h1 class="name">Adam French</h1>
+                <!-- <a href="covers.html"><img width=25 height=50 src="img/rune.png"></a> -->
+                <div class="contact-details text-right">
+                    <p>+447563266931</p>
+                    <p>adam.a.french@outlook.com</p>
+                    <a href="https://www.adam-french.co.uk">
+                        www.adam-french.co.uk
+                    </a>
+                </div>
+            </div>
+
+            <h2>Profile</h2>
+            <p>
+                Recently graduated from the University of Leeds with a BSc
+                Computer Science with Mathematics (International) degree.
+                Currently self-studying and building projects aligned with the
+                type of roles I am seeking. I have experience across full stack
+                CI/CD development, and will be able to quickly pick up any
+                codebase.
+            </p>
+            <p>
+                I am most keen to work for a company with altruistic values and
+                look forward to learning and sharing ideas with experts.
+            </p>
+
+            <h2>Projects</h2>
+
+            <Project class="border-b border-dotted">
+                <template v-slot:left>
+                    <a
+                        href="https://www.adam-french.co.uk/gitea/adamf/web_server.git"
+                    >
+                        web_server.git
+                    </a>
+                </template>
+                <template v-slot:top>
+                    <small>
+                        Nginx, Vue, Postgres, Docker, Go, Python, Rust -> Wasm,
+                        Git Actions
+                    </small>
+                    <small>2025</small>
+                </template>
+                <p>
+                    My personal site, Currently <em>self hosted</em> and
+                    automatically maintained. In the past I have used: Svelte,
+                    React/Redux, SQLite, Rust Actix and Deno.
+                </p>
+            </Project>
+            <Project class="border-b border-dotted">
+                <template v-slot:left>
+                    <a
+                        href="https://www.adam-french.co.uk/gitea/adamf/tour.git"
+                    >
+                        tour.git
+                    </a>
+                </template>
+                <template v-slot:top>
+                    <small>Rust</small>
+                    <small>2026</small>
+                </template>
+                <p>
+                    A command line tool for creating and viewing code tutorials.
+                    Works similarly to git but allows easy traversal of commit
+                    history accompanied by explanations.
+                </p>
+            </Project>
+            <Project class="border-b border-dotted">
+                <template v-slot:left>
+                    <a
+                        href="https://www.adam-french.co.uk/gitea/adamf/rust-raytracer.git"
+                    >
+                        rust-raytracer.git
+                    </a>
+                </template>
+                <template v-slot:top>
+                    <small>Rust, Linear Algebra, Multithreading</small>
+                    <small>2023</small>
+                </template>
+                <p>
+                    A multithreaded, recursive ray tracer implemented in Rust as
+                    part of my university's computer graphics course.
+                </p>
+            </Project>
+            <Project>
+                <template #left>
+                    <p>
+                        <a
+                            class="text-center w-full"
+                            href="https://community.wolfram.com/groups/-/m/t/3210947"
+                        >
+                            Wolfram Summer School
+                        </a>
+                    </p>
+                </template>
+                <template #top>
+                    <small>Student</small>
+                    <small>2024</small>
+                </template>
+                <p>
+                    Designed and completed a time-constrained research project
+                    exploring Mobile Automata. Communicated findings through
+                    visualizations and presentations.
+                </p>
+            </Project>
+            <h2>University & Modules</h2>
+            <div class="w-full h-fit flex-row flex gap-5">
+                <div class="pr-5 flex-1 border-r border-dotted">
+                    <h3>University of Leeds</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>
+                        <li>Procedural Programming</li>
+                        <li>Object Oriented Programming,</li>
+                        <li></li>
+                        <li>Algorithms and Data Structures I & II</li>
+
+                        <li>Databases</li>
+                        <li>Computer Processors</li>
+                        <li>Compiler Design and Construction</li>
+
+                        <li>Formal Languages and Finite Automata</li>
+                        <li>Probability and Statistics I</li>
+                        <li>Machine Learning</li>
+                        <li>Graph Algorithms & Complexity Theory</li>
+                    </ul>
+                </div>
+                <div class="flex-1">
+                    <h3>The University of Waterloo</h3>
+                    <div
+                        class="flex-row flex place-content-between m-auto place-items-center"
+                    >
+                        <small>---</small>
+                        <small> 2023-2024 </small>
+                    </div>
+                    <div class="flex-row flex place-content-between"></div>
+                    <ul>
+                        <li>Applied Cryptography</li>
+                        <li>Introduction to Computer Graphics</li>
+                        <li>
+                            Introduction to Rings and Fields with Applications
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+        <!-- <div class="a4page"> -->
+        <!--     <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 venues including: -->
+        <!--             <em>Belgrave Music Hall</em>, -->
+        <!--             <em>The Crown and Anchor Eastbourne</em>, -->
+        <!--             <em>To The Rise Bakery</em>, -->
+        <!--             <em>BFI Riverfront Kitchen</em>. -->
+        <!--         </p> -->
+        <!--     </Project> -->
+        <!--     <h2>Commitments</h2> -->
+        <!--     <ul> -->
+        <!--         <li>Gym</li> -->
+        <!--         <li>Climbing</li> -->
+        <!--         <li>Meetup.com</li> -->
+        <!--         <li>Boardgames</li> -->
+        <!--         <li>Leetcode</li> -->
+        <!--         <li>Learning Mandarin</li> -->
+        <!--     </ul> -->
+        <!-- </div> -->
+    </main>
+</template>
+
+<style scoped>
+/* Fonts */
+@font-face {
+    font-family: "big_noodle_titling";
+    src: url("/fonts/big_noodle_titling.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "CreatoDisplay";
+    src: url("/fonts/CreatoDisplay-Bold.otf") format("opentype");
+    font-weight: normal;
+    font-style: normal;
+}
+
+/* Variables */
+* {
+    /* Black - White */
+    --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;
+    /* Standard A4 width */
+    height: 297mm;
+    /* Standard A4 height */
+    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;
+    /* Enables scrolling when content exceeds height */
+    margin: auto auto;
+    /* Centers the page horizontally */
+}
+
+/* Component Styling */
+main {
+    padding: 0px;
+    display: flex;
+    flex-direction: column;
+    height: fit-content;
+}
+
+span {
+    height: 2em;
+}
+
+h1,
+h2,
+h3,
+h4 {
+    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 {
+    /* border: 2px solid var(--tertiary); */
+    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);
+}
+
+li {
+    color: var(--primary);
+}
+</style>
diff --git a/nginx/vue/src/views/CV/Project.vue b/nginx/vue/src/views/CV/Project.vue
new file mode 100644
index 0000000..1a31318
--- /dev/null
+++ b/nginx/vue/src/views/CV/Project.vue
@@ -0,0 +1,17 @@
+<script setup></script>
+
+<template>
+    <div class="flex-row flex">
+        <div class="w-2/7 p-5 m-auto">
+            <slot name="left" />
+        </div>
+        <div class="w-full p-2">
+            <div
+                class="flex-row flex place-content-between m-auto place-items-center"
+            >
+                <slot name="top" />
+            </div>
+            <slot />
+        </div>
+    </div>
+</template>