add brand as link; adjust typography

src/components/Header.vue

@@ -1,6 +1,6 @@
 <template>
     <header>
-        <div class="brand">
+        <a href="https://ayushm.com" class="brand">
             <div class="logo">
                 <img src="@/assets/logo.png" alt="Ayush M. Logo" width="60px" height="60px">
             </div>
@@ -8,9 +8,9 @@
                 <span>Ayush</span>
                 <span>Mukherjee.</span>
             </div>
-        </div>
+        </a>
         <nav>
-            <router-link class="active" to="#work">work</router-link>
+            <router-link to="#work">work</router-link>
             <router-link to="#about">about</router-link>
             <router-link to="#skills">skills</router-link>
             <router-link to="#contact">contact</router-link>

src/scss/base/_base.scss

@@ -21,7 +21,7 @@ body {
 }
 
 p {
-    letter-spacing: 0.005em;
+    letter-spacing: 0.01em;
     line-height: 1.6em;
 }
 

src/scss/components/_header.scss

@@ -1,19 +1,22 @@
 header {
-    padding: 60px 120px;
+    padding: 40px 90px 40px 120px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     
     .brand {
         display: flex;
-        justify-content: space-between;
         align-items: center;
-        width: 210px;
+        padding: 20px 30px 20px 30px;
         font-size: $font-brand;
+        color: $fg;
+        text-decoration: none;
+        transition: 0.2s ease-in-out;
 
         .logo {
             width: 60px;
             height: 60px;
+            margin-right: 10px;
         }
 
         .name {
@@ -21,6 +24,10 @@ header {
             flex-direction: column;
             font-weight: $font-bold;
         }
+
+        &:hover {
+            background: darken($bg, 4%);
+        }
     }
 
     nav {