Initial commit

2024-09-26 01:55:31 +03:00
commit cb32524241
46 changed files with 5704 additions and 0 deletions
--- a/src/routes/Hero.svelte
+++ b/src/routes/Hero.svelte
@@ -0,0 +1,138 @@
+<script lang="ts">
+import {onMount} from "svelte";
+import {t} from "$lib/translations";
+import Github from "$lib/icons/Github.svelte";
+import Telegram from "$lib/icons/Telegram.svelte";
+import Linkedin from "$lib/icons/Linkedin.svelte";
+import MaterialSymbolsStarRounded from '~icons/material-symbols/star-rounded';
+
+let logo: HTMLElement;
+
+onMount(async () => {
+  const {gsap} = await import('gsap')
+  const {Flip} = await import('gsap/Flip')
+  const {ScrollTrigger} = await import('gsap/ScrollTrigger')
+
+  gsap.registerPlugin(Flip, ScrollTrigger);
+
+  ScrollTrigger.create({
+    trigger: logo,
+    start: "top-=10% top+=64px",
+    scrub: 1,
+    onEnter: () => {
+      const state = Flip.getState(logo);
+      logo.classList.add("hero__logo--in-nav")
+      Flip.from(state, {
+        duration: 1,
+      })
+    },
+    onLeaveBack: () => {
+      const state = Flip.getState(logo);
+      logo.classList.remove("hero__logo--in-nav")
+      Flip.from(state, {
+        duration: 1,
+      })
+    }
+  })
+})
+
+const goTop = () => {
+  document.body.scrollIntoView()
+}
+</script>
+
+<div class="hero min-h-dvh flex flex-col justify-center gap-4 items-center p-2 md:p-8">
+  <div
+    class="hero__logo-wrapper mb-16"
+  >
+    <enhanced:img
+      src="$lib/assets/kopyl_frame_white.png"
+      alt="kopyl logo"
+      class="hero__logo"
+      bind:this={logo}
+      on:click={goTop}
+      on:keydown={goTop}
+      role="button"
+      tabindex="0"
+    ></enhanced:img>
+  </div>
+
+  <h1 class="hero__name text-4xl text-center">
+    {$t('anatoly_kopyl')}
+  </h1>
+
+  <p class="text-center mb-8 text-slate-400 max-w-96 text-balance">
+    {@html $t('hero.subtitle')}
+  </p>
+
+  <div class="flex gap-6">
+    <a
+      class="hero__social-icon"
+      target="_blank"
+      href="https://github.com/anatolykopyl"
+    >
+      <Github></Github>
+      <div class="rounded-lg text-sm border border-slate-200 border-opacity-50 px-2 bg-slate-500 bg-opacity-25 absolute bottom-0 w-max translate-y-full mb-1 flex gap-1 items-center">
+        123
+        <MaterialSymbolsStarRounded class="max-h-4 max-w-4" />
+      </div>
+    </a>
+    <a
+      class="hero__social-icon"
+      target="_blank"
+      href="https://www.linkedin.com/in/akopyl/"
+    >
+      <Linkedin></Linkedin>
+    </a>
+    <a
+      class="hero__social-icon"
+      target="_blank"
+      href="https://t.me/anatolykopyl"
+    >
+      <Telegram></Telegram>
+    </a>
+  </div>
+</div>
+
+<style lang="postcss">
+  .hero__logo-wrapper {
+    min-width: 64px;
+    min-height: 64px;
+    width: 256px;
+    height: 256px;
+  }
+
+  .hero__logo {
+    box-sizing: border-box;
+    z-index: 100;
+    background: theme(colors.slate.950);
+  }
+
+  :global(.hero__logo--in-nav) {
+    position: fixed;
+    width: 64px;
+    height: 64px;
+    top: 16px;
+    left: 16px;
+
+    @media screen(md) {
+      left: 32px;
+    }
+  }
+
+  .hero__social-icon {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 4px;
+    height: fit-content;
+
+    :global(svg) {
+      width: 48px;
+      height: 48px;
+      color: white;
+      opacity: .8;
+    }
+  }
+</style>