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

Home has its own components and grid system

Browse Source
This commit is contained in:
Adam French
2025-12-09 17:26:35 +00:00
parent 36a769072d
commit 529fa9d585
10 changed files with 267 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
nginx/vue/src/components/home/Collage.vue Normal file
View File

@@ -0,0 +1,11 @@
<template>
<div>
<img src="/img/epic.jpeg" />
</div>
</template>
<style scoped>
img {
width: 100%;
}
</style>

3
nginx/vue/src/components/home/Favorites.vue Normal file
View File

@@ -0,0 +1,3 @@
<template>
<div></div>
</template>

22
nginx/vue/src/components/home/Feed.vue Normal file
View File

@@ -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>

3
nginx/vue/src/components/home/Gym.vue Normal file
View File

@@ -0,0 +1,3 @@
<template>
<div></div>
</template>

26
nginx/vue/src/components/home/Intro.vue Normal file
View File

@@ -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>

34
nginx/vue/src/components/home/Links.vue Normal file
View File

@@ -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>

71
nginx/vue/src/components/home/Listening.vue Normal file
View File

@@ -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>

21
nginx/vue/src/components/home/Stamps.vue Normal file
View File

@@ -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>

3
nginx/vue/src/components/home/Watching.vue Normal file
View File

@@ -0,0 +1,3 @@
<template>
<div></div>
</template>

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

@@ -1,74 +1,80 @@
<script setup> <script setup>
import SpotifyListening from "@/components/spotify/Listening.vue"; import Intro from "@/components/home/Intro.vue";
import SpotifyRecent from "@/components/spotify/Recent.vue"; import Stamps from "@/components/home/Stamps.vue";
import Radio from "@/components/Radio.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> </script>
<template> <template>
<main class="flex-row"> <main class="center-content flex-col">
<div class="border4 tile1 shadow1"> <div class="a4page-portrait bdr-1 grid">
<div class="bg-white fill"> <Intro class="intro bdr-2" />
<img src="/img/epic.jpeg" /> <Listening class="listening bdr-2" />
<div class="margin1"> <Stamps class="stamps bdr-2" />
<h1>Welcome</h1> <Feed class="feed bdr-2" />
<p>Hi im Adam, this is my website, pls don't greif</p> <Links class="links bdr-2" />
</div> <Collage class="collage bdr-2" />
</div> <Favorites class="favorites bdr-2" />
</div> <Gym class="gym bdr-2" />
<Watching class="watching bdr-2" />
<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 />
</div> </div>
</main> </main>
</template> </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>