Made components more re-usable. Added section component

src/main.svelte

@@ -3,6 +3,8 @@
     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';
 </script>
 
 {#await getJson('/json/me.json')}
@@ -18,23 +20,19 @@
         })}
     </div>
 
-    <div class="bg-slate-100/10 dark:bg-slate-100/10 p-10 m-5 rounded-2xl shadow-2xl">
-        <div class="flex flex-row justify-between text-red-500 p-4">
-            <p class="text-3xl md:text-4xl font-bold">
-                {info.name}
-            </p>
-            <p class="max-md:hidden text-2xl md:text-3xl">{info.job_title}</p>
-        </div>
-        <hr class="max-md:hidden border-3 m-5" />
-        <div class="flex flex-row items-center gap-5 m-2">
-            <img
-                src={info.profile_photo}
-                alt="Avatar"
-                class="max-md:hidden rounded-full w-64 h-64 mt-5 mb-5 p-3 border-5"
-            />
-            <p>{@html info.about}</p>
-        </div>
-    </div>
+    <!-- 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">
+                <img
+                    src={info.profile_photo}
+                    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>{@html info.about}</p>
+            </div>
+        </Card>
+    </Section>
 {:catch}
     <div style="display: none;">
         {toasts.add({