about: wip popover

content/mp-tracks-backup.json

@@ -0,0 +1,38 @@
+[
+  {
+    "id": 1,
+    "title": "Good old times",
+    "artist": "Agahnim",
+    "src": "/static/assets/music/times.mp3"
+  },
+  {
+    "id": 2,
+    "title": "Identification",
+    "artist": "Infinity Frequencies",
+    "src": "/static/assets/music/infinity.mp3"
+  },
+  {
+    "id": 3,
+    "title": "Flip the Switch",
+    "artist": "Stevia Sphere",
+    "src": "/static/assets/music/switch.mp3"
+  },
+  {
+    "id": 4,
+    "title": "Machines Vs Water",
+    "artist": "Stevia Sphere",
+    "src": "/static/assets/music/machines.mp3"
+  },
+  {
+    "id": 5,
+    "title": "Elevator 1",
+    "artist": "Stevia Sphere",
+    "src": "/static/assets/music/elevator.mp3"
+  },
+  {
+    "id": 6,
+    "title": "Somewhere Dark",
+    "artist": "Monodrone",
+    "src": "/static/assets/music/dark.mp3"
+  }
+]

content/mp-tracks.json

@@ -1,38 +1,14 @@
 [
   {
     "id": 1,
-    "title": "Good old times",
-    "artist": "Agahnim",
-    "src": "/static/assets/music/times.mp3"
+    "title": "At The Stranger's House",
+    "artist": "efdemin",
+    "src": "/static/assets/music/miniplayer/stranger.opus"
   },
   {
     "id": 2,
-    "title": "Identification",
-    "artist": "Infinity Frequencies",
-    "src": "/static/assets/music/infinity.mp3"
-  },
-  {
-    "id": 3,
-    "title": "Flip the Switch",
-    "artist": "Stevia Sphere",
-    "src": "/static/assets/music/switch.mp3"
-  },
-  {
-    "id": 4,
-    "title": "Machines Vs Water",
-    "artist": "Stevia Sphere",
-    "src": "/static/assets/music/machines.mp3"
-  },
-  {
-    "id": 5,
-    "title": "Elevator 1",
-    "artist": "Stevia Sphere",
-    "src": "/static/assets/music/elevator.mp3"
-  },
-  {
-    "id": 6,
-    "title": "Somewhere Dark",
-    "artist": "Monodrone",
-    "src": "/static/assets/music/dark.mp3"
+    "title": "Sleep Dealer",
+    "artist": "Oneohtrix Point Never",
+    "src": "/static/assets/music/miniplayer/sleep-dealer.opus"
   }
 ]

src/main.rs

@@ -2,7 +2,7 @@ use std::sync::Arc;
 
 use agahnim_web_v2::{
     domain::AppState,
-    templates::{home::home, music::music, notfound::notfound},
+    templates::{about::about, home::home, music::music, notfound::notfound},
 };
 use axum::{Router, routing::get};
 use tower_http::services::ServeDir;
@@ -16,6 +16,7 @@ async fn main() {
     let app = Router::new()
         .route("/home", get(home))
         .route("/music", get(music))
+        .route("/about", get(about))
         .nest_service("/static", ServeDir::new("static"))
         .fallback(notfound)
         .with_state(state);

src/templates/about.rs

@@ -0,0 +1,33 @@
+use askama::Template;
+use axum::{
+    extract::State,
+    http::HeaderMap,
+    response::{Html, IntoResponse},
+};
+use std::sync::Arc;
+
+use crate::domain::AppState;
+
+#[derive(Template)]
+#[template(path = "about.html")]
+struct AboutTemplate<'a> {
+    tracks: &'a Vec<crate::domain::Track>,
+}
+
+#[derive(Template)]
+#[template(path = "partials/about.html")]
+struct AboutPartialTemplate {}
+
+pub async fn about(headers: HeaderMap, state: State<Arc<AppState>>) -> impl IntoResponse {
+    if headers.contains_key("hx-request") {
+        Html(AboutPartialTemplate {}.render().unwrap())
+    } else {
+        Html(
+            AboutTemplate {
+                tracks: &state.mp_tracks,
+            }
+            .render()
+            .unwrap(),
+        )
+    }
+}

src/templates/mod.rs

@@ -1,3 +1,4 @@
+pub mod about;
 pub mod home;
 pub mod music;
 pub mod notfound;

static/style.css

@@ -217,8 +217,8 @@ table {
 }
 
 body {
-  background-size: cover;
   background-position: center;
+  background-size: auto;
   min-height: 100lvh;
   width: 100lvw;
   overflow: auto;
@@ -231,7 +231,6 @@ body {
 
   &:has(#content music) {
     background-image: url(assets/gifs/hmmmbg.gif);
-    background-size: auto;
   }
 
   &:has(#content katcenkat) {
@@ -257,21 +256,6 @@ body {
     animation: marquee 8s linear infinite;
   }
 
-  cute-container {
-    background-image: url(assets/gifs/weirdstone.png);
-    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;
-    }
-  }
 }
 
 /* CRT Effect */
@@ -457,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;
@@ -559,13 +551,6 @@ home-content {
             font-weight: bold;
           }
 
-          a {
-            color: var(--darkerer-pink);
-
-            &:hover {
-              color: var(--lavender)
-            }
-          }
 
           article-body {
             padding-bottom: 1rem;
@@ -669,6 +654,99 @@ 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);
+    font-size: 2rem;
+
+
+    name {
+      color: var(--pink);
+      font-weight: bold;
+    }
+
+
+    &#left {
+      img {
+        width: 10svw;
+        margin: 2rem;
+        mix-blend-mode: hard-light;
+        border: 5px solid var(--lavender);
+      }
+    }
+
+  }
+
+  >main-container {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    background-image: url(assets/gifs/heart-mosh.gif);
+    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;
+
+    button {
+      background: none;
+      color: white;
+      border: none;
+      font-size: 5rem;
+      font-family: "DotGothic16", sans-serif;
+
+      &:hover {
+        color: red;
+      }
+    }
+  }
+
+  [popover] {
+    color: white;
+    width: min(90vw, 600px);
+    border: 2px solid var(--lavender);
+    background-color: black;
+    padding: 2rem;
+
+    opacity: 0;
+    transform: scaleX(0);
+
+    transition: opacity 0.5s, transform 0.5s;
+  }
+
+  [popover]:popover-open {
+    opacity: 1;
+    transform: scaleX(1);
+  }
+
+  @starting-style {
+    [popover]:popover-open {
+      opacity: 0;
+      transform: scaleX(0);
+    }
+  }
+}
+
 /* Music */
 music {
   display: flex;
@@ -687,7 +765,7 @@ music {
     z-index: -1;
     pointer-events: none;
     font-size: 10rem;
-    animation: fadeInNOut 10s infinite;
+    animation: fadeInNOut 5s infinite;
 
     vertical-marquee-inner {
       position: absolute;
@@ -706,20 +784,24 @@ music {
     }
   }
 
-  box {
-    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;
-  }
-
   >cute-container {
     display: flex;
     flex-direction: column;
     flex-wrap: wrap;
     align-items: center;
+    background-image: url(assets/gifs/weirdstone.png);
+    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;
+    }
   }
 }
 
@@ -996,7 +1078,6 @@ mini-player {
     }
   }
 
-  /* Music page */
 
   /* Miniplayer */
 
@@ -1033,8 +1114,6 @@ mini-player {
   }
 }
 
-/* Page-specific backgrounds */
-
 /* Context Menu */
 helo {
   position: fixed;

templates/about.html

@@ -0,0 +1,3 @@
+{% extends "base.html" %} {% block content %} {% include "partials/about.html" %}
+{% endblock %} {% block miniplayer %} {% include "partials/miniplayer.html" %}
+{% endblock %}

templates/partials/about.html

@@ -0,0 +1,29 @@
+<about>
+  <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, Spinoza, Bourdieu, SensCritique etc -->
+
+    <button popovertarget="mainpopover">D I S S E C T</button>
+  </main-container>
+  <mainpopover popover id="mainpopover">
+    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 "I Shall Spit on Your Graves".
+    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!
+  </mainpopover>
+
+</about>

templates/partials/home.html

@@ -1,10 +1,6 @@
 <home-content>
   <welcome>
-    <img
-      src="/static/assets/images/welcome.webp"
-      width="400px"
-      alt="A welcome text in pink"
-    />
+    <img 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
-      <darkerer-pink>developer</darkerer-pink> and
-      <darkerer-pink>music producer</darkerer-pink> from
-      <darkerer-pink>France</darkerer-pink> ! <br /><br />
+      <pronouns>she/her</pronouns> and I do many things, but I more notably create <darkerer-pink>music</darkerer-pink>
+      with my computer and my <a href="/about">instrument</a> (less notably). I also
+      <darkerer-pink>develop</darkerer-pink> from time to time when a
+      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
-      small, personal space on the internet, away from the social climate, which
-      is getting <shitty>worse and worse.</shitty> <br /><br />
+      because it's <boing>fun</boing> to build a project like this. Having grown tired of social media, I find it
+      particularly pleasant to have a little personal space that we’ve shaped in our own way; this way, it allows us to
+      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
-      vibe into one of my projects.
+      the mix of melancholy of comfort it brings me.
       <badges>
-        <img
-          src="/static/assets/badges/88x31computer.gif"
-          alt="88x31 pixel art badge with a retro computer"
-        />
-        <img
-          src="/static/assets/badges/cssisawesome.webp"
-          alt="Badge with text 'CSS is Awesome'"
-        />
-        <img
-          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"
-        />
+        <img src="/static/assets/badges/88x31computer.gif" alt="88x31 pixel art badge with a retro computer" />
+        <img src="/static/assets/badges/cssisawesome.webp" alt="Badge with text 'CSS is Awesome'" />
+        <img 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"
-          ><img
-            src="/static/assets/icons/github.webp"
-            width="30px"
-            alt="GitHub 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>
+        <a href="https://github.com/naguiagahnim" target="_blank"><img src="/static/assets/icons/github.webp"
+            width="30px" alt="GitHub 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
-        width="200px"
-        src="/static/assets/gifs/divider2.gif"
-        alt="Decorative divider"
-      />
-      <bibou-message
-        >Consult the wisdom of the Bibou, if thou darest...</bibou-message
-      >
+      <img width="200px" 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
-          class="boubou"
-          src="/static/assets/images/boubou.webp"
-          alt="Bibou endormi"
-        />
-        <img
-          class="bibou"
-          src="/static/assets/images/bibou.webp"
-          alt="Bibou éveillé"
-        />
+        <img class="boubou" 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
-          width="70%"
-          src="/static/assets/gifs/updates.gif"
-          alt="Animated text 'Updates'"
-        />
+        <img 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
-            width="300px"
-            src="/static/assets/gifs/divider2.gif"
-            alt="Decorative divider"
-          />
+          <img width="300px" src="/static/assets/gifs/divider2.gif" alt="Decorative divider" />
         </article-entry>
         {% else %}
         <ominous-message> Nothing to see here, for now... </ominous-message>

templates/partials/music.html

@@ -1,25 +1,31 @@
 <music>
-  <vertical-marquee id="bg-text"></vertical-marquee>
+  <vertical-marquee id="bg-text" aria-hidden="true"></vertical-marquee>
   <cute-container>
     <img src="/static/assets/gifs/music.gif" alt="Animated text 'Music'" />
   </cute-container>
 </music>
+<!-- Wall of text go!! -->
 <script>
-  const chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
-  const container = document.getElementById("bg-text");
-  const colWidth = 20;
-  const rowHeight = 24;
-  const cols = Math.ceil(window.innerWidth / colWidth);
-  const rows = Math.ceil(window.innerHeight / rowHeight);
+  (function () {
+    const chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
+    const colWidth = 20;
+    const rowHeight = 24;
+    const container = document.getElementById("bg-text");
+    if (!container) return;
 
-  for (let c = 0; c < cols; c++) {
-    const col = document.createElement("vertical-marquee-inner");
-    col.style.left = c * colWidth + "px";
-    for (let r = 0; r < rows; r++) {
-      const span = document.createElement("text");
-      span.textContent = chars[Math.floor(Math.random() * chars.length)];
-      col.appendChild(span);
-    }
-    container.appendChild(col);
-  }
-</script>
+    function build() {
+      container.innerHTML = "";
+      const cols = Math.ceil(window.innerWidth / colWidth);
+      const rows = Math.ceil(window.innerHeight / rowHeight);
+      for (let c = 0; c < cols; c++) {
+        const col = document.createElement("vertical-marquee-inner"); col.style.left = c *
+          colWidth + "px"; for (let r = 0; r < rows; r++) {
+            const span = document.createElement("text");
+            span.textContent = chars[Math.floor(Math.random() * chars.length)]; col.appendChild(span);
+          } container.appendChild(col);
+      }
+    } let resizeTimer; window.addEventListener("resize", function () {
+      clearTimeout(resizeTimer);
+      resizeTimer = setTimeout(build, 150);
+    }); build();
+  })(); </script>