refacto(author): Enhance author page and go to action

Author: jeanjerome

_layouts/main.html

@@ -72,7 +72,11 @@ <h1 class="logo">{{ homeTitle }}</h1>
           <li class="linkedin"><a href="https://www.linkedin.com/in/jean-jerome-levy" aria-label="{{ site.data.i18n.aria-linkedin }}" rel="noopener noreferrer nofollow" target="_blank"><span><svg width="15.75" height="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!-- Font Awesome Free 5.15.3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/></svg></span></a></li>
         {% endif %}
         {% if site.social-email %}
-          <li class="email"><a href="mailto:{{site.social-email}}" aria-label="{{ site.data.i18n.aria-mailto }}"><span><svg width="18" height="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- Font Awesome Free 5.15.3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm0 48v40.805c-22.422 18.259-58.168 46.651-134.587 106.49-16.841 13.247-50.201 45.072-73.413 44.701-23.208.375-56.579-31.459-73.413-44.701C106.18 199.465 70.425 171.067 48 152.805V112h416zM48 400V214.398c22.914 18.251 55.409 43.862 104.938 82.646 21.857 17.205 60.134 55.186 103.062 54.955 42.717.231 80.509-37.199 103.053-54.947 49.528-38.783 82.032-64.401 104.947-82.653V400H48z"/></svg></span></a></li>
+          <li class="email"><a id="contact" aria-label="{{ site.data.i18n.aria-mailto }}"><span>
+            <svg width="18" height="18"xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"/></svg></span></a></li>
+            <script>
+              document.addEventListener("DOMContentLoaded",function(){let t=atob("amVhbmplcm9tZS5sZXZ5QGdtYWlsLmNvbQ==");let v=document.getElementById("contact");v.href="mailto:"+t;v.title=t;})
+            </script>
         {% endif %}
         {% if site.search %}
           <li class="search"><a href="/search/" aria-label="{{ site.data.i18n.aria-search }}" rel="search"><span>

_sass/_media.scss

@@ -315,4 +315,21 @@
   .leaflet-control-zoom {
     display: none;
   }
+
+  .contact-action {
+    flex-wrap: wrap;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .contact-action-image {
+    width: 100%;
+    max-width: 200px;
+    margin-bottom: 15px;
+  }
+
+  .contact-action-details {
+    text-align: center;
+  }
+
 }

_sass/_premonition.scss

@@ -305,3 +305,82 @@ $svg-citation-color: "495057";
   line-height: 1.6;
 }
 
+// Contact action
+$color-linkedin: #0077B5;
+$color-email: #D14836;
+$transition: 0.2s ease-in-out;
+
+.contact-action {
+  display: flex;
+  align-items: stretch;
+  gap: 20px;
+  margin: 20px 0;
+  color: var(--body-color);
+  background-color: var(--inset-background);
+  padding: 15px;
+  border-radius: 10px;
+  flex-wrap: nowrap;
+  flex-direction: row;
+
+  &-image {
+    width: 120px;
+    height: auto;
+    border-radius: 5px;
+    object-fit: cover;
+    flex-shrink: 0;
+  }
+
+  &-details {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    p {
+      margin: 4px 0;
+      line-height: 1.6;
+    }
+
+  }
+
+  &-title {
+    font-size: 1.4em;
+    font-weight: bold;
+    margin-bottom: 10px;
+  }
+
+  &-buttons {
+    display: flex;
+    justify-content: center;
+    gap: 15px;
+    margin-top: 20px;
+
+    a {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 160px; 
+      height: 50px; 
+      border-radius: 10px; 
+      text-decoration: none;
+      font-size: 24px;
+      font-weight: bold;
+      transition: $transition;
+      color: white;
+
+      &.linkedin {
+        background-color: $color-linkedin;
+      }
+
+      &.email {
+        background-color: $color-email;
+      }
+
+      &:hover {
+        transform: scale(1.1);
+        opacity: 1;
+      }
+    }
+  }
+  
+}