start work on heaventaker page + transitions

src/lib/components/pageTransition.svelte

@@ -11,3 +11,9 @@
         <slot />
     </div>
 {/key}
+
+<style>
+    div {
+        position: absolute;
+    }
+</style>

src/lib/components/project.svelte

@@ -1,10 +1,15 @@
 <script>
     import { goatCounter } from "$lib/goatcounter";
+    import { goto } from '$app/navigation';
     export var image; // "https://picsum.photos/725/350?random=" + Math.floor(Math.random() * 5000);
     export var link = "";
-    export var tags = [];
     export var grayscale = false;
     export var extradark = false;
+    export var clickable = false;
+    export var crossfadesend = null;
+    export var crossfadereceive = null;
+    export var crossfadekey = null;
+    export var target="_blank";
     export var width;
     export var height;
     export var name;
@@ -12,14 +17,21 @@
         if(!link) {
             e.preventDefault();
             alert("No link available");
+        } else if(link.startsWith("/")) {
+            e.preventDefault();
+            goto(link);
         }
     }
 </script>
 
-<a href={link || "#"} target="_blank" rel="noopener" data-goatcounter-click="project-{name}" class="full" on:click={handle} use:goatCounter>
+<a href={link || "#"} {target} rel="noopener" data-goatcounter-click="project-{name}" class="full" on:click={handle} use:goatCounter>
     <div class="project">
         <div class="imgcon">
-            <img src={image} alt={name} draggable={false} class:grayscale {width} {height}>
+            {#if crossfadesend}
+                <img out:crossfadesend={{ key: crossfadekey }} in:crossfadereceive={{ key: crossfadekey }} src={image} alt={name} draggable={false} class:grayscale {width} {height}>
+            {:else}
+                <img src={image} alt={name} draggable={false} class:grayscale {width} {height}>
+            {/if}
             {#if $$slots.desc}
                 <div class="desc" class:extradark>
                     <div class="content">
@@ -29,11 +41,11 @@
             {/if}
         </div>
         <h3><slot /></h3>
-        <div class="tags">
+        {#if clickable}
-            {#each tags as tag, i}
+            <div class="clickable">
-                <span>{tag}</span>{#if i !== tags.length - 1}<span>&middot;&ZeroWidthSpace;</span>{/if}
+                Click to view details
-            {/each}
+            </div>
-        </div>
+        {/if}
     </div>
 </a>
 
@@ -41,15 +53,6 @@
     a.full:hover {
         text-decoration: none;
     }
-    .tags {
-        margin: 5px 0;
-        margin-left: -3px;
-        max-width: 100%;
-        overflow-wrap: normal;
-    }
-    .tags span {
-        padding: 0 3px;
-    }
     .project {
         width: 100%;
         margin-bottom: 30px;

src/lib/stores/transitions.js

@@ -0,0 +1,6 @@
+import { crossfade } from "svelte/transition";
+
+
+export const [heaventakerSendTransition, heaventakerReceiveTransition] = crossfade({
+    duration: 700
+});

src/routes/__error.svelte

@@ -37,7 +37,7 @@
 </h1>
 
 <!-- HTML Entity encoded email -->
-<p class="text-center">I'm sorry for that. If this is a repeated problem, try contacting me (&#x64;&#x61;&#x6E;&#x62;&#x75;&#x6C;&#x61;&#x6E;&#x74;&#x40;&#x64;&#x61;&#x6E;&#x62;&#x75;&#x6C;&#x61;&#x6E;&#x74;&#x2E;&#x65;&#x75;)</p>
+<p class="text-center">I'm sorry for that. If this is a repeated problem, try contacting me (me@danbulant.eu)</p>
 
 <div class="flex justify-center">
     <Button href="/">Go to my home page</Button>

src/routes/index.svelte

@@ -21,6 +21,7 @@
 	import Project from "$lib/components/project.svelte";
 	import TechnologyDetails from "$lib/components/technologyDetails.svelte";
 	import darkmode from "$lib/stores/darkmode";
+import { heaventakerReceiveTransition, heaventakerSendTransition } from "$lib/stores/transitions";
 
 	var technologySelected = null;
 	var technologyHover = false;
@@ -72,13 +73,17 @@
 				I helped many projects come to life. Here are some examples:
 			</h2>
 			<Project
-				link="https://danbulant.itch.io/heaventaker"
+				link="/projects/heaventaker"
-				tags={["Website", "Application", "Phaser", "Svelte"]}
 				image="/screenshots/heaventaker.webp"
 				grayscale={appTypeHover && appTypeHover === "bots"}
 				width={2050}
 				height={1080}
                 name="Heaventaker"
+                clickable
+                target="_self"
+                crossfadesend={heaventakerSendTransition}
+                crossfadereceive={heaventakerReceiveTransition}
+                crossfadekey="heaventaker"
 			>
 				<b>Heaventaker</b> - Helltaker fan game
 				<svelte:fragment slot="desc">
@@ -91,7 +96,6 @@
 				</svelte:fragment>
 			</Project>
 			<Project
-				tags={["Backend", "Website", "Svelte", "React", "Typescript"]}
 				image="/screenshots/animasher.webp"
 				grayscale={appTypeHover && appTypeHover !== "websites"}
 				extradark
@@ -114,7 +118,6 @@
 			<div class="pad"></div>
 			<Project
 				link="https://manga.danbulant.eu"
-				tags={["Website", "Svelte"]}
 				image="/screenshots/mangadex.webp"
 				grayscale={appTypeHover && appTypeHover !== "websites"}
 				width={803}
@@ -133,7 +136,6 @@
 			</Project>
 			<Project
 				link="https://top.gg/bot/739864286775738399"
-				tags={["Discord bot", "Backend", "Discord.js", "Typescript"]}
 				image="/screenshots/ignibg.webp"
 				grayscale={appTypeHover && appTypeHover === "applications"}
 				width={1080}
@@ -160,7 +162,7 @@
 		<h2 class="text-center">I also worked with the following:</h2>
 		<noscript class="text-center text-white">Clicking won't work if javascript is not enabled.</noscript>
 		<span class="text-center" class:text-gray={!technologyHover} class:text-white={technologyHover}>{typeof window !== "undefined" && window.matchMedia("(hover: none) and (pointer: coarse)").matches ? "Touch" : "Click"} each technology for more details about why I'm using it.</span>
-		<div class="split" on:mouseenter={() => technologyHover = true} on:mouseleave={() => technologyHover = false}>
+		<div class="split" class:text-gray={technologyHover} on:mouseenter={() => technologyHover = true} on:mouseleave={() => technologyHover = false}>
 			<ul>
 				<li on:click={() => technologySelected = "typescript"}>
 					<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg" alt="" draggable={false} />
@@ -351,10 +353,13 @@
 		align-items: center;
 		justify-content: left;
 		cursor: pointer;
-		transition: transform .3s;
+		transition: transform .3s, color .2s;
 	}
-	.also li::active {
+    .also li:hover {
-		transform: scale(0.8);
+        color: white;
+    }
+	.also li:active {
+		transform: scale(0.95);
 	}
 	.also li::before {
 		content: "";

src/routes/projects/heaventaker.svelte

@@ -0,0 +1,13 @@
+<script>
+import { heaventakerReceiveTransition, heaventakerSendTransition } from "$lib/stores/transitions";
+</script>
+
+<img class="banner" in:heaventakerReceiveTransition={{ key: "heaventaker" }} out:heaventakerSendTransition={{ key: "heaventaker" }} src="/screenshots/heaventaker.webp" alt="">
+
+<style>
+    .banner {
+        width: 100vw;
+        height: auto;
+        object-fit: cover;
+    }
+</style>