Making all CV's abide by same styling
Some checks failed
Deploy with Docker Compose / deploy (push) Has been cancelled

This commit is contained in:
2026-04-27 11:45:01 +01:00
parent a116ec2614
commit 9bcb21910d
9 changed files with 1205 additions and 2468 deletions

View File

@@ -3,230 +3,227 @@
/* Route transitions */
.slide-enter-active,
.slide-leave-active {
transition:
transform 0.3s ease,
opacity 0.3s ease;
transition:
transform 0.3s ease,
opacity 0.3s ease;
}
.slide-enter-from {
transform: translateX(30px);
opacity: 0;
transform: translateX(30px);
opacity: 0;
}
.slide-leave-to {
transform: translateX(-30px);
opacity: 0;
transform: translateX(-30px);
opacity: 0;
}
/* PRINTING */
@media print {
.no-print,
.no-print * {
display: none !important;
margin: 0px;
padding: 0px;
width: 0x;
height: 0px;
}
.no-print,
.no-print * {
display: none !important;
margin: 0px;
padding: 0px;
width: 0x;
height: 0px;
}
}
/* END OF PRINTING */
/* FONTS */
@font-face {
font-family: "big_noodle_titling";
src: url("/fonts/big_noodle_titling.woff2") format("woff2");
font-weight: normal;
font-style: normal;
font-display: swap;
font-family: "big_noodle_titling";
src: url("/fonts/big_noodle_titling.woff2") format("woff2");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "CreatoDisplay";
src: url("/fonts/CreatoDisplay-Bold.woff2") format("woff2");
font-weight: normal;
font-style: normal;
font-display: swap;
font-family: "CreatoDisplay";
src: url("/fonts/CreatoDisplay-Bold.woff2") format("woff2");
font-weight: normal;
font-style: normal;
font-display: swap;
}
/* END OF FONTS */
/* VARIABLES */
:root {
/* RED, WHITE, BLACK are standard*/
--portal_grey: #dddddd;
--portal_orange: #ff9a00;
--portal_light_orange: #ff5d00;
--portal_blue: #0065ff;
--portal_light_blue: #00a2ff;
/* RED, WHITE, BLACK are standard*/
--portal_grey: #dddddd;
--portal_orange: #ff9a00;
--portal_light_orange: #ff5d00;
--portal_blue: #0065ff;
--portal_light_blue: #00a2ff;
/* MAIN COLORS */
--primary: #55ffbb;
--secondary: #62ff57;
--tertiary: #ff579a;
--quaternary: #024942;
/* MAIN COLORS */
--primary: #55ffbb;
--secondary: #62ff57;
--tertiary: #ff579a;
--quaternary: #024942;
/* BACKGROUND COLORS */
--bg_primary: #1b110e;
--bg_secondary: #04080f;
--bg_tertiary: #0c1c10;
--link: #222;
/* BACKGROUND COLORS */
--bg_primary: #1b110e;
--bg_secondary: #04080f;
--bg_tertiary: #0c1c10;
--link: #222;
--bdr: 2px;
--bdr: 2px;
--spacing: 3px;
--spacing: 3px;
/* FONTS USED */
--font_heading: big_noodle_titling;
--font_default: CreatoDisplay;
/* FONTS USED */
--font_heading: big_noodle_titling;
--font_default: CreatoDisplay;
}
@theme {
--color-primary: var(--primary);
--color-secondary: var(--secondary);
--color-tertiary: var(--tertiary);
--color-quaternary: var(--quaternary);
--color-primary: var(--primary);
--color-secondary: var(--secondary);
--color-tertiary: var(--tertiary);
--color-quaternary: var(--quaternary);
--color-bg_primary: var(--bg_primary);
--color-bg_secondary: var(--bg_secondary);
--color-link: var(--link);
--color-bg_primary: var(--bg_primary);
--color-bg_secondary: var(--bg_secondary);
--color-link: var(--link);
--borderWidth-primary: var(--primary);
--borderWidth-secondary: var(--secondary);
--borderWidth-tertiary: var(--tertiary);
--borderWidth-primary: var(--primary);
--borderWidth-secondary: var(--secondary);
--borderWidth-tertiary: var(--tertiary);
--font-heading: var(--font_heading);
--default-font-family: var(--font_default);
--font-heading: var(--font_heading);
--default-font-family: var(--font_default);
}
/* END OF VARIABLES */
/* ELEMENTS */
body {
margin: 0 auto;
width: 100%;
height: 100vh;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: var(--primary) var(--bg_secondary);
margin: 0 auto;
width: 100%;
height: 100vh;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: var(--primary) var(--bg_secondary);
}
/* Chrome/Edge scrollbar styling */
::-webkit-scrollbar {
width: 6px;
height: 6px;
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: var(--bg_secondary);
background: var(--bg_secondary);
}
::-webkit-scrollbar-thumb {
background: var(--quaternary);
border-radius: 3px;
background: var(--quaternary);
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--primary);
background: var(--primary);
}
input {
color: var(--secondary);
border-color: var(--primary);
border-width: 1px;
color: var(--secondary);
border-color: var(--primary);
border-width: 1px;
}
small {
color: var(--tertiary);
color: var(--tertiary);
}
code {
color: var(--tertiary);
color: var(--tertiary);
}
ul {
color: var(--tertiary);
color: var(--tertiary);
}
li {
color: var(--tertiary);
color: var(--tertiary);
}
h1,
h2,
h3,
h4 {
margin: 0.25rem;
font-family: var(--font_heading);
color: var(--primary);
margin: 0.25rem;
font-family: var(--font_heading);
color: var(--primary);
}
h3,
h4 {
font-size: 1.125rem;
line-height: 1.75rem;
font-size: 1.125rem;
}
h1 {
font-size: 1.5rem;
line-height: 2rem;
font-size: 1.5rem;
}
h2 {
font-size: 1.25rem;
line-height: 1.75rem;
font-size: 1.25rem;
}
p {
color: var(--secondary);
color: var(--secondary);
}
a {
color: var(--primary);
background-color: var(--link);
text-align: center;
font-family: var(--font_heading);
letter-spacing: 0.025em;
color: var(--primary);
background-color: var(--link);
text-align: center;
font-family: var(--font_heading);
letter-spacing: 0.025em;
}
input,
textarea {
color: var(--primary);
border-width: 1px;
padding: 0.5rem;
width: 100%;
color: var(--primary);
border-width: 1px;
padding: 0.5rem;
width: 100%;
}
input::placeholder,
textarea::placeholder {
color: var(--secondary);
opacity: 0.5;
color: var(--secondary);
opacity: 0.5;
}
table {
border-color: var(--primary);
border-width: 1px;
color: var(--primary);
border-color: var(--primary);
border-width: 1px;
color: var(--primary);
}
td {
gap: 0.25rem;
gap: 0.25rem;
}
tr {
border-color: var(--primary);
border-bottom-width: 1px;
color: var(--primary);
border-color: var(--primary);
border-bottom-width: 1px;
color: var(--primary);
}
th {
padding-right: 0.75rem;
padding-left: 0.75rem;
border-right-width: 1px;
border-style: dotted;
border-color: var(--tertiary);
padding-right: 0.75rem;
padding-left: 0.75rem;
border-right-width: 1px;
border-style: dotted;
border-color: var(--tertiary);
}
td {
padding-right: 0.75rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-left: 0.75rem;
}
/* END OF ELEMENTS */
@@ -234,146 +231,146 @@ td {
/* CLASSES */
.img-stamp {
width: 99px;
height: 55px;
width: 99px;
height: 55px;
}
/* BORDERS */
.bdr-1 {
border-width: 30px;
border-image: url("/img/borders/border1.gif") 30 round;
border-width: 30px;
border-image: url("/img/borders/border1.gif") 30 round;
}
.bdr-1-inv {
border-width: 30px;
border-image: url("/img/borders/border1inv.gif") 30 round;
border-width: 30px;
border-image: url("/img/borders/border1inv.gif") 30 round;
}
.bdr-2 {
border-width: 5px;
border-image: url("/img/borders/border4.gif") 7 round;
border-width: 5px;
border-image: url("/img/borders/border4.gif") 7 round;
}
.bdr-cv {
border-width: 30px;
border-image: url("/img/borders/bordercv.png") 30 round;
border-width: 30px;
border-image: url("/img/borders/bordercv.png") 30 round;
}
/* A5 Page */
.a5page-landscape {
margin: 0;
box-sizing: content-box;
height: 148mm;
width: 210mm;
margin: 0;
box-sizing: content-box;
height: 148mm;
width: 210mm;
}
.a5page-portrait {
margin: 0;
box-sizing: content-box;
width: 148mm;
height: 210mm;
margin: 0;
box-sizing: content-box;
width: 148mm;
height: 210mm;
}
/* A4 Page */
.a4page-portrait {
margin: 0;
box-sizing: content-box;
width: 210mm;
height: 297mm;
margin: 0;
box-sizing: content-box;
width: 210mm;
height: 297mm;
}
.a4page-landscape {
margin: 0;
box-sizing: content-box;
height: 210mm;
width: 297mm;
margin: 0;
box-sizing: content-box;
height: 210mm;
width: 297mm;
}
/* END OF CLASSES */
/* PHONE */
@media (max-width: 850px) {
.a4page-portrait {
width: 100%;
/* fill mobile width */
height: fit-content;
margin: 0 auto;
/* center horizontally */
box-sizing: border-box;
}
.a4page-portrait {
width: 100%;
/* fill mobile width */
height: fit-content;
margin: 0 auto;
/* center horizontally */
box-sizing: border-box;
}
.a4page-landscape {
width: 100%;
/* fill mobile width */
height: fit-content;
margin: 0 auto;
/* center horizontally */
box-sizing: border-box;
}
.a4page-landscape {
width: 100%;
/* fill mobile width */
height: fit-content;
margin: 0 auto;
/* center horizontally */
box-sizing: border-box;
}
}
@media (max-width: 600px) {
.a5page-portrait {
width: 100%;
height: fit-content;
margin: 0 auto;
box-sizing: border-box;
}
.a5page-portrait {
width: 100%;
height: fit-content;
margin: 0 auto;
box-sizing: border-box;
}
.a5page-landscape {
width: 100%;
height: fit-content;
margin: 0 auto;
box-sizing: border-box;
}
.a5page-landscape {
width: 100%;
height: fit-content;
margin: 0 auto;
box-sizing: border-box;
}
}
.tl {
position: absolute;
top: 0;
left: 0;
position: absolute;
top: 0;
left: 0;
}
.tr {
position: absolute;
top: 0;
right: 0;
position: absolute;
top: 0;
right: 0;
}
.bl {
position: absolute;
bottom: 0;
left: 0;
position: absolute;
bottom: 0;
left: 0;
}
.br {
position: absolute;
bottom: 0;
right: 0;
position: absolute;
bottom: 0;
right: 0;
}
.background {
position: fixed;
position: fixed;
}
.halftone {
--dot_size: 4px;
--bg_size: 12px;
--bg_pos: calc(var(--bg_size) / 2);
--blur: 0%;
--dot_size: 4px;
--bg_size: 12px;
--bg_pos: calc(var(--bg_size) / 2);
--blur: 0%;
background-color: var(--bg_secondary);
background-image:
linear-gradient(to top, transparent 0%, var(--bg_primary) 100%),
radial-gradient(
circle at center,
var(--bg_tertiary) var(--dot_size),
transparent var(--blur)
);
background-size:
100% 100%,
var(--bg_size) var(--bg_size);
background-position:
0 0,
0 0;
background-color: var(--bg_secondary);
background-image:
linear-gradient(to top, transparent 0%, var(--bg_primary) 100%),
radial-gradient(
circle at center,
var(--bg_tertiary) var(--dot_size),
transparent var(--blur)
);
background-size:
100% 100%,
var(--bg_size) var(--bg_size);
background-position:
0 0,
0 0;
}

View File

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

View File

@@ -3,408 +3,219 @@ import Project from "./Project.vue";
</script>
<template>
<main>
<div class="no-print w-full h-20"></div>
<div class="a4page justify-between">
<section>
<div class="flex flex-col sm:flex-row sm:justify-between">
<h1 class="name">Adam French</h1>
<div class="contact-details sm:text-right">
<p>+447563266931</p>
<p>adam.a.french@outlook.com</p>
<h4>
<a href="https://www.adam-french.co.uk">
www.adam-french.co.uk
</a>
</h4>
</div>
</div>
</section>
<section>
<h2>Profile</h2>
<p>
First Class Honours graduate in Computer Science with
Mathematics from the University of Leeds (81.1%), with a
year abroad at the University of Waterloo. Strong background
in systems programming, API design, database management, and
infrastructure automation. Keen to build reliable,
performant backend services in a collaborative engineering
team.
</p>
</section>
<section>
<h2>Skills</h2>
<div class="skills-grid">
<div>
<strong>Languages</strong><br /><small
>Go, Rust, Python, SQL, JavaScript /
TypeScript</small
>
</div>
<div>
<strong>Backend</strong><br /><small
>REST, GraphQL, gRPC, JWT Auth, WebSockets,
Middleware</small
>
</div>
<div>
<strong>Infrastructure</strong><br /><small
>Docker, Nginx, PostgreSQL, SQLite, Git Actions,
Linux</small
>
</div>
</div>
</section>
<section>
<h2>Projects</h2>
<Project class="border-b border-dotted">
<template v-slot:left>
<h4>
<a
href="https://www.adam-french.co.uk/gitea/adamf/web_server.git"
>
web_server.git
</a>
</h4>
</template>
<template v-slot:top>
<small>
Go, Gin, GraphQL, PostgreSQL, GORM, Docker, Nginx,
JWT Auth, Git Actions
</small>
<small>2025</small>
</template>
<p>
Self-hosted personal website with a Go backend serving a
GraphQL API, JWT authentication, Spotify OAuth
integration, and WebSocket messaging. Fully
containerised with Docker Compose and automated CI/CD
via Git Actions.
</p>
</Project>
<Project class="border-b border-dotted">
<template v-slot:left>
<h4>
<a
href="https://www.adam-french.co.uk/gitea/adamf/tour.git"
>
tour.git
</a>
</h4>
</template>
<template v-slot:top>
<small>Rust, CLI, File I/O</small>
<small>2026</small>
</template>
<p>
CLI tool for building and navigating interactive code
tutorials, with version-traversal semantics inspired by
Git. Designed for robustness with comprehensive error
handling and structured file operations.
</p>
</Project>
<Project class="border-b border-dotted">
<template v-slot:left>
<h4>
<a
href="https://www.adam-french.co.uk/gitea/adamf/rust-raytracer.git"
>
rust-raytracer.git
</a>
</h4>
</template>
<template v-slot:top>
<small>Rust, Multithreading, Performance</small>
<small>2023</small>
</template>
<p>
Parallelised recursive ray tracer leveraging Rust's
ownership model for safe concurrency. Focused on
algorithmic efficiency, low-level memory management, and
multi-core utilisation.
</p>
</Project>
<Project>
<template #left>
<h4>
<a
class="text-center w-full"
href="https://community.wolfram.com/groups/-/m/t/3210947"
>
Wolfram Summer School
</a>
</h4>
</template>
<template #top>
<small>Wolfram Mathematica</small>
<small>2024</small>
</template>
<p>
Research project on Mobile Automata with data
visualisation and academic presentation. Delivered
within a tight deadline in collaboration with academic
mentors.
</p>
</Project>
</section>
<section>
<h2>Education</h2>
<div class="w-full h-fit flex flex-col sm:flex-row gap-5">
<div class="flex-1 sm:border-r border-dotted sm:pr-3">
<h3>
<a
href="https://www.adam-french.co.uk/pdf/transcript.pdf"
>
University of Leeds
</a>
</h3>
<div
class="flex-row flex place-content-between m-auto place-items-center"
>
<small>First Class Honours (81.1%)</small>
<small>20212025</small>
</div>
<small>BSc Computer Science with Mathematics </small>
<ul class="list-disc list-inside">
<li>Compiler Design and Construction</li>
<li>Graph Algorithms & Complexity Theory</li>
<li>Algorithms & Data Structures I & II</li>
<li>Databases · Computer Processors</li>
</ul>
</div>
<div class="flex-1 sm:pl-3">
<h3>University of Waterloo</h3>
<div
class="flex-row flex place-content-between m-auto place-items-center"
>
<small>Year abroad</small>
<small>20232024</small>
</div>
<ul class="list-disc list-inside">
<li>Applied Cryptography</li>
<li>Introduction to Computer Graphics</li>
<li>
Introduction to Rings and Fields with
Applications
</li>
<li>Formal Languages & Finite Automata</li>
</ul>
</div>
</div>
</section>
<main class="cv-template">
<div class="no-print w-full h-20"></div>
<div class="a4page justify-between">
<section>
<div class="flex flex-col sm:flex-row sm:justify-between">
<h1 class="name">Adam French</h1>
<div class="contact-details">
<p>London, United Kingdom</p>
<p>+447563266931</p>
<p>adam.a.french@outlook.com</p>
<p>
<a href="https://www.adam-french.co.uk">
www.adam-french.co.uk
</a>
</p>
</div>
</div>
</section>
<div class="no-print w-full h-20"></div>
<section>
<h2>Profile</h2>
<p>
First Class Honours graduate in Computer Science with Mathematics from
the University of Leeds (81.1%), with a year abroad at the University
of Waterloo. Strong background in systems programming, API design,
database management, and infrastructure automation. Keen to build
reliable, performant backend services in a collaborative engineering
team.
</p>
</section>
<div class="a4page gap-10">
<section>
<h2>Experience</h2>
<Project>
<template #left>
<p>Hospitality</p>
</template>
<template #top>
<small>Cashier, Bartender, Waiter</small>
<small>20182023</small>
</template>
<p>
Worked at <em>Belgrave Music Hall</em>,
<em>The Crown and Anchor</em>, and
<em>BFI Riverfront Kitchen</em>. Developed
communication, composure under pressure, and reliability
in customer-facing roles.
</p>
</Project>
</section>
<section>
<h2>Interests</h2>
<ul class="list-disc list-inside">
<li>Leetcode daily competitive problem solving</li>
<li>Learning Mandarin</li>
<li>Rhythm Games</li>
<li>Climbing · Gym</li>
<li>Board games · Meetup.com</li>
</ul>
</section>
<section>
<h2>Skills</h2>
<div class="skills-grid">
<div>
<strong>Languages</strong><br /><small
>Go, Rust, Python, SQL, JavaScript / TypeScript</small
>
</div>
<div>
<strong>Backend</strong><br /><small
>REST, GraphQL, gRPC, JWT Auth, WebSockets, Middleware</small
>
</div>
<div>
<strong>Infrastructure</strong><br /><small
>Docker, Nginx, PostgreSQL, SQLite, Git Actions, Linux</small
>
</div>
</div>
</section>
<div class="no-print w-full h-20"></div>
</main>
<section>
<h2>Projects</h2>
<Project class="border-b border-dotted">
<template v-slot:left>
<h4>
<a
href="https://www.adam-french.co.uk/gitea/adamf/web_server.git"
>
web_server.git
</a>
</h4>
</template>
<template v-slot:top>
<small>
Go, Gin, GraphQL, PostgreSQL, GORM, Docker, Nginx, JWT Auth, Git
Actions
</small>
<small>2025</small>
</template>
<p>
Self-hosted personal website with a Go backend serving a GraphQL
API, JWT authentication, Spotify OAuth integration, and WebSocket
messaging. Fully containerised with Docker Compose and automated
CI/CD via Git Actions.
</p>
</Project>
<Project class="border-b border-dotted">
<template v-slot:left>
<h4>
<a href="https://www.adam-french.co.uk/gitea/adamf/tour.git">
tour.git
</a>
</h4>
</template>
<template v-slot:top>
<small>Rust, CLI, File I/O</small>
<small>2026</small>
</template>
<p>
CLI tool for building and navigating interactive code tutorials,
with version-traversal semantics inspired by Git. Designed for
robustness with comprehensive error handling and structured file
operations.
</p>
</Project>
<Project class="border-b border-dotted">
<template v-slot:left>
<h4>
<a
href="https://www.adam-french.co.uk/gitea/adamf/rust-raytracer.git"
>
rust-raytracer.git
</a>
</h4>
</template>
<template v-slot:top>
<small>Rust, Multithreading, Performance</small>
<small>2023</small>
</template>
<p>
Parallelised recursive ray tracer leveraging Rust's ownership model
for safe concurrency. Focused on algorithmic efficiency, low-level
memory management, and multi-core utilisation.
</p>
</Project>
<Project>
<template #left>
<h4>
<a
class="text-center w-full"
href="https://community.wolfram.com/groups/-/m/t/3210947"
>
Wolfram Summer School
</a>
</h4>
</template>
<template #top>
<small>Wolfram Mathematica</small>
<small>2024</small>
</template>
<p>
Research project on Mobile Automata with data visualisation and
academic presentation. Delivered within a tight deadline in
collaboration with academic mentors.
</p>
</Project>
</section>
<div class="w-full flex flex-col sm:flex-row gap-5">
<section class="flex-1">
<h2>
<a href="https://www.adam-french.co.uk/pdf/transcript.pdf">
University of Leeds
</a>
</h2>
<div
class="flex-row flex place-content-between m-auto place-items-center"
>
<small>First Class Honors (81.1%)</small>
<small>Sep 2021 Jun 2025</small>
</div>
<small>BSc Computer Science with Mathematics </small>
<ul class="list-disc list-inside">
<li>Algorithms & Data Structures I & II</li>
<li>Compiler Design and Construction</li>
<li>Formal Languages & Finite Automata</li>
<li>Graph Algorithms & Complexity Theory</li>
<li>Computer Processors, Databases, Networks</li>
</ul>
</section>
<section class="flex-1">
<h2>University of Waterloo</h2>
<div
class="flex-row flex place-content-between m-auto place-items-center"
>
<small>Year abroad</small>
<small>Sep 2023 Apr 2024</small>
</div>
<ul class="list-disc list-inside">
<li>Applied Cryptography</li>
<li>Introduction to Rings and Fields with Applications</li>
<li>Introduction to Computer Graphics</li>
</ul>
</section>
</div>
</div>
<div class="no-print w-full h-20"></div>
<div class="a4page gap-10">
<section>
<h2>Experience</h2>
<Project>
<template #left>
<p>Hospitality</p>
</template>
<template #top>
<small>Cashier, Bartender, Waiter</small>
<small>20182023</small>
</template>
<p>
Worked at <em>Belgrave Music Hall</em>,
<em>The Crown and Anchor</em>, and <em>BFI Riverfront Kitchen</em>.
Developed communication, composure under pressure, and reliability
in customer-facing roles.
</p>
</Project>
</section>
<section>
<h2>Interests</h2>
<ul class="list-disc list-inside">
<li>Leetcode daily competitive problem solving</li>
<li>Learning Mandarin</li>
<li>Rhythm Games</li>
<li>Climbing · Gym</li>
<li>Board games · Meetup.com</li>
</ul>
</section>
</div>
<div class="no-print w-full h-20"></div>
</main>
</template>
<style scoped>
/* Fonts */
@font-face {
font-family: "big_noodle_titling";
src: url("/fonts/big_noodle_titling.woff2") format("woff2");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "CreatoDisplay";
src: url("/fonts/CreatoDisplay-Bold.woff2") format("woff2");
font-weight: normal;
font-style: normal;
font-display: swap;
}
/* Variables */
* {
--primary: black;
--secondary: #0000ff;
--tertiary: #ff0000;
--quaternary: #cccccc;
--background: white;
--font-heading: big_noodle_titling;
--font-text: CreatoDisplay;
--font-size-name: 2.5em;
--font-size-text: 100%;
--font-size-small: 0.9em;
--font-size-heading: 2.1em;
--font-size-subheading: 1.7em;
--font-size-subsubheading: 1.4em;
}
/* A4 Page */
.a4page {
line-height: 1.6;
font-family: var(--font-text);
width: 210mm;
height: 297mm;
padding: 5mm;
box-sizing: border-box;
background-color: var(--background);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
border: 1px solid var(--primary);
overflow: hidden;
margin: auto auto;
display: flex;
flex-direction: column;
}
/* Component Styling */
main {
padding: 0px;
display: flex;
flex-direction: column;
height: fit-content;
background-color: white;
}
span {
height: 2em;
}
h1,
h2,
h3,
h4 {
margin: 0px;
border: none;
color: var(--primary);
font-family: var(--font-heading);
text-transform: capitalize;
}
h1 {
font-size: var(--font-size-heading);
}
h2 {
border-bottom: 1px solid var(--primary);
font-size: var(--font-size-subheading);
}
h3 {
font-size: var(--font-size-subsubheading);
}
a:hover {
color: var(--tertiary);
}
a {
background-color: transparent;
color: var(--secondary);
}
p {
margin-bottom: 0.2em;
color: var(--primary);
font-size: var(--font-size-text);
}
table {
color: var(--secondary);
border-collapse: collapse;
border: 1px solid black;
}
td {
color: var(--secondary);
border-top: 1px solid var(--tertiary);
padding: 1px 10px 1px 10px;
font-size: var(--font-size-text);
text-align: left;
}
th {
color: var(--secondary);
border: 2px solid var(--tertiary);
padding: 1px 0px 1px 7px;
font-family: var(--font-heading);
font-size: var(--font-size-subsubheading);
background-color: var(--quaternary);
text-align: left;
}
@media print {
.no-print {
display: none !important;
}
}
small {
font-size: var(--font-size-small);
color: var(--primary);
}
ul {
font-size: var(--font-size-small);
margin: 0;
padding-left: 1.2em;
}
li {
font-size: var(--font-size-small);
color: var(--primary);
}
.skills-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0.3em 1em;
margin-bottom: 0.2em;
}
@media (max-width: 640px) {
.a4page {
width: 100%;
height: auto;
overflow: visible;
box-shadow: none;
border: none;
}
.skills-grid {
grid-template-columns: 1fr;
}
}
</style>

View File

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

View File

@@ -3,408 +3,216 @@ import Project from "./Project.vue";
</script>
<template>
<main>
<div class="no-print w-full h-20"></div>
<div class="a4page justify-between">
<section>
<div class="flex flex-col sm:flex-row sm:justify-between">
<h1 class="name">Adam French</h1>
<div class="contact-details sm:text-right">
<p>+447563266931</p>
<p>adam.a.french@outlook.com</p>
<h4>
<a href="https://www.adam-french.co.uk">
www.adam-french.co.uk
</a>
</h4>
</div>
</div>
</section>
<section>
<h2>Profile</h2>
<p>
First Class Honours graduate in Computer Science with
Mathematics from the University of Leeds (81.1%), with a
year abroad at the University of Waterloo. Passionate about
crafting responsive, accessible, and performant user
interfaces. Experienced across multiple frontend frameworks
with a solid understanding of the full stack.
</p>
</section>
<section>
<h2>Skills</h2>
<div class="skills-grid">
<div>
<strong>Frontend</strong><br /><small
>Vue, React / Redux, Svelte, Tailwind CSS, HTML /
CSS, WebAssembly</small
>
</div>
<div>
<strong>Languages</strong><br /><small
>JavaScript / TypeScript, Rust, Go, Python,
SQL</small
>
</div>
<div>
<strong>Tooling / Infra</strong><br /><small
>Vite, Docker, Nginx, Git Actions, PostgreSQL,
Figma</small
>
</div>
</div>
</section>
<section>
<h2>Projects</h2>
<Project class="border-b border-dotted">
<template v-slot:left>
<h4>
<a
href="https://www.adam-french.co.uk/gitea/adamf/web_server.git"
>
web_server.git
</a>
</h4>
</template>
<template v-slot:top>
<small>
Vue 3, Tailwind CSS, Vite, Pinia, Responsive Design,
Rust Wasm
</small>
<small>2025</small>
</template>
<p>
Personal website SPA built with Vue 3, Tailwind CSS, and
Pinia for state management. Features responsive layouts,
dark mode, WebAssembly integration, and a custom
component library. Iterated through Svelte and
React/Redux before settling on Vue.
</p>
</Project>
<Project class="border-b border-dotted">
<template v-slot:left>
<h4>
<a
href="https://www.adam-french.co.uk/gitea/adamf/tour.git"
>
tour.git
</a>
</h4>
</template>
<template v-slot:top>
<small>Rust</small>
<small>2026</small>
</template>
<p>
CLI tool for building and navigating interactive code
tutorials, with version-traversal semantics inspired by
Git.
</p>
</Project>
<Project class="border-b border-dotted">
<template v-slot:left>
<h4>
<a
href="https://www.adam-french.co.uk/gitea/adamf/rust-raytracer.git"
>
rust-raytracer.git
</a>
</h4>
</template>
<template v-slot:top>
<small>Rust, Linear Algebra, Multithreading</small>
<small>2023</small>
</template>
<p>
Parallelised recursive ray tracer for realistic 3D
rendering. Emphasised algorithmic efficiency and
low-level memory management in Rust.
</p>
</Project>
<Project>
<template #left>
<h4>
<a
class="text-center w-full"
href="https://community.wolfram.com/groups/-/m/t/3210947"
>
Wolfram Summer School
</a>
</h4>
</template>
<template #top>
<small>Wolfram Mathematica</small>
<small>2024</small>
</template>
<p>
Research project on Mobile Automata with data
visualisation and academic presentation. Delivered
within a tight deadline in collaboration with academic
mentors.
</p>
</Project>
</section>
<section>
<h2>Education</h2>
<div class="w-full h-fit flex flex-col sm:flex-row gap-5">
<div class="flex-1 sm:border-r border-dotted sm:pr-3">
<h3>
<a
href="https://www.adam-french.co.uk/pdf/transcript.pdf"
>
University of Leeds
</a>
</h3>
<div
class="flex-row flex place-content-between m-auto place-items-center"
>
<small>81.1% First Class Honours</small>
<small>20212025</small>
</div>
<small>BSc Computer Science with Mathematics </small>
<ul class="list-disc list-inside">
<li>Algorithms & Data Structures I & II</li>
<li>Compiler Design and Construction</li>
<li>Formal Languages & Finite Automata</li>
<li>Graph Algorithms & Complexity Theory</li>
<li>
Machine Learning & Databases & Computer
Processors
</li>
</ul>
</div>
<div class="flex-1 sm:pl-3">
<h3>University of Waterloo</h3>
<div
class="flex-row flex place-content-between m-auto place-items-center"
>
<small>Year abroad</small>
<small>20232024</small>
</div>
<ul class="list-disc list-inside">
<li>Applied Cryptography</li>
<li>Introduction to Computer Graphics</li>
<li>
Introduction to Rings and Fields with
Applications
</li>
</ul>
</div>
</div>
</section>
<main class="cv-template">
<div class="no-print w-full h-20"></div>
<div class="a4page justify-between">
<section>
<div class="flex flex-col sm:flex-row sm:justify-between">
<h1 class="name">Adam French</h1>
<div class="contact-details">
<p>London, United Kingdom</p>
<p>+447563266931</p>
<p>adam.a.french@outlook.com</p>
<p>
<a href="https://www.adam-french.co.uk">
www.adam-french.co.uk
</a>
</p>
</div>
</div>
</section>
<div class="no-print w-full h-20"></div>
<section>
<h2>Profile</h2>
<p>
First Class Honours graduate in Computer Science with Mathematics from
the University of Leeds (81.1%), with a year abroad at the University
of Waterloo. Passionate about crafting responsive, accessible, and
performant user interfaces. Experienced across multiple frontend
frameworks with a solid understanding of the full stack.
</p>
</section>
<div class="a4page gap-10">
<section>
<h2>Experience</h2>
<Project>
<template #left>
<p>Hospitality</p>
</template>
<template #top>
<small>Cashier, Bartender, Waiter</small>
<small>20182023</small>
</template>
<p>
Worked at <em>Belgrave Music Hall</em>,
<em>The Crown and Anchor</em>, and
<em>BFI Riverfront Kitchen</em>. Developed
communication, composure under pressure, and reliability
in customer-facing roles.
</p>
</Project>
</section>
<section>
<h2>Interests</h2>
<ul class="list-disc list-inside">
<li>Leetcode daily competitive problem solving</li>
<li>Learning Mandarin</li>
<li>Rhythm Games</li>
<li>Climbing · Gym</li>
<li>Board games · Meetup.com</li>
</ul>
</section>
<section>
<h2>Skills</h2>
<div class="skills-grid">
<div>
<strong>Frontend</strong><br /><small
>Vue, React / Redux, Svelte, Tailwind CSS, HTML / CSS,
WebAssembly</small
>
</div>
<div>
<strong>Languages</strong><br /><small
>JavaScript / TypeScript, Rust, Go, Python, SQL</small
>
</div>
<div>
<strong>Tooling / Infra</strong><br /><small
>Vite, Docker, Nginx, Git Actions, PostgreSQL, Figma</small
>
</div>
</div>
</section>
<div class="no-print w-full h-20"></div>
</main>
<section>
<h2>Projects</h2>
<Project class="border-b border-dotted">
<template v-slot:left>
<h4>
<a
href="https://www.adam-french.co.uk/gitea/adamf/web_server.git"
>
web_server.git
</a>
</h4>
</template>
<template v-slot:top>
<small>
Vue 3, Tailwind CSS, Vite, Pinia, Responsive Design, Rust Wasm
</small>
<small>2025</small>
</template>
<p>
Personal website SPA built with Vue 3, Tailwind CSS, and Pinia for
state management. Features responsive layouts, dark mode,
WebAssembly integration, and a custom component library. Iterated
through Svelte and React/Redux before settling on Vue.
</p>
</Project>
<Project class="border-b border-dotted">
<template v-slot:left>
<h4>
<a href="https://www.adam-french.co.uk/gitea/adamf/tour.git">
tour.git
</a>
</h4>
</template>
<template v-slot:top>
<small>Rust</small>
<small>2026</small>
</template>
<p>
CLI tool for building and navigating interactive code tutorials,
with version-traversal semantics inspired by Git.
</p>
</Project>
<Project class="border-b border-dotted">
<template v-slot:left>
<h4>
<a
href="https://www.adam-french.co.uk/gitea/adamf/rust-raytracer.git"
>
rust-raytracer.git
</a>
</h4>
</template>
<template v-slot:top>
<small>Rust, Linear Algebra, Multithreading</small>
<small>2023</small>
</template>
<p>
Parallelised recursive ray tracer for realistic 3D rendering.
Emphasised algorithmic efficiency and low-level memory management in
Rust.
</p>
</Project>
<Project>
<template #left>
<h4>
<a
class="text-center w-full"
href="https://community.wolfram.com/groups/-/m/t/3210947"
>
Wolfram Summer School
</a>
</h4>
</template>
<template #top>
<small>Wolfram Mathematica</small>
<small>2024</small>
</template>
<p>
Research project on Mobile Automata with data visualisation and
academic presentation. Delivered within a tight deadline in
collaboration with academic mentors.
</p>
</Project>
</section>
<div class="w-full flex flex-col sm:flex-row gap-5">
<section class="flex-1">
<h2>
<a href="https://www.adam-french.co.uk/pdf/transcript.pdf">
University of Leeds
</a>
</h2>
<div
class="flex-row flex place-content-between m-auto place-items-center"
>
<small>First Class Honours (81.1%)</small>
<small>Sep 2021 Jun 2025</small>
</div>
<small>BSc Computer Science with Mathematics </small>
<ul class="list-disc list-inside">
<li>Algorithms & Data Structures I & II</li>
<li>Compiler Design and Construction</li>
<li>Formal Languages & Finite Automata</li>
<li>Graph Algorithms & Complexity Theory</li>
<li>Machine Learning, Databases, Computer Processors</li>
</ul>
</section>
<section class="flex-1">
<h2>University of Waterloo</h2>
<div
class="flex-row flex place-content-between m-auto place-items-center"
>
<small>Year abroad</small>
<small>Sep 2023 Apr 2024</small>
</div>
<ul class="list-disc list-inside">
<li>Applied Cryptography</li>
<li>Introduction to Computer Graphics</li>
<li>Introduction to Rings and Fields with Applications</li>
</ul>
</section>
</div>
</div>
<div class="no-print w-full h-20"></div>
<div class="a4page gap-10">
<section>
<h2>Experience</h2>
<Project>
<template #left>
<p>Hospitality</p>
</template>
<template #top>
<small>Cashier, Bartender, Waiter</small>
<small>20182023</small>
</template>
<p>
Worked at <em>Belgrave Music Hall</em>,
<em>The Crown and Anchor</em>, and <em>BFI Riverfront Kitchen</em>.
Developed communication, composure under pressure, and reliability
in customer-facing roles.
</p>
</Project>
</section>
<section>
<h2>Interests</h2>
<ul class="list-disc list-inside">
<li>Leetcode daily competitive problem solving</li>
<li>Learning Mandarin</li>
<li>Rhythm Games</li>
<li>Climbing · Gym</li>
<li>Board games · Meetup.com</li>
</ul>
</section>
</div>
<div class="no-print w-full h-20"></div>
</main>
</template>
<style scoped>
/* Fonts */
@font-face {
font-family: "big_noodle_titling";
src: url("/fonts/big_noodle_titling.woff2") format("woff2");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "CreatoDisplay";
src: url("/fonts/CreatoDisplay-Bold.woff2") format("woff2");
font-weight: normal;
font-style: normal;
font-display: swap;
}
/* Variables */
* {
--primary: black;
--secondary: #0000ff;
--tertiary: #ff0000;
--quaternary: #cccccc;
--background: white;
--font-heading: big_noodle_titling;
--font-text: CreatoDisplay;
--font-size-name: 2.5em;
--font-size-text: 100%;
--font-size-small: 0.9em;
--font-size-heading: 2.1em;
--font-size-subheading: 1.7em;
--font-size-subsubheading: 1.4em;
}
/* A4 Page */
.a4page {
line-height: 1.6;
font-family: var(--font-text);
width: 210mm;
height: 297mm;
padding: 5mm;
box-sizing: border-box;
background-color: var(--background);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
border: 1px solid var(--primary);
overflow: hidden;
margin: auto auto;
display: flex;
flex-direction: column;
}
/* Component Styling */
main {
padding: 0px;
display: flex;
flex-direction: column;
height: fit-content;
background-color: white;
}
span {
height: 2em;
}
h1,
h2,
h3,
h4 {
margin: 0px;
border: none;
color: var(--primary);
font-family: var(--font-heading);
text-transform: capitalize;
}
h1 {
font-size: var(--font-size-heading);
}
h2 {
border-bottom: 1px solid var(--primary);
font-size: var(--font-size-subheading);
}
h3 {
font-size: var(--font-size-subsubheading);
}
a:hover {
color: var(--tertiary);
}
a {
background-color: transparent;
color: var(--secondary);
}
p {
margin-bottom: 0.2em;
color: var(--primary);
font-size: var(--font-size-text);
}
table {
color: var(--secondary);
border-collapse: collapse;
border: 1px solid black;
}
td {
color: var(--secondary);
border-top: 1px solid var(--tertiary);
padding: 1px 10px 1px 10px;
font-size: var(--font-size-text);
text-align: left;
}
th {
color: var(--secondary);
border: 2px solid var(--tertiary);
padding: 1px 0px 1px 7px;
font-family: var(--font-heading);
font-size: var(--font-size-subsubheading);
background-color: var(--quaternary);
text-align: left;
}
@media print {
.no-print {
display: none !important;
}
}
small {
font-size: var(--font-size-small);
color: var(--primary);
}
ul {
font-size: var(--font-size-small);
margin: 0;
padding-left: 1.2em;
}
li {
font-size: var(--font-size-small);
color: var(--primary);
}
.skills-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0.3em 1em;
margin-bottom: 0.2em;
}
@media (max-width: 640px) {
.a4page {
width: 100%;
height: auto;
overflow: visible;
box-shadow: none;
border: none;
}
.skills-grid {
grid-template-columns: 1fr;
}
}
</style>

View File

@@ -3,21 +3,21 @@ import Project from "./Project.vue";
</script>
<template>
<main>
<main class="cv-template">
<div class="no-print w-full h-20"></div>
<div class="a4page place-content-between">
<section>
<div class="flex flex-col sm:flex-row sm:justify-between">
<h1 class="content-center name">Adam French</h1>
<div class="contact-details sm:text-right">
<h1 class="name">Adam French</h1>
<div class="contact-details">
<p>London, United Kingdom</p>
<p>+447563266931</p>
<p>adam.a.french@outlook.com</p>
<h4>
<p>
<a href="https://www.adam-french.co.uk">
www.adam-french.co.uk
</a>
</h4>
</p>
</div>
</div>
</section>
@@ -188,156 +188,3 @@ import Project from "./Project.vue";
</div>
</main>
</template>
<style scoped>
/* Fonts */
@font-face {
font-family: "big_noodle_titling";
src: url("/fonts/big_noodle_titling.woff2") format("woff2");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "CreatoDisplay";
src: url("/fonts/CreatoDisplay-Bold.woff2") format("woff2");
font-weight: normal;
font-style: normal;
font-display: swap;
}
/* Variables */
* {
--primary: black;
--secondary: #0000ff;
--tertiary: #ff0000;
--quaternary: #cccccc;
--background: white;
--font-heading: big_noodle_titling;
--font-text: CreatoDisplay;
--font-size-name: 3.5em;
--font-size-text: 0.94em;
--font-size-small: 0.9em;
--font-size-heading: 1.9em;
--font-size-subheading: 1.6em;
--font-size-subsubheading: 1.3em;
}
.name {
font-size: var(--font-size-name);
}
/* A4 Page */
.a4page {
line-height: 1.5;
font-family: var(--font-text);
width: 210mm;
height: 297mm;
padding: 8mm;
box-sizing: border-box;
background-color: var(--background);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
border: 1px solid var(--primary);
overflow: hidden;
margin: auto auto;
display: flex;
flex-direction: column;
gap: 0.4em;
}
/* Component Styling */
main {
padding: 0px;
display: flex;
flex-direction: column;
height: fit-content;
background-color: white;
}
h1,
h2,
h3,
h4 {
margin: 0px;
border: none;
color: var(--primary);
font-family: var(--font-heading);
text-transform: capitalize;
}
h1 {
font-size: var(--font-size-heading);
}
h2 {
border-bottom: 1px solid var(--primary);
font-size: var(--font-size-subheading);
}
h3,
h4 {
font-size: var(--font-size-subsubheading);
}
a:hover {
color: var(--tertiary);
}
a {
background-color: transparent;
color: var(--secondary);
}
p {
margin-bottom: 0.2em;
color: var(--primary);
font-size: var(--font-size-text);
}
@media print {
.no-print {
display: none !important;
}
}
small {
font-size: var(--font-size-small);
color: var(--primary);
}
ul {
font-size: var(--font-size-text);
margin: 0;
padding-left: 1.2em;
}
li {
font-size: var(--font-size-text);
color: var(--primary);
list-style: disc;
}
.skills-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0.3em 1em;
margin-bottom: 0.2em;
}
/* Inline skills: header flows directly into bullet list on same line */
@media (max-width: 640px) {
.a4page {
width: 100%;
height: auto;
overflow: visible;
box-shadow: none;
border: none;
}
.skills-grid {
grid-template-columns: 1fr;
}
}
</style>

View File

@@ -3,337 +3,159 @@ import Project from "./Project.vue";
</script>
<template>
<main>
<div class="no-print w-full h-20"></div>
<div class="a4page justify-between">
<section>
<div class="flex flex-col sm:flex-row sm:justify-between">
<h1 class="name">Adam French</h1>
<div class="contact-details sm:text-right">
<p>+447563266931</p>
<p>adam.a.french@outlook.com</p>
<h4>
<a href="https://www.adam-french.co.uk">
www.adam-french.co.uk
</a>
</h4>
</div>
</div>
</section>
<section>
<h2>Profile</h2>
<p>
First Class Honours graduate in Computer Science with
Mathematics from the University of Leeds (81.1%). Dependable
and personable team player with five years of hospitality
experience across busy bars, restaurants, and event venues.
Thrives under pressure, communicates clearly, and takes
pride in providing excellent customer service.
</p>
</section>
<section>
<h2>Experience</h2>
<Project class="border-b border-dotted">
<template #left>
<h4>Belgrave Music Hall</h4>
</template>
<template #top>
<small>Bartender & Waiter</small>
<small>20212025</small>
</template>
<p>
Served food and drinks in a high-volume live-music venue
in Leeds. Handled busy weekend shifts, managed multiple
tables simultaneously, and maintained a calm, friendly
demeanour during peak hours.
</p>
</Project>
<Project class="border-b border-dotted">
<template #left>
<h4>The Crown and Anchor</h4>
</template>
<template #top>
<small>Bartender & Waiter</small>
<small>20202021</small>
</template>
<p>
Worked front-of-house at a busy pub, pulling pints,
taking orders, and ensuring a welcoming atmosphere.
Built rapport with regulars and adapted quickly to
changing priorities during service.
</p>
</Project>
<Project class="border-b border-dotted">
<template #left>
<h4>To The Rise Bakery</h4>
</template>
<template #top>
<small>Barista & Front of House</small>
<small>20202021</small>
</template>
<p>
Worked at a bakery in Eastbourne, preparing freshly
baked goods for display, operating the coffee machine,
and keeping bakery equipment spotless. Built rapport
with regulars and provided attentive, friendly service.
</p>
</Project>
<Project>
<template #left>
<h4>BFI Riverfront Kitchen</h4>
</template>
<template #top>
<small>Cashier & Waiter</small>
<small>20182020</small>
</template>
<p>
Operated the till, served customers, and helped
coordinate table service at a café on London's South
Bank. Developed strong cash-handling accuracy and
customer interaction skills in a fast-paced environment.
</p>
</Project>
</section>
<section>
<h2>Skills</h2>
<div class="skills-grid">
<div>
<strong>Service</strong><br /><small
>Bar work, Table service, Cash handling, Till
operation, Food hygiene</small
>
</div>
<div>
<strong>Soft Skills</strong><br /><small
>Communication, Teamwork, Time management, Composure
under pressure</small
>
</div>
<div>
<strong>Technical</strong><br /><small
>EPOS systems, Stock management, Event
coordination</small
>
</div>
</div>
</section>
<div class="w-full flex flex-col sm:flex-row gap-5">
<section class="flex-1">
<h2>
<a
href="https://www.adam-french.co.uk/pdf/transcript.pdf"
>
University of Leeds
</a>
</h2>
<div
class="flex-row flex place-content-between m-auto place-items-center"
>
<small>First Class Honours (81.1%)</small>
<small>20212025</small>
</div>
<small>BSc Computer Science with Mathematics </small>
</section>
<section class="flex-1">
<h2>University of Waterloo</h2>
<div
class="flex-row flex place-content-between m-auto place-items-center"
>
<small>Year abroad</small>
<small>20232024</small>
</div>
</section>
</div>
<section>
<h2>Interests</h2>
<ul class="list-disc list-inside">
<li>Leetcode</li>
<li>Rhythm Games</li>
<li>Climbing, Gym</li>
<li>Board games, Meetup.com</li>
</ul>
</section>
<main class="cv-template">
<div class="no-print w-full h-20"></div>
<div class="a4page justify-between">
<section>
<div class="flex flex-col sm:flex-row sm:justify-between">
<h1 class="name">Adam French</h1>
<div class="contact-details">
<p>London, United Kingdom</p>
<p>+447563266931</p>
<p>adam.a.french@outlook.com</p>
<p>
<a href="https://www.adam-french.co.uk">
www.adam-french.co.uk
</a>
</p>
</div>
</div>
</section>
<div class="no-print w-full h-20"></div>
</main>
<section>
<h2>Profile</h2>
<p>
First Class Honours graduate in Computer Science with Mathematics from
the University of Leeds (81.1%). Dependable and personable team player
with five years of hospitality experience across busy bars,
restaurants, and event venues. Thrives under pressure, communicates
clearly, and takes pride in providing excellent customer service.
</p>
</section>
<section>
<h2>Experience</h2>
<Project class="border-b border-dotted">
<template #left>
<h4>Belgrave Music Hall</h4>
</template>
<template #top>
<small>Bartender & Waiter</small>
<small>20212025</small>
</template>
<p>
Served food and drinks in a high-volume live-music venue in Leeds.
Handled busy weekend shifts, managed multiple tables simultaneously,
and maintained a calm, friendly demeanour during peak hours.
</p>
</Project>
<Project class="border-b border-dotted">
<template #left>
<h4>The Crown and Anchor</h4>
</template>
<template #top>
<small>Bartender & Waiter</small>
<small>20202021</small>
</template>
<p>
Worked front-of-house at a busy pub, pulling pints, taking orders,
and ensuring a welcoming atmosphere. Built rapport with regulars and
adapted quickly to changing priorities during service.
</p>
</Project>
<Project class="border-b border-dotted">
<template #left>
<h4>To The Rise Bakery</h4>
</template>
<template #top>
<small>Barista & Front of House</small>
<small>20202021</small>
</template>
<p>
Worked at a bakery in Eastbourne, preparing freshly baked goods for
display, operating the coffee machine, and keeping bakery equipment
spotless. Built rapport with regulars and provided attentive,
friendly service.
</p>
</Project>
<Project>
<template #left>
<h4>BFI Riverfront Kitchen</h4>
</template>
<template #top>
<small>Cashier & Waiter</small>
<small>20182020</small>
</template>
<p>
Operated the till, served customers, and helped coordinate table
service at a café on London's South Bank. Developed strong
cash-handling accuracy and customer interaction skills in a
fast-paced environment.
</p>
</Project>
</section>
<section>
<h2>Skills</h2>
<div class="skills-grid">
<div>
<strong>Service</strong><br /><small
>Bar work, Table service, Cash handling, Till operation, Food
hygiene</small
>
</div>
<div>
<strong>Soft Skills</strong><br /><small
>Communication, Teamwork, Time management, Composure under
pressure</small
>
</div>
<div>
<strong>Technical</strong><br /><small
>EPOS systems, Stock management, Event coordination</small
>
</div>
</div>
</section>
<div class="w-full flex flex-col sm:flex-row gap-5">
<section class="flex-1">
<h2>
<a href="https://www.adam-french.co.uk/pdf/transcript.pdf">
University of Leeds
</a>
</h2>
<div
class="flex-row flex place-content-between m-auto place-items-center"
>
<small>First Class Honours (81.1%)</small>
<small>20212025</small>
</div>
<small>BSc Computer Science with Mathematics </small>
</section>
<section class="flex-1">
<h2>University of Waterloo</h2>
<div
class="flex-row flex place-content-between m-auto place-items-center"
>
<small>Year abroad</small>
<small>20232024</small>
</div>
</section>
</div>
<section>
<h2>Interests</h2>
<ul class="list-disc list-inside">
<li>Leetcode</li>
<li>Rhythm Games</li>
<li>Climbing, Gym</li>
<li>Board games, Meetup.com</li>
</ul>
</section>
</div>
<div class="no-print w-full h-20"></div>
</main>
</template>
<style scoped>
/* Fonts */
@font-face {
font-family: "big_noodle_titling";
src: url("/fonts/big_noodle_titling.woff2") format("woff2");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "CreatoDisplay";
src: url("/fonts/CreatoDisplay-Bold.woff2") format("woff2");
font-weight: normal;
font-style: normal;
font-display: swap;
}
/* Variables */
* {
--primary: black;
--secondary: #0000ff;
--tertiary: #ff0000;
--quaternary: #cccccc;
--background: white;
--font-heading: big_noodle_titling;
--font-text: CreatoDisplay;
--font-size-name: 2.5em;
--font-size-text: 100%;
--font-size-small: 0.9em;
--font-size-heading: 2.1em;
--font-size-subheading: 1.7em;
--font-size-subsubheading: 1.4em;
}
/* A4 Page */
.a4page {
line-height: 1.6;
font-family: var(--font-text);
width: 210mm;
height: 297mm;
padding: 5mm;
box-sizing: border-box;
background-color: var(--background);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
border: 1px solid var(--primary);
overflow: hidden;
margin: auto auto;
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* Component Styling */
main {
padding: 0px;
display: flex;
flex-direction: column;
height: fit-content;
background-color: white;
}
span {
height: 2em;
}
h1,
h2,
h3,
h4 {
margin: 0px;
border: none;
color: var(--primary);
font-family: var(--font-heading);
text-transform: capitalize;
}
h1 {
font-size: var(--font-size-heading);
}
h2 {
border-bottom: 1px solid var(--primary);
font-size: var(--font-size-subheading);
}
h3 {
font-size: var(--font-size-subsubheading);
}
a:hover {
color: var(--tertiary);
}
a {
background-color: transparent;
color: var(--secondary);
}
p {
margin-bottom: 0.2em;
color: var(--primary);
font-size: var(--font-size-text);
}
table {
color: var(--secondary);
border-collapse: collapse;
border: 1px solid black;
}
td {
color: var(--secondary);
border-top: 1px solid var(--tertiary);
padding: 1px 10px 1px 10px;
font-size: var(--font-size-text);
text-align: left;
}
th {
color: var(--secondary);
border: 2px solid var(--tertiary);
padding: 1px 0px 1px 7px;
font-family: var(--font-heading);
font-size: var(--font-size-subsubheading);
background-color: var(--quaternary);
text-align: left;
}
@media print {
.no-print {
display: none !important;
}
}
small {
font-size: var(--font-size-small);
color: var(--primary);
}
ul {
font-size: var(--font-size-small);
margin: 0;
padding-left: 1.2em;
}
li {
font-size: var(--font-size-small);
color: var(--primary);
}
.skills-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0.3em 1em;
margin-bottom: 0.2em;
}
@media (max-width: 640px) {
.a4page {
width: 100%;
height: auto;
overflow: visible;
box-shadow: none;
border: none;
}
.skills-grid {
grid-template-columns: 1fr;
}
}
</style>

View File

@@ -3,442 +3,229 @@ import Project from "./Project.vue";
</script>
<template>
<main>
<div class="no-print w-full h-20"></div>
<div class="a4page justify-between">
<section>
<div class="flex flex-col sm:flex-row sm:justify-between">
<h1 class="flex-1 name">Adam French</h1>
<div class="contact-details">
<p>London, United Kingdom</p>
<p>+447563266931</p>
<p>adam.a.french@outlook.com</p>
<p>
<a href="https://www.adam-french.co.uk">
www.adam-french.co.uk
</a>
</p>
</div>
</div>
</section>
<section>
<h2>Profile</h2>
<p contenteditable="true">
Full Stack Developer with a First Class Honours degree in
Computer Science with Mathematics from the University of
Leeds (81.1%) and a year abroad at the University of
Waterloo. Proficient in full-stack development, systems
programming, and CI/CD automation. Strong problem-solving
and organisational skills. Eager to contribute to a
collaborative engineering team, apply strong academic
foundations to real-world problems, and grow through
hands-on experience.
</p>
</section>
<section>
<h2>Skills</h2>
<div class="skills-grid">
<div>
<strong>Languages</strong><br /><small
>Go, Rust, Python, JavaScript / TypeScript,
SQL</small
>
</div>
<div>
<strong>Frontend / Web Design</strong><br /><small
>Vue, React / Redux, Svelte, Tailwind CSS,
WebAssembly</small
>
</div>
<div>
<strong>Backend / Infra</strong><br /><small
>Nginx, Docker, PostgreSQL, SQLite, JWT Auth, Git
Actions</small
>
</div>
</div>
</section>
<section>
<h2>Projects</h2>
<Project class="border-b border-dotted">
<template v-slot:left>
<h4>
<a
href="https://www.adam-french.co.uk/gitea/adamf/web_server.git"
>
web_server.git
</a>
</h4>
</template>
<template v-slot:top>
<small>
Nginx, Vue, Postgres, Docker, Go, Python, Rust,
Wasm, Git Actions, JWT Auth
</small>
<small>2025</small>
</template>
<p contenteditable="true">
Self-hosted personal website with a fully automated
CI/CD pipeline. Iterated across diverse tech stacks
including Svelte, React/Redux, SQLite, Rust Actix, and
Deno.
</p>
</Project>
<Project class="border-b border-dotted">
<template v-slot:left>
<h4>
<a
href="https://www.adam-french.co.uk/gitea/adamf/tour.git"
>
tour.git
</a>
</h4>
</template>
<template v-slot:top>
<small>Rust</small>
<small>2026</small>
</template>
<p contenteditable="true">
CLI tool for building and navigating interactive code
tutorials, with version-traversal semantics inspired by
Git.
</p>
</Project>
<Project class="border-b border-dotted">
<template v-slot:left>
<h4>
<a
href="https://www.adam-french.co.uk/gitea/adamf/rust-raytracer.git"
>
rust-raytracer.git
</a>
</h4>
</template>
<template v-slot:top>
<small>Rust, Linear Algebra, Multithreading</small>
<small>2023</small>
</template>
<p contenteditable="true">
Parallelised recursive ray tracer for realistic 3D
rendering. Emphasised algorithmic efficiency and
low-level memory management in Rust.
</p>
</Project>
<Project>
<template #left>
<h4>
<a
class="text-center w-full"
href="https://community.wolfram.com/groups/-/m/t/3210947"
>
Wolfram Summer School
</a>
</h4>
</template>
<template #top>
<small>Wolfram Mathematica</small>
<small>2024</small>
</template>
<p contenteditable="true">
Research project on Mobile Automata with data
visualisation and academic presentation. Delivered
within a tight deadline in collaboration with academic
mentors.
</p>
</Project>
</section>
<div class="w-full flex flex-col sm:flex-row gap-5">
<section class="flex-1">
<h2>
<a
href="https://www.adam-french.co.uk/pdf/transcript.pdf"
>
University of Leeds
</a>
</h2>
<div
class="flex-row flex place-content-between m-auto place-items-center"
>
<small>First Class Honours (81.1%)</small>
<small>Sep 2021 Jun 2025</small>
</div>
<small>BSc Computer Science with Mathematics </small>
<ul class="list-disc list-inside">
<li>Algorithms & Data Structures I & II</li>
<li>Compiler Design and Construction</li>
<li>Formal Languages & Finite Automata</li>
<li>Graph Algorithms & Complexity Theory</li>
<li>
Machine Learning, Databases, Computer Processors
</li>
</ul>
</section>
<section class="flex-1">
<h2>University of Waterloo</h2>
<div
class="flex-row flex place-content-between m-auto place-items-center"
>
<small>Year abroad</small>
<small>Sep 2023 Apr 2024</small>
</div>
<ul class="list-disc list-inside">
<li>Applied Cryptography</li>
<li>Introduction to Computer Graphics</li>
<li>
Introduction to Rings and Fields with Applications
</li>
</ul>
</section>
</div>
<main class="cv-template">
<div class="no-print w-full h-20"></div>
<div class="a4page justify-between">
<section>
<div class="flex flex-col sm:flex-row sm:justify-between">
<h1 class="name">Adam French</h1>
<div class="contact-details">
<p>London, United Kingdom</p>
<p>+447563266931</p>
<p>adam.a.french@outlook.com</p>
<p>
<a href="https://www.adam-french.co.uk">
www.adam-french.co.uk
</a>
</p>
</div>
</div>
</section>
<div class="no-print w-full h-20"></div>
<section>
<h2>Profile</h2>
<p contenteditable="true">
Full Stack Developer with a First Class Honours degree in Computer
Science with Mathematics from the University of Leeds (81.1%) and a
year abroad at the University of Waterloo. Proficient in full-stack
development, systems programming, and CI/CD automation. Strong
problem-solving and organisational skills. Eager to contribute to a
collaborative engineering team, apply strong academic foundations to
real-world problems, and grow through hands-on experience.
</p>
</section>
<div class="a4page gap-10">
<section>
<h2>Experience</h2>
<Project>
<template #left>
<h4>Hospitality</h4>
</template>
<template #top>
<small>Cashier, Bartender, Waiter</small>
<small>Jan 2018 Dec 2023</small>
</template>
<p contenteditable="true">
Worked at <strong>Belgrave Music Hall</strong>,
<strong>The Crown and Anchor</strong>, and
<strong>BFI Riverfront Kitchen</strong>. Developed
communication, composure under pressure, and reliability
in customer-facing roles.
</p>
</Project>
</section>
<div class="w-full flex flex-col sm:flex-row gap-5">
<section class="flex-1">
<h2>Soft Skills</h2>
<ul class="list-disc list-inside">
<li>Communication & collaboration</li>
<li>Attention to detail</li>
<li>Problem solving</li>
<li>Adaptability</li>
<li>Time management</li>
</ul>
</section>
<section class="flex-1">
<h2>Interests</h2>
<ul class="list-disc list-inside">
<li>Leetcode</li>
<li>Learning Mandarin</li>
<li>Rhythm Games</li>
<li>Climbing, Gym</li>
<li>Board games, Meetup.com</li>
</ul>
</section>
</div>
<section>
<h2>Skills</h2>
<div class="skills-grid">
<div>
<strong>Languages</strong><br /><small
>Go, Rust, Python, JavaScript / TypeScript, SQL</small
>
</div>
<div>
<strong>Frontend / Web Design</strong><br /><small
>Vue, React / Redux, Svelte, Tailwind CSS, WebAssembly</small
>
</div>
<div>
<strong>Backend / Infra</strong><br /><small
>Nginx, Docker, PostgreSQL, SQLite, JWT Auth, Git Actions</small
>
</div>
</div>
</section>
<div class="no-print w-full h-20"></div>
</main>
<section>
<h2>Projects</h2>
<Project class="border-b border-dotted">
<template v-slot:left>
<h4>
<a
href="https://www.adam-french.co.uk/gitea/adamf/web_server.git"
>
web_server.git
</a>
</h4>
</template>
<template v-slot:top>
<small>
Nginx, Vue, Postgres, Docker, Go, Python, Rust, Wasm, Git Actions,
JWT Auth
</small>
<small>2025</small>
</template>
<p contenteditable="true">
Self-hosted personal website with a fully automated CI/CD pipeline.
Iterated across diverse tech stacks including Svelte, React/Redux,
SQLite, Rust Actix, and Deno.
</p>
</Project>
<Project class="border-b border-dotted">
<template v-slot:left>
<h4>
<a href="https://www.adam-french.co.uk/gitea/adamf/tour.git">
tour.git
</a>
</h4>
</template>
<template v-slot:top>
<small>Rust</small>
<small>2026</small>
</template>
<p contenteditable="true">
CLI tool for building and navigating interactive code tutorials,
with version-traversal semantics inspired by Git.
</p>
</Project>
<Project class="border-b border-dotted">
<template v-slot:left>
<h4>
<a
href="https://www.adam-french.co.uk/gitea/adamf/rust-raytracer.git"
>
rust-raytracer.git
</a>
</h4>
</template>
<template v-slot:top>
<small>Rust, Linear Algebra, Multithreading</small>
<small>2023</small>
</template>
<p contenteditable="true">
Parallelised recursive ray tracer for realistic 3D rendering.
Emphasised algorithmic efficiency and low-level memory management in
Rust.
</p>
</Project>
<Project>
<template #left>
<h4>
<a
class="text-center w-full"
href="https://community.wolfram.com/groups/-/m/t/3210947"
>
Wolfram Summer School
</a>
</h4>
</template>
<template #top>
<small>Wolfram Mathematica</small>
<small>2024</small>
</template>
<p contenteditable="true">
Research project on Mobile Automata with data visualisation and
academic presentation. Delivered within a tight deadline in
collaboration with academic mentors.
</p>
</Project>
</section>
<div class="w-full flex flex-col sm:flex-row gap-5">
<section class="flex-1">
<h2>
<a href="https://www.adam-french.co.uk/pdf/transcript.pdf">
University of Leeds
</a>
</h2>
<div
class="flex-row flex place-content-between m-auto place-items-center"
>
<small>First Class Honours (81.1%)</small>
<small>Sep 2021 Jun 2025</small>
</div>
<small>BSc Computer Science with Mathematics </small>
<ul class="list-disc list-inside">
<li>Algorithms & Data Structures I & II</li>
<li>Compiler Design and Construction</li>
<li>Formal Languages & Finite Automata</li>
<li>Graph Algorithms & Complexity Theory</li>
<li>Machine Learning, Databases, Computer Processors</li>
</ul>
</section>
<section class="flex-1">
<h2>University of Waterloo</h2>
<div
class="flex-row flex place-content-between m-auto place-items-center"
>
<small>Year abroad</small>
<small>Sep 2023 Apr 2024</small>
</div>
<ul class="list-disc list-inside">
<li>Applied Cryptography</li>
<li>Introduction to Computer Graphics</li>
<li>Introduction to Rings and Fields with Applications</li>
</ul>
</section>
</div>
</div>
<div class="no-print w-full h-20"></div>
<div class="a4page gap-10">
<section>
<h2>Experience</h2>
<Project>
<template #left>
<h4>Hospitality</h4>
</template>
<template #top>
<small>Cashier, Bartender, Waiter</small>
<small>Jan 2018 Dec 2023</small>
</template>
<p contenteditable="true">
Worked at <strong>Belgrave Music Hall</strong>,
<strong>The Crown and Anchor</strong>, and
<strong>BFI Riverfront Kitchen</strong>. Developed communication,
composure under pressure, and reliability in customer-facing roles.
</p>
</Project>
</section>
<div class="w-full flex flex-col sm:flex-row gap-5">
<section class="flex-1">
<h2>Soft Skills</h2>
<ul class="list-disc list-inside">
<li>Communication & collaboration</li>
<li>Attention to detail</li>
<li>Problem solving</li>
<li>Adaptability</li>
<li>Time management</li>
</ul>
</section>
<section class="flex-1">
<h2>Interests</h2>
<ul class="list-disc list-inside">
<li>Leetcode</li>
<li>Learning Mandarin</li>
<li>Rhythm Games</li>
<li>Climbing, Gym</li>
<li>Board games, Meetup.com</li>
</ul>
</section>
</div>
</div>
<div class="no-print w-full h-20"></div>
</main>
</template>
<style scoped>
/* Fonts */
@font-face {
font-family: "big_noodle_titling";
src: url("/fonts/big_noodle_titling.woff2") format("woff2");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "CreatoDisplay";
src: url("/fonts/CreatoDisplay-Bold.woff2") format("woff2");
font-weight: normal;
font-style: normal;
font-display: swap;
}
/* Variables */
* {
--primary: black;
--secondary: #0000ff;
--tertiary: #ff0000;
--quaternary: #cccccc;
--background: white;
--font-heading: big_noodle_titling;
--font-text: CreatoDisplay;
--font-size-text: 1em;
--font-size-small: 0.9em;
--font-size-heading: 1.5em;
--font-size-subheading: 1.5em;
--font-size-subsubheading: 1.3em;
}
/* A4 Page */
.a4page {
line-height: 1.6;
font-family: var(--font-text);
width: 210mm;
height: 297mm;
padding: 10mm;
box-sizing: border-box;
background-color: var(--background);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
border: 1px solid var(--primary);
overflow: hidden;
margin: auto auto;
display: flex;
flex-direction: column;
}
.name {
font-size: 2em;
font-weight: bold;
justify-content: center;
align-content: center;
}
/* Component Styling */
main {
padding: 0px;
display: flex;
flex-direction: column;
height: fit-content;
background-color: white;
}
strong {
font-weight: 900;
}
span {
height: 2em;
}
h1,
h2,
h3,
h4 {
margin: 0px 0px 0.2em 0px;
border: none;
color: var(--primary);
font-family: var(--font-heading);
text-transform: uppercase;
}
h1 {
font-size: var(--font-size-heading);
}
h2 {
border-bottom: 1px solid var(--primary);
font-size: var(--font-size-subheading);
}
h3,
h4 {
font-size: var(--font-size-subsubheading);
}
a:hover {
color: var(--tertiary);
}
a {
background-color: transparent;
color: var(--secondary);
font-family: inherit;
font-size: var(--font-size-text);
}
p {
margin-bottom: 0.2em;
color: var(--primary);
font-size: var(--font-size-text);
}
table {
color: var(--secondary);
border-collapse: collapse;
border: 1px solid black;
}
td {
color: var(--secondary);
border-top: 1px solid var(--tertiary);
padding: 1px 10px 1px 10px;
font-size: var(--font-size-text);
text-align: left;
}
th {
color: var(--secondary);
border: 2px solid var(--tertiary);
padding: 1px 0px 1px 7px;
font-family: var(--font-heading);
font-size: var(--font-size-subsubheading);
background-color: var(--quaternary);
text-align: left;
}
@media print {
.no-print {
display: none !important;
}
}
small {
font-size: var(--font-size-small);
color: var(--primary);
}
ul {
font-size: var(--font-size-small);
margin: 0;
padding-left: 1.2em;
}
li {
font-size: var(--font-size-small);
color: var(--primary);
}
.skills-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0.3em 1em;
margin-bottom: 0.2em;
}
p[contenteditable] {
outline: none;
cursor: text;
}
p[contenteditable]:focus {
outline: none;
background-color: rgba(0, 0, 255, 0.05);
}
@media (max-width: 640px) {
.a4page {
width: 100%;
height: auto;
overflow: visible;
box-shadow: none;
border: none;
}
.skills-grid {
grid-template-columns: 1fr;
}
}
</style>

View File

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