genki/banii.cafe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

build fixes

Browse source
This commit is contained in:
genki_angel 2025-04-17 00:11:08 +01:00
parent e406047a60
commit 5ba7ce4e51
10 changed files with 202 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/components/bannerbar.vue
View file

@ -1,14 +1,20 @@
<template>
<div id="holder">
<div id="marquee">
<img v-for="(item, path) in banners" :src="path" />
<img v-for="(item, path) in banners" :src="path" />
<img v-for="(item, path) in banners" :src="getBannerUrl(path)" />
<img v-for="(item, path) in banners" :src="getBannerUrl(path)" />
</div>
</div>
</template>
<script setup lang="ts">
const banners = import.meta.glob("@/assets/images/banners/*")
function getBannerUrl(path: string) {
// return new URL(`${path}`, import.meta.url).href
const modules = import.meta.glob("/src/assets/images/banners/*", { eager: true });
const mod = modules[path] as { default: string };
return mod.default;
}
</script>
<style lang="css" scoped>

10
src/components/blinkiebar.vue
View file

@ -1,14 +1,20 @@
<template>
<div id="holder">
<div id="marquee">
<img v-for="(item, path) in blinkies" :src="path" />
<img v-for="(item, path) in blinkies" :src="path" />
<img v-for="(item, path) in blinkies" :src="getBlinkieUrl(path)" />
<img v-for="(item, path) in blinkies" :src="getBlinkieUrl(path)" />
</div>
</div>
</template>
<script setup lang="ts">
const blinkies = import.meta.glob("@/assets/images/blinkies/*")
function getBlinkieUrl(path: string) {
// return new URL(`${path}`, import.meta.url).href
const modules = import.meta.glob("/src/assets/images/blinkies/*", { eager: true });
const mod = modules[path] as { default: string };
return mod.default;
}
</script>
<style lang="css" scoped>

109
src/components/link.vue Normal file
View file

@ -0,0 +1,109 @@
<template>
<a :href="props.url" target="_blank">
<div class="link highlight">
<div class="linkTitle">
<h3>{{ title }}</h3>
</div>
<div class="linkImage">
<img :src="getSocialUrl()">
</div>
<div class="linkDesc">
<p>{{ desc }}</p>
</div>
</div>
</a>
</template>
<script setup lang="ts">
const props = defineProps({
title: String,
url: String,
image: String,
desc: String
})
function getSocialUrl() {
return new URL(`../assets/images/socials/${props.image}.svg`, import.meta.url).href
}
</script>
<style scoped>
h3 {
margin: 0;
color: black;
font-size: 24px;
}
p {
text-align: center;
margin: 0;
color: #efefef;
}
a {
/* color: #efefef; */
width: 100%;
max-width: 800px;
text-decoration: none;
}
img {
width: 100%;
height: 100%;
color: #efefef;
}
.link {
display: grid;
grid-template-columns: 150px 1fr;
grid-template-rows: 1fr 150px;
gap: 0px 0px;
grid-template-areas:
"linkTitle linkTitle"
"linkImage linkDesc";
@media screen and (max-width: 600px) {
grid-template-columns: 75px 1fr;
grid-template-rows: 1fr 75px;
.linkImage {
padding: 6px;
}
.linkTitle {
padding: 4px;
background-color: rgba(222, 222, 108, 1);
text-align: left;
}
h3,
p {
font-size: 16px;
}
}
}
.linkTitle {
grid-area: linkTitle;
border: 2px solid;
/* padding: .5em; */
padding-right: .5em;
text-align: right;
background: linear-gradient(-90deg, rgba(222, 222, 108, 1) 0%, rgba(222, 222, 108, 1) 25%, rgba(0, 212, 255, 0) 100%);
/* color: black; */
}
.linkImage {
grid-area: linkImage;
border: 2px solid;
padding: .5em;
background-color: black;
}
.linkDesc {
grid-area: linkDesc;
border: 2px solid;
display: flex;
justify-content: center;
align-items: center;
}
</style>

2
src/components/navbar.vue
View file

@ -112,7 +112,7 @@ li {
border: 2px solid;
margin: .5em;
@media screen and (min-width: 450px) {
@media screen and (min-width: 451px) {
display: none;
}
}

8
src/components/stamps.vue
View file

@ -2,12 +2,18 @@
<div>
<h2>stampbook</h2>
<div id="stamp">
<img v-for="(item, path) in stamps" :src="path" />
<img v-for="(item, path) in stamps" :src="getStampUrl(path)" />
</div>
</div>
</template>
<script setup lang="ts">
const stamps = import.meta.glob("@/assets/images/stamps/*")
function getStampUrl(path: string) {
// return new URL(`${path}`, import.meta.url).href
const modules = import.meta.glob("/src/assets/images/stamps/*", { eager: true });
const mod = modules[path] as { default: string };
return mod.default;
}
</script>
<style scoped>
h2 {

8
src/router/index.ts
View file

@ -1,7 +1,7 @@
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '@/views/HomeView.vue'
import SocialsView from '@/views/SocialsView.vue'
import LinksView from '@/views/LinksView.vue'
import PetsView from '@/views/PetsView.vue'
import PortfolioView from '@/views/PortfolioView.vue'
@ -14,9 +14,9 @@ const router = createRouter({
component: HomeView,
},
{
path: '/socials',
name: 'socials',
component: SocialsView,
path: '/links',
name: 'links',
component: LinksView,
},
{
path: '/pets',

45
src/views/LinksView.vue Normal file
View file

@ -0,0 +1,45 @@
<template>
<div id="links">
<h1>LINKS</h1>
<h2>Socials</h2>
<Link :title="'https://x.com/angelgenki'" :url="'https://x.com/angelgenki'" :image="'twitter'" :desc="'my twitter, i mostly just tweet silly stuff'"/>
<Link :title="'discord'" :image="'discord'" :desc="'genki_angel'"/>
<Link :title="'https://www.roblox.com'" :url="'https://www.roblox.com/users/1757381'" :image="'roblox'" :desc="'@genki_angel'"/>
<h2>Development</h2>
<Link :title="'https://git.banii.cafe/'" :url="'https://git.banii.cafe/'" :image="'git'" :desc="'i upload all my public repos here'"/>
<Link :title="'https://github.com/genki-angel'" :url="'https://github.com/genki-angel'" :image="'github'" :desc="'my github, not very active'"/>
<Link :title="'https://x.com/genki_rbxdev'" :url="'https://x.com/genki_rbxdev'" :image="'twitter'" :desc="'i post roblox dev stuff here'"/>
</div>
</template>
<script setup lang="ts">
import Underconstruction from '@/components/underconstruction.vue';
import Link from '@/components/link.vue';
</script>
<style scoped>
#links {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 1em;
}
h1 {
margin: 0;
margin-top: 1em;
}
h2 {
margin-bottom: 0;
}
@media screen and (max-width: 600px) {
h1, h2 {
margin: 0;
}
h2 {
font-size: 32px;
}
}
</style>

10
src/views/PetsView.vue
View file

@ -30,8 +30,8 @@
<pet :name="'???'" :image="'tarantula3'">
<div>
<h4 class="highlight">Venezuelan Suntiger</h4>
<p>currently my biggest tarantula!<br>they have not been here for long, but they love to climb around in
their enclosure and hide behind their wall<br><span class="info">picture coming soon!</span></p>
<p>currently my biggest tarantula!<br>they have not been here for long, but they love to climb around
and eat bugs</p>
</div>
</pet>
<h2>ISOPODS</h2>
@ -76,7 +76,10 @@ p {
}
@media screen and (max-width: 800px) {
h1, h2, h4 {
h1,
h2,
h4 {
font-size: 32px;
margin: 0;
}
@ -85,6 +88,7 @@ p {
text-align: center;
margin-top: 0;
}
p {
text-align: center;
font-size: 20px;

8
src/views/SocialsView.vue
View file

@ -1,8 +0,0 @@
<template>
<Underconstruction />
</template>
<script setup lang="ts">
import Underconstruction from '@/components/underconstruction.vue';
</script>
<style scoped></style>

11
vite.config.ts
View file

@ -12,7 +12,16 @@ export default defineConfig({
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
'@': fileURLToPath(new URL('./src', import.meta.url)),
// '@/assets': fileURLToPath(new URL('./assets', import.meta.url))
},
},
assetsInclude: ["**/*.GIF"],
build: {
rollupOptions: {
output: {
assetFileNames: `assets/[name].[ext]`
}
}
}
})