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

new components

Browse Source
This commit is contained in:
Adam French
2026-02-10 16:46:49 +00:00
parent f851b0258f
commit e92ac49140
6 changed files with 135 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -49,14 +49,10 @@ const faces_string = faces.join(" ");
<RouterLink class="bdr-2 bg-bg_primary" to="/" v-if="!inHome">
<a>HOME</a>
</RouterLink>
<RouterLink
class="bdr-2 bg-bg_primary"
v-if="parentPath"
:to="parentPath"
>
<RouterLink class="bdr-2 bg-bg_primary" v-if="parentPath" :to="parentPath">
<a>UP</a>
</RouterLink>
<Headline class="border flex-1">
<Headline class="border flex-1 max-w-full">
<code class="whitespace-pre">{{ faces_string }}</code>
</Headline>
</nav>

47
nginx/vue/src/components/text/Headline.vue
View File

@@ -1,9 +1,8 @@
<script setup>
import { ref, onMounted, useTemplateRef, onUnmounted } from "vue";
import { onMounted, useTemplateRef, onUnmounted } from "vue";
const container = useTemplateRef("container");
const item1 = useTemplateRef("item1");
const item2 = useTemplateRef("item2");
let offset = 0;
@@ -14,7 +13,6 @@ const speed = 0.5; // pixels per frame
function animate() {
const ctnr = container.value;
const it1 = item1.value;
const it2 = item2.value;
const width = Math.max(ctnr.offsetWidth, it1.scrollWidth);
@@ -24,8 +22,7 @@ function animate() {
offset += width;
}
it1.style.transform = `translateX(${offset}px)`;
it2.style.transform = `translateX(${width + offset}px)`;
ctnr.style.transform = `translateX(${offset}px)`;
rafId = requestAnimationFrame(animate);
}
@@ -40,40 +37,32 @@ onUnmounted(() => {
</script>
<template>
<div class="marquee">
<div class="root">
<div class="container" ref="container">
<div class="item" ref="item1"><slot /></div>
<div class="item item2" ref="item2"><slot /></div>
<div ref="item1">
<slot />
</div>
<div>
<slot />
</div>
</div>
</div>
</template>
<style scoped>
.marquee {
.root {
overflow: hidden;
width: 100%;
}
.container {
width: 100%;
height: fit-content;
position: relative;
will-change: transform;
}
.item {
height: fit-content;
top: 0px;
padding-right: 3em;
width: fit-content;
white-space: nowrap;
}
.item1 {
left: 0px;
}
.item2 {
position: absolute;
height: fit-content;
display: grid;
grid-auto-flow: column;
grid-auto-columns: max-content;
/* Each column fits its content */
overflow-x: visible;
will-change: transform;
gap: 10em;
}
</style>

25
nginx/vue/src/views/home/Home.vue
View File

@@ -1,11 +1,12 @@
<script setup>
import Timer from "@/components/util/Timer.vue";
import Elle from "@/components/elle/Elle.vue";
import Time from "@/components/util/Time.vue";
import Elle from "@/components/elle/Elle.vue";
import Chat from "@/components/util/Chat.vue";
import MusicPlayer from "@/components/util/MusicPlayer.vue";
import Intro from "./Intro.vue";
import Intro2 from "./Intro2.vue";
import Stamps from "./Stamps.vue";
import Listening from "./Listening.vue";
import Links from "./Links.vue";
@@ -14,15 +15,14 @@ import Collage from "./Collage.vue";
import Favorites from "./Favorites.vue";
import Gym from "./Gym.vue";
import Consumption from "./Consumption.vue";
import UtenaFrame from "@/components/borders/UtenaFrame.vue";
</script>
<template>
<main class="halftone justify-center flex flex-row w-full h-full">
<div class="h-fit flex flex-row">
<div class="a4page-portrait homeGrid relative bdr-1">
<Intro class="intro" />
<!-- <Intro class="intro" /> -->
<Intro2 class="intro" />
<Listening class="listening" />
<Stamps class="stamps" />
<Feed class="feed" />
@@ -32,21 +32,16 @@ import UtenaFrame from "@/components/borders/UtenaFrame.vue";
<Favorites class="favorites" />
<Gym class="gym" />
</div>
<div
class="sidebar border-quaternary place-content-between flex-1 flex flex-col m-10 w-60 border-2"
>
<div class="sidebar border-quaternary place-content-between flex-1 flex flex-col m-10 w-60 ">
<div class="flex flex-col flex-1">
<Time class="bg-bg_primary border-primary border-b" />
<Timer class="border-primary border-b bg-bg_primary" />
<Time class="bg-bg_primary border-primary border" />
<Timer class="border-primary border bg-bg_primary" />
<!-- <Elle class="flex-1" /> -->
<!-- <Chat class="bdr-2 bg-bg_primary" /> -->
<!-- <MusicPlayer /> -->
</div>
<div>
<img
src="/img/memes/fire-woman.gif"
class="border-tertiary border"
/>
<img src="/img/memes/fire-woman.gif" class="border-tertiary border" />
</div>
</div>
</div>
@@ -54,7 +49,7 @@ import UtenaFrame from "@/components/borders/UtenaFrame.vue";
</template>
<style scoped>
.homeGrid > * {
.homeGrid>* {
border: 2px solid var(--quaternary);
border-color: var(--quaternary);
background-color: var(--bg_primary);
@@ -76,6 +71,7 @@ import UtenaFrame from "@/components/borders/UtenaFrame.vue";
}
@media (max-width: 1200px) {
.tr,
.br,
.sidebar {
@@ -117,6 +113,7 @@ import UtenaFrame from "@/components/borders/UtenaFrame.vue";
grid-column: span 4;
grid-row: span 2;
}
.gym {
grid-column: span 3;
grid-row: span 2;

52
nginx/vue/src/views/home/Intro.vue
View File

@@ -4,34 +4,28 @@ import Paragraph from "@/components/text/Paragraph.vue";
</script>
<template>
<div
class="flex-1 border-box flex flex-col p-1 text-left items-start justify-start"
>
<Header>Intro</Header>
<Paragraph>
Hi, I'm Adam, thank you for visiting my website. I'm currently a 20
something graduate looking for work. I like to game, listen to lots
of music and occasionally watch anime.
</Paragraph>
<Header>Getting around</Header>
<Paragraph>
Pages available can be traversed through links below. I am hoping to
add some shrines, code-walkthoughs, live chat and page transitions
at a later date.
</Paragraph>
<Header>Contact</Header>
<Paragraph>
Please email me <a href="mailto:adam.a.french@outlook.com">here</a>,
or contact me though any of the social medias linked.
</Paragraph>
<Header>A Quote</Header>
<!-- <p>
What makes me a good demoman? If I were a bad demoman, I wouldn't be
sittin' here discussin' it with you, now would I?!
</p> -->
<Paragraph>
One crossed wire, one wayward pinch of potassium chlorate, one
errant twitch, and KA-BLOOIE!
</Paragraph>
<div class="flex-1 border-box flex flex-col p-1 text-left items-start justify-start">
<Header>Yo</Header>
<!-- <Header>Intro</Header> -->
<!-- <Paragraph> -->
<!-- Hi, I'm Adam, thank you for visiting my website. -->
<!-- </Paragraph> -->
<!-- <Header>Getting around</Header> -->
<!-- <Paragraph> -->
<!-- Pages available can be traversed through links below. I am hoping to -->
<!-- add some shrines, code-walkthoughs, live chat and page transitions -->
<!-- at a later date. -->
<!-- </Paragraph> -->
<!-- <Header>Contact</Header> -->
<!-- <Paragraph> -->
<!-- Please email me <a href="mailto:adam.a.french@outlook.com">here</a>, -->
<!-- or contact me though any of the social medias linked. -->
<!-- </Paragraph> -->
<!-- <Header>A Quote</Header> -->
<!-- <Paragraph> -->
<!-- One crossed wire, one wayward pinch of potassium chlorate, one -->
<!-- errant twitch, and KA-BLOOIE! -->
<!-- </Paragraph> -->
</div>
</template>

81
nginx/vue/src/views/home/Intro2.vue Normal file
View File

@@ -0,0 +1,81 @@
<script setup lang="ts">
import { rand } from '@vueuse/core'
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
interface Item {
x: number
y: number
dx: number
dy: number
content: string
}
const container = ref<HTMLDivElement | null>(null)
const itemEls = ref<HTMLDivElement[]>([])
const phrases = [
'Welcome to my website',
'Thank you for visiting',
"I'd love to know your recommendations",
"I like anime, all kinds of music and sci fic",
"Try to stay away from instagram",
"Always watching too much youtube"
]
const items = ref<Item[]>(
phrases.map((text, i) => ({
x: i * 20,
y: i * 20,
dx: rand(0, 100) / 100,
dy: 0.5,
content: text,
}))
)
let rafId = 0
function animate() {
const c = container.value
if (!c) return
const cw = c.clientWidth
const ch = c.clientHeight
items.value.forEach((item, i) => {
const el = itemEls.value[i]
if (!el) return
const ew = el.offsetWidth
const eh = el.offsetHeight
item.x += item.dx
item.y += item.dy
if (item.x < 0 || item.x > cw - ew) item.dx *= -1
if (item.y < 0 || item.y > ch - eh) item.dy *= -1
})
rafId = requestAnimationFrame(animate)
}
onMounted(async () => {
await nextTick()
rafId = requestAnimationFrame(animate)
})
onUnmounted(() => {
cancelAnimationFrame(rafId)
})
</script>
<template>
<div ref="container" class="w-full h-full relative overflow-hidden">
<div v-for="(item, i) in items" :key="i" ref="itemEls" class=" absolute w-fit h-fit" :style="{
transform: `translate(${item.x}px, ${item.y}px)`
}">
<p>
{{ item.content }}
</p>
</div>
</div>
</template>