FEAT: #36 Added in Collapsible.svelte re-usable component.

src/main.svelte

@@ -8,6 +8,7 @@
     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';
 </script>
 
 {#await getJson('/json/me.json')}
@@ -24,7 +25,7 @@
     </div>
 
     <!-- Main Card -->
-    <Section label="[Experience]">
+    <Section label="[About]">
         <Card>
             <h2 slot="headerLeft">{info.name}</h2>
             <h2 slot="headerRight">{info.job_title}</h2>
@@ -47,7 +48,10 @@
                 <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}
+                        <Collapsible>
+                            <span slot="label" class="text-lg">About {skill.name}</span>
+                            <span slot="content">{skill.about}</span>
+                        </Collapsible>
                         <SkillProgress skillColour={skill.colour} value={skill.competency} />
                     </div>
                     <h3 slot="footerLeft"><a href="{skill.link}" target="_blank">{skill.link}</a></h3>