You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
124 lines
4.1 KiB
124 lines
4.1 KiB
<script>
|
|
import Model from "$lib/model/Model.svelte";
|
|
import Social from "../lib/socials/Social.svelte";
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>AlexArcher</title>
|
|
</svelte:head>
|
|
|
|
<main>
|
|
|
|
<section class="relative h-screen">
|
|
<div class="h-screen lg:h-3/4 -z-1 absolute bg-zinc-800 shadow-xl w-screen slide"></div>
|
|
|
|
<div class="lg:w-2/3 mx-auto lg:py-32 flex flex-col lg:flex-row gap-5 lg:gap-10 px-3 lg:px-0" id="about">
|
|
|
|
<div class="flex lg:hidden flex-col gap-5 -mt-10 z-10 fade w-full">
|
|
<div class="flex flex-row gap-0 -mb-3 items-end">
|
|
<h1 class="text-red-500 flex flex-col gap-5 w-1/2 font-bold text-6xl">Nya!</h1>
|
|
<div class="fade w-1/2">
|
|
<img src="/images/sticker2.png" alt="Alex Blep" />
|
|
</div>
|
|
</div>
|
|
<h2 class="text-red-500 text-2xl">Welcome to the fire cat place!</h2>
|
|
|
|
<p class="lg:w-3/4 text-xl text-gray-300">
|
|
It's really warm and cozy in here, wanna stay with me for a moment? I'm going to tell you a story about me... And I have cookies!
|
|
</p>
|
|
|
|
<br/>
|
|
|
|
<div class="flex flex-col lg:flex-row gap-5">
|
|
<Social link="https://twitter.com/3D_AlexArcher" icon="🐦" text="Twitter"></Social>
|
|
<Social link="https://www.furaffinity.net/user/lazyfairy/" icon="🦊" text="FurAffinity"></Social>
|
|
<Social link="https://www.twitch.tv/3d_alexarcher" icon="📹" text="Twitch"></Social>
|
|
<Social link="https://discord.gg/YedfABNp7A" icon="💬" text="Discord"></Social>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hidden lg:flex flex-col gap-10 lg:w-2/3 z-10 fade">
|
|
<h1 class="text-red-500 flex flex-col lg:flex-row gap-5 lg:items-end"><span class="font-bold text-6xl">Nya!</span> <span class="text-3xl">Welcome to the fire cat place!</span></h1>
|
|
|
|
<p class="lg:w-3/4 text-xl text-gray-300">
|
|
It's really warm and cozy in here, wanna stay with me for a moment? I'm going to tell you a story about me... And I have cookies!
|
|
</p>
|
|
|
|
<br/>
|
|
|
|
<div class="flex flex-col lg:flex-row gap-5">
|
|
<Social link="https://twitter.com/3D_AlexArcher" icon="🐦" text="Twitter"></Social>
|
|
<Social link="https://www.furaffinity.net/user/lazyfairy/" icon="🦊" text="FurAffinity"></Social>
|
|
<Social link="https://www.twitch.tv/3d_alexarcher" icon="📹" text="Twitch"></Social>
|
|
<Social link="https://discord.gg/YedfABNp7A" icon="💬" text="Discord"></Social>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hidden lg:block lg:w-1/3 fade">
|
|
<img src="/images/frontpage.png" alt="Alex Fursona" class="-mt-20 float scale-150" />
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<Model/>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<style>
|
|
.float {
|
|
animation: float;
|
|
animation-duration: 3s;
|
|
animation-iteration-count: infinite;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
@keyframes float {
|
|
0% {
|
|
transform: translateY(-5px) scale(150%);
|
|
}
|
|
50% {
|
|
transform: translateY(5px) scale(150%);
|
|
}
|
|
100% {
|
|
transform: translateY(-5px) scale(150%);
|
|
}
|
|
}
|
|
|
|
.fade {
|
|
animation: fade;
|
|
animation-duration: 0.5s;
|
|
animation-timing-function: ease-in-out;
|
|
|
|
}
|
|
|
|
@keyframes fade {
|
|
0% {
|
|
opacity: 0%;
|
|
}
|
|
50% {
|
|
opacity: 0%;
|
|
}
|
|
100% {
|
|
opacity: 100%;
|
|
}
|
|
}
|
|
|
|
.slide {
|
|
animation: slide;
|
|
animation-duration: 0.25s;
|
|
animation-timing-function: ease-in-out;
|
|
transform: skewY(-5deg);
|
|
}
|
|
|
|
@keyframes slide {
|
|
0% {
|
|
transform: translateX(-100vw) translateY(170px) skewY(-5deg);
|
|
}
|
|
100% {
|
|
transform: translateX(0) translateY(0) skewY(-5deg);
|
|
}
|
|
}
|
|
</style> |