FEAT: Started fleshing out content on the webpage

src/main.svelte

@@ -5,6 +5,9 @@
     import Loading from '$lib/components/Loading.svelte';
     import Section from '$lib/components/Section.svelte';
     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';
 </script>
 
 {#await getJson('/json/me.json')}
@@ -33,6 +36,23 @@
             </div>
         </Card>
     </Section>
+
+    <!-- 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">
+                    {skill.about}
+
+                    <SkillProgress value={skill.competency} />
+                </Card>
+            {/each}
+        </FlexGallery>
+    </Section>
+
+    <Section label="Experience">
+        <Timeline timelineData={info.experience} />
+    </Section>
 {:catch}
     <div style="display: none;">
         {toasts.add({