added speed dial and construction page

Author: nikeokoronkwo

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-  "tailwindCSS.classAttributes": ["active-class", "inactive-class"]
+  "tailwindCSS.classAttributes": ["active-class", "inactive-class", "class"]
 }

app/app.vue

@@ -1,9 +1,53 @@
-<script setup></script>
+<script setup>
+const items = [{
+  name: 'Blog',
+  icon: 'i-carbon-blog',
+  link: '/blog'
+}, {
+  name: 'Contact Me',
+  icon: 'i-material-symbols-light-contact-mail-outline-rounded',
+  link: '/contact'
+}, {
+  name: 'Projects',
+  icon: 'i-material-symbols-light-terminal-rounded',
+  link: '/projects'
+}, {
+  name: 'About Me',
+  icon: 'i-material-symbols-light-person-outline-rounded',
+  link: '/about'
+}, {
+  name: 'Snippets',
+  icon: 'i-material-symbols-light-code-rounded',
+  link: '/snippets'
+}]
+const route = useRoute();
+
+const currentItems = computed(() => items.filter(i => route !== i.link))
+
+const open = ref(false)
+</script>
 
 <template>
   <UApp>
     <NuxtLoadingIndicator />
-    <UContainer class="flex min-h-screen flex-col">
+    <UContainer id="container" class="flex min-h-screen flex-col">
+      <div class="z-40">
+        <Transition>
+          <div
+            class="fixed inset-0 bg-muted/5 backdrop-blur-lg"
+            @click="open = false"
+            v-if="open"
+          ></div>
+        </Transition>
+        <SpeedDial v-model:items="currentItems" class="absolute mt-4 ml-4" v-model:modal="open">
+          <template #main="{ active }">
+            <div :class="['w-10 h-10 p-2 flex items-center justify-center rounded-full backdrop-blur-2xl backdrop-opacity-90 transition ease-in-out delay-100 outline outline-default/20 pointer-events-auto', active ? 'shadow-md hover:shadow-xl' : 'shadow-none hover:shadow-md']">
+              <UIcon name="i-custom-n" class="text-lg" />
+            </div>
+          </template>
+        </SpeedDial>
+      </div>
+      
       <!-- <UMain as="main"> -->
       <NuxtLayout>
         <NuxtPage />
@@ -33,3 +77,15 @@
     </UContainer>
   </UApp>
 </template>
+
+<style lang="css" scoped>
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+</style>

app/assets/css/main.css

@@ -2,7 +2,7 @@
 @import "@nuxt/ui";
 
 @theme static {
-  --font-sans: "Public Sans", sans-serif;
+  --font-sans: "IBM Plex Sans", sans-serif;
   --font-mono: "Space Mono", monospace;
 
   --color-green-50: #effdf5;

app/components/BatteryLoading.vue

@@ -1 +1,152 @@
-<template></template>
+<script setup lang="ts">
+import { animate, createScope, createTimeline, random, randomPick, Scope, splitText, stagger } from 'animejs';
+
+const props = defineProps<{
+    complete?: boolean
+}>();
+const isComplete = props.complete ?? true;
+const batteryMax = isComplete ? 100 : (Math.random() * 100)
+
+const model = defineModel('visible', { default: true });
+
+const battery = reactive({
+    percent: 0
+})
+const batteryLoaded = ref(false);
+
+const batteryText = computed<string>(() => {
+    return createASCIIBatteryText(battery.percent, batteryLoaded.value);
+})
+
+const characterSet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789*&^%$#@!~[]{};:,.<>?/|\\+-=';
+
+const batteryEl = useTemplateRef('batt')
+const batteryScope = ref<Scope | undefined>(undefined)
+
+onMounted(() => {
+    batteryScope.value = createScope({ root: batteryEl.value }).add(self => {
+        // animate random text
+        const { words, chars } = splitText('.scrabble', {
+            words: { wrap: "clip" },
+            chars: '<pre class="p-2 bg-muted">{value}</pre>'
+        })
+
+        function characterChangeLoop(chars: Array<HTMLElement>) {
+            return new Promise(async (resolve) => {
+                while (battery.percent < batteryMax) {
+                    await animate(chars, {
+                        innerText: (_, i, l) => randomPick(characterSet),
+                        duration: 500,
+                        delay: stagger(100, { from: 'random' }),
+                    });
+                    console.log('congo')
+                }
+                resolve(true);
+            })
+        }
+
+        // animate battery percent
+        const batteryAnimation = animate(battery, {
+            percent: batteryMax,
+            duration: batteryMax * 50,
+            easing: 'linear',
+        })
+
+        const middleTwoIndexes = chars.length >= 4 ? [Math.floor((chars.length - 1) / 2), Math.ceil((chars.length - 1) / 2)] : [0, 1];
+        const message = [':', isComplete ? ')' : '('];
+
+        // start both animations
+        const timeLineA = createTimeline()
+            .sync(batteryAnimation)
+            .add(chars, {
+                innerText: (_, i, l) => randomPick(characterSet),
+                duration: 500,
+                loop: Math.floor(batteryMax / 10),
+                loopDelay: 100
+            }, stagger(100, { from: 'random', start: 0 }));
+        
+        const timelineB = createTimeline()
+            .add('h2', {
+                color: (_, i, l) => isComplete ? 'var(--ui-success)' : '#ffffff',
+                loop: 3,
+                alternate: true,
+                duration: 500,
+            })
+            .add(chars, {
+                innerText: (_, i, l) => middleTwoIndexes.includes(i) ? message[middleTwoIndexes.indexOf(i)] : ' ',
+            }, stagger(100, { from: 'random', start: 0 }))
+            .add('.msg', {
+                opacity: ['0%', '100%'],
+                duration: 1000,
+            });
+
+        createTimeline()
+        .sync(timeLineA, 0)
+        .call(() => {
+            console.log('timeline A complete');
+            batteryLoaded.value = true;
+        }, batteryMax * 50)
+        .sync(timelineB, '<+=50').init()
+
+            // once percent/text is done, provide error message or success message and animate color scheme of elemnts based on complete or not
+            
+
+            // animate('h2', {
+            //     color: (_, i, l) => isComplete ? 'var(--ui-success)' : 'var(--ui-error)',
+            //     loop: 3,
+            //     alternate: true,
+            //     autoplay: true,
+            //     duration: 500,
+            // });
+            // animate(chars, {
+            //     innerText: (_, i, l) => middleTwoIndexes.includes(i) ? message[middleTwoIndexes.indexOf(i)] : ' ',
+            //     autoplay: true,
+            //     delay: stagger(100, { from: 'random' }),
+            // })
+
+
+            // // add blink text animation
+            
+        // Promise.all([
+        //     characterChangeLoop(chars),
+        //     batteryAnimation.play()
+        // ]).then(async () => {
+            
+        // });
+
+        // type out text
+    })
+})
+
+</script>
+
+<template>
+    <div v-if="model" class="fixed inset-0 z-50 flex flex-col items-center justify-center bg-default pointer-events-auto font-mono font-light" ref="batt">
+        <!-- Main text -->
+        <h1 class="uppercase text-3xl tracking-wide py-4 font-light scrabble">Loading</h1>
+
+        <!-- Battery -->
+        <div class="max-w-2xl w-full px-20 flex flex-col items-center justify-center space-y-2">
+            <!-- TODO: Anime createAnimatable? -->
+            <h2 class="text-2xl percentage">
+                <span>{{ Math.floor(battery.percent) }}</span>
+                <span>%</span>
+            </h2>
+
+            <!-- The battery (needs to be big) -->
+            <!-- TODO: Anime createAnimatable? -->
+            <div class="flex flex-row items-center justify-center px-4 space-x-2 text-6xl">
+                <pre
+                    v-for="(char, idx) in batteryText"
+                    :key="idx"
+                    class="font-stretch-ultra-expanded p-2 bg-muted"
+                >{{ char }}</pre>
+            </div>
+        </div>
+
+        <!-- Optional Message and Others -->
+        <p class="msg text-center text-sm p-8" v-if="!isComplete && batteryLoaded">
+            The page cannot be displayed right now. It's probably under construction. Please check back again later.
+        </p>
+    </div>
+</template>

app/components/LogoOutline.vue

@@ -1 +1,142 @@
-<template></template>
+<script setup lang="ts">
+import { animate, createScope, createTimeline, Scope, stagger } from "animejs";
+
+const props = defineProps<{
+    linear?: boolean;
+    spread?: number;
+}>();
+
+type Item = {
+        name: string;
+        icon: string;
+    } & ({
+      link: string;
+    } | {
+      action: () => void
+    });
+
+const modalModel = defineModel('modal', { default: false })
+const itemsModel = defineModel<Item[]>('items', { default: [] })
+
+const spread = props.spread ?? 150;
+
+const dialogAnimationFinished = ref(true);
+
+const dialElement = useTemplateRef("dial");
+const dialScope = ref<Scope | undefined>();
+
+function handleClick() {
+  modalModel.value = !modalModel.value
+}
+
+onMounted(() => {
+  dialScope.value = createScope({ root: dialElement.value }).add((self) => {
+    const dialDownAnimation = animate(".circle", {
+      y: (_, i, l) => (spread / 3) * (l - i),
+      ease: "inOut",
+      delay: stagger(100, {
+        reversed: true,
+      }),
+      autoplay: false,
+    });
+    const dialDownTextAnimation = animate('.circle-text', {
+        x: spread / 3
+    })
+
+    const dialQuarterTextAnimation = animate(".circle-text", {
+      y: (_, i, l) => (spread * (35 / 150)) * Math.sin(((Math.PI / 2) * i) / (l - 1)),
+      x: (_, i, l) => (spread * (55 / 150)) * Math.cos(((Math.PI / 2) * i) / (l - 1)),
+    });
+    const dialQuarterCircleAnimation = animate(".circle", {
+      y: (_, i, l) => spread * Math.sin(((Math.PI / 2) * i) / (l - 1)),
+      x: (_, i, l) => spread * Math.cos(((Math.PI / 2) * i) / (l - 1)),
+      ease: "inOut",
+      delay: stagger(150, {
+        reversed: true,
+      }),
+      autoplay: false,
+    });
+
+    const dialQuarterAnimation = createTimeline({
+      autoplay: false,
+    })
+      .sync(dialQuarterCircleAnimation, 0)
+      .sync(dialQuarterTextAnimation, 0);
+
+    self?.add("dialdown", (toOpen: boolean) => {
+      dialogAnimationFinished.value = false;
+      if (!toOpen) {
+        dialDownAnimation.reverse();
+      } else {
+        dialDownAnimation.play();
+      }
+      dialogAnimationFinished.value = true;
+    });
+
+    self?.add("dialquarter", (toOpen: boolean) => {
+      dialogAnimationFinished.value = false;
+      if (!toOpen) {
+        dialQuarterAnimation.reverse();
+      } else {
+        dialQuarterAnimation.play();
+      }
+      dialogAnimationFinished.value = true;
+    });
+  });
+});
+
+watch(modalModel, (newValue, oldValue) => {
+  if (!dialScope.value) return;
+  dialScope.value?.methods.dialquarter(newValue);
+})
+</script>
+
+<template>
+  <button
+    class="relative h-10 w-10 pointer-events-auto z-10"
+    ref="dial"
+    @click="handleClick()"
+  >
+    <div v-for="item in itemsModel" :key="item.name" class="circle absolute inset-0 z-10">
+      <!-- Circle + label wrapper -->
+      <div class="relative flex items-center group">
+        <!-- Text (behind) -->
+        <div class="circle-text relative z-0 mt-3 text-sm whitespace-nowrap opacity-0 group-hover:opacity-100 transition ease-in-out delay-100 font-mono" v-show="modalModel && dialogAnimationFinished">
+          {{ item.name }}
+        </div>
+
+        <!-- Circle (front) -->
+        <button
+          v-if="'action' in item"
+          @click="item.action()"
+          :class="[`absolute top-0 left-0 z-10 rounded-full pointer-events-auto`]"
+        >
+          <slot name="item" :icon="item.icon" :name="item.name">
+            <div class="w-10 h-10 p-2 flex items-center justify-center rounded-full backdrop-blur-xl bg-default/50 transition ease-in-out delay-200 shadow-none hover:shadow-lg outline outline-default/20 pointer-events-auto">
+              <UIcon :name="item.icon" class="text-lg" />
+            </div>
+          </slot>
+        </button>
+        <ULink
+          v-else
+          :to="item.link"
+          :external="item.link.startsWith('http')"
+          :class="[`absolute top-0 left-0 z-10 rounded-full pointer-events-auto`]"
+        >
+          <slot name="item" :icon="item.icon" :name="item.name">
+            <div class="w-10 h-10 p-2 flex items-center justify-center rounded-full backdrop-blur-lg bg-default/50 transition ease-in-out delay-100 shadow-none hover:shadow-md outline outline-default/20 pointer-events-auto">
+              <UIcon :name="item.icon" class="text-lg" />
+            </div>
+          </slot>
+        </ULink>
+      </div>
+    </div>
+
+    <!-- Center button -->
+    <div class="absolute inset-0 rounded-full z-20">
+      <slot name="main" :active="modalModel">
+        <UAvatar icon="i-lucide-image" size="xl" />
+      </slot>
+    </div>
+  </button>
+</template>