Imported tailwind libraries, started to re-write main page

src/main.svelte

@@ -12,42 +12,40 @@
 {#await getJson('/json/me.json')}
     <Loading />
 {:then info}
-    <div class="main-card">
-        <div class="card-header">
-            <h1>{info.name}</h1>
-            <h3 class="not-required">{info.job_title}</h3>
+    <div class="bg-secondary rounded-xl p-8 pb-12 shadow-lg mb-16">
+        <div class="flex items-center justify-between mb-0">
+            <h1 class="text-3xl font-bold">{info.name}</h1>
+            <h3 class="not-required text-xl font-semibold">{info.job_title}</h3>
         </div>
-        <hr />
-        <div class="flex-container">
-            <img class="profile not-required" src={info.profile_photo} alt="{info.name}'s Profile Photo">
-            <p class="about">{@html info.about}</p>
+        <hr class="my-4 border-accent" />
+        <div class="flex items-center gap-8 flex-wrap md:flex-nowrap">
+            <img class="rounded-full h-32 w-32 p-4 border-4 border-accent not-required" src={info.profile_photo} alt="{info.name}'s Profile Photo">
+            <p class="about text-lg md:text-xl px-4 md:px-12 flex-1">{@html info.about}</p>
         </div>
     </div>
 
-    <div class="container">
-        <h1>Skills</h1>
-        <hr />
-        <div class="cards">
-            <Skills skills="{info.skills}"></Skills>
-        </div>
+    
+    <div class="container mx-auto mb-12">
+        <h1 class="text-2xl font-bold">Skills</h1>
+        <hr class="my-2 border-accent" />
+        <Skills skills={info.skills}></Skills>
     </div>
 
-    <div class="container">
-        <h1>Experience</h1>
-        <hr />
-        <!-- https://github.com/K-Sato1995/svelte-vertical-timeline -->
-        <Timeline timelineData="{info.timeline}"></Timeline>
+    <div class="container mx-auto mb-12">
+        <h1 class="text-2xl font-bold">Experience</h1>
+        <hr class="my-2 border-accent" />
+        <Timeline timelineData={info.timeline}></Timeline>
     </div>
 
-    <div style="display: none;">{addToast(new Toast("Click on a skill to open a prompt", ToastType.Info, true, 8_000))}</div>
-    <div style="display: none;">{addToast(new Toast("Welcome!", ToastType.Success, true, 7_000))}</div>
+    <div class="hidden">{addToast(new Toast("Click on a skill to open a prompt", ToastType.Info, true, 8_000))}</div>
+    <div class="hidden">{addToast(new Toast("Welcome!", ToastType.Success, true, 7_000))}</div>
 {:catch}
-    <div class="card">
-        <div class="card-header">
-            <h1>Unable to load portfolio overview data</h1>
+    <div class="bg-secondary rounded-xl p-8 shadow-lg mb-8">
+        <div class="flex items-center justify-between mb-0">
+            <h1 class="text-3xl font-bold">Unable to load portfolio overview data</h1>
         </div>
     </div>
-    <div style="display: none;">{addToast(new Toast("Unable to load me.json", ToastType.Error, true, 3000))}</div>
+    <div class="hidden">{addToast(new Toast("Unable to load me.json", ToastType.Error, true, 3000))}</div>
 {/await}
 
 <style>