refactor: improve design with profile picture

src/pages/index.astro

@@ -18,37 +18,30 @@ const posts = (await getCollection("posts")).sort(function (first, second) {
 
 <Layout>
   <main class="flex flex-col gap-20">
-    <article class="flex flex-col gap-8">
-      <h1 class="text-3xl text-neutral-100 text-center md:text-left">{presentation.title}</h1>
-      
-      <!-- Paragraph on the left, Image on the right (for larger screens) -->
-      <div class="hidden md:flex">
-        <h2
-          class="w-auto leading-6"
-          set:html={convertAsteriskToStrongTag(presentation.description)}
-        />
-        {
-          presentation.profile &&
-          <div class="md:w-1/2"> 
-            <img src={presentation.profile} class="rounded-full float-right"/>
-          </div>
-        }
-      </div>
+    <article
+      class="flex flex-col gap-8 md:flex-row-reverse md:justify-end md:gap-12"
+    >
+      {
+        presentation.profile && (
+          <img
+            src={presentation.profile}
+            class="w-1/4 self-center rounded-full"
+          />
+        )
+      }
+
+      <div class="flex flex-col gap-8">
+        <h1 class="text-3xl text-neutral-100">
+          {presentation.title}
+        </h1>
 
-      <!-- For smaller screens, Image on top, Text at bottom -->
-      <div class="md:hidden text-center">
-        {
-          presentation.profile &&
-          <div class="flex place-content-center mb-4">
-            <img src={presentation.profile} class="rounded-full self-center w-1/3" />
-          </div>
-        }
         <h2
-          class="mw-full leading-6"
+          class="w-auto max-w-[60ch] leading-6"
           set:html={convertAsteriskToStrongTag(presentation.description)}
         />
+
+        <SocialLinks />
       </div>
-      <SocialLinks />
     </article>
 
     <article class="flex flex-col gap-8">