update the layout completely and include tailwind standalone

views/partials/about-partial.html

@@ -1,34 +1,44 @@
 {{ block "about-partial" . }}
 <!-- Hero Section -->
 <section
-  class="flex flex-col items-center justify-center text-center flex-grow py-16 px-6 bg-gradient-to-b from-blue-50 to-white"
+  class="flex flex-col items-center justify-center text-center flex-grow py-16 px-6"
 >
   <h1 class="text-4xl md:text-6xl font-bold mb-4">
     Hi, I'm <span class="text-blue-600">Your Name</span>
   </h1>
-  <p class="text-lg md:text-xl mb-6 max-w-2xl">
+  <p class="text-lg md:text-xl mb-2 max-w-2xl">
     A <span class="font-semibold">[Your Role]</span> who loves building
     [something about what you do].
   </p>
-  <div class="flex gap-4">
-    <a
-      id="projectButton"
-      hx-get="/projects"
-      hx-target="#content"
-      hx-push-url="true"
-      class="px-6 py-3 bg-blue-600 text-white rounded-lg shadow hover:bg-blue-700 transition cursor:pointer"
-      >View Projects</a
-    >
-    <a
-      href="#contact"
-      class="px-6 py-3 border border-blue-600 text-blue-600 rounded-lg shadow hover:bg-blue-50 transition"
-      >Contact Me</a
-    >
-  </div>
 </section>
 
-<!-- About Section -->
-<section id="about" class="container mx-auto py-16 px-6">
+<!-- 🌟 Glass Bubble Section -->
+<div class="flex flex-wrap justify-center gap-8 py-3">
+  <a
+    id="projectButton"
+    hx-get="/projects"
+    hx-target="#content"
+    hx-push-url="true"
+    class="px-8 py-6 rounded-full bg-accent/5 dark:bg-darkaccent/10 backdrop-blur-xl border border-white/20 shadow-xl text-xl font-semibold hover:bg-accent/10 hover:dark:bg-darkaccent/20 transition"
+  >
+    Projects
+  </a>
+
+  <a
+    id="experienceButton"
+    hx-get="/experience"
+    hx-target="#content"
+    hx-push-url="true"
+    class="px-8 py-6 rounded-full bg-accent/5 dark:bg-darkaccent/10 backdrop-blur-xl border border-white/20 shadow-xl text-xl font-semibold hover:bg-accent/10 hover:dark:bg-darkaccent/20 transition"
+  >
+    Experience
+  </a>
+</div>
+
+<section
+  id="about"
+  class="flex flex-col items-center justify-center text-center flex-grow py-16 px-6"
+>
   <h2 class="text-3xl font-bold mb-6">About Me</h2>
   <p class="text-lg leading-relaxed max-w-3xl">
     I’m a [Your Profession] with experience in [key skills]. I enjoy solving

views/partials/experience-partial.html

@@ -1,38 +1,35 @@
 {{ block "experience-partial" . }}
 <h2 class="text-3xl font-bold m-6">Experience</h2>
-<div class="m-10 mb-6 overflow-x-auto rounded-lg shadow">
-  <p class="mb-6 font-bold text-lg"> Parent Company - IdPassglobal</p>
-  <table class="min-w-full border border-gray-300 border-collapse">
-    <thead class="bg-gray-100">
-      <tr class="border-b border-gray-300">
-        <th class="table-th">Company</th>
-        <th class="table-th">Position</th>
-        <th class="table-th">Employee Type</th>
-        <th class="table-th">Tasks</th>
-        <th class="table-th">Tools</th>
-        <th class="table-th">Time Period</th>
-      </tr>
-    </thead>
-{{ range . }} {{ template "experience-partial-range" . }} {{ end }} 
-  </table>
+<div class="flex flex-row m-10 mb-4">
+  <p class="font-bold text-lg">
+    For all jobs mentioned below I was an employee of
+  </p>
+  <p class="font-bold text-lg italic underline ml-1.5">Idpassglobal</p>
+</div>
+<div class="m-10 mb-6">
+  {{ range . }} {{ template "experience-partial-range" . }} {{ end }}
+</div>
+{{ end }} {{block "experience-partial-range" . }}
+<div class="grid grid-cols-[7rem_1rem_auto]">
+  <!-- <div class="flex flex-row"> -->
+  <div class="text-right font-bold text-xs leading-none">{{.StartFrom}}</div>
+  <!-- <div class="grid grid-cols-[1rem_auto] ml-2"> -->
+  <div class="flex flex-col items-center leading-none ml-2">
+    <span class="w-2.5 h-2.5 rounded-full bg-black"></span>
+    <span class="w-0.5 flex-grow bg-black"></span>
+  </div>
+  <div class="m-5">
+    <div class="flex flex-row">
+      <p class="font-bold">{{.Company}}</p>
+      <p class="ml-2 font-bold">{{.Position}}</p>
+      <p class="ml-2 font-bold">- {{.EmployeeType}}</p>
+    </div>
+    <ul class="list-disc list-inside">
+      {{ range .Tasks }}
+      <li class="m-2">{{.}}</li>
+      {{ end }}
+    </ul>
+    <!-- </div> -->
+  </div>
 </div>
 {{ end }}
-
-{{ block "experience-partial-range" . }}
-    <tbody>
-      <tr class="hover:bg-blue-50 border-b border-gray-300">
-        <td class="table-td">{{ .Company }}</td>
-        <td class="table-td">{{ .Position }}</td>
-        <td class="table-td">{{ .EmployeeType }}</td>
-        <td class="table-td text-start px-2">
-          <ul class="list-disc list-inside">
-            {{ range .Tasks }}
-            <li class="m-2">{{ . }}</li>
-            {{ end }}
-          </ul>
-        </td>
-        <td class="table-td">{{ .Tools }}</td>
-        <td class="table-td">{{ .TimePeriod }}</td>
-      </tr>
-    </tbody>
-{{ end }}