added header

assets/css/_mixins.scss

@@ -31,3 +31,17 @@
     @content;
   }
 }
+
+@mixin container {
+  max-width: 1280px;
+  margin: auto;
+  padding: 0 40px;
+
+  @include desktop {
+    padding: 0 40px;
+  }
+
+  @include tablet {
+    padding: 0 20px;
+  }
+}

assets/svg/howdy.svg

@@ -25,15 +25,15 @@
      inkscape:deskcolor="#505050"
      inkscape:document-units="px"
      showgrid="false"
-     inkscape:zoom="2.7666799"
+     inkscape:zoom="1.9557888"
-     inkscape:cx="225.54109"
+     inkscape:cx="148.78907"
-     inkscape:cy="121.08376"
+     inkscape:cy="221.13839"
      inkscape:window-width="1440"
-     inkscape:window-height="900"
+     inkscape:window-height="847"
      inkscape:window-x="0"
-     inkscape:window-y="0"
+     inkscape:window-y="25"
      inkscape:window-maximized="0"
-     inkscape:current-layer="g38429" /><defs
+     inkscape:current-layer="g15740" /><defs
      id="defs520"><linearGradient
        inkscape:collect="always"
        id="linearGradient35336"><stop
@@ -323,7 +323,7 @@
            style="fill:#242a7a;fill-opacity:1;stroke:none;stroke-width:0.991054;stroke-linecap:round"
            d="m 38.67118,11.926483 a 2.6521345,2.6521345 0 0 0 -0.76797,0.114203 2.6521345,2.6521345 0 0 1 1.881938,2.538125 2.6521345,2.6521345 0 0 1 -1.882906,2.537157 2.6521345,2.6521345 0 0 0 0.768938,0.114687 2.6521345,2.6521345 0 0 0 2.652328,-2.651844 2.6521345,2.6521345 0 0 0 -2.652328,-2.652328 z" /></g><g
          id="g15740"
-         transform="translate(-2.4776356)"><rect
+         transform="translate(-6.8106973)"><rect
            style="fill:#333aa7;fill-opacity:1;stroke:none;stroke-width:0.991051;stroke-linecap:round"
            id="rect5880"
            width="34.134068"
@@ -374,7 +374,8 @@
            y="79.47654" /><path
            id="rect3649"
            style="fill:#333aa7;fill-opacity:1;stroke:none;stroke-width:0.991051;stroke-linecap:round"
-           d="M 8.6589027,25.765868 V 93.67645 H 44.21177 V 25.765868 Z m 1.8701703,2.026233 H 42.3416 V 91.650217 H 10.529073 Z" /><path
+           d="M 8.6589027,25.765868 V 93.67645 H 46.689406 V 25.765868 Z m 1.8701703,2.026233 H 44.819236 V 91.650217 H 10.529073 Z"
+           sodipodi:nodetypes="cccccccccc" /><path
            id="path5948"
            style="fill:#333aa7;fill-opacity:1;stroke:none;stroke-width:0.991051;stroke-linecap:round"
            d="m 14.169607,32.625517 -2.121318,10.029879 13.01936,0.09663 0.77153,-10.126514 h -0.03204 l -0.06408,0.482141 -1.071252,-0.482141 h -1.029395 l -0.599963,1.349789 -0.213424,-1.349789 h -2.737817 l -1.099158,1.157036 0.40256,-1.157036 h -3.010152 l -0.285771,1.543059 -0.192753,-1.543059 z" /><rect
@@ -491,25 +492,21 @@
            width="2.2448759"
            height="2.5402541"
            x="30.662273"
-           y="49.08741" /><rect
+           y="49.08741" /><path
-           style="fill:#333aa7;fill-opacity:1;stroke:none;stroke-width:0.991054;stroke-linecap:round"
            id="rect34359"
-           width="8.2705946"
+           style="fill:#333aa7;stroke-width:0.991054;stroke-linecap:round"
-           height="3.0128596"
+           d="m 29.480762,38.757698 h 13.225866 v 3.012859 H 29.480762 Z"
-           x="29.480762"
+           sodipodi:nodetypes="ccccc" /><path
-           y="38.631016" /><rect
-           style="fill:#333aa7;fill-opacity:1;stroke:none;stroke-width:0.991054;stroke-linecap:round"
            id="rect34361"
-           width="8.2705946"
+           style="fill:#333aa7;stroke-width:0.991054;stroke-linecap:round"
-           height="3.0128596"
+           d="m 30.780428,35.33131 h 13.225866 v 3.01286 H 30.780428 Z"
-           x="30.780428"
+           sodipodi:nodetypes="ccccc" /><path
-           y="35.204628" /><rect
-           style="fill:#333aa7;fill-opacity:1;stroke:none;stroke-width:0.991054;stroke-linecap:round"
            id="rect34363"
-           width="8.2705946"
+           style="fill:#333aa7;stroke-width:0.991054;stroke-linecap:round"
-           height="3.0128596"
+           d="m 29.539839,31.90492 h 13.225865 v 3.01286 H 29.539839 Z"
-           x="29.539839"
+           sodipodi:nodetypes="ccccc" /></g><g
-           y="31.778238" /></g><path
+         id="g456"
+         transform="translate(-1.4865814)"><path
            style="fill:#333aa7;fill-opacity:1;stroke:none;stroke-width:0.991054;stroke-linecap:round"
            d="m 9.6273615,13.290308 c 0,0 2.4257565,-4.8515125 4.7706545,-3.4769173 2.344898,1.3745953 1.69803,2.5066153 1.69803,2.5066153 l -1e-6,3.800351 c 0,0 -0.485151,-4.528078 -0.970302,-3.962069 -0.485151,0.56601 -5.4983815,1.13202 -5.4983815,1.13202 z"
            id="path14608"
@@ -523,7 +520,7 @@
            style="fill:#242a7a;fill-opacity:1;stroke:none;stroke-width:0.991055;stroke-linecap:round"
            d="M 12.260576,25.059735 C 11.30123,22.199954 10.183681,20.052087 9.9217982,14.053724 l 11.5563108,0.137575 c -0.414782,3.805903 -0.378668,7.686954 -2.889078,11.143586 L 12.810876,25.19731 Z"
            id="path14375"
-         sodipodi:nodetypes="cccccc" /></g><g
+           sodipodi:nodetypes="cccccc" /></g></g><g
        id="g4098"
        transform="matrix(0.81394182,0,0,0.81730231,19.379908,30.942881)"
        style="stroke-width:1.22606"><rect

components/layout/LayoutHeader.vue

@@ -0,0 +1,43 @@
+<template>
+  <div :class="$style.header">
+    <NuxtLink to="/" :activeClass="$style.active">Home</NuxtLink>
+    <NuxtLink to="/bio" :activeClass="$style.active">About me</NuxtLink>
+  </div>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" module>
+.header {
+  text-align: left;
+  padding: 22px 0;
+
+  a {
+    color: var(--color-text);
+    text-decoration: none;
+    padding: 0 25px 0 0;
+    position: relative;
+
+    &.active {
+      color: var(--color-link);
+
+      &::after {
+        right: 28px;
+        left: 3px;
+        background: var(--color-link);
+      }
+    }
+
+    &::after {
+      content: "";
+      background: var(--color-text);
+      position: absolute;
+      height: 2px;
+      bottom: -6px;
+      left: 50%;
+      right: 50%;
+      transition: all 0.25s;
+    }
+  }
+}
+</style>

layouts/content.vue

@@ -17,19 +17,11 @@
   height: 100%;
   display: flex;
   flex-direction: column;
+  padding-top: 40px;
 }
 
 .content {
   flex: 1;
-  padding: 40px 120px;
-
-  @include desktop {
-    padding: 40px 40px 20px 40px;
-  }
-
-  @include tablet {
-    padding: 40px 20px 20px 20px;
-  }
 }
 
 .footer {

layouts/default.vue

@@ -92,6 +92,8 @@ export default defineComponent({
   z-index: 1;
   display: flex;
   flex-direction: column;
+
+  @include container;
 }
 
 .sidebar {

layouts/landing.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <div :class="$style.header_container">
+      <div :class="$style.header_content">
+        <LayoutHeader />
+      </div>
+    </div>
+
+    <NuxtLayout name="content">
+      <slot />
+    </NuxtLayout>
+  </div>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" module>
+@import "@/assets/css/mixins";
+
+.header_container {
+  position: sticky;
+  top: 0;
+  background: var(--color-background);
+}
+
+.header_content {
+  @include container;
+}
+</style>

pages/bio.vue

@@ -19,11 +19,14 @@
 </template>
 
 <script lang="ts" setup>
-definePageMeta({ layout: "content" });
+definePageMeta({ layout: "landing" });
 </script>
 
 <style lang="scss" module>
+@import "@/assets/css/mixins";
+
 .content {
+  @include container;
 }
 
 .section {

pages/index.vue

@@ -24,14 +24,14 @@ export default {
   },
 };
 
-definePageMeta({ layout: false });
+definePageMeta({ layout: "landing" });
 </script>
 
 <style lang="scss" module>
 @import "~~/assets/css/mixins";
 
 .main {
-  padding-top: 40px;
+  @include container;
 
   @include tablet {
     padding-top: 0;