migrating to vue
This commit is contained in:
@@ -4,18 +4,10 @@ import { RouterLink, RouterView } from "vue-router";
|
||||
|
||||
<template>
|
||||
<header>
|
||||
<img
|
||||
alt="Vue logo"
|
||||
class="logo"
|
||||
src="@/assets/logo.svg"
|
||||
width="125"
|
||||
height="125"
|
||||
/>
|
||||
|
||||
<div class="wrapper">
|
||||
<nav>
|
||||
<RouterLink to="/">Home</RouterLink>
|
||||
<RouterLink to="/about">About</RouterLink>
|
||||
<RouterLink to="/cv">CV</RouterLink>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
272
nginx/vue/src/assets/css/cv_styles.css
Normal file
272
nginx/vue/src/assets/css/cv_styles.css
Normal file
@@ -0,0 +1,272 @@
|
||||
/* Fonts */
|
||||
@font-face {
|
||||
font-family: "AldoTheApache";
|
||||
src: url("/fonts/AldotheApache.ttf") format("truetype");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "RobotFont";
|
||||
src: url("/fonts/Robot_Font.otf") format("opentype");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "m12";
|
||||
src: url("/fonts/m12.ttf") format("truetype");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "big_noodle_titling";
|
||||
src: url("/fonts/big_noodle_titling.ttf") format("truetype");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "CreatoDisplay";
|
||||
src: url("/fonts/CreatoDisplay-Bold.otf") format("opentype");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* Variables */
|
||||
:root {
|
||||
/* Blue - Beige */
|
||||
/* --primary: #153448;
|
||||
--secondary: #3C5B6F;
|
||||
--tertiary: #948979;
|
||||
--quaternary: #f5bb78;
|
||||
--background: #DFD0B8; */
|
||||
|
||||
/* Blue - Turqouise */
|
||||
/* --primary: #161D6F;
|
||||
--secondary: #0B2F9F;
|
||||
--tertiary: #98DED9;
|
||||
--quaternary: #C7FFD8;
|
||||
--background: #C2EFD1; */
|
||||
|
||||
/* Red - Blue */
|
||||
/* --primary: #ff204e; */
|
||||
/* --secondary: #a0153e; */
|
||||
/* --tertiary: #5d0341; */
|
||||
/* --quaternary: #3a0e41; */
|
||||
/* --background: #00224d; */
|
||||
|
||||
/* Blue - Brown */
|
||||
/* --primary: #35374B; */
|
||||
/* --secondary: #344955; */
|
||||
/* --tertiary: #50727b; */
|
||||
/* --quaternary: #78a083; */
|
||||
/* --background: #c7b077; */
|
||||
|
||||
/* Black - White */
|
||||
--primary: black;
|
||||
--secondary: black;
|
||||
--tertiary: black;
|
||||
--quaternary: #cccccc;
|
||||
--background: white;
|
||||
|
||||
/* Blue - White */
|
||||
/* --primary: #201e43; */
|
||||
/* --secondary: #134b70; */
|
||||
/* --tertiary: #508c9b; */
|
||||
/* --quaternary: #cceeee; */
|
||||
/* --background: #eeeeee; */
|
||||
|
||||
--font-heading: big_noodle_titling;
|
||||
--font-text: CreatoDisplay;
|
||||
--font-size-text: 90%;
|
||||
--font-size-heading: 2.5em;
|
||||
--font-size-tableheading: 1.2em;
|
||||
}
|
||||
|
||||
/* A5 Page */
|
||||
.a5page {
|
||||
/* overflow: scroll; */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: var(--font-text);
|
||||
height: 148mm;
|
||||
width: 210mm;
|
||||
padding: 5mm;
|
||||
box-sizing: border-box;
|
||||
background-color: var(--background);
|
||||
box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2);
|
||||
border: solid 2px var(--primary);
|
||||
}
|
||||
|
||||
/* A4 Page */
|
||||
.a4page {
|
||||
font-family: var(--font-text);
|
||||
width: 210mm;
|
||||
/* Standard A4 width */
|
||||
height: 297mm;
|
||||
/* Standard A4 height */
|
||||
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: auto;
|
||||
/* Enables scrolling when content exceeds height */
|
||||
margin: 0 auto;
|
||||
/* Centers the page horizontally */
|
||||
}
|
||||
|
||||
/* Component Styling */
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
color: var(--primary);
|
||||
font-family: var(--font-heading);
|
||||
text-transform: capitalize;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: var(--font-size-heading);
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0px;
|
||||
border-bottom: 2px solid var(--primary);
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--secondary);
|
||||
font-size: var(--font-size-text);
|
||||
margin-top: 0.3em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
table {
|
||||
color: var(--secondary);
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
td {
|
||||
/* border: 2px solid var(--tertiary); */
|
||||
border-top: 1px solid var(--tertiary);
|
||||
padding: 1px 0px 1px 10px;
|
||||
font-size: var(--font-size-text);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
th {
|
||||
border: 2px solid var(--tertiary);
|
||||
padding: 1px 0px 1px 7px;
|
||||
font-family: var(--font-heading);
|
||||
font-size: var(--font-size-tableheading);
|
||||
background-color: var(--quaternary);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:visited {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* Classes */
|
||||
/* Cover Navigation (for ease of use) */
|
||||
.cover-nav {
|
||||
position: fixed;
|
||||
top: 0.5vh;
|
||||
/* Position the element at the top of the screen */
|
||||
left: 80vw;
|
||||
/* Position the element at the left of the screen */
|
||||
border: 2px solid var(--tertiary);
|
||||
width: 19.5vw;
|
||||
/* Make the element span the width of the screen (optional) */
|
||||
background-color: var(--background);
|
||||
/* Set a background color to avoid overlap issues */
|
||||
z-index: 1000;
|
||||
/* Ensures the element is above other content */
|
||||
}
|
||||
|
||||
.cover-nav td,
|
||||
tr {
|
||||
font-family: var(--font-text);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.cover-nav th {
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
border-bottom: 2px solid var(--tertiary);
|
||||
}
|
||||
|
||||
@media print {
|
||||
.no-print {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Cover letter styling */
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
border: 0px solid var(--primary);
|
||||
resize: none;
|
||||
font-family: var(--font-text);
|
||||
}
|
||||
|
||||
/* Contact At Top of Page */
|
||||
.contact {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 2px solid var(--primary);
|
||||
}
|
||||
|
||||
.contact-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.contact-details p {
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
/* Interests and Skills at bottom of page */
|
||||
.interests {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
border-top: solid 2px var(--primary);
|
||||
}
|
||||
|
||||
.interests td,
|
||||
tr,
|
||||
th {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.row-leftalign {
|
||||
/* background-image: url("https://www.fridakahlo.org/assets/img/paintings/without-hope.jpg"); */
|
||||
text-align: left;
|
||||
}
|
||||
@@ -1,5 +1,3 @@
|
||||
import "./assets/main.css";
|
||||
|
||||
import { createApp } from "vue";
|
||||
import App from "./App.vue";
|
||||
import router from "./router";
|
||||
|
||||
24
nginx/vue/src/views/Bookmarks.vue
Normal file
24
nginx/vue/src/views/Bookmarks.vue
Normal file
@@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Cyber Security</h1>
|
||||
<a href="https://pwn.college/">pwn.college</a>
|
||||
<a href="https://osintframework.com/">OSINT</a>
|
||||
<a href="https://overthewire.org/">OverTheWire</a>
|
||||
<a href="https://tryhackme.com/">TryHackMe</a>
|
||||
|
||||
<h1>Radio Stations</h1>
|
||||
<a href="https://www.radiohelsinki.fi/">Radio Helsinki</a>
|
||||
<a href="https://palanga.live/">Palanga Street Radio</a>
|
||||
<a href="https://idaidaida.net/">IDA Radio</a>
|
||||
<a href="https://www.tirkultura.lv/">Tīrkultūra</a>
|
||||
|
||||
<h1>Chinese</h1>
|
||||
<a href="https://www.mdbg.net/chinese/dictionary"
|
||||
>MDBG Chinese Dictionary</a
|
||||
>
|
||||
|
||||
<h1>Art</h1>
|
||||
<a href="https://www.fridakahlo.org/">Frida Kahlo</a>
|
||||
<a href="https://www.cameronsworld.net/">Cameron's world</a>
|
||||
</div>
|
||||
</template>
|
||||
@@ -348,8 +348,8 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
@import "/css/cv_styles.css";
|
||||
<style scoped>
|
||||
@import "@assets/css/cv_styles.css";
|
||||
@media print {
|
||||
@page {
|
||||
size: A4 portrait;
|
||||
|
||||
73
nginx/vue/src/views/CoverLetters.vue
Normal file
73
nginx/vue/src/views/CoverLetters.vue
Normal file
@@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<table id="cover-nav" class="cover-nav no-print">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Companies</th>
|
||||
<th>Completed</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="#LloydsBank">Lloyds</a></td>
|
||||
<td>YES</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div
|
||||
class="no-print"
|
||||
style="width: 100%; text-align: center; margin: 20px 0"
|
||||
></div>
|
||||
<div id="LloydsBank" class="a5page">
|
||||
<div class="contact">
|
||||
<h1>Adam French</h1>
|
||||
<!-- <a href="index.html"><img width=25 height=50 src="img/rune.png"></a> -->
|
||||
<div class="contact-details">
|
||||
<p>+447563266931</p>
|
||||
<p>adam.a.french@outlook.com</p>
|
||||
</div>
|
||||
</div>
|
||||
<h2>BAE graduate digital intelligence software engineer</h2>
|
||||
<p>
|
||||
I am writing to express my interest in your software engineering
|
||||
position. BAE Systems has hosted multiple stools at the University
|
||||
of Leeds and have always exhibited their development of leading-edge
|
||||
software and technology. This is where the origin of my interest in
|
||||
BAE systems emerged and I'm hopeful that this interest shall
|
||||
continue.
|
||||
</p>
|
||||
<p>
|
||||
I'm confidient im a strong fit for this role. My technical
|
||||
background includes extensive experience with frontend frameworks
|
||||
such as React. My devotion however lies more in backend development
|
||||
as has more potential to graple problems related to optimisation and
|
||||
designing coherent interfaces.
|
||||
</p>
|
||||
<p>
|
||||
<em> The C# Programming Yellow Book </em> was my first introduction
|
||||
to C# during A-Level, Java was our vessel for teaching
|
||||
object-orientated programming at university. I am confident I have
|
||||
the relevant experience to grasp the languages stated for the role I
|
||||
am applying for.
|
||||
</p>
|
||||
<p>
|
||||
My academic background in Computer Science and Mathematics has honed
|
||||
my ability to translate abstract concepts into structured, logical
|
||||
solutions. Just as I have transformed theoretical hypotheses into
|
||||
formal proofs, I aim to transform business requirements into robust,
|
||||
maintainable software systems through collaboration and rigorous
|
||||
reasoning.
|
||||
</p>
|
||||
<p>Thank you for reading - Adam F</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
@import "@assets/css/cv_styles.css";
|
||||
@media print {
|
||||
@page {
|
||||
size: A5 landscape;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user