diff --git a/src/lib/components/Cards/SlidingCard.svelte b/src/lib/components/Cards/SlidingCard.svelte
deleted file mode 100644
index be32aa3..0000000
--- a/src/lib/components/Cards/SlidingCard.svelte
+++ /dev/null
@@ -1,38 +0,0 @@
-<script lang="ts">
-    import { createEventDispatcher } from 'svelte';
-
-    const dispatch = createEventDispatcher();
-
-    function onClick() {
-        dispatch('click');
-    }
-</script>
-
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<div
-    class="sliding-card flex flex-col justify-between flex-wrap flex-[2_1_15em] p-2 bg-secondary rounded-lg snap-start transition-all duration-300 overflow-hidden relative hover:shadow-lg"
-    on:click={onClick}
->
-    <div class="sliding-card-header w-full flex items-center justify-between mb-0">
-        <slot name="header"></slot>
-    </div>
-    <hr />
-
-    <!-- Wrapper to stack sliding-card-content and sliding-content -->
-    <div class="content-wrapper relative w-full overflow-hidden">
-        <div class="sliding-card-content flex flex-col items-center justify-center max-w-full flex-grow z-[1]">
-            <slot name="content"></slot>
-        </div>
-        <div
-            class="sliding-content absolute top-0 left-0 w-full h-full bg-secondary translate-y-full transition-transform duration-300 z-[2] pointer-events-none group-hover:translate-y-0 sliding-card:hover:translate-y-0"
-        >
-            <slot name="sliding-content"></slot>
-        </div>
-    </div>
-
-    <hr class="not-required" />
-    <div class="sliding-card-footer flex gap-4 max-w-full justify-between mb-4">
-        <slot name="footer"></slot>
-    </div>
-</div>
\ No newline at end of file
diff --git a/src/lib/components/Timeline.svelte b/src/lib/components/Timeline.svelte
new file mode 100644
index 0000000..8202f81
--- /dev/null
+++ b/src/lib/components/Timeline.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+    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]}
+        <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}
+      </div>
+    {/each}
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/lib/components/timeline/Timeline.svelte b/src/lib/components/timeline/Timeline.svelte
deleted file mode 100644
index 8250bbb..0000000
--- a/src/lib/components/timeline/Timeline.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script lang="ts">
-	import { setContext } from 'svelte';
-	import type { TimelinePosition, TimelineConfig } from '$lib/types';
-	export let position: TimelinePosition = 'right';
-	export let style: string | null = null;
-
-	setContext<TimelineConfig>('TimelineConfig', { rootPosition: position });
-</script>
-
-<ul class="timeline" {style}>
-	<slot />
-</ul>
-
-<style>
-	.timeline {
-		display: flex;
-		flex-direction: column;
-		padding: 6px 16px;
-		flex-grow: 1;
-	}
-</style>
diff --git a/src/lib/components/timeline/TimelineConnector.svelte b/src/lib/components/timeline/TimelineConnector.svelte
deleted file mode 100644
index 45af2ba..0000000
--- a/src/lib/components/timeline/TimelineConnector.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script lang="ts">
-	export let style: string = "";
-</script>
-
-<span class="timeline-connector" {style}></span>
-
-<style>
-	.timeline-connector {
-		width: 2px;
-		background-color: #bdbdbd;
-		flex-grow: 1;
-	}
-</style>
diff --git a/src/lib/components/timeline/TimelineContent.svelte b/src/lib/components/timeline/TimelineContent.svelte
deleted file mode 100644
index 490b687..0000000
--- a/src/lib/components/timeline/TimelineContent.svelte
+++ /dev/null
@@ -1,30 +0,0 @@
-<script lang="ts">
-	import { getContext } from 'svelte';
-	import type { TimelineConfig, TimelinePosition } from '$lib/types';
-	export let style: string | null = null;
-
-	const config = getContext<TimelineConfig>('TimelineConfig');
-	const parentPosition = getContext<TimelinePosition>('ParentPosition');
-
-	const itemPosition = parentPosition ? parentPosition : config.rootPosition;
-</script>
-
-<div class={`timeline-content ${itemPosition}`} {style}>
-	<slot />
-</div>
-
-<style>
-	.timeline-content {
-		margin: 0;
-		flex: 1;
-		margin: 6px 16px;
-	}
-
-	.left {
-		text-align: right;
-	}
-
-	.right {
-		text-align: left;
-	}
-</style>
diff --git a/src/lib/components/timeline/TimelineDot.svelte b/src/lib/components/timeline/TimelineDot.svelte
deleted file mode 100644
index 23ec7da..0000000
--- a/src/lib/components/timeline/TimelineDot.svelte
+++ /dev/null
@@ -1,19 +0,0 @@
-<script lang="ts">
-	export let style: string | null = null;
-</script>
-
-<span class="timeline-dot" {style}>
-	<slot />
-</span>
-
-<style>
-	.timeline-dot {
-		background-color: #121212;
-		border: solid 2px #121212;
-		display: flex;
-		align-self: baseline;
-		padding: 4px;
-		border-radius: 50%;
-		margin: 11.5px 0;
-	}
-</style>
diff --git a/src/lib/components/timeline/TimelineItem.svelte b/src/lib/components/timeline/TimelineItem.svelte
deleted file mode 100644
index f6781bc..0000000
--- a/src/lib/components/timeline/TimelineItem.svelte
+++ /dev/null
@@ -1,58 +0,0 @@
-<script lang="ts">
-	import { getContext, setContext } from 'svelte';
-	import type { TimelinePosition, ParentPosition, TimelineConfig } from '$lib/types';
-
-	export let position: ParentPosition | null = null;
-	export let style: string = "";
-
-	const config = getContext<TimelineConfig>('TimelineConfig');
-	const itemPosition = position ? position : config.rootPosition;
-	setContext<TimelinePosition>('ParentPosition', itemPosition);
-</script>
-
-<li class={`timeline-item ${itemPosition}`} {style}>
-	{#if !$$slots['opposite-content']}
-		<div class="opposite-block"></div>
-	{:else}
-		<slot name="opposite-content" />
-	{/if}
-	<slot />
-</li>
-
-<style>
-	:global(.alternate:nth-of-type(even) > .timeline-content) {
-		text-align: right;
-	}
-
-	:global(.alternate:nth-of-type(odd) > .timeline-opposite-content) {
-		text-align: right;
-	}
-
-	.opposite-block {
-		flex: 1;
-		margin: 6px 16px;
-	}
-
-	.timeline-item {
-		list-style: none;
-		display: flex;
-		position: relative;
-		min-height: 70px;
-	}
-
-	.left {
-		flex-direction: row-reverse;
-	}
-
-	.right {
-		flex-direction: row;
-	}
-
-	.alternate:nth-of-type(even) {
-		flex-direction: row-reverse;
-	}
-
-	.alternate:nth-of-type(odd) {
-		flex-direction: row;
-	}
-</style>
diff --git a/src/lib/components/timeline/TimelineOppositeContent.svelte b/src/lib/components/timeline/TimelineOppositeContent.svelte
deleted file mode 100644
index 7720bae..0000000
--- a/src/lib/components/timeline/TimelineOppositeContent.svelte
+++ /dev/null
@@ -1,31 +0,0 @@
-<script lang="ts">
-	import { getContext } from 'svelte';
-	import type { TimelineConfig, TimelinePosition } from '$lib/types';
-	export let style: string | null = null;
-
-	const config = getContext<TimelineConfig>('TimelineConfig');
-	const parentPosition = getContext<TimelinePosition>('ParentPosition');
-
-	const itemPosition = parentPosition ? parentPosition : config.rootPosition;
-</script>
-
-<div class={`timeline-opposite-content ${itemPosition}`} {style}>
-	<slot />
-</div>
-
-<style>
-	.timeline-opposite-content {
-		margin: 0;
-		flex: 1;
-		margin-right: auto;
-		margin: 6px 16px;
-	}
-
-	.left {
-		text-align: left;
-	}
-
-	.right {
-		text-align: right;
-	}
-</style>
diff --git a/src/lib/components/timeline/TimelineSeparator.svelte b/src/lib/components/timeline/TimelineSeparator.svelte
deleted file mode 100644
index 731720c..0000000
--- a/src/lib/components/timeline/TimelineSeparator.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script lang="ts">
-	export let style: string | null = null;
-</script>
-
-<div class="timeline-separator" {style}>
-	<slot />
-</div>
-
-<style>
-	.timeline-separator {
-		display: flex;
-		flex-direction: column;
-		flex: 0;
-		align-items: center;
-	}
-</style>
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 5c02902..1cb91ce 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -1,41 +1,9 @@
 // place files you want to import through the `$lib` alias in this folder.
-import Timeline from '$lib/components/timeline/Timeline.svelte';
-import TimelineItem from '$lib/components/timeline/TimelineItem.svelte';
-import TimelineSeparator from '$lib/components/timeline/TimelineSeparator.svelte';
-import TimelineDot from '$lib/components/timeline/TimelineDot.svelte';
-import TimelineConnector from '$lib/components/timeline/TimelineConnector.svelte';
-import TimelineContent from '$lib/components/timeline/TimelineContent.svelte';
-import TimelineOppositeContent from '$lib/components/timeline/TimelineOppositeContent.svelte';
-
-import Toasts from '$lib/components/Toasts/Toasts.svelte';
-import Toast from '$lib/components/Toasts/Toast.svelte';
-import CloseIcon from '$lib/components/Toasts/CloseIcon.svelte';
-import InfoIcon from '$lib/components/Toasts/InfoIcon.svelte';
-import SuccessIcon from '$lib/components/Toasts/SuccessIcon.svelte';
-import ErrorIcon from '$lib/components/Toasts/ErrorIcon.svelte';
-
 import Card from '$lib/components/Cards/Card.svelte';
-import SlidingCard from '$lib/components/Cards/SlidingCard.svelte';
-import Modal from '$lib/components/Modal.svelte';
+import FlexGallery from './components/FlexGallery.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 {
-	Timeline,
-	TimelineItem,
-	TimelineSeparator,
-	TimelineDot,
-	TimelineConnector,
-	TimelineContent,
-	TimelineOppositeContent,
-
-    Toasts,
-    Toast,
-    CloseIcon,
-    InfoIcon,
-    SuccessIcon,
-    ErrorIcon,
-
-    Card,
-    SlidingCard,
-    Modal
-};
+export { Card, FlexGallery, Loading, Section, SkillProgress, Timeline };
diff --git a/src/main.svelte b/src/main.svelte
index 1168878..ee4569a 100644
--- a/src/main.svelte
+++ b/src/main.svelte
@@ -7,7 +7,7 @@
     import Card from '$lib/components/Cards/Card.svelte';
     import FlexGallery from "$lib/components/FlexGallery.svelte";
     import SkillProgress from "$lib/components/SkillProgress.svelte";
-    import Timeline from './timeline.svelte';
+    import Timeline from '$lib/components/Timeline.svelte';
 </script>
 
 {#await getJson('/json/me.json')}
@@ -24,7 +24,7 @@
     </div>
 
     <!-- Main Card -->
-    <Section label="Experience">
+    <Section label="[Experience]">
         <Card headerLeft={info.name} headerRight={info.job_title} footer={info.location}>
             <div class="flex flex-row items-center gap-5">
                 <img
@@ -38,7 +38,7 @@
     </Section>
 
     <!-- SKills -->
-    <Section label="Skills">
+    <Section label="[Skills]">
         <FlexGallery>
             {#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">
@@ -50,8 +50,8 @@
         </FlexGallery>
     </Section>
 
-    <Section label="Experience">
-        <Timeline timelineData={info.experience} />
+    <Section label="[Experience]">
+        <Timeline timelineData={info.timeline} />
     </Section>
 {:catch}
     <div style="display: none;">
diff --git a/src/timeline.svelte b/src/timeline.svelte
deleted file mode 100644
index 03dc9b7..0000000
--- a/src/timeline.svelte
+++ /dev/null
@@ -1,67 +0,0 @@
-<script lang="ts">
-    export let timelineData: any;
-
-    import Timeline from '$lib/components/timeline/Timeline.svelte';
-    import TimelineItem from '$lib/components/timeline/TimelineItem.svelte';
-    import TimelineSeparator from '$lib/components/timeline/TimelineSeparator.svelte';
-    import TimelineDot from '$lib/components/timeline/TimelineDot.svelte';
-    import TimelineConnector from '$lib/components/timeline/TimelineConnector.svelte';
-    import TimelineContent from '$lib/components/timeline/TimelineContent.svelte';
-    import TimelineOppositeContent from '$lib/components/timeline/TimelineOppositeContent.svelte';
-</script>
-
-<Timeline
-    position="alternate"
-    style={`
-  border-radius: 3%;
-  padding: 1rem;
-  `}
->
-    {#each timelineData as item}
-        <TimelineItem>
-            <TimelineOppositeContent slot="opposite-content">
-                <p class="oposite-content-title">{item.duration}</p>
-            </TimelineOppositeContent>
-
-            <TimelineSeparator>
-                {#if item.duration.includes('Present') || !item.duration.includes('-')}
-                    <div class="elementToFadeInAndOut">
-                        <TimelineDot
-                            style={`background-color: var(--link); border-color: var(--accent);`}
-                        />
-                    </div>
-                {:else}
-                    <TimelineDot
-                        style={`background-color: var(--link); border-color: var(--accent);`}
-                    />
-                {/if}
-                <TimelineConnector />
-            </TimelineSeparator>
-            <TimelineContent>
-                <h3 class="content-title">{item.title}</h3>
-                <p class="content-description">{@html item.description}</p>
-            </TimelineContent>
-        </TimelineItem>
-    {/each}
-</Timeline>
-
-<style>
-    .oposite-content-title {
-        margin: 0;
-        padding: 0;
-        color: var(--accent);
-    }
-    .content-title {
-        margin: 0;
-        padding: 0;
-    }
-
-    .content-description {
-        margin: 0;
-        padding: 0;
-        margin-top: 1rem;
-        color: var(--fg);
-        font-weight: lighter;
-        padding: 0.5rem 0;
-    }
-</style>