about, home: wip page ordering, change paragraph

static/style.css

@@ -441,6 +441,14 @@ home-content {
   justify-content: center;
   align-items: center;
 
+  a {
+    color: var(--darkerer-pink);
+
+    &:hover {
+      color: var(--lavender)
+    }
+  }
+
   welcome {
     margin-bottom: 3rem;
     text-align: center;
@@ -543,13 +551,6 @@ home-content {
             font-weight: bold;
           }
 
-          a {
-            color: var(--darkerer-pink);
-
-            &:hover {
-              color: var(--lavender)
-            }
-          }
 
           article-body {
             padding-bottom: 1rem;
@@ -670,12 +671,21 @@ about {
     align-items: center;
     background-image: url(assets/gifs/beatingpurple.gif);
     border: 5px solid var(--darkerer-pink);
+    font-size: 2rem;
+
+
+    name {
+      color: var(--pink);
+      font-weight: bold;
+    }
+
 
     &#left {
       img {
-        max-width: 10svw;
+        width: 10svw;
-        padding: 2rem;
+        margin: 2rem;
         mix-blend-mode: hard-light;
+        border: 5px solid var(--lavender);
       }
     }
 
@@ -696,6 +706,12 @@ about {
     border: 5px solid var(--lavender);
     padding: 1rem 2rem;
     box-sizing: border-box;
+
+    introduction {
+      font-size: 1.5rem;
+      color: white;
+      text-shadow: 0.5px 0.5px 0 var(--darkerer-pink), 0.5px -0.5px 0 var(--darkerer-pink), -0.5px 0.5px 0 var(--darkerer-pink), -0.5px -0.5px 0 var(--darkerer-pink), 0.5px 0px 0 var(--darkerer-pink), 0px 0.5px 0 var(--darkerer-pink), -0.5px 0px 0 var(--darkerer-pink), 0px -0.5px 0 var(--darkerer-pink);
+    }
   }
 
   [popover] {

templates/partials/about.html

@@ -1,15 +1,31 @@
 <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" />
+    <name>Agahnim</name>
   </smaller-container>
   <main-container>
+    <!-- Ajouter cœur ici et tu peux l'examiner ou quoi, ça pourrait être cool, plus de créativité que juste le texte dans le div stp -->
+    <!-- parler viole de gambe etc -->
     <button popovertarget="mainpopover">Salutttttttt</button>
+    <introduction>
+      In my personal life, I enjoy learning more about sociology, philosophy, particularly the aesthetics, and, to some
+      extent, economics notably through the Regulation school, although I’m slightly less interested in the latter.
+      <br /><br />
+
+      I am eager for aesthetic experiences, as evidenced by my SensCritique account, though it’s still sparse for now,
+      as I tirelessly seek that feeling I first experienced while reading Boris Vian’s "J'irai cracher sur vos tombes".
+      My favorite fields remain music and literature, but I’m open to any medium, such as film or the visual arts, and
+      I’m trying to catch up in those areas! My tastes are quite varied, and I’d have a hard time defining them, but I
+      in fact have a preference for Baroque music and more experimental sounds, though that’s not all of course.
+      <br /><br />
+
+      Of course, I play video games like anyone who spends a fair amount of time on their computer, and I’m particularly
+      enjoying playing Tekken 8 and Death Stranding right now, though my all-time favorite game will always be The
+      Legend of Zelda: Skyward Sword; you can spot some references to it on this site if you look closely!
+    </introduction>
   </main-container>
-  <!-- <smaller-container> -->
-  <!-- <p>Salut</p> -->
-  <!-- </smaller-container> -->
   <mainpopover popover id="mainpopover">
     <p>Salut</p>
   </mainpopover>
+
 </about>

templates/partials/header.html

@@ -41,4 +41,4 @@
       setInterval(update, 1000);
     }
   })();
-</script>
+</script>

templates/partials/home.html

@@ -1,10 +1,6 @@
 <home-content>
   <welcome>
-    <img
+    <img src="/static/assets/images/welcome.webp" width="400px" alt="A welcome text in pink" />
-      src="/static/assets/images/welcome.webp"
-      width="400px"
-      alt="A welcome text in pink"
-    />
     <marquee>
       {% for _ in 0..12 %} &nbsp;彡★Welcome to my little corner of the
       Web★彡&nbsp; {% endfor %}
@@ -16,112 +12,54 @@
       it's still a <darkerer-pink>work in progress</darkerer-pink> but I'm sure
       you will see changes if you come back from time to time :) <br /><br />
       My name is <darkerer-pink>Agahnim</darkerer-pink>
-      <pronouns>she/her</pronouns>, I'm a
+      <pronouns>she/her</pronouns> and I do many things, but I more notably create <darkerer-pink>music</darkerer-pink>
-      <darkerer-pink>developer</darkerer-pink> and
+      with my computer and my <a href="/about">instrument</a> (less notably). I also
-      <darkerer-pink>music producer</darkerer-pink> from
+      <darkerer-pink>develop</darkerer-pink> from time to time when a
-      <darkerer-pink>France</darkerer-pink> ! <br /><br />
+      project piques my interest !<br /><br />
       I created this website not just to
       <darkerer-pink>improve</darkerer-pink> my web development skills, but also
-      because it's <boing>fun</boing> to build a project like this. It's a
+      because it's <boing>fun</boing> to build a project like this. Having grown tired of social media, I find it
-      small, personal space on the internet, away from the social climate, which
+      particularly pleasant to have a little personal space that we’ve shaped in our own way; this way, it allows us to
-      is getting <shitty>worse and worse.</shitty> <br /><br />
+      express ourselves without being overwhelmed by the increasingly <shitty>toxic social climate and the
+        narrow-minded,
+        unfounded opinions that pop up here and there</shitty>. <br /><br />
       This website is inspired by the
       <darkerer-pink>vaporwave aesthetic</darkerer-pink> and the old 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
+      the mix of melancholy of comfort it brings me.
-      vibe into one of my projects.
       <badges>
-        <img
+        <img src="/static/assets/badges/88x31computer.gif" alt="88x31 pixel art badge with a retro computer" />
-          src="/static/assets/badges/88x31computer.gif"
+        <img src="/static/assets/badges/cssisawesome.webp" alt="Badge with text 'CSS is Awesome'" />
-          alt="88x31 pixel art badge with a retro computer"
+        <img src="/static/assets/badges/queer.webp" alt="Queer pride flag badge" />
-        />
+        <img width="100px" src="/static/assets/badges/skywardsword.webp"
-        <img
+          alt="Cover art for The Legend of Zelda Skyward Sword" />
-          src="/static/assets/badges/cssisawesome.webp"
+        <img src="/static/assets/badges/transrightsnow.webp" alt="Trans rights badge with text 'Trans Rights Now'" />
-          alt="Badge with text 'CSS is Awesome'"
+        <img width="30%" src="/static/assets/badges/kirby.gif" alt="Kirby character animated GIF" />
-        />
+        <img width="30%" src="/static/assets/badges/pink.gif" alt="Pink animated pixel art badge" />
-        <img
+        <img width="30%" src="/static/assets/badges/trans.gif" alt="Trans pride flag animated badge" />
-          src="/static/assets/badges/queer.webp"
-          alt="Queer pride flag badge"
-        />
-        <img
-          width="100px"
-          src="/static/assets/badges/skywardsword.webp"
-          alt="Cover art for The Legend of Zelda Skyward Sword"
-        />
-        <img
-          src="/static/assets/badges/transrightsnow.webp"
-          alt="Trans rights badge with text 'Trans Rights Now'"
-        />
-        <img
-          width="30%"
-          src="/static/assets/badges/kirby.gif"
-          alt="Kirby character animated GIF"
-        />
-        <img
-          width="30%"
-          src="/static/assets/badges/pink.gif"
-          alt="Pink animated pixel art badge"
-        />
-        <img
-          width="30%"
-          src="/static/assets/badges/trans.gif"
-          alt="Trans pride flag animated badge"
-        />
       </badges>
     </box>
     <box id="smallbox">
       <socials-header> Socials ! </socials-header>
       <socials>
-        <a href="https://github.com/naguiagahnim" target="_blank"
+        <a href="https://github.com/naguiagahnim" target="_blank"><img src="/static/assets/icons/github.webp"
-          ><img
+            width="30px" alt="GitHub logo" /></a>
-            src="/static/assets/icons/github.webp"
+        <a href="https://open.spotify.com/intl-fr/artist/4BPUhsH6krKkCNFrdMZnZF?si=E3luyIf0S_yfJRmm82S5OA"
-            width="30px"
+          target="_blank"><img src="/static/assets/icons/spotify.webp" width="30px" alt="Spotify logo" /></a>
-            alt="GitHub logo"
+        <a href="https://www.instagram.com/agahnim_music/" target="_blank"><img src="/static/assets/icons/insta.webp"
-        /></a>
+            width="30px" alt="Instagram logo" /></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"
-            alt="Spotify logo"
-        /></a>
-        <a href="https://www.instagram.com/agahnim_music/" target="_blank"
-          ><img
-            src="/static/assets/icons/insta.webp"
-            width="30px"
-            alt="Instagram logo"
-        /></a>
       </socials>
-      <img
+      <img width="200px" src="/static/assets/gifs/divider2.gif" alt="Decorative divider" />
-        width="200px"
+      <bibou-message>Consult the wisdom of the Bibou, if thou darest...</bibou-message>
-        src="/static/assets/gifs/divider2.gif"
-        alt="Decorative divider"
-      />
-      <bibou-message
-        >Consult the wisdom of the Bibou, if thou darest...</bibou-message
-      >
       <bibou-container>
-        <img
+        <img class="boubou" src="/static/assets/images/boubou.webp" alt="Bibou endormi" />
-          class="boubou"
+        <img class="bibou" src="/static/assets/images/bibou.webp" alt="Bibou éveillé" />
-          src="/static/assets/images/boubou.webp"
-          alt="Bibou endormi"
-        />
-        <img
-          class="bibou"
-          src="/static/assets/images/bibou.webp"
-          alt="Bibou éveillé"
-        />
       </bibou-container>
       <bibou-text> </bibou-text>
     </box>
     <box id="newsbox">
       <website-news>
-        <img
+        <img width="70%" src="/static/assets/gifs/updates.gif" alt="Animated text 'Updates'" />
-          width="70%"
-          src="/static/assets/gifs/updates.gif"
-          alt="Animated text 'Updates'"
-        />
 
         {% for article in news %}
         <article-entry>
@@ -129,11 +67,7 @@
             {{ article.date.format("%d/%m/%Y") }}
           </time>
           <article-body> {{ article.body_html|safe }} </article-body>
-          <img
+          <img width="300px" src="/static/assets/gifs/divider2.gif" alt="Decorative divider" />
-            width="300px"
-            src="/static/assets/gifs/divider2.gif"
-            alt="Decorative divider"
-          />
         </article-entry>
         {% else %}
         <ominous-message> Nothing to see here, for now... </ominous-message>
@@ -184,4 +118,4 @@
     ttText(quote);
   });
   }) ();
-</script>
+</script>