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