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>