157 lines
3.4 KiB
Svelte
157 lines
3.4 KiB
Svelte
<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 Blog from "$lib/icons/Blog.svelte";
|
|
import MaterialSymbolsStarRounded from '~icons/material-symbols/star-rounded';
|
|
|
|
export let starCount: number | null;
|
|
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",
|
|
onEnter: () => {
|
|
const state = Flip.getState(logo);
|
|
logo.classList.add("hero__logo--in-nav")
|
|
Flip.from(state, {
|
|
duration: .6,
|
|
})
|
|
},
|
|
onLeaveBack: () => {
|
|
const state = Flip.getState(logo);
|
|
logo.classList.remove("hero__logo--in-nav")
|
|
Flip.from(state, {
|
|
absolute: true,
|
|
duration: .6,
|
|
})
|
|
}
|
|
})
|
|
})
|
|
|
|
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>
|
|
{#if starCount}
|
|
<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">
|
|
{starCount}
|
|
<MaterialSymbolsStarRounded class="max-h-4 max-w-4" />
|
|
</div>
|
|
{/if}
|
|
</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>
|
|
<a
|
|
class="hero__social-icon"
|
|
href="/blog"
|
|
>
|
|
<Blog></Blog>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<style lang="postcss">
|
|
.hero__logo-wrapper {
|
|
min-width: 64px;
|
|
min-height: 64px;
|
|
max-width: 256px;
|
|
height: 25vh;
|
|
aspect-ratio: 1;
|
|
}
|
|
|
|
.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;
|
|
transition: opacity .3s;
|
|
}
|
|
|
|
&:hover {
|
|
:global(svg) {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
</style>
|