feat: Implemented use of new component lib

src/main.svelte

@@ -2,13 +2,15 @@
     import { getJson } from '$lib/data';
     import { toasts } from 'svelte-toasts';
 
-    import Loading from '$lib/components/Loading.svelte';
-    import Section from '$lib/components/Section.svelte';
-    import Card from '$lib/components/Cards/Card.svelte';
-    import GridGallery from "$lib/components/GridGallery.svelte";
-    import SkillProgress from "$lib/components/SkillProgress.svelte";
-    import Timeline from '$lib/components/Timeline.svelte';
-    import Collapsible from '$lib/components/Collapsible.svelte';
+    import {
+        Loading,
+        Section,
+        Card,
+        GridGallery,
+        SkillProgress,
+        Timeline,
+        Collapsible
+    } from '@luke-else/component-lib';
 </script>
 
 {#await getJson('/json/me.json')}
@@ -35,7 +37,11 @@
                     alt="Avatar"
                     class="max-md:hidden rounded-full w-32 h-32 md:w-48 md:h-48 mt-2 mb-2 p-2 border-3"
                 />
-                <p class="[&>*]:underline [&>*]:decoration-2 [&>*]:decoration-transparent [&>*]:hover:decoration-inherit [&>*]:transition-all [&>*]:duration-300 [&>*]:text-green-600">{@html info.about}</p>
+                <p
+                    class="[&>*]:underline [&>*]:decoration-2 [&>*]:decoration-transparent [&>*]:hover:decoration-inherit [&>*]:transition-all [&>*]:duration-300 [&>*]:text-green-600"
+                >
+                    {@html info.about}
+                </p>
             </div>
             <h3 slot="footerLeft">{@html info.location}</h3>
         </Card>
@@ -45,7 +51,9 @@
     <Section label="[Skills]">
         <GridGallery>
             {#each info.skills as skill}
-                <Card containerStyle="opacity-100 hover:opacity-100 hover:scale-[105%] md:opacity-70 transition-all duration-300">
+                <Card
+                    containerStyle="opacity-100 hover:opacity-100 hover:scale-[105%] md:opacity-70 transition-all duration-300"
+                >
                     <h2 slot="headerLeft">{skill.name}</h2>
                     <i slot="headerRight" class="text-slate-300 text-5xl {skill.logo}"></i>
                     <div slot="content">
@@ -55,7 +63,7 @@
                         </Collapsible>
                         <SkillProgress skillColour={skill.colour} value={skill.competency} />
                     </div>
-                    <h3 slot="footerLeft"><a href="{skill.link}" target="_blank">{skill.link}</a></h3>
+                    <h3 slot="footerLeft"><a href={skill.link} target="_blank">{skill.link}</a></h3>
                 </Card>
             {/each}
         </GridGallery>