From 529fa9d58502fff992ee0a4e649a17c509a78fe3 Mon Sep 17 00:00:00 2001
From: Adam French <adam.a.french@outlook.com>
Date: Tue, 9 Dec 2025 17:26:35 +0000
Subject: [PATCH] Home has its own components and grid system

---
 nginx/vue/src/components/home/Collage.vue   |  11 ++
 nginx/vue/src/components/home/Favorites.vue |   3 +
 nginx/vue/src/components/home/Feed.vue      |  22 +++
 nginx/vue/src/components/home/Gym.vue       |   3 +
 nginx/vue/src/components/home/Intro.vue     |  26 ++++
 nginx/vue/src/components/home/Links.vue     |  34 +++++
 nginx/vue/src/components/home/Listening.vue |  71 ++++++++++
 nginx/vue/src/components/home/Stamps.vue    |  21 +++
 nginx/vue/src/components/home/Watching.vue  |   3 +
 nginx/vue/src/views/Home.vue                | 140 ++++++++++----------
 10 files changed, 267 insertions(+), 67 deletions(-)
 create mode 100644 nginx/vue/src/components/home/Collage.vue
 create mode 100644 nginx/vue/src/components/home/Favorites.vue
 create mode 100644 nginx/vue/src/components/home/Feed.vue
 create mode 100644 nginx/vue/src/components/home/Gym.vue
 create mode 100644 nginx/vue/src/components/home/Intro.vue
 create mode 100644 nginx/vue/src/components/home/Links.vue
 create mode 100644 nginx/vue/src/components/home/Listening.vue
 create mode 100644 nginx/vue/src/components/home/Stamps.vue
 create mode 100644 nginx/vue/src/components/home/Watching.vue

diff --git a/nginx/vue/src/components/home/Collage.vue b/nginx/vue/src/components/home/Collage.vue
new file mode 100644
index 0000000..1b38b11
--- /dev/null
+++ b/nginx/vue/src/components/home/Collage.vue
@@ -0,0 +1,11 @@
+<template>
+    <div>
+        <img src="/img/epic.jpeg" />
+    </div>
+</template>
+
+<style scoped>
+img {
+    width: 100%;
+}
+</style>
diff --git a/nginx/vue/src/components/home/Favorites.vue b/nginx/vue/src/components/home/Favorites.vue
new file mode 100644
index 0000000..a1c80d0
--- /dev/null
+++ b/nginx/vue/src/components/home/Favorites.vue
@@ -0,0 +1,3 @@
+<template>
+    <div></div>
+</template>
diff --git a/nginx/vue/src/components/home/Feed.vue b/nginx/vue/src/components/home/Feed.vue
new file mode 100644
index 0000000..d54414e
--- /dev/null
+++ b/nginx/vue/src/components/home/Feed.vue
@@ -0,0 +1,22 @@
+<script setup>
+import { ref, onMounted } from "vue";
+import axios from "axios";
+
+const posts = ref([]);
+async function fetchPosts() {
+    try {
+        const res = await axios.get("https://adam-french.co.uk/api/posts");
+        posts.value = res.data;
+    } catch (err) {
+        console.error(err);
+    }
+}
+
+onMounted(() => {
+    fetchPosts();
+});
+</script>
+
+<template>
+    <div></div>
+</template>
diff --git a/nginx/vue/src/components/home/Gym.vue b/nginx/vue/src/components/home/Gym.vue
new file mode 100644
index 0000000..a1c80d0
--- /dev/null
+++ b/nginx/vue/src/components/home/Gym.vue
@@ -0,0 +1,3 @@
+<template>
+    <div></div>
+</template>
diff --git a/nginx/vue/src/components/home/Intro.vue b/nginx/vue/src/components/home/Intro.vue
new file mode 100644
index 0000000..aa6373a
--- /dev/null
+++ b/nginx/vue/src/components/home/Intro.vue
@@ -0,0 +1,26 @@
+<template>
+    <div class="fill flex-row">
+        <img src="/img/epic.jpeg" class="img" />
+        <div class="div">
+            <p>Hello</p>
+            <p>Hello</p>
+            <p>Hello</p>
+            <p>Hello</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
new file mode 100644
index 0000000..c6a4f82
--- /dev/null
+++ b/nginx/vue/src/components/home/Links.vue
@@ -0,0 +1,34 @@
+<template>
+    <div>
+        <RouterLink to="/cv">
+            <img src="/img/stamps/BC7BDBB9-36FF-4DBE-B825-3603BFE00BE0.gif" />
+        </RouterLink>
+        <RouterLink to="/login">
+            <img src="/img/stamps/BC7BDBB9-36FF-4DBE-B825-3603BFE00BE0.gif" />
+        </RouterLink>
+        <RouterLink to="/login">
+            <img src="/img/stamps/BC7BDBB9-36FF-4DBE-B825-3603BFE00BE0.gif" />
+        </RouterLink>
+        <RouterLink to="/login">
+            <img src="/img/stamps/BC7BDBB9-36FF-4DBE-B825-3603BFE00BE0.gif" />
+        </RouterLink>
+        <RouterLink to="/login">
+            <img src="/img/stamps/BC7BDBB9-36FF-4DBE-B825-3603BFE00BE0.gif" />
+        </RouterLink>
+        <RouterLink to="/login">
+            <img src="/img/stamps/BC7BDBB9-36FF-4DBE-B825-3603BFE00BE0.gif" />
+        </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/components/home/Listening.vue b/nginx/vue/src/components/home/Listening.vue
new file mode 100644
index 0000000..946a11c
--- /dev/null
+++ b/nginx/vue/src/components/home/Listening.vue
@@ -0,0 +1,71 @@
+<script setup>
+import { ref, onMounted } from "vue";
+import axios from "axios";
+
+const song = ref(null);
+const fetched = ref(false);
+let songs = [];
+const len = 3;
+let idx = 0;
+
+async function fetchRecent() {
+    try {
+        const res = await axios.get(
+            "https://adam-french.co.uk/api/spotify/recent",
+        );
+        songs = res.data;
+        fetched.value = true;
+        song.value = songs[0];
+    } catch (err) {
+        console.error(err);
+    }
+}
+
+function nextSong() {
+    song.value = songs[idx];
+    idx = (idx + 1) % len;
+}
+
+onMounted(() => {
+    fetchRecent();
+    setInterval(fetchRecent, 120000);
+    setInterval(nextSong, 40000);
+});
+</script>
+
+<template>
+    <Transition name="fade" mode="out-in">
+        <div v-if="fetched" :key="song" v-on:click="nextSong" class="flex-row">
+            <img :src="song.track.album.images[0].url" />
+            <p><strong>Song:</strong> {{ song.track.name }}</p>
+            <p><strong>Artist:</strong> {{ song.track.artists[0].name }}</p>
+        </div>
+        <div v-else class="flex-row">
+            <img src="/img/Untitled.png" />
+            <p>I ain't listenin to nofin rn :/</p>
+        </div>
+    </Transition>
+</template>
+
+<style scoped>
+img {
+    width: 70%;
+}
+p {
+    width: 100%;
+    margin: 0 auto;
+}
+
+.fade-enter-active {
+    transition: opacity 0.5s ease;
+}
+.fade-leave-active {
+    transition: opacity 0.5s ease;
+}
+.fade-enter-from {
+    opacity: 0;
+}
+.fade-leave-to {
+    opacity: 0;
+}
+</style>
diff --git a/nginx/vue/src/components/home/Stamps.vue b/nginx/vue/src/components/home/Stamps.vue
new file mode 100644
index 0000000..d7a3149
--- /dev/null
+++ b/nginx/vue/src/components/home/Stamps.vue
@@ -0,0 +1,21 @@
+<template>
+    <div class="flex-row">
+        <div>
+            <img src="/img/stamps/12351B56-A370-465D-A951-739A480A05EC.gif" />
+            <img src="/img/stamps/71663263-8E08-4873-8EE1-96DC342C57EB.gif" />
+            <img src="/img/stamps/8a0014c1.gif" />
+        </div>
+        <div>
+            <img src="/img/stamps/BC7BDBB9-36FF-4DBE-B825-3603BFE00BE0.gif" />
+            <img src="/img/stamps/BC7BDBB9-36FF-4DBE-B825-3603BFE00BE0.gif" />
+            <img src="/img/stamps/BC7BDBB9-36FF-4DBE-B825-3603BFE00BE0.gif" />
+        </div>
+    </div>
+</template>
+
+<style scoped>
+img {
+    width: 89px;
+    height: 59px;
+}
+</style>
diff --git a/nginx/vue/src/components/home/Watching.vue b/nginx/vue/src/components/home/Watching.vue
new file mode 100644
index 0000000..a1c80d0
--- /dev/null
+++ b/nginx/vue/src/components/home/Watching.vue
@@ -0,0 +1,3 @@
+<template>
+    <div></div>
+</template>
diff --git a/nginx/vue/src/views/Home.vue b/nginx/vue/src/views/Home.vue
index 0932241..1a87bad 100644
--- a/nginx/vue/src/views/Home.vue
+++ b/nginx/vue/src/views/Home.vue
@@ -1,74 +1,80 @@
 <script setup>
-import SpotifyListening from "@/components/spotify/Listening.vue";
-import SpotifyRecent from "@/components/spotify/Recent.vue";
-import Radio from "@/components/Radio.vue";
+import Intro from "@/components/home/Intro.vue";
+import Stamps from "@/components/home/Stamps.vue";
+import Listening from "@/components/home/Listening.vue";
+import Links from "@/components/home/Links.vue";
+import Feed from "@/components/home/Feed.vue";
+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";
 </script>
 
 <template>
-    <main class="flex-row">
-        <div class="border4 tile1 shadow1">
-            <div class="bg-white fill">
-                <img src="/img/epic.jpeg" />
-                <div class="margin1">
-                    <h1>Welcome</h1>
-                    <p>Hi im Adam, this is my website, pls don't greif</p>
-                </div>
-            </div>
-        </div>
-
-        <div class="border-cv tile1">
-            <div class="border2 bg-white shadow1 fill">
-                <!-- <video>
-                    <source src="/img/memes/1761540684738196.webm" />
-                </video> -->
-                <img src="/img/img.png" />
-                <RouterLink to="/cv"><h2>cv</h2></RouterLink>
-            </div>
-        </div>
-
-        <!-- <div class="bordered-1">
-            <div class="bordered-2">
-                <video>
-                    <source src="/img/demoman/m2-res_720p.mp4" />
-                </video>
-                <h2>bookmarks</h2>
-                <RouterLink to="/bookmarks">bookmarks</RouterLink>
-            </div>
-        </div> -->
-
-        <!-- <div class="bordered-1">
-            <div class="bordered-2">
-                <video>
-                    <source src="/img/demoman/1761570214170465.webm" />
-                </video>
-                <h2>Shrines</h2>
-                <RouterLink to="/shrines/gto">gto</RouterLink>
-                <RouterLink to="/shrines/demoman">demoman</RouterLink>
-                <RouterLink to="/shrines/skipskipbenben"
-                    >skipskipbenben</RouterLink
-                >
-                <RouterLink to="/shrines/evangelion">evangelion</RouterLink>
-            </div>
-        </div> -->
-
-        <div class="border1 tile1">
-            <Radio class="fill bg-white border2 shadow1" />
-        </div>
-
-        <div class="border1 tile3">
-            <SpotifyRecent />
-        </div>
-
-        <div class="border1 tile1">
-            <SpotifyListening class="border2 bg-white shadow1 fill" />
-        </div>
-
-        <div class="border1 tile1">
-            <Posts />
-        </div>
-
-        <div class="border1 tile1">
-            <Login />
+    <main class="center-content flex-col">
+        <div class="a4page-portrait bdr-1 grid">
+            <Intro class="intro bdr-2" />
+            <Listening class="listening bdr-2" />
+            <Stamps class="stamps bdr-2" />
+            <Feed class="feed bdr-2" />
+            <Links class="links bdr-2" />
+            <Collage class="collage bdr-2" />
+            <Favorites class="favorites bdr-2" />
+            <Gym class="gym bdr-2" />
+            <Watching class="watching bdr-2" />
         </div>
     </main>
 </template>
+
+<style scoped>
+.grid {
+    display: grid;
+    grid-gap: 10px;
+    grid-template-columns: repeat(10, 1fr);
+    grid-template-rows: repeat(10, 1fr);
+}
+
+.intro {
+    grid-column: 1 / span 6;
+    grid-row: 1 / span 4;
+}
+
+.listening {
+    grid-column: 7 / span 4;
+    grid-row: 1 / span 3;
+}
+
+.stamps {
+    grid-column: 7 / span 4;
+    grid-row: 4 / span 1;
+}
+
+.feed {
+    grid-column: 1 / span 3;
+    grid-row: 5 / span 4;
+}
+
+.links {
+    grid-column: 4 / span 2;
+    grid-row: 5 / span 4;
+}
+
+.collage {
+    grid-column: 6 / span 5;
+    grid-row: 5 / span 4;
+}
+
+.favorites {
+    grid-column: span 4;
+    grid-row: span 2;
+}
+.gym {
+    grid-column: span 3;
+    grid-row: span 2;
+}
+
+.watching {
+    grid-column: span 3;
+    grid-row: span 2;
+}
+</style>