add heaventaker project details

src/lib/components/hero.svelte

@@ -19,7 +19,7 @@
 
 <div class="hero">
     <div class="bg">
-        <img class="bg1" style="right: {(current - 3) * 100}%;" src="/screenshots/heaventaker.webp" alt="">
+        <img class="bg1" style="right: {(current - 3) * 100}%;" src="/screenshots/heaventaker/heaventaker.webp" alt="">
         <img class="bg2" style="right: {(current - 2) * 100}%;" src="/screenshots/animasher.webp" alt="">
         <img class="bg3" style="right: {(current - 1) * 100}%;" src="/screenshots/ignibg.webp" alt="">
         <img class="bg4" style="right: {(current - 0) * 100}%;" src="/screenshots/mangadex.webp" alt="">

src/lib/components/projects/heaventaker/button.svelte

@@ -0,0 +1,65 @@
+<script>
+    export var href;
+</script>
+
+<a {href} class="button" on:click>
+    <div>
+        <slot />
+    </div>
+</a>
+    
+<style>
+    .button {
+        max-width: 800px;
+        position: relative;
+        font-size: clamp(1rem, 4vh - 0.2rem, 1.5rem);
+        background: url("/screenshots/heaventaker/btnmiddle.png");
+        background-size: auto 100%;
+        background-repeat: repeat-x;
+        padding: 5px 5px;
+        text-align: center;
+        background-position-x: center;
+        cursor: pointer;
+        opacity: 0.8;
+        margin: 15px auto;
+        transition: opacity .3s, margin .3s, transform .3s;
+    }
+    .button > div {
+        margin-inline: 3em;
+        display: inline-block;
+    }
+    .button:before {
+        content: "";
+        height: 1.72em;
+        width: 2.56em;
+        background: url("/screenshots/heaventaker/btnstart.png");
+        background-size: contain;
+        left: 0;
+        top: 0;
+        position: absolute;
+    }
+    .button:after {
+        content: "";
+        height: 1.72em;
+        width: 2.56em;
+        background: url("/screenshots/heaventaker/btnstart.png");
+        background-size: contain;
+        right: 0;
+        top: 0;
+        position: absolute;
+        transform: scaleX(-1);
+    }
+    .button:first-child:hover, .button:first-child:focus {
+        margin-top: 15px;
+    }
+    .button:hover, .button:focus {
+        outline: none;
+        opacity: 1;
+        margin-top: 15px;
+        margin-bottom: 15px;
+        transform: scale(1.2);
+    }
+    .button.button:last-child {
+        margin-bottom: 0;
+    }
+</style>

src/routes/index.svelte

@@ -72,7 +72,7 @@
 			</h2>
 			<Project
 				link="/projects/heaventaker"
-				image="/screenshots/heaventaker.webp"
+				image="/screenshots/heaventaker/heaventaker.webp"
 				grayscale={appTypeHover && appTypeHover === "bots"}
 				width={2050}
 				height={1080}

src/routes/projects/heaventaker.svelte

@@ -1,15 +1,101 @@
-<div>
-    <img
-        class="banner"
-        src="/screenshots/heaventaker.webp" alt="">
+<script>
+    import Button from "$lib/components/projects/heaventaker/button.svelte";
 
-    <h1 class="text-center">Heaventaker</h1>
+    let top = 76;
+
+    function scroll() {
+        top = 76 - document.scrollingElement.scrollTop * (0.35 * window.innerWidth / 1456);
+    }
+</script>
+
+<svelte:window on:scroll={scroll} />
+
+<div class="relative">
+    <div class="bg-img main-image flex items-end justify-center" aria-label="Heaventaker" style="background-position: 50% {top}px;">
+    </div>
+
+    <section class="px-4 m-auto mb-5 max-w-200">
+        <div class="flex justify-between items-center flex-wrap">
+            <Button href="https://heaventaker.danbulant.eu">Play online</Button>
+            <Button href="https://play.google.com/store/apps/details?id=eu.danbulant.heaventaker">Google Play</Button>
+            <Button href="https://github.com/danbulant/heaventaker">GitHub</Button>
+        </div>
+        <div class="flex items-center justify-center flex-wrap flex-row-reverse">
+            <div class="flex-grow" style="width: 300px;">
+                <p>
+                    A Work-in-progress Helltaker inspired game with angels.
+                </p>
+        
+                <p>
+                    Short game about solving puzzles in heaven and about pleasing your favorite angels.
+                </p>
+        
+                Features:
+                <ul class="list-disc">
+                    <li class="ml-4">6 angels, each with a unique puzzle - art by u/hohodo</li>
+                    <li class="ml-4">Audio from Mittsies</li>
+                </ul>
+            </div>
+            <img src="/screenshots/heaventaker/Uriel_unhappy.png" class="h-80" alt="">
+        </div>
+    </section>
+
+    <div class="bg-img secondary-image flex items-center justify-center">
+    </div>
+
+    <section class="px-4 m-auto mb-5 max-w-200">
+
+        <h2 class="text-2xl font-bold">Licensing</h2>
+
+        <p>
+            The game is licensed under AGPLv3. This means it's free software, but you must give credit to the author and share your changes under the same license. Read full license <a href="https://www.gnu.org/licenses/agpl-3.0.en.html">here</a>.
+        </p>
+
+        <p>
+            Images are licensed under CC-BY-SA. This means you must give credit to the author and share your changes under the same license.
+        </p>
+    </section>
+
+    <div class="bg-img image-michael"></div>
 </div>
-    
+
 <style>
-    .banner {
-        width: 100vw;
-        height: calc(100vw * 0.5625);
-        object-fit: cover;
+    .bg-img {
+        @apply p-0 m-0 w-full bg-no-repeat bg-fixed;
+    }
+    .main-image {
+        background-image: url("/screenshots/heaventaker/heaventaker2.webp");
+        background-size: calc(100vw - 10rem * 2050 / 1080) calc(100vw*1080/2050 - 10rem);
+        height: calc(100vw*1080/2050 - 10rem);
+    }
+    .secondary-image {
+        background-image: url("/screenshots/heaventaker/lucifer.png");
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: 50% 50%;
+        background-color: #7F4953;
+        height: calc(100vw*0.509375);
+    }
+    .image-michael {
+        background-image: url("/screenshots/heaventaker/michael.webp");
+        background-size: contain;
+        background-repeat: no-repeat;
+        height: calc(100vw*0.4312611012);
+        background-position: 100% 100%;
+    }
+    section {
+        margin-bottom: 0;
+    }
+    p {
+        @apply my-2;
+    }
+    .button {
+        @apply p-3 m-2 rounded border border-dark-400;
+    }
+    .button.github {
+        background: #333333;
+    }
+    .button.play {
+        background: #006db3;
     }
 </style>