quickcards refactor

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>