feat: update about section

libs/pages/about/src/lib/about.component.html

@@ -1,5 +1,5 @@
-<div class="my-10 grid grid-cols-2 gap-4">
-  <div class="col-span-2 whitespace-normal lg:col-span-1">
+<div class="my-10 grid grid-cols-3 gap-4">
+  <div class="col-span-3 whitespace-normal lg:col-span-2">
     <h1
       class="mb-5 text-2xl font-bold leading-[3rem] tracking-tight text-black lg:text-4xl dark:text-white"
     >
@@ -57,14 +57,14 @@
       you'd like to discuss, don't hesitate to reach out.
     </p>
   </div>
-  <div class="order-first col-span-2 lg:order-last lg:col-span-1">
+  <div class="order-first col-span-3 lg:order-last lg:col-span-1">
     <figure
-      class="after:border-accent-base before:bg-accent-base group relative ml-auto before:absolute before:block before:h-full before:w-full before:rounded-md before:bg-opacity-40 before:transition-all before:duration-300 before:ease-in-out after:absolute after:left-[14px] after:top-[14px] after:z-[-1] after:block after:h-full after:w-full after:rounded-md after:border-2 after:opacity-0 after:transition-all after:duration-300 after:ease-in-out hover:before:bg-opacity-0 hover:after:opacity-100"
+      class="after:border-accent-base before:bg-accent-base group relative ml-auto before:absolute before:z-[1] before:block before:h-full before:w-full before:rounded-md before:bg-opacity-40 before:transition-all before:duration-300 before:ease-in-out after:absolute after:left-[14px] after:top-[14px] after:z-[-1] after:block after:h-full after:w-full after:rounded-md after:border-2 after:transition-all after:duration-300 after:ease-in-out hover:before:bg-opacity-0 hover:after:left-[18px] hover:after:top-[18px]"
     >
       <img
         src="/assets/images/valerymelou.jpg"
         alt="Valery Melou"
-        class="rounded-md"
+        class="relative rounded-md transition-all duration-300 ease-in-out group-hover:-translate-x-1 group-hover:-translate-y-1"
       />
     </figure>
   </div>