.gitignore

@@ -1,26 +1,34 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
 node_modules
-
-# Output
-.output
-.vercel
-.netlify
-.wrangler
-/.svelte-kit
-/build
-
-# OS
 .DS_Store
-Thumbs.db
+dist
+dist-ssr
+coverage
+*.local
 
-# Env
+/cypress/videos/
-.env
+/cypress/screenshots/
-.env.*
-!.env.example
-!.env.test
 
-# Vite
+# Editor directories and files
-vite.config.js.timestamp-*
+.vscode/*
-vite.config.ts.timestamp-*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
 
-# db
+*.tsbuildinfo
-*.sqlite
+
+/public
+/src/assets/fonts
+/src/assets/images

.npmrc

@@ -1 +0,0 @@
-engine-strict=true

.prettierignore

@@ -1,9 +0,0 @@
-# Package Managers
-package-lock.json
-pnpm-lock.yaml
-yarn.lock
-bun.lock
-bun.lockb
-
-# Miscellaneous
-/static/

.prettierrc

@@ -1,15 +0,0 @@
-{
-	"useTabs": true,
-	"singleQuote": true,
-	"trailingComma": "none",
-	"printWidth": 100,
-	"plugins": ["prettier-plugin-svelte"],
-	"overrides": [
-		{
-			"files": "*.svelte",
-			"options": {
-				"parser": "svelte"
-			}
-		}
-	]
-}

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}

README.md

@@ -1,38 +1,29 @@
-# sv
+# banii-cafe
 
-Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
+basic setup for my site, very messy and not finished yet
 
-## Creating a project
+## Recommended IDE Setup
 
-If you're seeing this, you've probably already done this step. Congrats!
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+
+## Type Support for `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
+
+## Project Setup
 
 ```sh
-# create a new project in the current directory
+bun install
-bun sv create
-
-# create a new project in my-app
-bun sv create my-app
 ```
 
-## Developing
+### Compile and Hot-Reload for Development
-
-Once you've created a project and installed dependencies with `bun install` , start a development server:
 
 ```sh
-bun run dev
+bun dev
-
-# or start the server and open the app in a new browser tab
-bun run dev -- --open
 ```
 
-## Building
+### Type-Check, Compile and Minify for Production
-
-To create a production version of your app:
 
 ```sh
 bun run build
 ```
-
-You can preview the production build with `bun run preview`.
-
-> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.

env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

eslint.config.js

@@ -1,41 +0,0 @@
-import prettier from 'eslint-config-prettier';
-import { fileURLToPath } from 'node:url';
-import { includeIgnoreFile } from '@eslint/compat';
-import js from '@eslint/js';
-import svelte from 'eslint-plugin-svelte';
-import { defineConfig } from 'eslint/config';
-import globals from 'globals';
-import ts from 'typescript-eslint';
-import svelteConfig from './svelte.config.js';
-
-const gitignorePath = fileURLToPath(new URL('./.gitignore', import.meta.url));
-
-export default defineConfig(
-	includeIgnoreFile(gitignorePath),
-	js.configs.recommended,
-	...ts.configs.recommended,
-	...svelte.configs.recommended,
-	prettier,
-	...svelte.configs.prettier,
-	{
-		languageOptions: {
-			globals: { ...globals.browser, ...globals.node }
-		},
-		rules: {
-			// typescript-eslint strongly recommend that you do not use the no-undef lint rule on TypeScript projects.
-			// see: https://typescript-eslint.io/troubleshooting/faqs/eslint/#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors
-			'no-undef': 'off'
-		}
-	},
-	{
-		files: ['**/*.svelte', '**/*.svelte.ts', '**/*.svelte.js'],
-		languageOptions: {
-			parserOptions: {
-				projectService: true,
-				extraFileExtensions: ['.svelte'],
-				parser: ts.parser,
-				svelteConfig
-			}
-		}
-	}
-);

index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <link rel="icon" href="/favicon.ico">
+  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+  <link rel="manifest" href="/site.webmanifest">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>banii cafe</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+
+</html>

package.json

@@ -1,41 +1,28 @@
 {
-	"name": "banii.cafe",
+  "name": "banii-cafe",
-	"private": true,
+  "version": "0.0.0",
-	"version": "0.0.1",
+  "private": true,
-	"type": "module",
+  "type": "module",
-	"scripts": {
+  "scripts": {
-		"dev": "vite dev",
+    "dev": "vite",
-		"build": "vite build",
+    "build": "run-p type-check \"build-only {@}\" --",
-		"preview": "vite preview",
+    "preview": "vite preview",
-		"prepare": "svelte-kit sync || echo ''",
+    "build-only": "vite build",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "type-check": "vue-tsc --build"
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+  },
-		"format": "prettier --write .",
+  "dependencies": {
-		"lint": "prettier --check . && eslint ."
+    "vue": "^3.5.13",
-	},
+    "vue-router": "^4.5.0"
-	"devDependencies": {
+  },
-		"@eslint/compat": "^1.2.5",
+  "devDependencies": {
-		"@eslint/js": "^9.22.0",
+    "@tsconfig/node22": "^22.0.0",
-		"@sveltejs/adapter-auto": "^6.0.0",
+    "@types/node": "^22.13.9",
-		"@sveltejs/kit": "^2.22.0",
+    "@vitejs/plugin-vue": "^5.2.1",
-		"@sveltejs/vite-plugin-svelte": "^6.0.0",
+    "@vue/tsconfig": "^0.7.0",
-		"@types/node": "^22",
+    "npm-run-all2": "^7.0.2",
-		"@types/sqlite3": "^5.1.0",
+    "typescript": "~5.8.0",
-		"eslint": "^9.22.0",
+    "vite": "^6.2.1",
-		"eslint-config-prettier": "^10.0.1",
+    "vite-plugin-vue-devtools": "^7.7.2",
-		"eslint-plugin-svelte": "^3.0.0",
+    "vue-tsc": "^2.2.8"
-		"globals": "^16.0.0",
+  }
-		"prettier": "^3.4.2",
-		"prettier-plugin-svelte": "^3.3.3",
-		"sass-embedded": "^1.93.2",
-		"svelte": "^5.0.0",
-		"svelte-check": "^4.0.0",
-		"typescript": "^5.0.0",
-		"typescript-eslint": "^8.20.0",
-		"vite": "^7.0.4"
-	},
-	"dependencies": {
-		"sqlite": "^5.1.1",
-		"sqlite3": "^5.1.7"
-	}
 }

src/App.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { RouterLink, RouterView } from 'vue-router'
+import Welcometitle from './components/welcometitle.vue';
+import Quotebanner from './components/quotebanner.vue';
+import Blinkiebar from './components/blinkiebar.vue';
+import Navbar from './components/navbar.vue';
+import Bannerbar from './components/bannerbar.vue';
+import Marqueebar from './components/marqueebar.vue';
+
+const name = "BANII.CAFE"
+
+const bannerFolder = "banners"
+</script>
+
+<template>
+  <header>
+    <Welcometitle :title="name" />
+    <Quotebanner :quote="'meaaaooooowwww x3'" />
+    <Blinkiebar />
+  </header>
+  <main>
+    <Navbar />
+    <div id="view">
+      <RouterView />
+    </div>
+  </main>
+
+  <footer>
+    <Bannerbar />
+  </footer>
+
+</template>
+
+<style scoped>
+main {
+  margin-top: .2em;
+  font-size: 32px;
+  display: flex;
+  gap: .2em;
+  @media screen and (max-width: 1250px) {
+    flex-direction: column;
+  }
+}
+
+#view {
+  border: 2px solid rgba(222, 222, 108, 1);
+  flex-grow: 1;
+  height: fit-content;
+  padding: .5em;
+}
+
+footer {
+  position: fixed;
+  width: 100%;
+  height: fit-content;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+</style>

src/app.d.ts

@@ -1,13 +0,0 @@
-// See https://svelte.dev/docs/kit/types#app.d.ts
-// for information about these interfaces
-declare global {
-	namespace App {
-		// interface Error {}
-		// interface Locals {}
-		// interface PageData {}
-		// interface PageState {}
-		// interface Platform {}
-	}
-}
-
-export {};

src/app.html

@@ -1,12 +0,0 @@
-<!doctype html>
-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<title>banii.cafe ₍ᐢ. .ᐢ₎ ₊˚⊹♡ 🐇</title>
-		%sveltekit.head%
-	</head>
-	<body data-sveltekit-preload-data="hover">
-		<div style="display: contents">%sveltekit.body%</div>
-	</body>
-</html>

src/assets/main.css

@@ -0,0 +1,68 @@
+@font-face {
+    font-family: 'vcr_osd_mono';
+    src: url('./fonts/vcr_osd_mono-webfont.woff2') format('woff2'),
+        url('./fonts/vcr_osd_mono-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'easvhsregular';
+    src: url('./fonts/easvhs-webfont.woff2') format('woff2'),
+        url('./fonts/easvhs-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+body {
+    background-image: url(/bg.webp);
+    background-size: 256px;
+
+    font-family: "easvhsregular";
+    color: #fefefe;
+
+    padding: 2em;
+    padding-bottom: 4em;
+}
+
+@keyframes marquee {
+    0% {
+        transform: translate3d(0, 0, 0);
+    }
+
+    100% {
+        transform: translate3d(-50%, 0, 0);
+    }
+}
+
+@keyframes billboard {
+    0% {
+        transform: translate3d(100%, 0, 0);
+    }
+
+    25% {
+        transform: translate3d(0%, 0, 0);
+    }
+
+    75% {
+        transform: translate3d(0%, 0, 0);
+    }
+
+    100% {
+        transform: translate3d(-100%, 0, 0);
+    }
+}
+
+.highlight {
+    color: rgba(222, 222, 108, 1);
+}
+.warning {
+    color: #cc4c4c;
+}
+.info {
+    color: #00fffa;
+}
+
+.font {
+    font-family: "vcr_osd_mono";
+}

src/components/bannerbar.vue

@@ -0,0 +1,37 @@
+<template>
+    <div id="holder">
+        <div id="marquee">
+            <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>
+#holder {
+    overflow: hidden;   
+    font-size: 0;
+}
+
+#marquee {
+    animation: marquee 60s linear infinite;
+    white-space: nowrap;
+    display: inline-block;
+}
+
+img {
+    width: 88px;
+    height: 31px;
+    margin-right: 5px;
+}
+</style>

src/components/blinkiebar.vue

@@ -0,0 +1,37 @@
+<template>
+    <div id="holder">
+        <div id="marquee">
+            <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>
+#holder {
+    overflow: hidden;   
+    font-size: 0;
+}
+
+#marquee {
+    animation: marquee 60s linear infinite;
+    white-space: nowrap;
+    display: inline-block;
+}
+
+img {
+    width: 150px;
+    height: 20px;
+    margin-right: 5px;
+}
+</style>

src/components/link.vue

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

src/components/marqueebar.vue

@@ -0,0 +1,38 @@
+<template>
+    <div id="holder">
+        <div id="marquee" :style="{'animation': 'marquee ' + props.time + 's ' + 'linear infinite'}">
+            <img :style="{'height': props.height + 'px', 'width': props.width + 'px' }" v-for="(item, path) in images" :src="path" />
+            <img :style="{'height': props.height + 'px', 'width': props.width + 'px' }" v-for="(item, path) in images" :src="path" />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+    image: String,
+    width: Number,
+    height: Number,
+    time: Number
+})
+
+const path = ``
+
+let images: Record<string, () => Promise<unknown>>;
+switch(props.image) {
+    case "blinkies": images = import.meta.glob("@/assets/images/blinkies/*")
+    case "banners": images = import.meta.glob("@/assets/images/banners/*")
+}
+</script>
+
+<style lang="css" scoped>
+#holder {
+    overflow: hidden;   
+    font-size: 0;
+}
+
+#marquee {
+    /* animation: marquee 60s linear infinite; */
+    white-space: nowrap;
+    display: inline-block;
+}
+</style>

src/components/navbar.vue

@@ -0,0 +1,197 @@
+<template>
+    <nav>
+        <h1>set destination</h1>
+        <div>
+            <input type="checkbox" id="navmenu" class="navmenu">
+            <ul>
+                <li v-for="link in Links">
+                    <!-- <img src="../assets/images/star.gif"><RouterLink :to="link.url">{{ link.name }}</RouterLink><img src="../assets/images/star.gif"> -->
+                    <RouterLink :to="link.url"><img src="../assets/images/star.gif"><span class="font">></span> {{
+                        link.name
+                    }} <img src="../assets/images/star.gif"></RouterLink>
+                    <!-- <RouterLink :to="link.url">> {{ link.name }}</RouterLink> -->
+                </li>
+            </ul>
+            <div id="toggle" class="info">
+                <label for="navmenu"><span id="openmenu">
+                        <div class="burger"></div>
+                        <div class="burger"></div>
+                        <div class="burger"></div>
+                    </span><span class="font" id="closemenu">X</span></label>
+            </div>
+        </div>
+    </nav>
+</template>
+<script setup lang="ts">
+const Links = [
+    { name: "home", url: "/" },
+    { name: "pets", url: "/pets" },
+    { name: "links", url: "/links" },
+    { name: "portfolio", url: "/portfolio" }
+]
+</script>
+<style scoped>
+nav {
+    border: 2px solid rgba(222, 222, 108, 1);
+    min-width: 20%;
+    height: fit-content;
+    padding: .5em;
+
+    @media screen and (max-width: 600px) {
+        padding: 2px;
+    }
+}
+
+h1 {
+    text-align: center;
+    font-size: 40px;
+    text-decoration: underline;
+    margin-bottom: 1em;
+
+    @media screen and (max-width: 600px) {
+        font-size: 24px;
+    }
+}
+
+ul {
+    list-style-type: none;
+    padding: 0;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+
+    @media screen and (max-width: 1250px) {
+        flex-direction: row;
+        justify-content: center;
+        flex-wrap: wrap;
+        gap: .5em;
+
+        li {
+            border: rgba(222, 222, 108, 1) solid 2px;
+            width: fit-content;
+            height: fit-content;
+            /* padding: 1em; */
+            margin: 0;
+
+            a {
+                width: 250px;
+                height: 100px;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                background-color: black;
+            }
+
+            @media screen and (max-width: 600px) {
+                a {
+                    width: 175px;
+                    height: 50px;
+                    font-size: 20px;
+                }
+
+                span {
+                    font-size: 28px;
+                    margin-right: .5em;
+                }
+            }
+        }
+    }
+}
+
+li {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: .5em 0;
+
+    height: 32px;
+}
+
+#toggle {
+    text-align: center;
+    border: 2px solid;
+    margin: .5em;
+
+    @media screen and (min-width: 451px) {
+        display: none;
+    }
+}
+
+label {
+    text-align: center;
+}
+
+input {
+    display: none;
+}
+
+@media screen and (max-width: 450px) {
+    ul {
+        display: none;
+    }
+}
+
+#closemenu {
+    display: none;
+}
+
+#openmenu {
+    display: flex;
+    flex-direction: column;
+    cursor: pointer;
+    user-select: none;
+
+    justify-content: space-evenly;
+    align-items: center;
+}
+
+.burger {
+    height: 2px;
+    width: 32px;
+    background-color: #fefefe;
+}
+
+.navmenu:checked~* #openmenu {
+    display: none;
+}
+
+.navmenu:checked~* #closemenu {
+    display: block;
+    cursor: pointer;
+    user-select: none;
+    color: #fefefe;
+}
+
+.navmenu:checked+ul {
+    display: flex;
+}
+
+span {
+    height: 32px;
+}
+
+a {
+    text-decoration: none;
+    color: #fefefe;
+
+    img {
+        display: none;
+    }
+}
+
+a:hover {
+    text-decoration: underline;
+
+    img {
+        display: inline;
+    }
+
+    span {
+        display: none;
+    }
+}
+
+a:active {
+    color: rgba(222, 222, 108, 1);
+}
+</style>

src/components/pet.vue

@@ -0,0 +1,87 @@
+<template>
+    <div class="pet">
+        <div>
+            <h3>{{ props.name }}</h3>
+            <img class="info" :src="getPetUrl()">
+        </div>
+        <slot></slot>
+    </div>
+</template>
+<script setup lang="ts">
+const props = defineProps({
+    name: String,
+    image: String,
+    desc: String
+})
+
+function getPetUrl() {
+    return new URL(`../assets/images/pets/${props.image}.webp`, import.meta.url).href
+}
+</script>
+<style scoped>
+.pet {
+    border: 2px dotted rgba(222, 222, 108, 1);
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 1em;
+    background-color: black;
+    box-sizing: border-box;
+
+    padding: .5em;
+
+    justify-content: flex-start;
+
+    div {
+        display: flex;
+        flex-direction: column;
+
+        justify-content: center;
+        align-items: center;
+
+        width: fit-content;
+    }
+
+    /* @media screen and (max-width: 1250px) {
+        div {
+            width: 100%;
+        }
+    } */
+}
+
+.small {
+    width: fit-content;
+}
+
+h3 {
+    margin: 0;
+}
+
+p {
+    margin: 0;
+}
+
+img {
+    width: 256px;
+    height: 256px;
+    margin: .5em;
+
+    border: 2px solid;
+}
+
+@media screen and (max-width: 800px) {
+    .pet {
+        flex-direction: column;
+    }
+    h3 {
+        font-size: 22px;
+        text-align: center;
+    }
+}
+@media screen and (max-width: 500px) {
+    img {
+        width: 128px;
+        height: 128px;
+    }
+}
+</style>

src/components/quotebanner.vue

@@ -0,0 +1,41 @@
+<template>
+    <div id="billboard">
+        <div id="quote">
+            <img src="../assets/images/star.gif">
+            {{ props.quote || "oops, something has gone wrong x3" }}
+            <img src="../assets/images/star.gif">
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+    quote: String
+})
+</script>
+
+<style scoped>
+#billboard {
+    border: solid 2px rgba(222, 222, 108, 1);
+    text-align: center;
+    padding: .2em;
+
+    margin-top: .2em;
+    margin-bottom: .2em;
+
+    font-size: 32px;
+    @media screen and (max-width: 500px) {
+        font-size: 16px;
+    }
+    overflow: hidden;
+}
+
+#quote {
+    animation: billboard 20s linear infinite;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: .5em;
+}
+</style>

src/components/stamps.vue

@@ -0,0 +1,34 @@
+<template>
+    <div>
+        <h2>stampbook</h2>
+        <div id="stamp">
+            <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 {
+    margin: 0;
+    text-align: center;
+}
+
+img {
+    height: 56px;
+    width: 99px;
+}
+
+#stamp {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+</style>

src/components/underconstruction.vue

@@ -0,0 +1,29 @@
+<template>
+    <div>
+        <img src="../assets/images/construction/barraconstruction.gif">
+        <h1>UNDER CONSTRUCTION</h1>
+        <img src="../assets/images/construction/ICONE_EN_CONSTRUCTION.GIF">
+        <p>come back soon!!!</p>
+    </div>
+</template>
+<style scoped>
+
+div {
+    display: flex;
+    flex-direction: column;
+
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+}
+
+@media screen and (max-width: 800px) {
+    img {
+        width: 100%;
+    }
+    h1 {
+        font-size: 32px;
+    }
+}
+
+</style>

src/components/wantedposter.vue

@@ -0,0 +1,146 @@
+<template>
+    <div id="poster">
+        <h1 class="warning"><span class="font">$$</span> FBI's most wanted <span class="font">$$</span></h1>
+        <div id="profile">
+            <img class="info" src="../assets/images/pfp.png">
+            <table>
+                <tbody>
+                    <tr>
+                        <td>name:</td>
+                        <td>genki</td>
+                    </tr>
+                    <tr>
+                        <td>height:</td>
+                        <td>mouse-sized</td>
+                    </tr>
+                    <tr>
+                        <td>species:</td>
+                        <td><span class="info">space cabbit</span></td>
+                    </tr>
+                    <tr>
+                        <td><span class="warning">wanted</span> for:</td>
+                        <td>being too silly :3</td>
+                    </tr>
+                    <tr>
+                        <td>last seen:</td>
+                        <td><span class="warning">inside your walls...</span></td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+        <p><span class="info">!INFO</span><br> likes to smell plants and imprison bugs... can be found eating plastic
+            from your bins and
+            drinking kerosene at your nearest airport </p>
+        <p><span class="warning">!CAUTION</span><br> <img src="../assets/images/warningsign.gif"> will <span
+                class="highlight">bark</span> very loud if approached <img src="../assets/images/warningsign.gif"></p>
+        <div id="reward">
+            <img src="../assets/images/missile.gif">
+            <div>
+                <h1 class="highlight">!REWARD!</h1>
+                <p>second-hand <span class="highlight">Hwasong-18</span> ICBM<br>[fuel not included] </p>
+            </div>
+            <img src="../assets/images/missile.gif">
+        </div>
+    </div>
+</template>
+<script setup lang="ts"></script>
+<style scoped>
+h1 {
+    text-decoration: underline;
+    text-align: center;
+    margin: 0;
+    @media screen and (max-width: 900px) {
+        font-size: 32px;
+    }
+    @media screen and (max-width: 600px) {
+        font-size: 24px;
+    }
+    @media screen and (max-width: 400px) {
+        font-size: 20px;
+    }
+}
+
+p {
+    /* width: 100%; */
+    margin: 0;
+    text-align: center;
+}
+
+#poster {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 1em;
+    @media screen and (max-width: 600px) {
+        font-size: 24px;
+    }
+    @media screen and (max-width: 500px) {
+        font-size: 16px;
+    }
+}
+
+#profile {
+    display: flex;
+    gap: 1em;
+
+    align-items: center;
+
+    img {
+        height: 256px;
+        border: solid 2px;
+        background-color: black;
+    }
+
+    @media screen and (max-width: 900px) {
+        flex-direction: column;
+        img {
+            height: 128px;
+        }
+    }
+}
+
+#reward {
+    display: flex;
+    height: fit-content;
+    align-items: center;
+    gap: .5em;
+
+    border: 2px solid rgba(222, 222, 108, 1);
+    padding: 1em;
+
+    background-color: black;
+    img {
+        height: 64px;
+    }
+    @media screen and (max-width: 600px) {
+        img {
+        height: 32px;
+    }
+    }
+    
+}
+
+td {
+    text-align: center;
+    padding: .2em;
+}
+
+table,
+th,
+td {
+    border: 2px solid white;
+    border-collapse: collapse;
+    background-color: black;
+    @media screen and (max-width: 600px) {
+        font-size: 24px;
+    }
+    @media screen and (max-width: 500px) {
+        font-size: 16px;
+    }
+}
+
+td:nth-child(odd) {
+    text-align: right;
+}
+</style>

src/components/welcometitle.vue

@@ -0,0 +1,35 @@
+<template>
+    <p>welcome to...</p>
+    <h1>{{ props.title }}</h1>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const props = defineProps({
+    title: String
+})
+</script>
+
+<style scoped>
+h1 {
+    margin: 0;
+    padding-top: .25em;
+    padding-left: .25em;
+
+    color: black;
+    font-size: 72px;
+
+    @media screen and (max-width: 500px) {
+        font-size: 32px;
+    }
+
+    background: linear-gradient(90deg, rgba(222, 222, 108, 1) 0%, rgba(222, 222, 108, 1) 25%, rgba(0, 212, 255, 0) 100%);
+}
+
+p {
+    margin: 0;
+
+    font-size: 32px;
+}
+</style>