add a home hero

csc530 · Jul 28, 2024 · 2512f88 · 2512f88
1 parent f30e152
commit 2512f88
Show file tree

Hide file tree

Showing 13 changed files with 260 additions and 74 deletions.
diff --git a/.idea/mysite.iml b/.idea/mysite.iml
diff --git a/bun.lockb b/bun.lockb
diff --git a/index.html b/index.html
@@ -1,13 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <link rel="icon" href="/favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vite App</title>
-</head>
-<body>
-<div id="app"></div>
-<script type="module" src="/src/main.ts"></script>
-</body>
+    <head>
+        <meta charset="UTF-8">
+        <link rel="icon" href="/favicon.ico">
+        <!--    <meta name="viewport" content="width=device-width, initial-scale=1.0">-->
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
+        <title>my site</title>
+    </head>
+    <body>
+        <div id="app"></div>
+        <script type="module" src="/src/main.ts"></script>
+        <noscript>Please enable JavaScript to view this website.</noscript>
+    </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,14 +4,16 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "run-p type-check \"build-only {@}\" --",
     "preview": "vite preview",
     "build-only": "vite build",
     "type-check": "vue-tsc --build --force",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
   },
   "dependencies": {
+    "@vueuse/core": "^10.11.0",
+    "consola": "^3.2.3",
     "pinia": "^2.1.7",
     "vue": "^3.4.21",
     "vue-router": "^4.3.0"
@@ -20,6 +22,7 @@
     "@rushstack/eslint-patch": "^1.8.0",
     "@tsconfig/node20": "^20.1.4",
     "@types/node": "^20.12.5",
+    "@types/bun": "latest",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vitejs/plugin-vue-jsx": "^3.1.0",
     "@vue/eslint-config-typescript": "^13.0.0",

diff --git a/src/App.vue b/src/App.vue
@@ -1,11 +1,25 @@
-<script setup lang="ts">
-    import {RouterLink, RouterView} from 'vue-router'
-    import HelloWorld from './components/HelloWorld.vue'
-</script>
-
 <template>
-    <main>
-        <RouterView/>
-    </main>
+    <div class="is-flex is-flex-direction-column">
+        <header class="is-flex-grow-0">
+            <TheNav />
+        </header>
+        <main class="container is-fluid is-flex-grow-1">
+            <RouterView />
+        </main>
+        <TheFoot class="is-flex-shrink-1 is-flex-grow-0" />
+    </div>
 </template>
 
+<style scoped>
+    div {
+        min-height: 100vh;
+    }
+</style>
+
+<script setup lang="ts">
+    import {RouterLink, RouterView} from "vue-router";
+    import HelloWorld from "./components/HelloWorld.vue";
+    import {getActivePinia} from "pinia";
+    import TheNav from "@/components/TheNav.vue";
+    import TheFoot from "@/components/TheFoot.vue";
+</script>
diff --git a/src/components/TheFoot.vue b/src/components/TheFoot.vue
@@ -0,0 +1,25 @@
+<template>
+    <teleport to="body" :disabled="teleport" ref="teleportRef">
+        <footer v-bind="$attrs" class="footer content has-text-centered has-background-inherit">
+            <small class="font-italic">insert obligatory mort quote here</small>
+        </footer>
+    </teleport>
+</template>
+
+<style scoped>
+    /*place footer at the bottom always*/
+    footer {
+        margin-top: auto;
+    }
+</style>
+
+<script setup lang="ts">
+    import consola from "consola";
+    import {ref, type Teleport, type TeleportProps, watch} from "vue";
+
+    // const teleportRef = ref<InstanceType<typeof Teleport> | null>(null);
+    const teleport  = ref(true);
+    watch([], () => {
+        // teleport.value = true
+    });
+</script>
diff --git a/src/components/TheNav.vue b/src/components/TheNav.vue
@@ -0,0 +1,45 @@
+<template>
+    <nav class="navbar is-spaced -has-shadow" role="navigation" aria-label="main navigation">
+        <div class="navbar-brand">
+            <a class="navbar-item" title="you know the sh*t">✝️👽🧠🖤</a>
+            <button ref="hamburgerRef" @click.stop.prevent="toggleHamburger" class="navbar-burger"
+                    aria-label="menu"
+                    aria-expanded="false">
+                <span aria-hidden="true"></span>
+                <span aria-hidden="true"></span>
+                <span aria-hidden="true"></span>
+                <span aria-hidden="true"></span>
+            </button>
+        </div>
+
+        <div class="navbar-menu" ref="navMenuRef">
+            <div class="navbar-start">
+                <router-link v-for="route in routes" :key="route.path" class="navbar-item" :to="route.path">
+                    {{ route.name }}
+                </router-link>
+            </div>
+        </div>
+
+    </nav>
+</template>
+
+<style scoped>
+
+</style>
+
+<script setup lang="ts">
+    import {useRoute, useRouter} from "vue-router";
+    import {type Events, ref} from "vue";
+
+    const router = useRouter();
+    const routes = router.getRoutes();
+    const navMenuRef = ref<HTMLDivElement | null>(null);
+    const hamburgerRef = ref<HTMLDivElement | null>(null);
+
+    function toggleHamburger(event: Event) {
+        navMenuRef.value?.classList.toggle("is-active");
+        if(hamburgerRef.value)
+            hamburgerRef.value.ariaExpanded = String(hamburgerRef.value.classList.toggle("is-active"));
+    }
+
+</script>
diff --git a/src/components/TheWelcome.vue b/src/components/TheWelcome.vue
@@ -1,21 +1,29 @@
 <template>
-    <h1>[be] in awee</h1>
-    <!--    and my pfp is spinning in the middle with radiance-->
-    <!--    surrounded by stars? gifs??-->
-    <img/>
-
-    <h2>Christofer: {{ attributes[0] }}</h2>
+    <section class="hero has-text-centered">
+        <div class="hero-body">
+            <div class="container">
+                <h1 class="title">[be] in awee</h1>
+                <!--    and my pfp is spinning in the middle with radiance-->
+                <!--    surrounded by stars? gifs??-->
+                <img alt="" />
 
+                <h2 class="subtitle">Christofer: <span ref="attrRef"></span></h2>
+            </div>
+        </div>
+    </section>
 </template>
 
 <script setup lang="ts">
-    import WelcomeItem from './WelcomeItem.vue'
-    import DocumentationIcon from './icons/IconDocumentation.vue'
-    import ToolingIcon from './icons/IconTooling.vue'
-    import EcosystemIcon from './icons/IconEcosystem.vue'
-    import CommunityIcon from './icons/IconCommunity.vue'
-    import SupportIcon from './icons/IconSupport.vue'
-    import {computed, ref,watch} from "vue";
+    import WelcomeItem from "./WelcomeItem.vue";
+    import DocumentationIcon from "./icons/IconDocumentation.vue";
+    import ToolingIcon from "./icons/IconTooling.vue";
+    import EcosystemIcon from "./icons/IconEcosystem.vue";
+    import CommunityIcon from "./icons/IconCommunity.vue";
+    import SupportIcon from "./icons/IconSupport.vue";
+    import {computed, ref, watch} from "vue";
+    import consola from "consola";
+
+    const attrRef = ref<HTMLSpanElement | null>(null);
 
 
     const attributes = ref([
@@ -30,12 +38,60 @@
         "student of all",
         "code monkey",
         "prime programmer",
+        "red-onkulous",
+        "REACT-HATER"
     ]);
-    setInterval(() => {
-        const attr = attributes.value.shift();
-        if(attr)
-            attributes.value.push(attr)
-    }, 2000);
 
+    const attribute = ref(attributes.value[Math.random() * attributes.value.length | 0]);
+
+    watch(attrRef, (value) => {
+        typeAttribute(randomAttribute());
+    });
+
+    function typeAttribute(attribute: string) {
+        if(!attrRef.value)
+            return;
+
+        attrRef.value.textContent = "";
+        let index = 0;
+        const interval = setInterval(() => {
+            if(!attrRef.value) return;
+
+            attrRef.value.textContent += attribute[index];
+            index++;
+            if(index === attribute.length) {
+                clearInterval(interval);
+                clearAttribute(attribute);
+            }
+        }, Math.random() * 1000);
+    }
+
+    function clearAttribute(attribute: string) {
+        if(!attrRef.value)
+            return;
+
+        attrRef.value.textContent = attribute;
+        let index = 0;
+        const interval = setInterval(() => {
+            if(!attrRef.value) return;
+
+            attrRef.value.textContent = attribute.substring(0, attribute.length - index);
+            index++;
+            if(index === attribute.length) {
+                clearInterval(interval);
+                typeAttribute(randomAttribute());
+            }
+        }, Math.random() * 1000);
+    }
 
+    function randomAttribute(not?: string | string[]) {
+        let attr = not?.[0] ?? attributes.value[Math.random() * attributes.value.length | 0];
+        if(not) {
+            if(typeof not === "string")
+                not = [not];
+            while(not.includes(attr))
+                attr = attributes.value[Math.random() * attributes.value.length | 0];
+        }
+        return attr;
+    }
 </script>
diff --git a/src/main.ts b/src/main.ts
@@ -12,3 +12,4 @@ app.use(createPinia())
 app.use(router)
 
 app.mount('#app')
+
diff --git a/src/router/index.ts b/src/router/index.ts
@@ -1,23 +1,24 @@
-import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
+import {createRouter, createWebHistory} from "vue-router";
+import HomeView from "../views/HomeView.vue";
 
 const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
-  routes: [
-    {
-      path: '/',
-      name: 'home',
-      component: HomeView
-    },
-    {
-      path: '/about',
-      name: 'about',
-      // route level code-splitting
-      // this generates a separate chunk (About.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
-      component: () => import('../views/AboutView.vue')
-    }
-  ]
-})
+    history: createWebHistory(import.meta.env.BASE_URL),
+    routes: [
+        {
+            path: "/",
+            name: "~Home🍩🏡",
+            component: HomeView
+        },
+        {
+            path: "/about",
+            name: "💻About👨🏿‍🦱",
+            // route level code-splitting
+            // this generates a separate chunk (About.[hash].js) for this route
+            // which is lazy-loaded when the route is visited.
+            component: () => import("../views/AboutView.vue")
+        }
+    ],
+    linkActiveClass: "is-active",
+});
 
-export default router
+export default router;
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
@@ -3,7 +3,10 @@
 </script>
 
 <template>
-    <main>
         <TheWelcome/>
-    </main>
+        <ul>
+            <li>Vuebulma</li>
+            <li>Resumer</li>
+            <li>this totally amazing awesome site :DDD</li>
+        </ul>
 </template>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -12,3 +12,4 @@ app.use(createPinia())
		app.use(router)

		app.mount('#app')