home: added socials section, now need to add biboutus and news

static/style.css

@@ -440,7 +440,7 @@ home-content {
     gap: 1rem;
 
     box {
-      border-radius: 0.25rem;
+      border-radius: 0.4rem;
       box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
       background-color: white;
       padding: 1rem;
@@ -451,7 +451,39 @@ home-content {
 
       &#smallbox {
         flex: 0.3;
+        flex-direction: column;
+        align-items: center;
+        display: flex;
+        gap: 1rem;
+
+        >socials-header {
+          color: var(--darkerer-pink);
+        }
+
+        socials {
+          display: grid;
+          grid-template-columns: repeat(3, 1fr);
+          gap: 2rem;
+        }
+
       }
+
+      badges {
+        margin-top: 0.5rem;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1rem;
+
+        >img {
+          flex: 1 1 auto;
+        }
+
+
+        >img:nth-last-child(-n+3) {
+          flex: 1 1 30%;
+        }
+      }
+
     }
   }
 

templates/partials/home.html

@@ -31,9 +31,28 @@
       PCs I used to tinker with when I was a kid.
       I always liked this type of aesthetic and the mix of melancholy of comfort it brings me.
       It feels good to bring that vibe into one of my projects.
+      <badges>
+        <img src="/static/assets/badges/88x31computer.gif" />
+        <img src="/static/assets/badges/cssisawesome.webp" />
+        <img src="/static/assets/badges/queer.webp" />
+        <img width="100px" src="/static/assets/badges/skywardsword.webp" />
+        <img src="/static/assets/badges/transrightsnow.webp" />
+        <img width="30%" src="/static/assets/badges/kirby.gif" />
+        <img width="30%" src="/static/assets/badges/pink.gif" />
+        <img width="30%" src="/static/assets/badges/trans.gif" />
+      </badges>
     </box>
     <box id="smallbox">
-      <p>Salut</p>
+      <socials-header> Socials ! </socials-header>
+      <socials>
+        <a href="https://github.com/naguiagahnim" target="_blank"><img src="/static/assets/icons/github.webp"
+            width="30px" /></a>
+        <a href="https://open.spotify.com/intl-fr/artist/4BPUhsH6krKkCNFrdMZnZF?si=E3luyIf0S_yfJRmm82S5OA"
+          target="_blank"><img src="/static/assets/icons/spotify.webp" width="30px" /></a>
+        <a href="https://www.instagram.com/agahnim_music/" target="_blank"><img src="/static/assets/icons/insta.webp"
+            width="30px" /></a>
+      </socials>
+      <img src="/static/assets/gifs/divider2.gif" />
     </box>
   </boxes>
 </home-content>