ewen/eweng.space
1
1
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

REVIEWS !

Browse source
This commit is contained in:
ewen 2026-03-29 18:23:29 +02:00
parent f04d1bb1a6
commit 20132ee1ff
7 changed files with 415 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
assets/covers/az.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.9 MiB

BIN
assets/covers/u.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 938 KiB

BIN
assets/covers/untrue.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.8 MiB

3
index.html
View file

@ -58,9 +58,10 @@
</div>
<div class="fenetre">
<div class="fenetre-contenu">
<p>bienvenue sur mon blog personnel, j'y partage mes états d'âme, mes pensées, mes musiques, mon art préféré, mes sentiments... bonne visite!</p>
<p>bienvenue sur mon blog personnel, j'y artage mes états d'âme, mes pensées, mes musiques, mon art préféré, mes sentiments... bonne visite!</p>
<ul>
<li><a href="blog/entries/index.html">blog</a></li>
<li><a href="reviews/index.html">reviews</a></li>
<li><a href="qui.html">qui</a></li>
</ul>
<p>ce site est entièrement fait à la main, par moi, par ce que je suis et ce que je représente dans le monde, avec mes envies, mes convictions, mes peines et ma sueur.</p>

179
reviews/albums/az.html Normal file
View file

@ -0,0 +1,179 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>eweng.space</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>☆</text></svg>">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&display=swap" rel="stylesheet">
<style>
body {
font-family: 'IM Fell English', serif;
font-size: 20px;
}
.fenetre {
max-width: 900px;
border: 1px solid black;
padding: 0.3rem 1.5rem 0 1.5rem;
padding-bottom: 0;
margin-top: 0px;
position: relative;
display: grid;
grid-template-columns: 1fr auto;
align-items: start;
gap: 1rem;
overflow-wrap: break-word;
}
.fenetre-nom {
margin-bottom: 1px;
margin-left: 2px;
}
.fenetre-contenu {
padding: 0 1rem 1.5rem 1rem;
min-width: 0;
}
/* ── nav retour ── */
.retour {
font-family: 'IM Fell English', serif;
font-size: 20px;
color: inherit;
display: inline-block;
margin-bottom: 1px;
margin-right: 0.4rem;
}
/* ── cover à droite, comme .perso ── */
.fenetre img.cover {
height: 280px;
width: auto;
display: block;
border: 1px solid #111;
margin-top: 1rem;
}
.col-cover {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
padding-top: 1rem;
padding-bottom: 1.5rem;
}
.cover-legende {
font-size: 0.75rem;
font-style: italic;
color: #888;
text-align: center;
}
/* ── méta ── */
.meta-ligne {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 0.8rem;
font-size: 0.85rem;
color: #555;
border-bottom: 1px solid #ddd;
padding-bottom: 0.6rem;
margin-bottom: 1.2rem;
}
.note { color: #111; font-size: 1rem; }
.genre-tag {
border: 1px solid #bbb;
padding: 1px 5px;
font-style: italic;
}
/* ── review ── */
.review p {
margin-bottom: 1rem;
line-height: 1.5;
}
.review p:last-child { margin-bottom: 0; }
/* ── nav prev/next ── */
.nav-albums {
margin-top: 1.2rem;
padding-top: 0.6rem;
border-top: 1px solid #ddd;
display: flex;
gap: 1.5rem;
font-size: 0.9rem;
}
.nav-albums a:hover { border-bottom-style: dashed; }
.thanks {
width: 450px;
}
</style>
</head>
<body>
<div>
<a href="../index.html" class="retour">←</a><span class="fenetre-nom" id="titre-nav">eweng.space &#9734;</span>
</div>
<div class="fenetre">
<div class="fenetre-contenu">
<h1>AZ</h1>
<p style="color:#555; margin-bottom:0.8rem;">23wa · 2025</p>
<div class="meta-ligne">
<span class="note">9/10</span>
<span>★★★★★★★★★☆</span>
<span class="genre-tag">Epic Collage</span>
<span class="genre-tag">Art Pop</span>
</div>
<div class="review">
<h1>lerooooooooyyy jenkins</h1>
<p>quand je m'étais prit RORSCHACH dans la face en 2024, l'album précédent AZ de 23wa, j'avais ressenti une telle envie de fouiner sa discographie que j'ai tout écouté, que ce sois sur SoundCloud sous son pseudonyme "djmaleblanc" ou ses remix ambient sous "23062003".</p>
<p>y'a un truc dans sa manière de produire que j'arrive pas a cerner, l'utilisation majeure de samples peu communs de musiques japonaises, d'extraits, de voix, de textures variées et de resampling est évidente, mais y'a une telle puissance d'âme qui s'en dégage, quelque chose de tellement personnel et indescriptible propre à sa musique qui me foudroie en plein coeur à chaque nouvelle sortie ou découverte.</p>
<p>alors c'était évident que j'attendais impatiemment la sortie d'<strong>AZ</strong> quand le rollout à commencé fin juin 2025 il me semble, avec une <a href="https://x.com/amur23w/status/1939292773511012456?s=20">vidéo</a> au style assez écclectique qui était enfait un extrait du premier morceau de l'album <i>Atto, Alto</i>.</p>
<p>l'album est sorti un petit moins d'un mois après il me semble, mais avant de l'écouter je voulais attendre de partir en vacances sur l'île de Ré avec ma copine pour l'écouter ensemble sur une plage tranquille où y'avait peu de monde voire personne. juste moi, celle que j'aime de tout mon coeur, et un album qui, je ne savais trop peu à cette époque, aller me marquer énormément.</p>
<p>tranquillement installé sur une serviette de plage, sous un magnifique soleil, on se mets à écouter l'album avec Lou, et puis wow.. c'est la claque. alors pourquoi c'est la claque ?</p>
<p>c'est la claque parceque j'y retrouve tout ce que j'aime chez cet artiste, de l'expérimentation, mais beaucoup d'âme et de sincérité. les 4 premières musiques de l'album sont très belles, puissantes, d'acceptation de soi, de la routine, de son corps, au travers d'un hymne omniprésent scandé par 23wa et ce qu'on pourrait penser être plusieurs personnes à la fois à la fin du morceau <i>Atto, Alto</i> : </p>
<p><strong>AZ, AZ, AZ, AZ !!!!</strong></p>
<p>comme à l'unisson, sans savoir ce que ça veut réellement dire. j'ai un petit peu spéculé d'ailleurs sur ce que ça pourrait potentiellement dire mais c'est en grande majorité des théories un peu débile (cf. il aurait tout fait de A à Z dans cet album, s/o gab).</p>
<p>c'est lors du son <i>World (Absolute)</i> que je me suis vraiment vu partir un peu loin, c'est l'un de mes morceaux préféré de cet album, si ce n'est mon préféré. la guitare, le doux flottement constant, la voix d'Ethan, les sifflements, la fin du son qui introduit une basse/pad douce mais puissante sur la longueur, les divers bruits stridents d'une radio ou d'un poste qui marche mal qui se supperposent en même temps sur tout le reste, wow.. j'ai eu beaucoup de frissons sur celle là et j'y reviens vraiment souvent. </p>
<p>le vrai point fort de cet album c'est qu'il est traversé par des moments de calme, de douceur, mais aussi de moments de révolte comme sur <i>MOMOMO (feat. Botsu aka N.G.S)</i>, reprennant le chant "<i>la jeunesse emmerde le front nationnal</i> de la chanson mythique des <i>Berurier Noirs</i>, <i>Porcherie</i>. ou encore d'autres moment plus dansants comme sur <i>giga (feat. SEBii)</i>.</p>
<p>ce sentiment que je décrivais comme indescriptible est perceptible sur les 3 dernières musiques de l'album, où Ethan se livre sur ses expériences de vie, ses émotions les plus sincères.</p>
<p>l'album se conclut sur <i>toi</i>, une chanson qui reviens sur ces dites expériences, sûrement amoureuses, passées, où il parle d'un <strong>toi</strong> inconnu, qu'il a aimé, sous toutes ses formes. laissant derrière lui tout ses efforts, ses convictions au travers de cette présumée relation.</p>
<p>cette musique se termine sur une voix mythique d'un personnage d'internet, le fameux <i>leroy jenkins</i> puissant qui symboliserait le laisser aller pur, le rentre dans le tas, le lâcher prise total, sur quoi ? sur la vie ? sur ses relations ? sur sa perception du monde qui nous entoure ? je ne sais pas, mais le message est là, et il est puissant.</p>
<p>et puis je me revois la, sur la plage, allongé sur le sable chaud, entrain de finir l'album sous un temps gris, avec des nuages, et je me dis à moi même que j'ai écouté à quelque chose de sacrément puissant et marquant, dont je vais me souvenir toute ma vie comme l'une des oeuvres les plus sincères auquelles j'ai pu écouter de toute ma vie.</p>
<p>alors merci pour tout 23wa pour ce bout de toi, j'ai hâte de te voir en concert un jour, ce serait certainement l'un des plus beaux jours de ma vie.</p>
<br>
<img src="/assets/draws/thxforreading.png" class="thanks">
<p style="color:#555; margin-bottom:0.8rem; font-size: small;">merci d'avoir lu cette review, c'est la toute première que je fais, alors oui c'est maladroit et certainement pas objectif, mais j'ai envie de dire que ce n'est pas le but de ce blog et de cette review. en espérant que ça vous ait plu !</p>
</div>
<div class="nav-albums">
<a href="u.html">U →</a>
</div>
</div>
<div class="col-cover">
<figure>
<img src="/assets/covers/az.jpg" alt="AZ - 23wa" class="cover"
onerror="this.style.display='none'">
<figcaption class="cover-legende">AZ, 2025</figcaption>
</figure>
</div>
</div>
<script>
const el = document.getElementById('titre-nav');
el.innerHTML = el.textContent.split('').map(c =>
c === ' ' ? ' ' : `<span style="display:inline-block;transform:translateY(${Math.floor(Math.random()*8)-4}px)">${c}</span>`
).join('');
</script>
</body>
</html>

32
reviews/data/albums.json Normal file
View file

@ -0,0 +1,32 @@
[
{
"id": "1",
"titre": "AZ",
"artiste": "23wa",
"annee": 2025,
"cover": "../../assets/covers/az.jpg",
"note": 9,
"genre": ["Epic Collage", "Art Pop"],
"favoris": true
},
{
"id": "2",
"titre": "U",
"artiste": "Underscores",
"annee": 2026,
"cover": "../../assets/covers/U.jpg",
"note": 9,
"genre": ["IDM", "Electronica"],
"favoris": true
},
{
"id": "3",
"titre": "Untrue",
"artiste": "Burial",
"annee": 2007,
"cover": "../../assets/covers/untrue.jpg",
"note": 10,
"genre": ["UK Garage", "Dubstep", "Ambient"],
"favoris": false
}
]

202
reviews/index.html Normal file
View file

@ -0,0 +1,202 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>reviews — eweng.space</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>☆</text></svg>">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&display=swap" rel="stylesheet">
<style>
body {
font-family: 'IM Fell English', serif;
font-size: 20px;
}
.fenetre {
max-width: 600px;
border: 1px solid black;
padding: 0.3rem 1.5rem 0 1.5rem;
padding-bottom: 0;
margin-top: 0px;
position: relative;
overflow-wrap: break-word;
}
.fenetre-nom {
margin-bottom: 1px;
margin-left: 2px;
}
.fenetre-contenu {
padding: 0 1rem 1.5rem 1rem;
min-width: 0;
}
/* ── nav retour ── */
.retour {
font-family: 'IM Fell English', serif;
font-size: 20px;
color: inherit;
display: inline-block;
margin-bottom: 1px;
margin-right: 0.4rem;
}
/* ── grille de covers ── */
.grille {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: 1rem;
}
.carte {
width: 150px;
cursor: pointer;
transition: transform 0.2s ease, opacity 0.25s ease;
position: relative;
}
.carte img {
width: 150px;
height: 150px;
object-fit: cover;
display: block;
border: 1px solid #111;
}
.carte .placeholder {
width: 150px;
height: 150px;
background: #eee;
border: 1px solid #111;
display: flex;
align-items: center;
justify-content: center;
font-style: italic;
color: #999;
font-size: 0.8rem;
text-align: center;
padding: 0.5rem;
}
.carte .nom {
margin-top: 0.3rem;
font-size: 0.8rem;
line-height: 1.3;
}
.carte .nom .artiste {
color: #555;
}
/* hover : assombrir les autres */
.grille.hovering .carte { opacity: 0.15; }
.grille.hovering .carte.actif {
opacity: 1;
transform: scale(1.07);
z-index: 10;
}
#overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0);
pointer-events: none;
transition: background 0.25s ease;
z-index: 5;
}
body.hovering-active #overlay {
background: rgba(0,0,0,0.5);
}
.badge-fav {
position: absolute;
top: 4px;
right: 4px;
font-size: 0.7rem;
background: #fff;
border: 1px solid #111;
padding: 1px 4px;
pointer-events: none;
}
</style>
</head>
<body>
<div id="overlay"></div>
<div>
<a href="../index.html" class="retour">←</a><span class="fenetre-nom" id="titre-nav">eweng.space &#9734;</span>
</div>
<div class="fenetre">
<div class="fenetre-contenu">
<h1>reviews</h1>
<p>ce que j'écoute et ce que j'en pense.</p>
<div class="grille" id="grille"></div>
</div>
</div>
<script>
function toSlug(titre) {
return titre
.toLowerCase()
.normalize('NFD').replace(/[\u0300-\u036f]/g, '')
.replace(/\s+/g, '-')
.replace(/[^a-z0-9-]/g, '');
}
fetch('data/albums.json')
.then(r => r.json())
.then(albums => {
const grille = document.getElementById('grille');
albums.forEach(album => {
const carte = document.createElement('div');
carte.className = 'carte';
const media = album.cover
? `<img src="${album.cover}" alt="${album.titre}" onerror="this.outerHTML='<div class=\\'placeholder\\'>${album.titre}</div>'">`
: `<div class="placeholder">${album.titre}</div>`;
const fav = album.favoris ? '<span class="badge-fav">♥</span>' : '';
carte.innerHTML = `
${fav}
${media}
<div class="nom">
${album.titre}<br>
<span class="artiste">${album.artiste}</span>
</div>
`;
carte.addEventListener('mouseenter', () => {
grille.classList.add('hovering');
carte.classList.add('actif');
document.body.classList.add('hovering-active');
});
carte.addEventListener('mouseleave', () => {
grille.classList.remove('hovering');
carte.classList.remove('actif');
document.body.classList.remove('hovering-active');
});
carte.addEventListener('click', () => {
window.location.href = `albums/${toSlug(album.titre)}.html`;
});
grille.appendChild(carte);
});
})
.catch(() => {
document.getElementById('grille').textContent = 'impossible de charger les albums.';
});
const el = document.getElementById('titre-nav');
el.innerHTML = el.textContent.split('').map(c =>
c === ' ' ? ' ' : `<span style="display:inline-block;transform:translateY(${Math.floor(Math.random()*8)-4}px)">${c}</span>`
).join('');
</script>
</body>
</html>