From 3519242c06f1a582ba0acf0db93cbb9155482da9 Mon Sep 17 00:00:00 2001
From: matthieu42morin <matthieu.bernard.morin@gmail.com>
Date: Mon, 29 Apr 2024 02:12:15 +0200
Subject: [PATCH] quickcards refactor

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

diff --git a/src/lib/components/home/QuickCards.svelte b/src/lib/components/home/QuickCards.svelte
new file mode 100644
index 0000000..2422199
--- /dev/null
+++ b/src/lib/components/home/QuickCards.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+  const quickCards = [
+    {
+      icon: 'fa-solid fa-screwdriver-wrench',
+      title: 'Development',
+      text: 'I hone my problem solving and coding skills all the time. I try to learn the underlying mechanics and use abstractions where relevant.'
+    },
+    {
+      icon: 'fa-solid fa-palette',
+      title: 'Creative solutions',
+      text: 'I try to create better, novel ways to approach problems and give my best to present them in a clear and concise manner.'
+    },
+    {
+      icon: 'fa-solid fa-users',
+      title: 'Teamwork',
+      text: 'From my experience with a wide range of roles I understand the how to communication with stakeholders across an organization.'
+    }
+  ]
+</script>
+
+<section id="quick-links" class="grid grid-cols-1 md:grid-cols-3 lg:gap-4 gap-4">
+  {#each quickCards as card}
+    <div class="card card-compact card-bordered pt-4 px-5 bg-base-300 text-base-content">
+      <div class="flex flex-row gap-4 mx-2"><i class="{card.icon} text-4xl text-accent mx-1 mt-2" />
+      <h3 class="text-2xl card-title mt-2">{card.title}</h3></div>
+      <p class="opacity-75 card-body justify-start !text-base prose">
+        {card.text}
+      </p>
+    </div>
+  {/each}
+</section>