From 47acb8a568def48575dc5d4ec7fd0559fe794eb5 Mon Sep 17 00:00:00 2001
From: Daniel Bulant <danbulant@gmail.com>
Date: Tue, 17 May 2022 14:57:01 +0200
Subject: [PATCH] Add background image to hero

---
 src/lib/components/hero.svelte | 49 +++++++++++++++++++++++++++++++++-
 src/routes/index.svelte        |  2 +-
 2 files changed, 49 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/hero.svelte b/src/lib/components/hero.svelte
index 9aa7d25..6946165 100644
--- a/src/lib/components/hero.svelte
+++ b/src/lib/components/hero.svelte
@@ -1,11 +1,37 @@
+<script>
+    import { onMount } from "svelte";
+
+    let current = 0;
+    export var appTypeHover;
+
+    $: if(appTypeHover == "websites") current = 0;
+    $: if(appTypeHover == "applications") current = 3;
+    $: if(appTypeHover == "bots") current = 1;
+
+    onMount(() => {
+        let i = setInterval(() => {
+            current++;
+            if(current > 3) current = 0;
+        }, 5000);
+        return () => clearInterval(i);
+    });
+</script>
+
 <div class="hero">
+    <div class="bg">
+        <img class="bg1" style="right: {(current - 3) * 100}%;" src="/screenshots/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="">
+    </div>
     <slot />
 </div>
 
 <style>
     .hero {
         border-radius: 5px;
-        background: #F4C4C4;
+        background: rgba(244, 196, 196, 0.616);
+        position: relative;
         padding: 40px 120px;
         padding: 40px min(120px, 10vw);
         margin: 0 20px;
@@ -15,6 +41,27 @@
         
         margin-bottom: 30px;
     }
+    .bg {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: 5px;
+        z-index: -1;
+        filter: darken(20%);
+        background: #F4C4C4;
+        overflow: hidden;
+    }
+    .bg img {
+        position: absolute;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        border-radius: 5px;
+        transition: right .4s;
+    }
     @media (min-width: 1760px) {
         .hero {
             margin: 0 auto;
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 1046399..6bde3c4 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -50,7 +50,7 @@
 
 <Navbar />
 <main class:dark={$darkmode}>
-	<Hero>
+	<Hero {appTypeHover}>
 		<h1>I'm a young developer making <u on:mouseenter={() => appTypeHover = "websites"} on:mouseleave={() => appTypeHover == "websites" && (appTypeHover = null)}>websites</u>,
 			<u on:mouseenter={() => appTypeHover = "applications"} on:mouseleave={() => appTypeHover == "applications" && (appTypeHover = null)}>applications</u> and
 			<u on:mouseenter={() => appTypeHover = "bots"} on:mouseleave={() => appTypeHover == "bots" && (appTypeHover = null)}>discord bots</u>.</h1>