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.
86 lines
3.7 KiB
86 lines
3.7 KiB
<script>
|
|
import Card from "$lib/elements/Card.svelte";
|
|
import Social from "$lib/elements/Social.svelte";
|
|
import words from "$lib/en-lang.json";
|
|
let lang = words["home"];
|
|
let items = words["frontpage"]["items"];
|
|
|
|
function meow() {
|
|
let meow = new Audio("/squeak.mp3");
|
|
meow.volume = 0.1;
|
|
meow.play();
|
|
}
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<meta property="og:title" content={lang["page"] + " || Siv Kyne"} />
|
|
<meta property="og:description" content={lang["description"]} />
|
|
<title>{lang["page"]} || Siv Kyne</title>
|
|
</svelte:head>
|
|
|
|
<main class="flex flex-col gap-5">
|
|
<section class="container bg-gradient-to-b from-slate-700 to-slate-800 rounded-lg shadow-lg p-5 flex flex-col -mt-5 lg:mt-0 xl:-mt-5">
|
|
<div class="flex flex-col justify-center items-center gap-3 -mt-20 sm:-mt-28 relative">
|
|
<div class="absolute inset-0 mx-auto bg-slate-700 rounded-full -z-10 w-40 h-40 sm:w-60 sm:h-60"></div>
|
|
<img src="/pic.png" class="absolute inset-0 mx-auto p-2 lg:p-3 pop w-40 h-40 sm:w-60 sm:h-60 rounded-full z-40" alt="profile pic" on:click={meow} />
|
|
<div class="h-60"></div>
|
|
|
|
<h2 class="text-2xl font-bold fira-bold text-center">{lang["title"]}</h2>
|
|
<p class="text-center">
|
|
{@html lang["description"]}
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="container bg-slate-800 rounded-lg shadow-lg p-5 flex flex-col gap-5">
|
|
<div class="flex flex-wrap justify-center items-center gap-5">
|
|
<Social href="/about" icon="📄" text="About Me" />
|
|
<Social href="/calculator" icon="🧮" text="Commission Picker" />
|
|
<Social href="/contact" icon="✉️" text="Contact" />
|
|
</div>
|
|
<div class="flex flex-wrap justify-center items-center gap-5">
|
|
<Social href="https://twitter.com/SivKyne" target="_blank" icon="🐦" text="Twitter" />
|
|
<Social href="https://discord.com/invite/5JCZTv3TtF" target="_blank" icon="💬" text="Discord" />
|
|
<Social href="https://www.youtube.com/channel/UC1pnonYCZv1mi3XImhX35-A" target="_blank" icon="📺" text="YouTube" />
|
|
<Social href="https://www.deviantart.com/sivkyne" target="_blank" icon="🖼️" text="DeviantArt" />
|
|
<Social href="https://steamcommunity.com/id/sivkyne" target="_blank" icon="🎮" text="Steam" />
|
|
<Social href="https://open.spotify.com/user/uqwz46n0jki4zdwiedca5gbp2" target="_blank" icon="🎵" text="Spotify" />
|
|
<Social href="https://toyhou.se/sivkyne" target="_blank" icon="👪" text="Toyhouse" />
|
|
<Social href="https://myanimelist.net/animelist/SivKyne" target="_blank" icon="🎞️" text="My Anime List" />
|
|
<Social href="https://twitch.tv/sivkyne" icon="📹" text="Twitch" />
|
|
</div>
|
|
</section>
|
|
|
|
<section class="container">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
|
|
<span class="hidden lg:col-span-1 lg:col-span-2 lg:col-span-3"></span>
|
|
{#each items as item}
|
|
<span class="lg:col-span-{item['width']} flex">
|
|
<Card href={item['link']} picture={item['picture']} alt="commission info">
|
|
{@html item["text"]}
|
|
</Card>
|
|
</span>
|
|
{/each}
|
|
</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> |