diff --git a/content/mp-tracks-backup.json b/content/mp-tracks-backup.json deleted file mode 100644 index 4c71b65..0000000 --- a/content/mp-tracks-backup.json +++ /dev/null @@ -1,38 +0,0 @@ -[ - { - "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" - } -] \ No newline at end of file diff --git a/content/mp-tracks.json b/content/mp-tracks.json index 539ee94..bbe1519 100644 --- a/content/mp-tracks.json +++ b/content/mp-tracks.json @@ -1,14 +1,38 @@ [ { "id": 1, - "title": "At The Stranger's House", - "artist": "efdemin", - "src": "/static/assets/music/miniplayer/stranger.opus" + "title": "Good old times", + "artist": "Agahnim", + "src": "/static/assets/music/times.mp3" }, { "id": 2, - "title": "Sleep Dealer", - "artist": "Oneohtrix Point Never", - "src": "/static/assets/music/miniplayer/sleep-dealer.opus" + "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" } -] \ No newline at end of file +] diff --git a/src/main.rs b/src/main.rs index 5918143..f1b890e 100644 --- a/src/main.rs +++ b/src/main.rs @@ -2,7 +2,7 @@ use std::sync::Arc; use agahnim_web_v2::{ domain::AppState, - templates::{about::about, home::home, music::music, notfound::notfound}, + templates::{home::home, music::music, notfound::notfound}, }; use axum::{Router, routing::get}; use tower_http::services::ServeDir; @@ -16,7 +16,6 @@ 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); diff --git a/src/templates/about.rs b/src/templates/about.rs deleted file mode 100644 index f85488d..0000000 --- a/src/templates/about.rs +++ /dev/null @@ -1,33 +0,0 @@ -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, -} - -#[derive(Template)] -#[template(path = "partials/about.html")] -struct AboutPartialTemplate {} - -pub async fn about(headers: HeaderMap, state: State>) -> impl IntoResponse { - if headers.contains_key("hx-request") { - Html(AboutPartialTemplate {}.render().unwrap()) - } else { - Html( - AboutTemplate { - tracks: &state.mp_tracks, - } - .render() - .unwrap(), - ) - } -} diff --git a/src/templates/mod.rs b/src/templates/mod.rs index 3827f9c..d7a6e83 100644 --- a/src/templates/mod.rs +++ b/src/templates/mod.rs @@ -1,4 +1,3 @@ -pub mod about; pub mod home; pub mod music; pub mod notfound; diff --git a/static/assets/gifs/beatingpurple.gif b/static/assets/gifs/beatingpurple.gif deleted file mode 100644 index 028fcb1..0000000 Binary files a/static/assets/gifs/beatingpurple.gif and /dev/null differ diff --git a/static/assets/gifs/heart-mosh.gif b/static/assets/gifs/heart-mosh.gif deleted file mode 100644 index 863690e..0000000 Binary files a/static/assets/gifs/heart-mosh.gif and /dev/null differ diff --git a/static/assets/images/pfp.webp b/static/assets/images/pfp.webp index 03a2904..84dcd23 100644 Binary files a/static/assets/images/pfp.webp and b/static/assets/images/pfp.webp differ diff --git a/static/assets/music/miniplayer/sleep-dealer.opus b/static/assets/music/miniplayer/sleep-dealer.opus deleted file mode 100644 index 15586da..0000000 Binary files a/static/assets/music/miniplayer/sleep-dealer.opus and /dev/null differ diff --git a/static/assets/music/miniplayer/stranger.opus b/static/assets/music/miniplayer/stranger.opus deleted file mode 100644 index 9a6b8a5..0000000 Binary files a/static/assets/music/miniplayer/stranger.opus and /dev/null differ diff --git a/static/style.css b/static/style.css index a733968..ed7dcee 100644 --- a/static/style.css +++ b/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,6 +231,7 @@ body { &:has(#content music) { background-image: url(assets/gifs/hmmmbg.gif); + background-size: auto; } &:has(#content katcenkat) { @@ -256,6 +257,21 @@ 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 */ @@ -441,14 +457,6 @@ home-content { justify-content: center; align-items: center; - a { - color: var(--darkerer-pink); - - &:hover { - color: var(--lavender) - } - } - welcome { margin-bottom: 3rem; text-align: center; @@ -551,6 +559,13 @@ home-content { font-weight: bold; } + a { + color: var(--darkerer-pink); + + &:hover { + color: var(--lavender) + } + } article-body { padding-bottom: 1rem; @@ -654,99 +669,6 @@ 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; @@ -765,7 +687,7 @@ music { z-index: -1; pointer-events: none; font-size: 10rem; - animation: fadeInNOut 5s infinite; + animation: fadeInNOut 10s infinite; vertical-marquee-inner { position: absolute; @@ -784,24 +706,20 @@ 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; - } } } @@ -1078,6 +996,7 @@ mini-player { } } + /* Music page */ /* Miniplayer */ @@ -1114,6 +1033,8 @@ mini-player { } } +/* Page-specific backgrounds */ + /* Context Menu */ helo { position: fixed; diff --git a/templates/about.html b/templates/about.html deleted file mode 100644 index 789c3cb..0000000 --- a/templates/about.html +++ /dev/null @@ -1,3 +0,0 @@ -{% extends "base.html" %} {% block content %} {% include "partials/about.html" %} -{% endblock %} {% block miniplayer %} {% include "partials/miniplayer.html" %} -{% endblock %} \ No newline at end of file diff --git a/templates/partials/about.html b/templates/partials/about.html deleted file mode 100644 index 0fbe46a..0000000 --- a/templates/partials/about.html +++ /dev/null @@ -1,29 +0,0 @@ - - - - AGAHNIM - - - - - - - - - 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. -

- - 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. -

- - 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! - - - \ No newline at end of file diff --git a/templates/partials/header.html b/templates/partials/header.html index b3d3179..2661de7 100644 --- a/templates/partials/header.html +++ b/templates/partials/header.html @@ -41,4 +41,4 @@ setInterval(update, 1000); } })(); - \ No newline at end of file + diff --git a/templates/partials/home.html b/templates/partials/home.html index ee46ba1..7a5e728 100644 --- a/templates/partials/home.html +++ b/templates/partials/home.html @@ -1,6 +1,10 @@ - A welcome text in pink + A welcome text in pink {% for _ in 0..12 %}  彡★Welcome to my little corner of the Web★彡  {% endfor %} @@ -12,54 +16,112 @@ it's still a work in progress but I'm sure you will see changes if you come back from time to time :)

My name is Agahnim - she/her and I do many things, but I more notably create music - with my computer and my instrument (less notably). I also - develop from time to time when a - project piques my interest !

+ she/her, I'm a + developer and + music producer from + France !

I created this website not just to improve my web development skills, but also - because it's fun 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 toxic social climate and the - narrow-minded, - unfounded opinions that pop up here and there.

+ because it's fun to build a project like this. It's a + small, personal space on the internet, away from the social climate, which + is getting worse and worse.

This website is inspired by the vaporwave aesthetic 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. + the mix of melancholy of comfort it brings me. It feels good to bring that + vibe into one of my projects. - 88x31 pixel art badge with a retro computer - Badge with text 'CSS is Awesome' - Queer pride flag badge - Cover art for The Legend of Zelda Skyward Sword - Trans rights badge with text 'Trans Rights Now' - Kirby character animated GIF - Pink animated pixel art badge - Trans pride flag animated badge + 88x31 pixel art badge with a retro computer + Badge with text 'CSS is Awesome' + Queer pride flag badge + Cover art for The Legend of Zelda Skyward Sword + Trans rights badge with text 'Trans Rights Now' + Kirby character animated GIF + Pink animated pixel art badge + Trans pride flag animated badge Socials ! - GitHub logo - Spotify logo - Instagram logo + GitHub logo + Spotify logo + Instagram logo - Decorative divider - Consult the wisdom of the Bibou, if thou darest... + Decorative divider + Consult the wisdom of the Bibou, if thou darest... - Bibou endormi - Bibou éveillé + Bibou endormi + Bibou éveillé - Animated text 'Updates' + Animated text 'Updates' {% for article in news %} @@ -67,7 +129,11 @@ {{ article.date.format("%d/%m/%Y") }} {{ article.body_html|safe }} - Decorative divider + Decorative divider {% else %} Nothing to see here, for now... @@ -118,4 +184,4 @@ ttText(quote); }); }) (); - \ No newline at end of file + diff --git a/templates/partials/music.html b/templates/partials/music.html index 7314a3f..0ff26b2 100644 --- a/templates/partials/music.html +++ b/templates/partials/music.html @@ -1,31 +1,25 @@ - + Animated text 'Music' - \ No newline at end of file + 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); + } +