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

makin look nice

Browse Source
This commit is contained in:
Adam French
2025-12-11 01:21:14 +00:00
parent 5e77b480f7
commit e301e0d7c1
11 changed files with 364 additions and 372 deletions
Download Patch File Download Diff File Expand all files Collapse all files

278
nginx/vue/public/css/cv_styles.css
View File

@@ -1,278 +0,0 @@
/* Fonts */
/*@font-face {
font-family: "AldoTheApache";
src: url("/fonts/AldotheApache.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "RobotFont";
src: url("/fonts/Robot_Font.otf") format("opentype");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "m12";
src: url("/fonts/m12.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}*/
@font-face {
font-family: "big_noodle_titling";
src: url("/fonts/big_noodle_titling.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "CreatoDisplay";
src: url("/fonts/CreatoDisplay-Bold.otf") format("opentype");
font-weight: normal;
font-style: normal;
}
/* Variables */
* {
/* Blue - Beige */
/* --primary: #153448;
--secondary: #3C5B6F;
--tertiary: #948979;
--quaternary: #f5bb78;
--background: #DFD0B8; */
/* Blue - Turqouise */
/* --primary: #161D6F;
--secondary: #0B2F9F;
--tertiary: #98DED9;
--quaternary: #C7FFD8;
--background: #C2EFD1; */
/* Red - Blue */
/* --primary: #ff204e; */
/* --secondary: #a0153e; */
/* --tertiary: #5d0341; */
/* --quaternary: #3a0e41; */
/* --background: #00224d; */
/* Blue - Brown */
/* --primary: #35374B; */
/* --secondary: #344955; */
/* --tertiary: #50727b; */
/* --quaternary: #78a083; */
/* --background: #c7b077; */
/* Black - White */
--primary: black;
--secondary: black;
--tertiary: black;
--quaternary: #cccccc;
--background: white;
/* Blue - White */
/* --primary: #201e43; */
/* --secondary: #134b70; */
/* --tertiary: #508c9b; */
/* --quaternary: #cceeee; */
/* --background: #eeeeee; */
--font-heading: big_noodle_titling;
--font-text: CreatoDisplay;
--font-size-text: 90%;
--font-size-heading: 2.5em;
--font-size-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 {
line-height: 1.6;
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;
margin: 0;
padding: 0;
}
/*div {
all: unset;
}*/
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 {
all: unset;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 2px solid var(--primary);
}
.contact-details {
all: unset;
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;
}

30
nginx/vue/public/css/styles.css
View File

@@ -37,14 +37,14 @@
--portal_light_blue: #00a2ff; --portal_light_blue: #00a2ff;
/* MAIN COLORS */ /* MAIN COLORS */
--primary: white; --primary: #000;
--secondary: beige; --secondary: #000;
--tertiary: #5a6952; --tertiary: #5a6952;
--quaternary: #424542; --quaternary: #424542;
/* BACKGROUND COLORS */ /* BACKGROUND COLORS */
--bg-body: #000000; --bg-body: #111;
--bg_primary: #222; --bg_primary: #244;
--bg_secondary: #444; --bg_secondary: #444;
--bg_tertiary: #666; --bg_tertiary: #666;
--bg_quaternary: #888; --bg_quaternary: #888;
@@ -61,7 +61,13 @@ body {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
font-family: var(--font-text); font-family: var(--font-text);
background-color: var(--bg-body); }
a {
text-decoration: none;
padding: 0px;
margin: 0px;
background-color: var(--bg_secondary);
} }
h1, h1,
@@ -152,19 +158,19 @@ button {
} }
.bdr-primary { .bdr-primary {
border: 2px solid var(--primary); border: 1px solid var(--primary);
} }
.bdr-secondary { .bdr-secondary {
border: 2px solid var(--secondary); border: 1px solid var(--secondary);
} }
.bdr-tertiary { .bdr-tertiary {
border: 2px solid var(--tertiary); border: 1px solid var(--tertiary);
} }
.bdr-quaternary { .bdr-quaternary {
border: 2px solid var(--quaternary); border: 1px solid var(--quaternary);
} }
/* SHADOWS */ /* SHADOWS */
@@ -230,16 +236,14 @@ button {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; margin: 0px;
gap: 10px;
} }
.flex-col { .flex-col {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; margin: 0px;
gap: 10px;
} }
.floating { .floating {

2
nginx/vue/src/App.vue
View File

@@ -5,7 +5,7 @@ import Footer from "@/components/Footer.vue";
</script> </script>
<template> <template>
<Navbar style="height: 5vh" class="no-print" /> <Navbar class="no-print" />
<RouterView /> <RouterView />

13
nginx/vue/src/components/Navbar.vue
View File

@@ -1,15 +1,6 @@
<template> <template>
<nav class="no-print flex-row"> <nav class="flex-row">
<RouterLink to="/"><p>HOME</p></RouterLink> <RouterLink class="bdr-2" to="/"><h1>HOME</h1></RouterLink>
<!-- <RouterLink to="/cv"><h1>CV</h1></RouterLink> --> <!-- <RouterLink to="/cv"><h1>CV</h1></RouterLink> -->
</nav> </nav>
</template> </template>
<style scoped>
nav {
height: 10vh;
}
h1 {
height: 100%;
}
</style>

38
nginx/vue/src/components/backgrounds/Halftone.vue Normal file
View File

@@ -0,0 +1,38 @@
<template>
<div class="halftone" />
</template>
<style scoped>
div {
width: 100vw;
height: 100vh;
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
.halftone {
--dot_size: 1px;
--bg_size: 5px;
--bg_pos: calc(var(--bg_size) / 2);
--blur: 0%;
--dot_color: #044;
--bg_color: #114;
background-color: var(--bg_color);
background-image: radial-gradient(
circle at center,
var(--dot_color) var(--dot_size),
transparent var(--blur)
);
background-size: var(--bg_size) var(--bg_size);
background-position: 0 0;
mask-image: linear-gradient(
30deg,
rgba(1, 1, 1, 1) 0%,
rgba(1, 1, 1, 0.85) 100%
);
}
</style>

19
nginx/vue/src/components/home/Favorites.vue
View File

@@ -1,6 +1,21 @@
<template> <template>
<div> <div class="flex-row">
<img src="/img/epic.jpeg" /> <table>
<tr>
<td>Color</td>
<td>Aqua</td>
</tr>
<tr>
<td>Pet</td>
<td>Cat</td>
</tr>
</table>
<table>
<tr>
<td>Color</td>
<td>Blue</td>
</tr>
</table>
</div> </div>
</template> </template>

3
nginx/vue/src/components/home/Feed.vue
View File

@@ -57,6 +57,9 @@ onMounted(() => {
<button v-if="!leftCap" @click="prevPost">Prev</button> <button v-if="!leftCap" @click="prevPost">Prev</button>
<button v-if="!rightCap" @click="nextPost">Next</button> <button v-if="!rightCap" @click="nextPost">Next</button>
</div> </div>
<div v-else>
<h2>Can't fetch from the db yo</h2>
</div>
</template> </template>
<style scoped> <style scoped>

35
nginx/vue/src/components/home/Intro.vue
View File

@@ -1,34 +1,11 @@
<template> <template>
<div class="fill flex-row"> <div class="fill flex-col">
<img src="/img/epic.jpeg" class="img" />
<div class="div"> <div class="div">
<p>Hello</p> <h1>Welcome</h1>
<p>Hello</p> <p>This is my website, currently under construction.</p>
<p>Hello</p> <p>THANKS FOR VISITING ^_^</p>
<p>Hello</p> <p>THANKS FOR VISITING ^_^</p>
<p>Hello</p> <p>THANKS FOR VISITING ^_^</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
</div> </div>
</div> </div>
</template> </template>
<style scoped>
img {
width: 100%;
height: 100%;
}
.img {
flex: 3;
}
.div {
flex: 7;
}
</style>

18
nginx/vue/src/components/home/Links.vue
View File

@@ -1,22 +1,10 @@
<template> <template>
<div> <div class="flex-col">
<RouterLink to="/cv"> <RouterLink class="bdr-2" to="/cv">
<h1>CV</h1> <h1>CV</h1>
</RouterLink> </RouterLink>
<RouterLink to="/admin"> <RouterLink class="bdr-2" to="/admin">
<h1>ADMIN</h1> <h1>ADMIN</h1>
</RouterLink> </RouterLink>
</div> </div>
</template> </template>
<style scoped>
div {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 2px;
}
p {
background: var(--bg_primary);
}
</style>

295
nginx/vue/src/views/CV.vue
View File

@@ -1,12 +1,5 @@
<template> <template>
<main> <main>
<div
class="no-print"
style="width: 100%; text-align: center; margin: 20px 0"
>
<h1>Page 1</h1>
</div>
<div class="a4page"> <div class="a4page">
<div class="contact"> <div class="contact">
<h1>Adam French</h1> <h1>Adam French</h1>
@@ -147,12 +140,7 @@
</table> </table>
</div> </div>
<div <span class="no-print"></span>
class="no-print"
style="width: 100%; text-align: center; margin: 20px 0"
>
<h1>Page 2</h1>
</div>
<div class="a4page"> <div class="a4page">
<h2>Personal Projects</h2> <h2>Personal Projects</h2>
@@ -336,20 +324,283 @@
<!-- </table> --> <!-- </table> -->
<!-- </div> --> <!-- </div> -->
</div> </div>
<div
class="no-print"
style="width: 100%; text-align: center; margin: 20px 0"
>
<h1>END</h1>
</div>
</main> </main>
</template> </template>
<style scoped> <style scoped>
@import url("/css/cv_styles.css"); /* Fonts */
/*@font-face {
font-family: "AldoTheApache";
src: url("/fonts/AldotheApache.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "RobotFont";
src: url("/fonts/Robot_Font.otf") format("opentype");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "m12";
src: url("/fonts/m12.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}*/
@font-face {
font-family: "big_noodle_titling";
src: url("/fonts/big_noodle_titling.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "CreatoDisplay";
src: url("/fonts/CreatoDisplay-Bold.otf") format("opentype");
font-weight: normal;
font-style: normal;
}
/* Variables */
* {
/* Blue - Beige */
/* --primary: #153448;
--secondary: #3C5B6F;
--tertiary: #948979;
--quaternary: #f5bb78;
--background: #DFD0B8; */
/* Blue - Turqouise */
/* --primary: #161D6F;
--secondary: #0B2F9F;
--tertiary: #98DED9;
--quaternary: #C7FFD8;
--background: #C2EFD1; */
/* Red - Blue */
/* --primary: #ff204e; */
/* --secondary: #a0153e; */
/* --tertiary: #5d0341; */
/* --quaternary: #3a0e41; */
/* --background: #00224d; */
/* Blue - Brown */
/* --primary: #35374B; */
/* --secondary: #344955; */
/* --tertiary: #50727b; */
/* --quaternary: #78a083; */
/* --background: #c7b077; */
/* Black - White */
--primary: black;
--secondary: black;
--tertiary: black;
--quaternary: #cccccc;
--background: white;
/* Blue - White */
/* --primary: #201e43; */
/* --secondary: #134b70; */
/* --tertiary: #508c9b; */
/* --quaternary: #cceeee; */
/* --background: #eeeeee; */
--font-heading: big_noodle_titling;
--font-text: CreatoDisplay;
--font-size-text: 90%;
--font-size-heading: 2.5em;
--font-size-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 {
line-height: 1.6;
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 */
main { main {
overflow-y: scroll; display: flex;
flex-direction: column;
gap: 0px;
}
span {
height: 2em;
}
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 {
all: unset;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 2px solid var(--primary);
}
.contact-details {
all: unset;
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;
} }
</style> </style>

5
nginx/vue/src/views/Home.vue
View File

@@ -8,10 +8,13 @@ import Collage from "@/components/home/Collage.vue";
import Favorites from "@/components/home/Favorites.vue"; import Favorites from "@/components/home/Favorites.vue";
import Gym from "@/components/home/Gym.vue"; import Gym from "@/components/home/Gym.vue";
import Watching from "@/components/home/Watching.vue"; import Watching from "@/components/home/Watching.vue";
import Halftone from "@/components/backgrounds/Halftone.vue";
</script> </script>
<template> <template>
<main class="center-content flex-col bg-tile"> <main class="center-content flex-col">
<Halftone />
<div class="a4page-portrait bdr-1 grid"> <div class="a4page-portrait bdr-1 grid">
<Intro class="intro bdr-primary bg-primary" /> <Intro class="intro bdr-primary bg-primary" />
<Listening class="listening bdr-primary bg-primary" /> <Listening class="listening bdr-primary bg-primary" />