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

src/main.svelte

@@ -5,7 +5,7 @@
     import Loading from '$lib/components/Loading.svelte';
     import Section from '$lib/components/Section.svelte';
     import Card from '$lib/components/Cards/Card.svelte';
-    import FlexGallery from "$lib/components/FlexGallery.svelte";
+    import GridGallery from "$lib/components/GridGallery.svelte";
     import SkillProgress from "$lib/components/SkillProgress.svelte";
     import Timeline from '$lib/components/Timeline.svelte';
 </script>
@@ -25,8 +25,10 @@
 
     <!-- Main Card -->
     <Section label="[Experience]">
-        <Card headerLeft={info.name} headerRight={info.job_title} footer={info.location}>
-            <div class="flex flex-row items-center gap-5">
+        <Card>
+            <h2 slot="headerLeft">{info.name}</h2>
+            <h2 slot="headerRight">{info.job_title}</h2>
+            <div slot="content" class="flex flex-row items-center gap-5">
                 <img
                     src={info.profile_photo}
                     alt="Avatar"
@@ -34,20 +36,24 @@
                 />
                 <p>{@html info.about}</p>
             </div>
+            <h3 slot="footerLeft">{@html info.location}</h3>
         </Card>
     </Section>
 
     <!-- SKills -->
     <Section label="[Skills]">
-        <FlexGallery>
+        <GridGallery>
             {#each info.skills as skill}
-                <Card headerLeft={skill.name} footer={skill.link} containerStyle="flex-1 min-w-[250px] max-w-full md:min-w-[33%] opacity-100 hover:opacity-100 hover:scale-[105%] md:opacity-70 transition-all duration-300">
-                    {skill.about}
-
-                    <SkillProgress value={skill.competency} />
+                <Card containerStyle="opacity-100 hover:opacity-100 hover:scale-[105%] md:opacity-70 transition-all duration-300">
+                    <h2 slot="headerLeft">{skill.name}</h2>
+                    <div slot="content">
+                        {skill.about}
+                        <SkillProgress skillColour={skill.colour} value={skill.competency} />
+                    </div>
+                    <h3 slot="footerLeft"><a href="{skill.link}" target="_blank">{skill.link}</a></h3>
                 </Card>
             {/each}
-        </FlexGallery>
+        </GridGallery>
     </Section>
 
     <Section label="[Experience]">