fixed spacing in header area

src/components/AIPrompt.astro

@@ -17,7 +17,7 @@ const fullUrl = url + encodeURIComponent(AI_SUMMARY_PROMPT);
   href={fullUrl}
   target="_blank"
   rel="noopener noreferrer"
-  class="text-[var(--ayu-gutter)] hover:text-[var(--ayu-accent)] transition-colors duration-150"
+  class="text-fg hover:text-[var(--ayu-accent)] transition-colors duration-150"
   title={title}
 >
   <Icon name={icon} class="w-7 h-7" />

src/pages/index.astro

@@ -80,8 +80,6 @@ projects.forEach((project) => {
         allTags.add(tag);
     });
 });
-
-const sortedTags = Array.from(allTags).sort((a, b) => a.localeCompare(b));
 ---
 
 <style>
@@ -110,39 +108,9 @@ const sortedTags = Array.from(allTags).sort((a, b) => a.localeCompare(b));
 </style>
 
 <Layout currentPage={{ title: "home", path: "/" }}>
-  <div class="flex justify-between items-start mb-4">
+  <div class="flex justify-between items-start mb-2">
+    <div class="flex flex-col gap-1">
       <h2 class="text-2xl font-600 text-ayu-green-500">ABOUT</h2>
-    <div class="flex flex-col items-end gap-2">
-      <p class="text-ayu-gutter text-lg">Ask AI about me</p>
-      <div class="flex gap-4 items-center">
-        <AIPrompt
-          url="https://chat.openai.com/?q="
-          title="Ask ChatGPT"
-          icon="simple-icons:openai"
-        />
-        <AIPrompt
-          url="https://claude.ai/new?q="
-          title="Ask Claude"
-          icon="simple-icons:claude"
-        />
-        <div class="relative flex items-center">
-          <button
-            id="copy-prompt-btn"
-            class="text-[var(--ayu-gutter)] hover:text-[var(--ayu-accent)] transition-colors duration-150 cursor-pointer flex items-center"
-            title="Copy prompt to clipboard"
-          >
-            <Icon name="mdi:content-copy" class="w-7 h-7" />
-          </button>
-          <span
-            id="copy-tooltip"
-            class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 text-sm bg-[var(--ayu-popup)] text-[var(--ayu-fg)] border border-[var(--ayu-gutter-dim)] rounded opacity-0 pointer-events-none transition-opacity duration-150 whitespace-nowrap"
-          >
-            Copied to clipboard
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
       <span class="flex flex-wrap gap-2 mb-2">
         <a
           href="https://github.com/hex248"
@@ -173,6 +141,38 @@ const sortedTags = Array.from(allTags).sort((a, b) => a.localeCompare(b));
           CV
         </a>
       </span>
+    </div>
+    <div id="ask-ai" class="flex flex-col items-end gap-2">
+      <p class="text-fg text-lg">Ask AI about me</p>
+      <div class="flex gap-4 items-center">
+        <AIPrompt
+          url="https://chat.openai.com/?q="
+          title="Ask ChatGPT"
+          icon="simple-icons:openai"
+        />
+        <AIPrompt
+          url="https://claude.ai/new?q="
+          title="Ask Claude"
+          icon="simple-icons:claude"
+        />
+        <div class="relative flex items-center">
+          <button
+            id="copy-prompt-btn"
+            class="text-fg hover:text-[var(--ayu-accent)] transition-colors duration-150 cursor-pointer flex items-center"
+            title="Copy prompt to clipboard"
+          >
+            <Icon name="mdi:content-copy" class="w-7 h-7" />
+          </button>
+          <span
+            id="copy-tooltip"
+            class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 text-sm bg-[var(--ayu-popup)] text-[var(--ayu-fg)] border border-[var(--ayu-gutter-dim)] rounded opacity-0 pointer-events-none transition-opacity duration-150 whitespace-nowrap"
+          >
+            Copied to clipboard
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
   <ul class="list-disc ml-4 mb-2">
     <li>
       <span class="text-ayu-red-500 font-500">Name: </span>Oliver Bryan
@@ -197,15 +197,6 @@ const sortedTags = Array.from(allTags).sort((a, b) => a.localeCompare(b));
       <span class="text-ayu-blue-500 font-500">Age: </span>
       <TimeSince date={new Date("11:47:00 2004-11-04")} client:react />
     </li>
-    <!-- <li>
-            <span class="text-ayu-red-500 font-500">Hobbies: </span>Music,
-            Travel, Badminton, <a
-                href="https://photos.oliverbryan.com"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="inline-link">Photography</a
-            >
-        </li> -->
   </ul>
 
   {
@@ -215,7 +206,7 @@ const sortedTags = Array.from(allTags).sort((a, b) => a.localeCompare(b));
         <h2 class="text-2xl font-600 text-ayu-green-500 mt-6">
           PROFESSIONAL PROJECTS
         </h2>
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-4 py-2">
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-4 pt-2">
           {projects
             .filter((project) => project.type === "professional")
             .map((project) => (
@@ -237,7 +228,7 @@ const sortedTags = Array.from(allTags).sort((a, b) => a.localeCompare(b));
 
   <h2 class="text-2xl font-600 text-ayu-green-500 mt-6">PERSONAL PROJECTS</h2>
 
-  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-4 py-2">
+  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-4 pt-2">
     {
       projects
         .filter((project) => project.type === "personal")