From 2acd807a49be31297c2d25501c0e9aa721df43dc Mon Sep 17 00:00:00 2001
From: matthieu42morin <matthieu.bernard.morin@gmail.com>
Date: Sun, 28 Apr 2024 01:52:16 +0200
Subject: [PATCH] quickcards, mainpage refactor, content fill

---
 src/lib/components/home/QuickCards.svelte | 48 +++++++++++------------
 src/routes/+page.svelte                   | 39 +++++-------------
 2 files changed, 33 insertions(+), 54 deletions(-)

diff --git a/src/lib/components/home/QuickCards.svelte b/src/lib/components/home/QuickCards.svelte
index b8ee942..d59a98c 100644
--- a/src/lib/components/home/QuickCards.svelte
+++ b/src/lib/components/home/QuickCards.svelte
@@ -1,26 +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>
+	<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 hone my problem solving and coding skills all the time. I try to learn the underlying
+			mechanics and use abstractions where relevant.
+		</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">Creativity & Presentation</h3>
+		<p class="opacity-75">
+			I try to create better, novel ways to approach problems and give my best to present them
+			in a clear and concise manner.
+		</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">Teamwork & Stakeholders</h3>
+		<p class="opacity-75">
+			From my experience with a wide range of roles I understand the how to communication with
+			stakeholders across an organization.
+		</p>
+	</div>
 </section>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 58026c4..495e071 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,48 +1,27 @@
 <script lang="ts">
-	import SkillContainer from '$lib/components/SkillContainer.svelte';
+	import SkillContainer from '$lib/components/skills/SkillContainer.svelte';
 	import HeroSection from '$lib/components/home/HeroSection.svelte';
 	import QuickCards from '$lib/components/home/QuickCards.svelte';
-	
 
-	import * as conf from '$lib/config';
+	import { website } from '$lib/config';
 </script>
 
 <svelte:head>
 	<title>Matt Morin</title>
 	<meta property="og:type" content="website" />
-	<meta name="description" content={conf.description} />
-	<meta property="og:title" content={conf.title} />
+	<meta name="description" content={website.description} />
+	<meta property="og:title" content={website.siteTitle} />
 	<meta property="og:type" content="article" />
-	<meta property="og:description" content={conf.description} />
-	<meta property="og:url" content={conf.url} />
+	<meta property="og:description" content={website.description} />
+	<meta property="og:url" content={website.url} />
 	<meta property="og:image" content="/images/profile-pic.png" />
 </svelte:head>
 
-<div class="mt-24 container h-full mx-auto flex-col justify-center items-center md:w-3/4">
-	<!-- <div class="space-y-10 mt-4 text-center flex flex-col items-center">
-		<h1 class="h1">I make the wheels turn.</h1>
-		
-		<figure>
-			<section class="img-bg" />
-			<img
-				src="/images/profile-pic.png"
-				class="w-8 h-8 md:h-[200px] md:w-[200px]"
-				alt="Profile picture"
-			/>
-		</figure>
-		
-
-		<img
-			src="/animations/infinity-loop-icon.svg"
-			alt="Icon"
-			class="w-16 md:w-32 lg:w-48 h-full rounded-full"
-		/>
-		<h2 class="h2">My github contributions</h2>
-	</div> -->
-
+<div class="mt-24 container h-full mx-auto flex-col justify-center items-center md:w-3/4 space-y-8">
 	<HeroSection />
 
 	<SkillContainer />
+	<QuickCards />
 
-	
+	<SkillContainer />
 </div>