From c09eff2abbcdf03b724ef11bdeb77f026b7acec1 Mon Sep 17 00:00:00 2001
From: Agahnim <naguiagahnim@proton.me>
Date: Wed, 13 May 2026 15:42:58 +0200
Subject: [PATCH] about: wip

---
 static/style.css              | 36 +++++++++++++++++++++++++++++------
 templates/partials/about.html | 12 ++++++++++--
 2 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/static/style.css b/static/style.css
index 91c84a8..19d3728 100644
--- a/static/style.css
+++ b/static/style.css
@@ -653,12 +653,33 @@ home-content {
   }
 }
 
+/* About page */
+
 about {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
   align-items: stretch;
+  gap: 2rem;
+
+  >smaller-container {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    align-items: center;
+    background-image: url(assets/gifs/beatingpurple.gif);
+    border: 5px solid var(--darkerer-pink);
+
+    &#left {
+      img {
+        max-width: 10svw;
+        padding: 2rem;
+        mix-blend-mode: hard-light;
+      }
+    }
+
+  }
 
   >main-container {
     display: flex;
@@ -666,19 +687,22 @@ about {
     flex-wrap: wrap;
     align-items: center;
     background-image: url(assets/gifs/heart-mosh.gif);
-    background-size: contain;
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
     width: min(90svw, 1000px);
     min-height: 70svh;
     height: auto;
     border: 5px solid var(--lavender);
     padding: 1rem 2rem;
     box-sizing: border-box;
+  }
 
-    img {
-      width: 80%;
-      display: block;
-      margin-inline: auto;
-    }
+  [popover] {
+    color: white;
+    border: 2px solid var(--lavender);
+    background-color: black;
+    padding: 2rem;
   }
 }
 
diff --git a/templates/partials/about.html b/templates/partials/about.html
index e96d3be..eb8a445 100644
--- a/templates/partials/about.html
+++ b/templates/partials/about.html
@@ -1,7 +1,15 @@
 <about>
   <!-- Ajouter cœur ici et tu peux l'examiner ou quoi, ça pourrait être cool -->
+  <smaller-container id="left">
+    <img src="/static/assets/images/pfp.webp" />
+  </smaller-container>
   <main-container>
-
-    <text>Salut</text>
+    <button popovertarget="mainpopover">Salutttttttt</button>
   </main-container>
+  <!-- <smaller-container> -->
+  <!-- <p>Salut</p> -->
+  <!-- </smaller-container> -->
+  <mainpopover popover id="mainpopover">
+    <p>Salut</p>
+  </mainpopover>
 </about>
\ No newline at end of file