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

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

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

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

@@ -1,15 +1,6 @@
<template>
<nav class="no-print flex-row">
<RouterLink to="/"><p>HOME</p></RouterLink>
<nav class="flex-row">
<RouterLink class="bdr-2" to="/"><h1>HOME</h1></RouterLink>
<!-- <RouterLink to="/cv"><h1>CV</h1></RouterLink> -->
</nav>
</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>
<div>
<img src="/img/epic.jpeg" />
<div class="flex-row">
<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>
</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="!rightCap" @click="nextPost">Next</button>
</div>
<div v-else>
<h2>Can't fetch from the db yo</h2>
</div>
</template>
<style scoped>

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

@@ -1,34 +1,11 @@
<template>
<div class="fill flex-row">
<img src="/img/epic.jpeg" class="img" />
<div class="fill flex-col">
<div class="div">
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<h1>Welcome</h1>
<p>This is my website, currently under construction.</p>
<p>THANKS FOR VISITING ^_^</p>
<p>THANKS FOR VISITING ^_^</p>
<p>THANKS FOR VISITING ^_^</p>
</div>
</div>
</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>
<div>
<RouterLink to="/cv">
<div class="flex-col">
<RouterLink class="bdr-2" to="/cv">
<h1>CV</h1>
</RouterLink>
<RouterLink to="/admin">
<RouterLink class="bdr-2" to="/admin">
<h1>ADMIN</h1>
</RouterLink>
</div>
</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>
<main>
<div
class="no-print"
style="width: 100%; text-align: center; margin: 20px 0"
>
<h1>Page 1</h1>
</div>
<div class="a4page">
<div class="contact">
<h1>Adam French</h1>
@@ -147,12 +140,7 @@
</table>
</div>
<div
class="no-print"
style="width: 100%; text-align: center; margin: 20px 0"
>
<h1>Page 2</h1>
</div>
<span class="no-print"></span>
<div class="a4page">
<h2>Personal Projects</h2>
@@ -336,20 +324,283 @@
<!-- </table> -->
<!-- </div> -->
</div>
<div
class="no-print"
style="width: 100%; text-align: center; margin: 20px 0"
>
<h1>END</h1>
</div>
</main>
</template>
<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 {
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>

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 Gym from "@/components/home/Gym.vue";
import Watching from "@/components/home/Watching.vue";
import Halftone from "@/components/backgrounds/Halftone.vue";
</script>
<template>
<main class="center-content flex-col bg-tile">
<main class="center-content flex-col">
<Halftone />
<div class="a4page-portrait bdr-1 grid">
<Intro class="intro bdr-primary bg-primary" />
<Listening class="listening bdr-primary bg-primary" />