Refined header layout: Improved spacing and typography

Author: devohme-id

index.html

@@ -69,7 +69,7 @@
 
       <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
         <!-- Profile Photo -->
-        <div class="mb-8 relative inline-block">
+        <div class="mb-10 relative inline-block">
           <div
             class="w-32 h-32 md:w-40 md:h-40 rounded-full overflow-hidden border-4 border-white dark:border-slate-800 shadow-xl relative z-10 mx-auto"
           >
@@ -80,20 +80,20 @@
           ></div>
         </div>
 
-        <div class="block mb-4">
+        <div class="block mb-6">
           <div
-            class="inline-block px-4 py-1 rounded-full bg-blue-100 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/20 text-blue-600 dark:text-blue-400 text-sm font-medium"
+            class="inline-block px-4 py-1.5 rounded-full bg-blue-50 dark:bg-blue-500/10 border border-blue-100 dark:border-blue-500/20 text-blue-600 dark:text-blue-400 text-sm font-semibold tracking-wide uppercase"
           >
             Senior IT Specialist
           </div>
         </div>
-        <h2 class="text-2xl md:text-3xl font-semibold text-slate-700 dark:text-slate-300 mb-2">
-          Hi, I am <span class="text-slate-900 dark:text-white" id="profile-name"></span>
+        <h2 class="text-xl md:text-2xl font-medium text-slate-600 dark:text-slate-400 mb-4">
+          Hi, I am <span class="text-slate-900 dark:text-white font-bold" id="profile-name"></span>
         </h2>
         <h1
-          class="text-4xl md:text-6xl lg:text-7xl font-bold tracking-tight mb-6 text-slate-900 dark:text-white"
+          class="text-3xl md:text-5xl lg:text-6xl font-bold tracking-tight mb-8 text-slate-900 dark:text-white leading-tight"
         >
-          Converting Complexity into <br />
+          Converting Complexity into <br class="hidden md:block" />
           <span class="gradient-text">Efficient Automations</span>
         </h1>
         <p