From 1034619abfd5286d7310aa07f2e55497d482771d Mon Sep 17 00:00:00 2001
From: andatoshiki <hello@toshiki.dev>
Date: Sun, 22 Sep 2024 04:00:37 -0700
Subject: [PATCH] feat!(logo): add `v2` version of site logo on navbar with
 complete new design in stampson calligraphy font for cursive signature &
 seperate and isolate linear bar of lower case t to a secondary path that
 scribes concurrenly with letter a and partial t letter hook & force change
 the stroke width property of logo signature to 6.5 for a relatively conhesive
 design on site throughout

---
 src/components/LogoV2.vue | 92 +++++++++++++++++++++++++++++++++++++++
 src/components/Navbar.vue |  6 +--
 2 files changed, 95 insertions(+), 3 deletions(-)
 create mode 100644 src/components/LogoV2.vue

diff --git a/src/components/LogoV2.vue b/src/components/LogoV2.vue
new file mode 100644
index 0000000..7a9ea58
--- /dev/null
+++ b/src/components/LogoV2.vue
@@ -0,0 +1,92 @@
+<template>
+    <svg width="140" height="136" viewBox="0 0 140 136" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+            id="atstroke"
+            d="M25 80.8543C28.6667 71.8543 25.6911 56.3012 10.4911 73.9012C-8.50895 95.9012 13.5 98.8543 23 82.3543C32.5 65.8543 33.5 68.8543 33 69.3543C32.5 69.8543 15 93.3543 18 102.354C20.4 109.554 26.8334 103.188 32.5 93.8543L61.5 50.5808C86.3334 17.4141 126.1 -35.2819 70.5 46.3181L40.5 106.561C31.6637 124.394 15.9929 153.581 38 111.581"
+            stroke="black"
+            stroke-linecap="round"
+        />
+        <path id="tbar" d="M39 45L136.5 38.5" stroke="black" stroke-linecap="round" />
+    </svg>
+</template>
+<style scoped>
+@media (prefers-reduced-motion) {
+    path {
+        animation: none !important;
+        stroke-dasharray: unset !important;
+    }
+}
+
+#atstroke {
+    stroke-dashoffset: 1px;
+    stroke-dasharray: 641px 0;
+    animation: scribeatstroke 10s ease forwards infinite;
+    animation-delay: 0s;
+    transform-origin: center;
+    stroke: #000000;
+    stroke-width: 6.5;
+}
+
+#tbar {
+    stroke-dashoffset: 0.1px;
+    stroke-dasharray: 98px 0;
+    animation: scribetbar 10s ease forwards infinite;
+    animation-delay: 0s;
+    transform-origin: center;
+    stroke: #000000;
+    stroke-width: 6.5;
+    opacity: 0;
+}
+
+@keyframes scribetbar {
+    0% {
+        stroke-dashoffset: 0px;
+        stroke-dasharray: 0 98px;
+        opacity: 0;
+    }
+    10% {
+        opacity: 1;
+    }
+    40% {
+        stroke-dashoffset: 0;
+    }
+
+    85% {
+        stroke-dasharray: 98px 0;
+    }
+    95%,
+    to {
+        stroke-dasharray: 0 100px;
+        opacity: 1;
+    }
+}
+
+@keyframes scribeatstroke {
+    0% {
+        stroke-dashoffset: 0px;
+        stroke-dasharray: 0 641px;
+        opacity: 0;
+    }
+    10% {
+        opacity: 1;
+    }
+    40% {
+        stroke-dashoffset: 0;
+    }
+    85% {
+        stroke-dasharray: 641px 0;
+    }
+    95%,
+    to {
+        stroke-dasharray: 0 641px;
+        opacity: 1;
+    }
+}
+
+.dark #atstroke {
+    stroke: #ffffff;
+}
+.dark #tbar {
+    stroke: #ffffff;
+}
+</style>
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 5aea86b..5cbc46e 100755
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import Vue from 'vue'
-import Logo from './Logo.vue'
+import Logo from './LogoV2.vue'
 
 export default Vue.extend({
     computed: {
@@ -23,8 +23,8 @@ export default Vue.extend({
         <div class="responsive-screen relative">
             <div class="flex items-center gap-6 justify-between">
                 <SmartLink :href="getTargetLink" class="flex-shrink-0 h-10 w-10 flex items-center space-x-4">
-                    <Logo
-                        class="rounded-md bg-transparent transition-transform sm:transform hover:-rotate-6 flex-shrink-0 h-10 w-10"
+                    <LogoV2
+                        class="rounded-md bg-transparent transition-transform sm:transform hover:-rotate-6 flex-shrink-0 h-15l w-15"
                     />
                     <!-- <SmartImage
                         src="/assets/signature-with-merged-stroke.svg"