Updated navbar

src/Components/Footer.svelte

@@ -98,7 +98,7 @@
   </div>
   <div class="content">
     <p>
-      Made in <GradientText rgbValues={['#f7630c 65%', '#ffffff']} direction="to right">
+      Made in <GradientText rgbValues={['#f7630c 65%', '#ffffff']} direction="to bottom right">
         Svelte
       </GradientText>
       with &#x1F9E1;
@@ -114,17 +114,14 @@
     height: 155px;
     overflow-y: hidden;
     svg {
-      // position: absolute;
       left: 0;
-      // top: -100%;
       width: 100%;
       height: 350px;
     }
   }
 
   .footer .content {
     background-color: black;
-    // z-index: 2;
     position: relative;
     padding: 0 1em 2em 1em;
     display: flex;

src/Components/Navbar/Navbar.svelte

@@ -0,0 +1,136 @@
+<script lang="ts">
+  import NavbarButton from './NavbarButton.svelte';
+  import { onMount } from 'svelte';
+  import { cubicOut } from 'svelte/easing';
+  import { slide } from 'svelte/transition';
+
+  let navbar: HTMLElement;
+  let screenWidth: number = 0;
+  let isNavbarActive = false;
+
+  const UpdateNavbar = () => {
+    const scroll = Math.max(Math.min((window.scrollY / 150) * 2, 2), 1);
+
+    screenWidth = window.innerWidth;
+    const smallScreen = screenWidth <= 750;
+    if (!smallScreen) isNavbarActive = true;
+
+    navbar.style.padding = smallScreen ? '0' : `calc(2.5rem / ${scroll * 1.25})`;
+  };
+
+  onMount(() => {
+    UpdateNavbar();
+
+    screenWidth = window.innerWidth;
+  });
+</script>
+
+<svelte:window on:scroll={UpdateNavbar} on:resize={UpdateNavbar} />
+{#if screenWidth <= 750}
+  <button
+    class="navbar-toggle"
+    class:active={isNavbarActive}
+    on:click={() => {
+      isNavbarActive = !isNavbarActive;
+    }}
+  >
+    <img alt="" src="/svgs/hamburger.svg" />
+  </button>
+{/if}
+
+<nav bind:this={navbar} class="navbar">
+  {#if screenWidth > 750 || isNavbarActive}
+    <span transition:slide={{ easing: cubicOut }}>
+      <h1>Elias Valk</h1>
+      <ul class="nav-buttons">
+        <NavbarButton section={0}>About</NavbarButton>
+        <NavbarButton section={1}>Work Values</NavbarButton>
+        <NavbarButton section={2}>About</NavbarButton>
+        <NavbarButton
+          section={-1}
+          onClick={() => window.open('mailto:[email protected]', '_blank')}
+        >
+          Contact <img class="external" alt="" src="/svgs/external.svg" />
+        </NavbarButton>
+      </ul>
+    </span>
+  {/if}
+</nav>
+
+<style lang="scss">
+  .navbar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 50;
+
+    > span {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    background-color: #030303;
+    transition: padding 0.25s;
+  }
+
+  button {
+    outline: none;
+    border: none;
+    cursor: pointer;
+    background: none;
+  }
+
+  .navbar-toggle {
+    z-index: 51;
+    position: fixed;
+    top: 1.25rem;
+    left: 1.25rem;
+    padding: 0.5em;
+
+    border: #fff solid 2px;
+    border-radius: 5px 5px 0 0;
+    transition: border-radius 1.25s;
+    box-sizing: content-box;
+
+    img {
+      width: 1.75em;
+    }
+  }
+
+  img {
+    filter: invert(1);
+
+    &.external {
+      width: 0.75em;
+      margin-left: 0.25em;
+    }
+  }
+
+  .nav-buttons {
+    list-style: none;
+  }
+
+  @media screen and (max-width: 750px) {
+    .navbar {
+      top: 3.7rem;
+      left: 1.2rem;
+      right: unset;
+      border-radius: 0 5px 5px 5px;
+
+      > span {
+        flex-direction: column;
+        align-items: baseline;
+      }
+    }
+
+    h1 {
+      padding: 0.75rem 0 0.75rem 0.5rem;
+      border-bottom: #fff solid 2px;
+      width: 100%;
+      box-sizing: border-box;
+      font-size: 1rem;
+    }
+  }
+</style>

src/Components/Navbar/NavbarButton.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+  import { activeSection } from '$lib/tools';
+
+  export let section: number;
+  export let onClick: Function | null = null;
+
+  const NavbarButon = (dest: number) => {
+    if (dest != -1) {
+      document
+        .querySelectorAll('section')
+        [dest].scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+  };
+</script>
+
+<li>
+  <button
+    class="navbar-button"
+    class:active={$activeSection == section}
+    on:click={() => (onClick == null ? NavbarButon(section) : onClick())}
+  >
+    <slot />
+  </button>
+</li>
+
+<style lang="scss">
+  li {
+    margin: 0 0.5rem;
+    display: inline-block;
+  }
+
+  button {
+    outline: none;
+    border: none;
+    cursor: pointer;
+    background: none;
+    position: relative;
+  }
+
+  .navbar-button {
+    padding: 0.3em 0.5em;
+    font-size: 1.45rem;
+
+    &::before {
+      position: absolute;
+      content: '';
+      inset: 0;
+
+      background-image: linear-gradient(to bottom right, rgb(13, 192, 192), royalblue 95%);
+      z-index: -1;
+      border-radius: 15px;
+      opacity: 0;
+
+      transition: opacity 0.25s;
+    }
+  }
+
+  button:global(.active)::before {
+    opacity: 1;
+  }
+
+  @media screen and (max-width: 750px) {
+    li {
+      display: block;
+      margin: 0;
+      width: 100%;
+    }
+
+    .navbar-button {
+      width: 100%;
+      text-align: left;
+      font-size: 1.25rem !important;
+      &::before {
+        border-radius: 0;
+        width: 100%;
+      }
+    }
+  }
+</style>