adamf/web_server
1
1
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

Remove tailwind css from stylesheet and updated CV general to conform to ATS standards
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 25s
Details

Browse Source
This commit is contained in:
Adam French
2026-04-01 20:25:58 +01:00
parent a44011bf0b
commit 7e8e50f80a
4 changed files with 192 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
vue/src/assets/styles.css
View File

@@ -106,81 +106,105 @@ body {
} }
input { input {
@apply text-secondary border-primary border; color: var(--secondary);
border-color: var(--primary);
border-width: 1px;
} }
small { small {
@apply text-tertiary; color: var(--tertiary);
} }
code { code {
@apply text-tertiary; color: var(--tertiary);
} }
ul { ul {
@apply text-tertiary; color: var(--tertiary);
} }
li { li {
@apply text-tertiary; color: var(--tertiary);
} }
h1, h1,
h2, h2,
h3, h3,
h4 { h4 {
@apply m-1 font-heading text-primary; margin: 0.25rem;
font-family: var(--font_heading);
color: var(--primary);
} }
h3, h3,
h4 { h4 {
@apply text-lg; font-size: 1.125rem;
line-height: 1.75rem;
} }
h1 { h1 {
@apply text-2xl; font-size: 1.5rem;
line-height: 2rem;
} }
h2 { h2 {
@apply text-xl; font-size: 1.25rem;
line-height: 1.75rem;
} }
p { p {
@apply text-secondary; color: var(--secondary);
} }
a { a {
@apply text-primary bg-link text-center font-heading tracking-wide; color: var(--primary);
background-color: var(--link);
text-align: center;
font-family: var(--font_heading);
letter-spacing: 0.025em;
} }
input, input,
textarea { textarea {
@apply text-primary border p-2 w-full; color: var(--primary);
border-width: 1px;
padding: 0.5rem;
width: 100%;
} }
input::placeholder, input::placeholder,
textarea::placeholder { textarea::placeholder {
@apply text-secondary opacity-50; color: var(--secondary);
opacity: 0.5;
} }
table { table {
@apply border-primary border text-primary; border-color: var(--primary);
border-width: 1px;
color: var(--primary);
} }
td { td {
@apply gap-1; gap: 0.25rem;
} }
tr { tr {
@apply border-primary border-b text-primary; border-color: var(--primary);
border-bottom-width: 1px;
color: var(--primary);
} }
th { th {
@apply pr-3 pl-3 border-r border-dotted border-tertiary; padding-right: 0.75rem;
padding-left: 0.75rem;
border-right-width: 1px;
border-style: dotted;
border-color: var(--tertiary);
} }
td { td {
@apply pr-3 pl-3; padding-right: 0.75rem;
padding-left: 0.75rem;
} }
/* END OF ELEMENTS */ /* END OF ELEMENTS */
@@ -194,47 +218,51 @@ td {
/* BORDERS */ /* BORDERS */
.bdr-1 { .bdr-1 {
@apply border-30; border-width: 30px;
border-image: url("/img/borders/border1.gif") 30 round; border-image: url("/img/borders/border1.gif") 30 round;
} }
.bdr-1-inv { .bdr-1-inv {
@apply border-30; border-width: 30px;
border-image: url("/img/borders/border1inv.gif") 30 round; border-image: url("/img/borders/border1inv.gif") 30 round;
} }
.bdr-2 { .bdr-2 {
@apply border-5; border-width: 5px;
border-image: url("/img/borders/border4.gif") 7 round; border-image: url("/img/borders/border4.gif") 7 round;
} }
.bdr-cv { .bdr-cv {
@apply border-30; border-width: 30px;
border-image: url("/img/borders/bordercv.png") 30 round; border-image: url("/img/borders/bordercv.png") 30 round;
} }
/* A5 Page */ /* A5 Page */
.a5page-landscape { .a5page-landscape {
@apply m-0 box-content; margin: 0;
box-sizing: content-box;
height: 148mm; height: 148mm;
width: 210mm; width: 210mm;
} }
.a5page-portrait { .a5page-portrait {
@apply m-0 box-content; margin: 0;
box-sizing: content-box;
width: 148mm; width: 148mm;
height: 210mm; height: 210mm;
} }
/* A4 Page */ /* A4 Page */
.a4page-portrait { .a4page-portrait {
@apply m-0 box-content; margin: 0;
box-sizing: content-box;
width: 210mm; width: 210mm;
height: 297mm; height: 297mm;
} }
.a4page-landscape { .a4page-landscape {
@apply m-0 box-content; margin: 0;
box-sizing: content-box;
height: 210mm; height: 210mm;
width: 297mm; width: 297mm;
} }
@@ -279,23 +307,31 @@ td {
} }
.tl { .tl {
@apply absolute top-0 left-0; position: absolute;
top: 0;
left: 0;
} }
.tr { .tr {
@apply absolute top-0 right-0; position: absolute;
top: 0;
right: 0;
} }
.bl { .bl {
@apply absolute bottom-0 left-0; position: absolute;
bottom: 0;
left: 0;
} }
.br { .br {
@apply absolute bottom-0 right-0; position: absolute;
bottom: 0;
right: 0;
} }
.background { .background {
@apply fixed; position: fixed;
} }
.halftone { .halftone {

4
vue/src/components/text/Header.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div class="w-full border-b border-primary"> <div class="w-full border-b border-primary pb-2 mb-4">
<h1 class="pl-2 m-0"> <h1 class="p-0 m-0">
<slot /> <slot />
</h1> </h1>
</div> </div>

8
vue/src/views/CV/CV.vue
View File

@@ -7,13 +7,7 @@ import CVTemp from "./CVTemp.vue";
const CVHospitality = defineAsyncComponent(() => import("./CVHospitality.vue")); const CVHospitality = defineAsyncComponent(() => import("./CVHospitality.vue"));
const templates = [ const templates = [{ label: "General", component: CVGeneral }];
{ label: "General", component: CVGeneral },
{ label: "Backend", component: CVBackend },
{ label: "Frontend", component: CVFrontend },
{ label: "Hospitality", component: CVHospitality },
{ label: "Temp", component: CVTemp },
];
const selected = ref(0); const selected = ref(0);
const currentComponent = shallowRef(templates[0].component); const currentComponent = shallowRef(templates[0].component);

210
vue/src/views/CV/CVGeneral.vue
View File

@@ -8,29 +8,32 @@ import Project from "./Project.vue";
<div class="a4page justify-between"> <div class="a4page justify-between">
<section> <section>
<div class="flex flex-col sm:flex-row sm:justify-between"> <div class="flex flex-col sm:flex-row sm:justify-between">
<h1 class="name">Adam French</h1> <h1 class="flex-1 name">Adam French</h1>
<div class="contact-details sm:text-right"> <div class="contact-details">
<p>London, United Kingdom</p>
<p>+447563266931</p> <p>+447563266931</p>
<p>adam.a.french@outlook.com</p> <p>adam.a.french@outlook.com</p>
<h4> <p>
<a href="https://www.adam-french.co.uk"> <a href="https://www.adam-french.co.uk">
www.adam-french.co.uk www.adam-french.co.uk
</a> </a>
</h4> </p>
</div> </div>
</div> </div>
</section> </section>
<section> <section>
<h2>Profile</h2> <h2>Profile</h2>
<p> <p contenteditable="true">
First Class Honours graduate in Computer Science with Full Stack Developer with a First Class Honours degree in
Mathematics from the University of Leeds (81.1%), with a Computer Science with Mathematics from the University of
year abroad at the University of Waterloo. Proficient in Leeds (81.1%) and a year abroad at the University of
full-stack development, systems programming, and CI/CD Waterloo. Proficient in full-stack development, systems
automation. Eager to contribute to a collaborative programming, and CI/CD automation. Strong problem-solving
engineering team, apply strong academic foundations to and organisational skills. Eager to contribute to a
real-world problems, and grow through hands-on experience. collaborative engineering team, apply strong academic
foundations to real-world problems, and grow through
hands-on experience.
</p> </p>
</section> </section>
@@ -44,7 +47,7 @@ import Project from "./Project.vue";
> >
</div> </div>
<div> <div>
<strong>Frontend</strong><br /><small <strong>Frontend / Web Design</strong><br /><small
>Vue, React / Redux, Svelte, Tailwind CSS, >Vue, React / Redux, Svelte, Tailwind CSS,
WebAssembly</small WebAssembly</small
> >
@@ -73,12 +76,12 @@ import Project from "./Project.vue";
</template> </template>
<template v-slot:top> <template v-slot:top>
<small> <small>
Nginx, Vue, Postgres, Docker, Go, Python, Rust → Nginx, Vue, Postgres, Docker, Go, Python, Rust,
Wasm, Git Actions, JWT Auth Wasm, Git Actions, JWT Auth
</small> </small>
<small>2025</small> <small>2025</small>
</template> </template>
<p> <p contenteditable="true">
Self-hosted personal website with a fully automated Self-hosted personal website with a fully automated
CI/CD pipeline. Iterated across diverse tech stacks CI/CD pipeline. Iterated across diverse tech stacks
including Svelte, React/Redux, SQLite, Rust Actix, and including Svelte, React/Redux, SQLite, Rust Actix, and
@@ -99,7 +102,7 @@ import Project from "./Project.vue";
<small>Rust</small> <small>Rust</small>
<small>2026</small> <small>2026</small>
</template> </template>
<p> <p contenteditable="true">
CLI tool for building and navigating interactive code CLI tool for building and navigating interactive code
tutorials, with version-traversal semantics inspired by tutorials, with version-traversal semantics inspired by
Git. Git.
@@ -119,7 +122,7 @@ import Project from "./Project.vue";
<small>Rust, Linear Algebra, Multithreading</small> <small>Rust, Linear Algebra, Multithreading</small>
<small>2023</small> <small>2023</small>
</template> </template>
<p> <p contenteditable="true">
Parallelised recursive ray tracer for realistic 3D Parallelised recursive ray tracer for realistic 3D
rendering. Emphasised algorithmic efficiency and rendering. Emphasised algorithmic efficiency and
low-level memory management in Rust. low-level memory management in Rust.
@@ -140,7 +143,7 @@ import Project from "./Project.vue";
<small>Wolfram Mathematica</small> <small>Wolfram Mathematica</small>
<small>2024</small> <small>2024</small>
</template> </template>
<p> <p contenteditable="true">
Research project on Mobile Automata with data Research project on Mobile Automata with data
visualisation and academic presentation. Delivered visualisation and academic presentation. Delivered
within a tight deadline in collaboration with academic within a tight deadline in collaboration with academic
@@ -149,54 +152,49 @@ import Project from "./Project.vue";
</Project> </Project>
</section> </section>
<section> <div class="w-full flex flex-col sm:flex-row gap-5">
<h2>Education</h2> <section class="flex-1">
<div class="w-full h-fit flex flex-col sm:flex-row gap-5"> <h2>
<div class="flex-1 sm:border-r border-dotted sm:pr-3"> <a
<h3> href="https://www.adam-french.co.uk/pdf/transcript.pdf"
<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> University of Leeds
<small>2021–2025</small> </a>
</div> </h2>
<small>BSc Computer Science with Mathematics </small> <div
<ul class="list-disc list-inside"> class="flex-row flex place-content-between m-auto place-items-center"
<li>Algorithms & Data Structures I & II</li> >
<li>Compiler Design and Construction</li> <small>First Class Honours (81.1%)</small>
<li>Formal Languages & Finite Automata</li> <small>Sep 2021 – Jun 2025</small>
<li>Graph Algorithms & Complexity Theory</li>
<li>
Machine Learning · Databases · Computer
Processors
</li>
</ul>
</div> </div>
<div class="flex-1 sm:pl-3"> <small>BSc Computer Science with Mathematics </small>
<h3>University of Waterloo</h3> <ul class="list-disc list-inside">
<div <li>Algorithms & Data Structures I & II</li>
class="flex-row flex place-content-between m-auto place-items-center" <li>Compiler Design and Construction</li>
> <li>Formal Languages & Finite Automata</li>
<small>Year abroad</small> <li>Graph Algorithms & Complexity Theory</li>
<small>2023–2024</small> <li>
</div> Machine Learning, Databases, Computer Processors
<ul class="list-disc list-inside"> </li>
<li>Applied Cryptography</li> </ul>
<li>Introduction to Computer Graphics</li> </section>
<li> <section class="flex-1">
Introduction to Rings and Fields with <h2>University of Waterloo</h2>
Applications <div
</li> class="flex-row flex place-content-between m-auto place-items-center"
</ul> >
<small>Year abroad</small>
<small>Sep 2023 – Apr 2024</small>
</div> </div>
</div> <ul class="list-disc list-inside">
</section> <li>Applied Cryptography</li>
<li>Introduction to Computer Graphics</li>
<li>
Introduction to Rings and Fields with Applications
</li>
</ul>
</section>
</div>
</div> </div>
<div class="no-print w-full h-20"></div> <div class="no-print w-full h-20"></div>
@@ -206,31 +204,43 @@ import Project from "./Project.vue";
<h2>Experience</h2> <h2>Experience</h2>
<Project> <Project>
<template #left> <template #left>
<p>Hospitality</p> <h4>Hospitality</h4>
</template> </template>
<template #top> <template #top>
<small>Cashier, Bartender, Waiter</small> <small>Cashier, Bartender, Waiter</small>
<small>2018–2023</small> <small>Jan 2018 – Dec 2023</small>
</template> </template>
<p> <p contenteditable="true">
Worked at <em>Belgrave Music Hall</em>, Worked at <strong>Belgrave Music Hall</strong>,
<em>The Crown and Anchor</em>, and <strong>The Crown and Anchor</strong>, and
<em>BFI Riverfront Kitchen</em>. Developed <strong>BFI Riverfront Kitchen</strong>. Developed
communication, composure under pressure, and reliability communication, composure under pressure, and reliability
in customer-facing roles. in customer-facing roles.
</p> </p>
</Project> </Project>
</section> </section>
<section> <div class="w-full flex flex-col sm:flex-row gap-5">
<h2>Interests</h2> <section class="flex-1">
<ul class="list-disc list-inside"> <h2>Soft Skills</h2>
<li>Leetcode — daily competitive problem solving</li> <ul class="list-disc list-inside">
<li>Learning Mandarin</li> <li>Communication & collaboration</li>
<li>Rhythm Games</li> <li>Attention to detail</li>
<li>Climbing · Gym</li> <li>Problem solving</li>
<li>Board games · Meetup.com</li> <li>Adaptability</li>
</ul> <li>Time management</li>
</section> </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>
<div class="no-print w-full h-20"></div> <div class="no-print w-full h-20"></div>
@@ -265,12 +275,11 @@ import Project from "./Project.vue";
--font-heading: big_noodle_titling; --font-heading: big_noodle_titling;
--font-text: CreatoDisplay; --font-text: CreatoDisplay;
--font-size-name: 2.5em; --font-size-text: 1em;
--font-size-text: 100%;
--font-size-small: 0.9em; --font-size-small: 0.9em;
--font-size-heading: 2.1em; --font-size-heading: 1.5em;
--font-size-subheading: 1.7em; --font-size-subheading: 1.5em;
--font-size-subsubheading: 1.4em; --font-size-subsubheading: 1.3em;
} }
/* A4 Page */ /* A4 Page */
@@ -279,7 +288,7 @@ import Project from "./Project.vue";
font-family: var(--font-text); font-family: var(--font-text);
width: 210mm; width: 210mm;
height: 297mm; height: 297mm;
padding: 5mm; padding: 10mm;
box-sizing: border-box; box-sizing: border-box;
background-color: var(--background); background-color: var(--background);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
@@ -290,6 +299,13 @@ import Project from "./Project.vue";
flex-direction: column; flex-direction: column;
} }
.name {
font-size: 2em;
font-weight: bold;
justify-content: center;
align-content: center;
}
/* Component Styling */ /* Component Styling */
main { main {
padding: 0px; padding: 0px;
@@ -299,6 +315,10 @@ main {
background-color: white; background-color: white;
} }
strong {
font-weight: 900;
}
span { span {
height: 2em; height: 2em;
} }
@@ -307,11 +327,11 @@ h1,
h2, h2,
h3, h3,
h4 { h4 {
margin: 0px; margin: 0px 0px 0.2em 0px;
border: none; border: none;
color: var(--primary); color: var(--primary);
font-family: var(--font-heading); font-family: var(--font-heading);
text-transform: capitalize; text-transform: uppercase;
} }
h1 { h1 {
@@ -323,16 +343,20 @@ h2 {
font-size: var(--font-size-subheading); font-size: var(--font-size-subheading);
} }
h3 { h3,
h4 {
font-size: var(--font-size-subsubheading); font-size: var(--font-size-subsubheading);
} }
a:hover { a:hover {
color: var(--tertiary); color: var(--tertiary);
} }
a { a {
background-color: transparent; background-color: transparent;
color: var(--secondary); color: var(--secondary);
font-family: inherit;
font-size: var(--font-size-text);
} }
p { p {
@@ -394,6 +418,16 @@ li {
margin-bottom: 0.2em; 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) { @media (max-width: 640px) {
.a4page { .a4page {
width: 100%; width: 100%;