Add 'Hero' card for contact information

Author: mbuffa

content/socials.csv

@@ -0,0 +1,5 @@
+url,title
+https://github.com/mbuffa,GitHub
+https://www.linkedin.com/in/maxime-buffa,LinkedIn
+https://bsky.app/profile/madmakks.bsky.social,BlueSky
+mailto:makkusoft@proton.me,Email

templates/_layout.html

@@ -145,6 +145,7 @@
     ">
     <div class="w-228 max-w-screen m-auto p-4 bg-slate-200 dark:bg-transparent">
       {% include "layout/navbar.html" %}
+      {% include "layout/hero.html" %}
 
       <div class="
         w-11/12 m-auto mt-2 p-4

templates/layout/hero.html

@@ -0,0 +1,18 @@
+<div class="
+    w-11/12 m-auto mt-2 mb-4 p-4 rounded-md text-center
+    bg-black bg-opacity-100 shadow-lg
+    dark:bg-black dark:bg-opacity-60
+">
+  <h1 class="text-2xl font-bold text-white dark:text-orange-500">Maxime Buffa</h1>
+  <p class="text-lg text-gray-300 dark:text-gray-400 mt-1">Sr. Backend Engineer and DevOps</p>
+  <div class="mt-3 flex justify-center gap-4 flex-wrap">
+    {% set socials = load_data(path="content/socials.csv") %}
+    {% for link in socials["records"] %}
+    <a href="{{ link.0 }}" class="
+        inline-block no-underline px-3 py-1 hover:no-underline border border-solid rounded-md border-transparent
+        text-white hover:bg-white hover:text-black
+        dark:text-orange-500 dark:hover:bg-orange-500 dark:hover:text-neutral-900"
+    >{{ link.1 }}</a>
+    {% endfor %}
+  </div>
+</div>