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

src/lib/components/Timeline.svelte

@@ -1,40 +1,28 @@
 <script lang="ts">
+    import Collapsible from "./Collapsible.svelte";
+
     export let timelineData: Array<{
         title: string;
         description: string;
         duration: string;
     }>;
-
-    // Track open/closed state for each entry
-    let openStates = timelineData.map(() => false);
-
-    function toggle(index: number) {
-        openStates[index] = !openStates[index];
-    }
-
-    toggle(0); // Open the first entry by default
 </script>
 
 <div class="flex flex-col items-center justify-center">
   <div class="max-w-4xl w-full">
     {#each timelineData as entry, i}
       <div class="relative border-l border-gray-700 pl-8 pb-12">
-        {#if openStates[i]}
+        {#if i == 0}
         <div class="absolute top-0 left-[8px] text-green-400 w-4 h-4">&diams;</div>
         {:else}
           <div class="absolute top-0 left-[8px] text-green-400 w-4 h-4">&diam;</div>
         {/if}
         <p class="text-sm opacity-70">{entry.duration}</p>
-        <button
-          class="text-2lg font-semibold text-red-400 mt-1 focus:outline-none hover:underline transition"
-          on:click={() => toggle(i)}
-          aria-expanded={openStates[i]}
-        >
-        <h3 class="text-2lg font-semibold text-red-400 mt-1">{entry.title}</h3>
-        </button>
-        {#if openStates[i]}
-          <p class="mt-2 whitespace-pre-line transition-all duration-300">{@html entry.description}</p>
-        {/if}
+
+        <Collapsible open={i==0}>
+          <span slot="label" class="text-2lg font-semibold text-red-400 mt-1 focus:outline-none hover:underline transition">{entry.title}</span>
+          <span slot="content">{entry.description}</span>
+        </Collapsible>
       </div>
     {/each}
   </div>