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.
108 lines
4.1 KiB
108 lines
4.1 KiB
<script>
|
|
import Card from "$lib/elements/Card.svelte";
|
|
import Social from "$lib/elements/Social.svelte";
|
|
import { onMount } from "svelte";
|
|
|
|
onMount(() => {
|
|
const soundBtn = document.querySelector('#clickMeow');
|
|
soundBtn.addEventListener('click',() => {
|
|
let meow = new Audio("/squeak.mp3");
|
|
meow.volume = 0.1;
|
|
meow.play();
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>Home || Siv Kyne</title>
|
|
</svelte:head>
|
|
|
|
<main class="flex flex-col gap-5">
|
|
<section class="container bg-gray-800 rounded-lg shadow-lg p-5 flex flex-col -mt-5">
|
|
<div class="flex flex-col justify-center items-center gap-3 -mt-20 lg:-mt-28">
|
|
<div class="bg-gradient-to-t from-gray-800 via-gray-800 to-red-500 p-2 lg:p-3 rounded-full">
|
|
<img src="/pic.png" id="clickMeow" class="pop w-40 h-40 lg:w-60 lg:h-60 rounded-full bg-gray-800" />
|
|
</div>
|
|
|
|
<h2 class="text-2xl font-bold fira-bold text-center">Hi, I'm Siv Kyne!</h2>
|
|
<p class="text-center">
|
|
I'm a young Asian artist who specializes in cartoony 2D animals.
|
|
<br/>
|
|
You can find more information below.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="container bg-gray-800 rounded-lg shadow-lg p-5 flex flex-col">
|
|
<div class="flex flex-wrap justify-center items-center gap-5">
|
|
<Social href="https://twitter.com/SivKyne" icon="🐦" text="Twitter" />
|
|
<Social href="https://discord.com/invite/5JCZTv3TtF" icon="💬" text="Discord" />
|
|
<Social href="https://www.youtube.com/channel/UC1pnonYCZv1mi3XImhX35-A" icon="📺" text="YouTube" />
|
|
<Social href="https://www.deviantart.com/sivkyne" icon="🖼️" text="DeviantArt" />
|
|
<Social href="https://steamcommunity.com/id/sivkyne" icon="🎮" text="Steam" />
|
|
<Social href="https://open.spotify.com/user/uqwz46n0jki4zdwiedca5gbp2" icon="🎵" text="Spotify" />
|
|
<Social href="https://toyhou.se/sivkyne" icon="👪" text="Toyhouse" />
|
|
<Social href="https://myanimelist.net/animelist/SivKyne" icon="🎞️" text="My Anime List" />
|
|
</div>
|
|
</section>
|
|
|
|
<section class="container">
|
|
<div class="grid grid-cols-2 lg:grid-cols-3 gap-3">
|
|
<Card href="/commissions#icon" picture="/commissions/iconbasic.jpg" alt="commission info">
|
|
Icon <br/> Commissions
|
|
</Card>
|
|
|
|
<Card href="/commissions#emote" picture="/commissions/emote2.jpg" alt="commission info">
|
|
Emote <br/> Commissions
|
|
</Card>
|
|
|
|
<Card href="/commissions#ych" picture="/commissions/ychbaby.jpg" alt="commission info">
|
|
YCH <br/> Commissions
|
|
</Card>
|
|
|
|
<span class="col-span-3 flex">
|
|
<Card href="/commissions#refsheet" picture="/commissions/refsheet3.jpg" alt="commission info">
|
|
Ref Sheet <br/> Commissions
|
|
</Card>
|
|
</span>
|
|
|
|
<span class="col-span-2 flex">
|
|
<Card href="/commissions#complex" picture="/commissions/complex1.jpg" alt="commission info">
|
|
Complex Scene <br/> Commissions
|
|
</Card>
|
|
</span>
|
|
|
|
<Card href="/commissions#animation" picture="/commissions/animationheadshot.gif" alt="commission info">
|
|
Animation <br/> Commissions
|
|
</Card>
|
|
|
|
<Card href="/commissions#halfbody" picture="/commissions/halfbodybasic.jpg" alt="commission info">
|
|
Halfbody <br/> Commissions
|
|
</Card>
|
|
|
|
<Card href="/commissions#fullbody" picture="/commissions/fullbodyultralineart.jpg" alt="commission info">
|
|
Fullbody <br/> Commissions
|
|
</Card>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<style>
|
|
.pop:active {
|
|
animation: pop;
|
|
animation-duration: 0.1s;
|
|
animation-timing-function: linear;
|
|
}
|
|
|
|
@keyframes pop {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
40% {
|
|
transform: scale(0.9);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
</style> |