From 3c0d24afcb348c6c5fcad87e138f087039e7e96b Mon Sep 17 00:00:00 2001
From: matthieu42morin <matthieu.bernard.morin@gmail.com>
Date: Thu, 4 Apr 2024 20:05:28 +0200
Subject: [PATCH] restructure components at home and root

---
 src/lib/components/home/HeroSection.svelte    | 105 +++++++++++
 src/lib/components/home/QuickCards.svelte     |  26 +++
 src/lib/components/home/QuickLinks.svelte     |  28 +++
 .../components/{ => main}/MainDrawer.svelte   |   0
 .../components/{ => main}/MainFooter.svelte   |   4 +-
 .../components/{ => main}/MainHeader.svelte   |  24 +--
 src/routes/+layout.svelte                     |   6 +-
 src/routes/+page.svelte                       | 167 ++----------------
 8 files changed, 176 insertions(+), 184 deletions(-)
 create mode 100644 src/lib/components/home/HeroSection.svelte
 create mode 100644 src/lib/components/home/QuickCards.svelte
 create mode 100644 src/lib/components/home/QuickLinks.svelte
 rename src/lib/components/{ => main}/MainDrawer.svelte (100%)
 rename src/lib/components/{ => main}/MainFooter.svelte (88%)
 rename src/lib/components/{ => main}/MainHeader.svelte (65%)

diff --git a/src/lib/components/home/HeroSection.svelte b/src/lib/components/home/HeroSection.svelte
new file mode 100644
index 0000000..742cc24
--- /dev/null
+++ b/src/lib/components/home/HeroSection.svelte
@@ -0,0 +1,105 @@
+<script lang="ts">
+    import QuickLinks from '$lib/components/home/QuickLinks.svelte';
+</script>
+    <section class="grid grid-cols-1 lg:grid-cols-2 mx-4">
+		<!-- Text and links-->
+		<div class="order-1 max-w-3/4 space-y-8">
+			<h1 class="h1">Hello, I&#39;m Matt.</h1>
+
+			<p class="text-xl opacity-75" data-svelte-h="svelte-169iyno">
+				A dev with an array of skills from from frontend and devops to design. I have a
+				strong passion for innovation and change in tech, automation and solving 👾 problems
+				.
+				<br />From wearing a lot of 🤠 hats in past projects and startups I became a
+				generalist, now I am actively deepening my knowledge in software:
+				<span
+					class=" text-4xl bg-gradient-to-r from-primary-800 via-secondary-900 to-tertiary-900 dark:from-primary-400 dark:via-secondary-400 dark:to-tertiary-400 text-transparent bg-clip-text"
+					>DevOps, CyberSec and AI.</span
+				>
+			</p>
+            <QuickLinks />
+			
+		</div>
+		<!-- Logo and buttons-->
+		<div class="order-2 hidden lg:block">
+			<figure class="items-center">
+				<img
+					class="rounded-10 w-64 overflow-hidden"
+					src="/images/profile-pic.png"
+					alt="Profile"
+				/>
+				<section class="img-bg w-64">
+					<img
+						class="rounded-10 w-64 overflow-hidden"
+						src="/images/profile-pic.png"
+						alt="Profile"
+					/>
+				</section>
+			</figure>
+			<div class="flex justify-center space-x-2 m-4">
+				<a
+					class="btn variant-ghost-primary"
+					href="https://git.mattmor.in"
+					target="_blank"
+					rel="personal"
+				>
+					Look at my code
+				</a>
+				<a
+					class="btn variant-ghost-primary"
+					href="/CV_Matthieu_Morin.pdf"
+					target="_blank"
+					rel="cv"
+				>
+					Get my CV
+				</a>
+			</div>
+		</div>
+		<div class="order-2 flex justify-center lg:hidden space-x-2 m-4">
+			<a
+				class="btn variant-ghost-primary"
+				href="https://git.mattmor.in"
+				target="_blank"
+				rel="personal-mob"
+			>
+				Look at my code
+			</a>
+			<a
+				class="btn variant-ghost-primary"
+				href="/CV_Matthieu_Morin.pdf"
+				target="_blank"
+				rel="cv-mob"
+			>
+				Download my CV
+			</a>
+		</div>
+	</section>
+
+<style lang="postcss">
+	figure {
+		@apply flex relative flex-col;
+	}
+	.img-bg {
+		@apply absolute z-[-1] rounded-full blur-[100px] transition-all;
+		animation: pulse 5s cubic-bezier(0, 30, 150, 1) infinite, glow 5s linear infinite;
+	}
+	@keyframes glow {
+		0% {
+			@apply bg-primary-400/50;
+		}
+		33% {
+			@apply bg-secondary-400/50;
+		}
+		66% {
+			@apply bg-tertiary-400/50;
+		}
+		100% {
+			@apply bg-primary-400/50;
+		}
+	}
+	@keyframes pulse {
+		50% {
+			transform: scale(1.5);
+		}
+	}
+</style>
diff --git a/src/lib/components/home/QuickCards.svelte b/src/lib/components/home/QuickCards.svelte
new file mode 100644
index 0000000..b8ee942
--- /dev/null
+++ b/src/lib/components/home/QuickCards.svelte
@@ -0,0 +1,26 @@
+<section class="grid grid-cols-1 md:grid-cols-3 gap-4 lg:gap-8" data-svelte-h="svelte-1u9sn7t">
+    <div class="card variant-ringed-hollow p-4 md:p-8 space-y-4">
+        <i class="fa-solid fa-screwdriver-wrench text-4xl text-primary-500" />
+        <h3 class="h3">Development</h3>
+        <p class="opacity-75">
+            I possess a wide range of skills that enable me to develop visually appealing and
+            interactive user interfaces for web applications.
+        </p>
+    </div>
+    <div class="card variant-ringed-hollow p-4 md:p-8 space-y-4">
+        <i class="fa-solid fa-palette text-4xl text-primary-500" />
+        <h3 class="h3">Design</h3>
+        <p class="opacity-75">
+            Over the years, I have honed my ability to create visually appealing interfaces that
+            are both user-friendly and intuitive.
+        </p>
+    </div>
+    <div class="card variant-ringed-hollow p-4 md:p-8 space-y-4">
+        <i class="fa-solid fa-users text-4xl text-primary-500" />
+        <h3 class="h3">User Experience</h3>
+        <p class="opacity-75">
+            I understand the importance of creating a seamless UX for end-users. Which includes
+            a solid understanding user behavior.
+        </p>
+    </div>
+</section>
diff --git a/src/lib/components/home/QuickLinks.svelte b/src/lib/components/home/QuickLinks.svelte
new file mode 100644
index 0000000..c2759ed
--- /dev/null
+++ b/src/lib/components/home/QuickLinks.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import * as conf from '$lib/config';
+    import GiteaLogo from '$lib/components/logos/GiteaLogo.svelte';
+</script>
+<div class="flex space-x-4">
+    <a
+        class="btn btn-icon variant-soft-primary hover:variant-filled-primary"
+        href={conf.socialLinks[2].href}
+        target="_blank"
+        rel="noreferrer"
+        title="Gitea - private github"
+        ><GiteaLogo clazz="w-6" />
+    </a><a
+        class="btn btn-icon variant-soft-primary hover:variant-filled-primary"
+        href={conf.socialLinks[0].href}
+        target="_blank"
+        rel="noreferrer"
+        title="LinkedIn"
+        ><i class="fa-brands fa-linkedin" />
+    </a><a
+        class="btn btn-icon variant-soft-primary hover:variant-filled-primary"
+        href="mailto:{conf.email}"
+        target=""
+        rel="noreferrer"
+        title="Email"
+        ><i class="fa-solid fa-envelope" />
+    </a>
+</div>
diff --git a/src/lib/components/MainDrawer.svelte b/src/lib/components/main/MainDrawer.svelte
similarity index 100%
rename from src/lib/components/MainDrawer.svelte
rename to src/lib/components/main/MainDrawer.svelte
diff --git a/src/lib/components/MainFooter.svelte b/src/lib/components/main/MainFooter.svelte
similarity index 88%
rename from src/lib/components/MainFooter.svelte
rename to src/lib/components/main/MainFooter.svelte
index 94c2cb5..5528aa8 100644
--- a/src/lib/components/MainFooter.svelte
+++ b/src/lib/components/main/MainFooter.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import GiteaLogo from './logos/GiteaLogo.svelte';
-	import SocialsCloud from './SocialsCloud.svelte';
+	import GiteaLogo from '$lib/components/logos/GiteaLogo.svelte';
+	import SocialsCloud from '$lib/components/SocialsCloud.svelte';
 
 	const year = new Date().getFullYear();
 </script>
diff --git a/src/lib/components/MainHeader.svelte b/src/lib/components/main/MainHeader.svelte
similarity index 65%
rename from src/lib/components/MainHeader.svelte
rename to src/lib/components/main/MainHeader.svelte
index 39059e7..05e8669 100644
--- a/src/lib/components/MainHeader.svelte
+++ b/src/lib/components/main/MainHeader.svelte
@@ -19,7 +19,7 @@
 			width: 'w-full h-auto ',
 			rounded: 'rounded-bl-container-token rounded-br-container-token'
 			// Metadata
-			// meta: 'wtf'
+			// meta: ''
 		};
 		drawerStore.open(drawerSettings);
 	}
@@ -61,25 +61,3 @@
 	</section>
 	<LightSwitch />
 </section>
-
-<!-- Compare this snippet from src/lib/components/MainHeader.svelte:
-	
-id: 'demo',
-	// 		// Property Overrides
-	// 		position: 'top',
-	// 		bgDrawer: 'bg-purple-900 text-white',
-	// 		bgBackdrop: 'zbg-gradient-to-tr from-indigo-500/50 via-purple-500/50 to-pink-500/50',
-	// 		width: 'w-full md:w-[480px]',
-	// 		padding: 'p-4',
-	// 		rounded: 'rounded-xl',
-	// 		// Metadata
-	// 		meta: 'Styled Drawer'
-class="drawer-backdrop fixed top-0 left-0 right-0 bottom-0 flex bg-surface-backdrop-token   items-start  z-40 "
-	<div class="drawer overflow-y-auto transition-transform bg-transparent   shadow-xl 
-	
-	w-full w-auto rounded-bl-container-token rounded-br-container-token " 
-	data-testid="drawer" role="dialog" aria-modal="true" aria-labelledby="" 
-	aria-describedby="" style="">
-	<nav class="flex flex-col md:flex-row gap-2 border md:border-0 border-surface-100-800-token 
-	bg-surface-50/50 dark:bg-surface-900/50 backdrop-blur-lg rounded-bl-container-token rounded-br-container-token
-	 md:rounded-token p-2 shadow-xl"> -->
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 7518cd4..c4dffae 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -13,14 +13,14 @@
 
 	// Drawer
 	import { getDrawerStore } from '@skeletonlabs/skeleton';
-	import MainDrawer from '$lib/components/MainDrawer.svelte';
+	import MainDrawer from '$lib/components/main/MainDrawer.svelte';
 	const drawerStore = getDrawerStore();
 
 	// Shell
 	import { AppShell } from '@skeletonlabs/skeleton';
 	$: positionClasses = $drawerStore.open ? 'animate-pulse' : '';
-	import MainHeader from '$lib/components/MainHeader.svelte';
-	import MainFooter from '$lib/components/MainFooter.svelte';
+	import MainHeader from '$lib/components/main/MainHeader.svelte';
+	import MainFooter from '$lib/components/main/MainFooter.svelte';
 
 	// Turn off Drawer on md and up
 	let windowWidth: number;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 359a098..58026c4 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,17 +1,20 @@
 <script lang="ts">
 	import SkillContainer from '$lib/components/SkillContainer.svelte';
-	import * as config from '$lib/config';
-	import GiteaLogo from '$lib/components/logos/GiteaLogo.svelte';
+	import HeroSection from '$lib/components/home/HeroSection.svelte';
+	import QuickCards from '$lib/components/home/QuickCards.svelte';
+	
+
+	import * as conf from '$lib/config';
 </script>
 
 <svelte:head>
 	<title>Matt Morin</title>
 	<meta property="og:type" content="website" />
-	<meta name="description" content={config.description} />
-	<meta property="og:title" content={config.title} />
+	<meta name="description" content={conf.description} />
+	<meta property="og:title" content={conf.title} />
 	<meta property="og:type" content="article" />
-	<meta property="og:description" content={config.description} />
-	<meta property="og:url" content={config.url} />
+	<meta property="og:description" content={conf.description} />
+	<meta property="og:url" content={conf.url} />
 	<meta property="og:image" content="/images/profile-pic.png" />
 </svelte:head>
 
@@ -37,157 +40,9 @@
 		<h2 class="h2">My github contributions</h2>
 	</div> -->
 
-	<section class="grid grid-cols-1 lg:grid-cols-2 space-y-4 mx-4">
-		<!-- Text and links-->
-		<div class="order-1 max-w-3/4 space-y-8">
-			<h1 class="h1">Hello, I&#39;m Matt.</h1>
-
-			<p class="text-2xl opacity-75" data-svelte-h="svelte-169iyno">
-				A dev with an array of skills from from frontend and devops to design. I have a
-				strong passion for innovation and change in tech, automation and solving 👾 problems
-				.
-				<br />From wearing a lot of 🤠 hats in past projects and startups I became a
-				generalist, now I am actively deepening my knowledge in software:
-				<span
-					class=" text-4xl bg-gradient-to-r from-primary-800 via-secondary-900 to-tertiary-900 dark:from-primary-400 dark:via-secondary-400 dark:to-tertiary-400 text-transparent bg-clip-text"
-					>DevOps, CyberSec and AI.</span
-				>
-			</p>
-			<div class="flex space-x-4">
-				<a
-					class="btn btn-icon variant-soft-primary hover:variant-filled-primary"
-					href={config.socialLinks[2].href}
-					target="_blank"
-					rel="noreferrer"
-					title="Gitea - private github"
-					><GiteaLogo clazz="w-6" />
-				</a><a
-					class="btn btn-icon variant-soft-primary hover:variant-filled-primary"
-					href={config.socialLinks[0].href}
-					target="_blank"
-					rel="noreferrer"
-					title="LinkedIn"
-					><i class="fa-brands fa-linkedin" />
-				</a><a
-					class="btn btn-icon variant-soft-primary hover:variant-filled-primary"
-					href="mailto:{config.email}"
-					target=""
-					rel="noreferrer"
-					title="Email"
-					><i class="fa-solid fa-envelope" />
-				</a>
-			</div>
-		</div>
-		<!-- Logo and buttons-->
-		<div class="order-2 hidden lg:block m-4">
-			<figure class="items-center">
-				<img
-					class="rounded-10 w-64 overflow-hidden"
-					src="/images/profile-pic.png"
-					alt="Profile"
-				/>
-				<section class="img-bg w-64">
-					<img
-						class="rounded-10 w-64 overflow-hidden"
-						src="/images/profile-pic.png"
-						alt="Profile"
-					/>
-				</section>
-			</figure>
-			<div class="flex justify-center space-x-2 m-4">
-				<a
-					class="btn variant-ghost-primary"
-					href="https://git.mattmor.in"
-					target="_blank"
-					rel="personal"
-				>
-					Look at my code
-				</a>
-				<a
-					class="btn variant-ghost-primary"
-					href="/CV_Matthieu_Morin.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 variant-ghost-primary"
-				href="https://git.mattmor.in"
-				target="_blank"
-				rel="personal-mob"
-			>
-				Look at my code
-			</a>
-			<a
-				class="btn variant-ghost-primary"
-				href="/CV_Matthieu_Morin.pdf"
-				target="_blank"
-				rel="cv-mob"
-			>
-				Download my CV
-			</a>
-		</div>
-	</section>
+	<HeroSection />
 
 	<SkillContainer />
 
-	<section class="grid grid-cols-1 md:grid-cols-3 gap-4 lg:gap-8" data-svelte-h="svelte-1u9sn7t">
-		<div class="card variant-ringed-hollow p-4 md:p-8 space-y-4">
-			<i class="fa-solid fa-screwdriver-wrench text-4xl text-primary-500" />
-			<h3 class="h3">Development</h3>
-			<p class="opacity-75">
-				I possess a wide range of skills that enable me to develop visually appealing and
-				interactive user interfaces for web applications.
-			</p>
-		</div>
-		<div class="card variant-ringed-hollow p-4 md:p-8 space-y-4">
-			<i class="fa-solid fa-palette text-4xl text-primary-500" />
-			<h3 class="h3">Design</h3>
-			<p class="opacity-75">
-				Over the years, I have honed my ability to create visually appealing interfaces that
-				are both user-friendly and intuitive.
-			</p>
-		</div>
-		<div class="card variant-ringed-hollow p-4 md:p-8 space-y-4">
-			<i class="fa-solid fa-users text-4xl text-primary-500" />
-			<h3 class="h3">User Experience</h3>
-			<p class="opacity-75">
-				I understand the importance of creating a seamless UX for end-users. Which includes
-				a solid understanding user behavior.
-			</p>
-		</div>
-	</section>
+	
 </div>
-
-<style lang="postcss">
-	figure {
-		@apply flex relative flex-col;
-	}
-	.img-bg {
-		@apply absolute z-[-1] rounded-full blur-[100px] transition-all;
-		animation: pulse 5s cubic-bezier(0, 30, 150, 1) infinite, glow 5s linear infinite;
-	}
-	@keyframes glow {
-		0% {
-			@apply bg-primary-400/50;
-		}
-		33% {
-			@apply bg-secondary-400/50;
-		}
-		66% {
-			@apply bg-tertiary-400/50;
-		}
-		100% {
-			@apply bg-primary-400/50;
-		}
-	}
-	@keyframes pulse {
-		50% {
-			transform: scale(1.5);
-		}
-	}
-</style>