From b2197737689e171648fcb76ecc599ab6f341fffe Mon Sep 17 00:00:00 2001
From: matthieu42morin <matthieu.bernard.morin@gmail.com>
Date: Mon, 29 Apr 2024 05:08:49 +0200
Subject: [PATCH] hero animation and daisyUI fix, adding cv, improvements

---
 src/lib/components/home/HeroSection.svelte | 106 +++++++++++++++++++++
 1 file changed, 106 insertions(+)
 create mode 100644 src/lib/components/home/HeroSection.svelte

diff --git a/src/lib/components/home/HeroSection.svelte b/src/lib/components/home/HeroSection.svelte
new file mode 100644
index 0000000..a2c5ca5
--- /dev/null
+++ b/src/lib/components/home/HeroSection.svelte
@@ -0,0 +1,106 @@
+<script lang="ts">
+	import QuickLinks from '$lib/components/home/QuickLinks.svelte';
+	import { social } from '$lib/config/site'; 
+</script>
+
+<section class="grid grid-cols-1 lg:grid-cols-2 items-center mx-4">
+	<!-- Text and links-->
+	<div class="order-1 max-w-3/4 space-y-8">
+		<h1 class="text-4xl">Hello, I&#39;m Matt.</h1>
+
+		<p class="text-xl opacity-75">
+			A 🧠 that consumes ⚡️ and produces 👾 bug$... No sorry, produces code that works 100%
+			of the time. Really.
+
+			<br /> Usually, this creature you are reading about exhibits "passion" for innovation
+			and change. It gets dopamine and reward stimuli from solving problems ~~~ the "Ahaa"
+			moments ~~~ <br />although the 👾 bugs produce different emotions sometimes.
+
+			<br />Matt's main professional exploits are:
+			<br /><br /><span
+				class=" text-4xl bg-gradient-to-r from-primary via-secondary to-accent dark:from-primary dark:via-secondary dark:to-accent text-transparent bg-clip-text"
+				>DevOps, Web, AI & IoT</span
+			>
+		</p>
+		<QuickLinks />
+	</div>
+	<!-- Logo and buttons-->
+	<div class="order-2 hidden lg:block">
+			 <figure class="items-center flex flex-relative flex-col">
+				<div class="relative">
+					<div class="img-bg"></div>
+					<img
+						class="mask mask-squircle w-64 overflow-hidden"
+						src="/assets/maskable@512.png"
+						alt="Profile"
+					/>
+					
+				</div>
+			</figure>
+		
+		<div class="flex justify-center space-x-2 m-4">
+			<a
+				class="btn btn-accent z-10"
+				href={social.Gitea}
+				target="_blank"
+				rel="personal"
+			>
+				Look at my code
+			</a>
+			<a
+				class="btn btn-accent z-10"
+				href="https://git.mattmor.in/Madmin/Academic-cv/src/branch/master/matt_morin_cv_academic.pdf"
+				target="_blank"
+				rel="cv"
+			>
+				Download my CV
+			</a>
+		</div>
+	</div>
+	<div class="order-2 flex justify-center lg:hidden space-x-2 m-4">
+		<a
+			class="btn btn-primary"
+			href={social.Gitea}
+			target="_blank"
+			rel="personal-mob"
+		>
+			Look at my code
+		</a>
+		<a
+			class="btn btn-primary"
+			href="https://git.mattmor.in/Madmin/Academic-cv/src/branch/master/matt_morin_cv_academic.pdf"
+			target="_blank"
+			rel="cv-mob"
+		>
+			Download my CV
+		</a>
+	</div>
+</section>
+
+<style lang="postcss">
+  .img-bg {
+    @apply absolute inset-0 z-0 rounded-full blur-[100px] transition-all;
+    animation:
+      pulse 5s cubic-bezier(0, 0.3, 1, 1) infinite,
+      glow 5s linear infinite;
+  }
+  @keyframes glow {
+    0% {
+      @apply bg-primary;
+    }
+    33% {
+      @apply bg-secondary;
+    }
+    66% {
+      @apply bg-accent;
+    }
+    100% {
+      @apply bg-primary;
+    }
+  }
+  @keyframes pulse {
+    50% {
+      transform: scale(1.5);
+    }
+  }
+</style>