CHORE: Updated Gallery to use grid. Made card component mode modular. Added colour to the skills section of the page.

src/lib/components/Cards/Card.svelte

@@ -1,31 +1,23 @@
 <script lang="ts">
-    export let headerLeft: string = "";
-    export let headerRight: string = "";
-    export let headerColour: string = "text-red-500";
-    export let footer: string = "";
-
     // Allows additional styling to be applied to the Card component's outer wrapping
     export let containerStyle: string = "";
 </script>
 
 <div class={containerStyle}>
     <div class="bg-slate-100/10 dark:bg-slate-100/10 rounded-2xl shadow-2xl p-6 flex flex-col h-full w-full">
-        <div class="{headerColour} flex flex-row justify-between items-center mb-4">
-            <p class="text-2xl md:text-3xl font-bold truncate">{headerLeft}</p>
-            
-            {#if headerRight}
-                <p class="max-md:hidden text-xl md:text-2xl truncate">{@html headerRight}</p>
-            {/if}
+        <div class="text-red-400 font-bold flex flex-row justify-between items-center mb-4">
+            <slot name="headerLeft" class="text-2xl md:text-3xl truncate"></slot>
+            <slot name="headerRight" class="max-md:hidden text-xl md:text-2xl truncate"></slot>
         </div>
         <hr class="mb-4 border-1" />
         <div class="flex-1 flex flex-col justify-center p-5">
-            <slot />
+            <slot name="content"/>
+        </div>
+        
+        <hr class="my-4 border-1" />
+        <div class="flex flex-row justify-between items-center mt-2 text-base opacity-90">
+            <slot name="footerLeft"/>
+            <slot name="footerRight"/>
         </div>
-        {#if footer}
-            <hr class="my-4 border-1" />
-            <div class="mt-2 text-base opacity-90">
-                {@html footer}
-            </div>
-        {/if}
     </div>
 </div>

src/lib/components/FlexGallery.svelte

@@ -1,7 +0,0 @@
-<script lang="ts">
-</script>
-
-<!-- FlexGallery.svelte -->
-<div class="flex flex-wrap gap-10 w-full">
-    <slot />
-</div>

src/lib/components/GridGallery.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+</script>
+
+<!-- GridGallery.svelte -->
+<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 w-full">
+    <slot />
+</div>

src/lib/components/SkillProgress.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     export let value: number = 0; // 0 to 100
+    export let skillColour: string = 'bg-orange-400'; // Default color
 </script>
 
 <div class="w-full mt-3">
@@ -9,7 +10,7 @@
     </div>
     <div class="w-full bg-gray-800 rounded-full h-5">
         <div
-            class="bg-orange-400 h-5 rounded-full transition-all duration-500"
+            class="{skillColour} h-5 rounded-full transition-all duration-500"
             style="width: {value}%"
         ></div>
     </div>

src/lib/index.ts

@@ -1,9 +1,9 @@
 // place files you want to import through the `$lib` alias in this folder.
 import Card from '$lib/components/Cards/Card.svelte';
-import FlexGallery from './components/FlexGallery.svelte';
+import GridGallery from './components/GridGallery.svelte';
 import Loading from './components/Loading.svelte';
 import Section from './components/Section.svelte';
 import SkillProgress from './components/SkillProgress.svelte';
 import Timeline from './components/Timeline.svelte';
 
-export { Card, FlexGallery, Loading, Section, SkillProgress, Timeline };
+export { Card, GridGallery, Loading, Section, SkillProgress, Timeline };