From e301e0d7c10d56c595de4641005fdd27ebcc1797 Mon Sep 17 00:00:00 2001
From: Adam French <adam.a.french@outlook.com>
Date: Thu, 11 Dec 2025 01:21:14 +0000
Subject: [PATCH] makin look nice

---
 nginx/vue/public/css/cv_styles.css            | 278 -----------------
 nginx/vue/public/css/styles.css               |  30 +-
 nginx/vue/src/App.vue                         |   2 +-
 nginx/vue/src/components/Navbar.vue           |  13 +-
 .../src/components/backgrounds/Halftone.vue   |  38 +++
 nginx/vue/src/components/home/Favorites.vue   |  19 +-
 nginx/vue/src/components/home/Feed.vue        |   3 +
 nginx/vue/src/components/home/Intro.vue       |  35 +--
 nginx/vue/src/components/home/Links.vue       |  18 +-
 nginx/vue/src/views/CV.vue                    | 295 ++++++++++++++++--
 nginx/vue/src/views/Home.vue                  |   5 +-
 11 files changed, 364 insertions(+), 372 deletions(-)
 delete mode 100644 nginx/vue/public/css/cv_styles.css
 create mode 100644 nginx/vue/src/components/backgrounds/Halftone.vue

diff --git a/nginx/vue/public/css/cv_styles.css b/nginx/vue/public/css/cv_styles.css
deleted file mode 100644
index dbb3b3f..0000000
--- a/nginx/vue/public/css/cv_styles.css
+++ /dev/null
@@ -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;
-}
diff --git a/nginx/vue/public/css/styles.css b/nginx/vue/public/css/styles.css
index a113c53..acadd93 100644
--- a/nginx/vue/public/css/styles.css
+++ b/nginx/vue/public/css/styles.css
@@ -37,14 +37,14 @@
     --portal_light_blue: #00a2ff;
 
     /* MAIN COLORS */
-    --primary: white;
-    --secondary: beige;
+    --primary: #000;
+    --secondary: #000;
     --tertiary: #5a6952;
     --quaternary: #424542;
 
     /* BACKGROUND COLORS */
-    --bg-body: #000000;
-    --bg_primary: #222;
+    --bg-body: #111;
+    --bg_primary: #244;
     --bg_secondary: #444;
     --bg_tertiary: #666;
     --bg_quaternary: #888;
@@ -61,7 +61,13 @@ body {
     width: 100vw;
     height: 100vh;
     font-family: var(--font-text);
-    background-color: var(--bg-body);
+}
+
+a {
+    text-decoration: none;
+    padding: 0px;
+    margin: 0px;
+    background-color: var(--bg_secondary);
 }
 
 h1,
@@ -152,19 +158,19 @@ button {
 }
 
 .bdr-primary {
-    border: 2px solid var(--primary);
+    border: 1px solid var(--primary);
 }
 
 .bdr-secondary {
-    border: 2px solid var(--secondary);
+    border: 1px solid var(--secondary);
 }
 
 .bdr-tertiary {
-    border: 2px solid var(--tertiary);
+    border: 1px solid var(--tertiary);
 }
 
 .bdr-quaternary {
-    border: 2px solid var(--quaternary);
+    border: 1px solid var(--quaternary);
 }
 
 /* SHADOWS */
@@ -230,16 +236,14 @@ button {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    justify-content: center;
-    gap: 10px;
+    margin: 0px;
 }
 
 .flex-col {
     display: flex;
     flex-direction: column;
     flex-wrap: wrap;
-    justify-content: center;
-    gap: 10px;
+    margin: 0px;
 }
 
 .floating {
diff --git a/nginx/vue/src/App.vue b/nginx/vue/src/App.vue
index 2bdbac8..7daba1d 100644
--- a/nginx/vue/src/App.vue
+++ b/nginx/vue/src/App.vue
@@ -5,7 +5,7 @@ import Footer from "@/components/Footer.vue";
 </script>
 
 <template>
-    <Navbar style="height: 5vh" class="no-print" />
+    <Navbar class="no-print" />
 
     <RouterView />
 
diff --git a/nginx/vue/src/components/Navbar.vue b/nginx/vue/src/components/Navbar.vue
index 8e1f7a3..d217124 100644
--- a/nginx/vue/src/components/Navbar.vue
+++ b/nginx/vue/src/components/Navbar.vue
@@ -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>
diff --git a/nginx/vue/src/components/backgrounds/Halftone.vue b/nginx/vue/src/components/backgrounds/Halftone.vue
new file mode 100644
index 0000000..4deeff6
--- /dev/null
+++ b/nginx/vue/src/components/backgrounds/Halftone.vue
@@ -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>
diff --git a/nginx/vue/src/components/home/Favorites.vue b/nginx/vue/src/components/home/Favorites.vue
index 1b38b11..548fd62 100644
--- a/nginx/vue/src/components/home/Favorites.vue
+++ b/nginx/vue/src/components/home/Favorites.vue
@@ -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>
 
diff --git a/nginx/vue/src/components/home/Feed.vue b/nginx/vue/src/components/home/Feed.vue
index f97d1eb..b278be6 100644
--- a/nginx/vue/src/components/home/Feed.vue
+++ b/nginx/vue/src/components/home/Feed.vue
@@ -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>
diff --git a/nginx/vue/src/components/home/Intro.vue b/nginx/vue/src/components/home/Intro.vue
index 23940f8..a0e4836 100644
--- a/nginx/vue/src/components/home/Intro.vue
+++ b/nginx/vue/src/components/home/Intro.vue
@@ -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>
diff --git a/nginx/vue/src/components/home/Links.vue b/nginx/vue/src/components/home/Links.vue
index baf8cd5..2749396 100644
--- a/nginx/vue/src/components/home/Links.vue
+++ b/nginx/vue/src/components/home/Links.vue
@@ -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>
diff --git a/nginx/vue/src/views/CV.vue b/nginx/vue/src/views/CV.vue
index c3e510c..8d64a56 100644
--- a/nginx/vue/src/views/CV.vue
+++ b/nginx/vue/src/views/CV.vue
@@ -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>
diff --git a/nginx/vue/src/views/Home.vue b/nginx/vue/src/views/Home.vue
index aed32e8..d5bcca2 100644
--- a/nginx/vue/src/views/Home.vue
+++ b/nginx/vue/src/views/Home.vue
@@ -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" />