update photos, add new photos, add new music, fix dead links in music…

….html, remove old wallpapers

page/music.html

@@ -64,7 +64,8 @@
 					<hr />
 					<div>
 						<div style="float: right" class="flex flex-col gap-2">
-							<img src="music/2024/golden-years.jpg" alt="" width="128px" />
+							<img src="music/2024/golden-years.jpg" alt="" width="256px" />
+							<img src="music/2024/ywwdy.jpg" alt="" width="256px" />
 						</div>
 						<ul>
 							<a class="retag" href="music/2024/01 20 2024 coming to a realization.ogg"></a>
@@ -88,13 +89,15 @@
 							<a class="retag" href="music/2024/2024 07 04.ogg"></a>
 							<a class="retag" href="music/2024/2024-07-06-demo.ogg"></a>
 							<a class="retag" href="music/2024/2024-07-11.ogg"></a>
+							<a class="retag" href="music/2024/2024-08-11.ogg"></a>
 
 							<hr />
 
 							<a href="music/2024/25 03 2024.ogg">Shine Onto Me cover (early)</a>
 
 							<hr />
 
+							<a href="https://soundcloud.com/shibesongs/you-will-destroy-you">You Will Destroy You</a>
 							<a href="https://soundcloud.com/shibesongs/sets/golden-years">Golden Years (album)</a>
 						</ul>
 					</div>
@@ -160,31 +163,31 @@
 							<a class="retag" href="music/2023/tapedust probably final 09-10-2023.ogg"></a>
 
 							<hr />
-							<a class="retag" href="music/2023/atmo.ogg"></a>
-							<a class="retag" href="music/2023/dick suck.ogg"></a>
-							<a class="retag" href="music/2023/dl temp theme.ogg"></a>
-							<a class="retag" href="music/2023/dream 02 09 2023.ogg"></a>
-							<a class="retag" href="music/2023/drum80s.ogg"></a>
-							<a class="retag" href="music/2023/drummetal.ogg"></a>
-							<a class="retag" href="music/2023/drumtest.ogg"></a>
-							<a class="retag" href="music/2023/fewfqw.ogg"></a>
-							<a class="retag" href="music/2023/fgwegereqgqwerrweheqhweghe.ogg"></a>
-							<a class="retag" href="music/2023/HOW INTERESTING.ogg"></a>
-							<a class="retag" href="music/2023/idk lol 20 06 2023.ogg"></a>
-							<a class="retag" href="music/2023/iwegjiowgjkqwe.ogg"></a>
-							<a class="retag" href="music/2023/kys.ogg"></a>
-							<a class="retag" href="music/2023/lonely world.ogg"></a>
-							<a class="retag" href="music/2023/project.ogg"></a>
-							<a class="retag" href="music/2023/riff.ogg"></a>
-							<a class="retag" href="music/2023/snow 2.ogg"></a>
-							<a class="retag" href="music/2023/test.ogg"></a>
-							<a class="retag" href="music/2023/the only rightful one.ogg"></a>
-							<a class="retag" href="music/2023/the world looks white.ogg"></a>
-							<a class="retag" href="music/2023/the world looks white_3.ogg"></a>
-							<a class="retag" href="music/2023/thing 27 09 2023.ogg"></a>
-							<a class="retag" href="music/2023/wuif`we80rfj.ogg"></a>
-							<a class="retag" href="music/2023/whatever teh fuck this is.ogg"></a>
-							<a class="retag" href="music/2023/untitledidk.ogg"></a>
+							<a class="retag" href="music/2023/garbage/atmo.ogg"></a>
+							<a class="retag" href="music/2023/garbage/dick suck.ogg"></a>
+							<a class="retag" href="music/2023/garbage/dl temp theme.ogg"></a>
+							<a class="retag" href="music/2023/garbage/dream 02 09 2023.ogg"></a>
+							<a class="retag" href="music/2023/garbage/drum80s.ogg"></a>
+							<a class="retag" href="music/2023/garbage/drummetal.ogg"></a>
+							<a class="retag" href="music/2023/garbage/drumtest.ogg"></a>
+							<a class="retag" href="music/2023/garbage/fewfqw.ogg"></a>
+							<a class="retag" href="music/2023/garbage/fgwegereqgqwerrweheqhweghe.ogg"></a>
+							<a class="retag" href="music/2023/garbage/HOW INTERESTING.ogg"></a>
+							<a class="retag" href="music/2023/garbage/idk lol 20 06 2023.ogg"></a>
+							<a class="retag" href="music/2023/garbage/iwegjiowgjkqwe.ogg"></a>
+							<a class="retag" href="music/2023/garbage/kys.ogg"></a>
+							<a class="retag" href="music/2023/garbage/lonely world.ogg"></a>
+							<a class="retag" href="music/2023/garbage/project.ogg"></a>
+							<a class="retag" href="music/2023/garbage/riff.ogg"></a>
+							<a class="retag" href="music/2023/garbage/snow 2.ogg"></a>
+							<a class="retag" href="music/2023/garbage/test.ogg"></a>
+							<a class="retag" href="music/2023/garbage/the only rightful one.ogg"></a>
+							<a class="retag" href="music/2023/garbage/the world looks white.ogg"></a>
+							<a class="retag" href="music/2023/garbage/the world looks white_3.ogg"></a>
+							<a class="retag" href="music/2023/garbage/thing 27 09 2023.ogg"></a>
+							<a class="retag" href="music/2023/garbage/wuif`we80rfj.ogg"></a>
+							<a class="retag" href="music/2023/garbage/whatever teh fuck this is.ogg"></a>
+							<a class="retag" href="music/2023/garbage/untitledidk.ogg"></a>
 
 							<hr />
 

page/wallpapers.html

@@ -35,6 +35,25 @@
 			img {
 				margin-top: 0rem;
 			}
+
+			.clickable {
+				cursor: pointer;
+			}
+
+			.renderer-visible {
+				width: 100vw;
+				height: 100vh;
+				background-color: rgba(0, 0, 0, 50%);
+				position: fixed;
+				top: 0;
+				left: 0;
+			}
+
+			.img-tooltip {
+				position: fixed;
+				bottom: 0;
+				left: 0;
+			}
 		</style>
 
 		<title>wallpapers - blackshibe</title>
@@ -47,32 +66,135 @@
 				<div class="custom-card">
 					<p class="custom-heading">random photos i took</p>
 					<hr />
+					<p>
+						everything is taken on an Xperia in RAW, then edited in a morally right copy of Adobe Lightroom.
+						I don't own proper camera gear.
+					</p>
+				</div>
+
+				<div class="custom-card">
+					<p class="custom-heading">2024 08 14</p>
+					<hr />
+					<div>
+						<div class="grid grid-cols-2 gap-2">
+							<img src="photo/2024-08-14/20240814_184708-2.jpg" alt="" />
+							<img src="photo/2024-08-14/20240814_190044.jpg" alt="" />
+							<img src="photo/2024-08-14/20240814_192543.jpg" alt="" />
+							<img src="photo/2024-08-14/20240814_190657.jpg" alt="" />
+							<img src="photo/2024-08-14/20240814_164903.jpg" alt="" />
+							<img src="photo/2024-08-14/20240814_191433-2.jpg" alt="" />
+							<img src="photo/2024-08-14/20240814_191332.jpg" alt="" />
+							<img src="photo/2024-08-14/20240814_183858.jpg" alt="" />
+						</div>
+					</div>
+				</div>
+
+				<div class="custom-card">
+					<p class="custom-heading">2024 08 13</p>
+					<hr />
+					<div>
+						<div class="grid grid-cols-2 gap-2">
+							<img src="photo/2024-08-13/20240812_181300-2.jpg" alt="" />
+							<img src="photo/2024-08-13/20240812_190752.jpg" alt="" />
+							<img src="photo/2024-08-13/20240812_180642.jpg" alt="" />
+							<img src="photo/2024-08-13/20240812_180400.jpg" alt="" />
+							<img src="photo/2024-08-13/20240812_201025.jpg" alt="" />
+							<img src="photo/2024-08-13/20240812_200523.jpg" alt="" />
+
+							<!-- <img src="photo/2024-08-13/20240812_175015.jpg" alt="" /> not that good
+							<img src="photo/2024-08-13/20240812_175427.jpg" alt="" />
+							<img src="photo/2024-08-13/20240812_175551.jpg" alt="" />
+							<img src="photo/2024-08-13/20240812_175602.jpg" alt="" /> -->
+						</div>
+					</div>
+				</div>
+
+				<div class="custom-card">
+					<p class="custom-heading">2024 07 27</p>
+					<hr />
+					<div>
+						<div class="grid grid-cols-2 gap-2">
+							<img src="photo/29 07 2024/20240727_120354.jpg" alt="" />
+							<img src="photo/29 07 2024/20240727_161114.jpg" alt="" />
+							<img src="photo/29 07 2024/20240727_183213.jpg" alt="" />
+							<img src="photo/29 07 2024/20240727_171006.jpg" alt="" />
+							<img src="photo/29 07 2024/20240727_191211.jpg" alt="" />
+							<img src="photo/29 07 2024/20240727_182217.jpg" alt="" />
+							<img src="photo/29 07 2024/20240727_194949.jpg" alt="" />
+							<img src="photo/29 07 2024/20240727_194945.jpg" alt="" />
+							<img src="photo/29 07 2024/20240727_145047.jpg" alt="" />
+							<img src="photo/29 07 2024/20240727_172045.jpg" alt="" />
+						</div>
+					</div>
+				</div>
 
-					<div class="grid grid-cols-2 gap-2">
-						<img src="photo/29 07 2024/20240727_120354.jpg" alt="" />
-						<img src="photo/29 07 2024/20240727_125454.jpg" alt="" />
-						<img src="photo/29 07 2024/20240727_130450.jpg" alt="" />
-						<img src="photo/29 07 2024/20240727_185659-Enhanced-NR.jpg" alt="" />
-						<img src="photo/29 07 2024/20240727_165607.jpg" alt="" />
-						<img src="photo/29 07 2024/20240727_161114.jpg" alt="" />
-						<img src="photo/29 07 2024/20240727_183213.jpg" alt="" />
-						<img src="photo/29 07 2024/20240727_171006.jpg" alt="" />
-						<img src="photo/29 07 2024/20240727_191211.jpg" alt="" />
-						<img src="photo/29 07 2024/20240727_182217.jpg" alt="" />
-						<img src="photo/29 07 2024/20240727_194949.jpg" alt="" />
-						<img src="photo/29 07 2024/20240727_194945.jpg" alt="" />
-						<img src="photo/17 07 2024/20240717_172930.jpg" alt="" />
-						<img src="photo/17 07 2024/20240717_182554-Enhanced-NR.jpg" alt="" />
-						<img src="photo/29 07 2024/20240727_145047.jpg" alt="" />
-						<img src="photo/29 07 2024/20240727_172045.jpg" alt="" />
-						<img src="wallpaper/DSC_0102.JPG" alt="" />
-						<img src="wallpaper/DSC_0008.JPG" alt="" />
+				<div class="custom-card">
+					<p class="custom-heading">old</p>
+					<hr />
+					<div>
+						<div class="grid grid-cols-2 gap-2">
+							<img src="photo/17 07 2024/20240717_172930.jpg" alt="" />
+							<img src="photo/17 07 2024/20240717_182554-Enhanced-NR.jpg" alt="" />
+							<img src="wallpaper/DSC_0102.JPG" alt="" />
+							<img src="wallpaper/DSC_0008.JPG" alt="" />
+						</div>
 					</div>
 				</div>
 			</article>
 			<div style="height: 25vh"></div>
 		</div>
 
 		<div class="custom-bg-opaque custom-fixed-bg bg-image-4"></div>
+		<div id="img-renderer" class="p-6 flex justify-center items-center clickable transition-all hidden"></div>
+		<div id="img-tooltip" class="hidden text-white m-auto w-screen text-center mb-6 transition-all">
+			none of the photos are compressed. right click -> save image if you want to download this photo
+		</div>
+
+		<script>
+			// i don't need a fucking plugin for an image viewer.
+			// i am a completely sane person and can just write my own in javascript in 10 minutes!!
+			// can't be that fucking hard right ???
+			let state = { image: undefined };
+			let image_renderer = document.getElementById("img-renderer");
+			let image_tooltip = document.getElementById("img-tooltip");
+
+			function render() {
+				if (!state.image) {
+					image_renderer.innerHTML = "";
+					image_renderer.classList.remove("renderer-visible");
+					image_tooltip.classList.remove("img-tooltip");
+
+					image_renderer.classList.add("hidden");
+					image_tooltip.classList.add("hidden");
+
+					return;
+				}
+
+				image_renderer.classList.remove("hidden");
+				image_tooltip.classList.remove("hidden");
+
+				image_tooltip.classList.add("img-tooltip");
+				image_renderer.classList.add("renderer-visible");
+
+				let image = document.createElement("img");
+				image.setAttribute("src", state.image);
+				image.classList.add("mb-20", "max-h-full");
+
+				image_renderer.appendChild(image);
+			}
+
+			image_renderer.addEventListener("click", () => {
+				state.image = undefined;
+				render();
+			});
+
+			for (let img of document.getElementsByTagName("img")) {
+				img.classList.add("clickable");
+				img.addEventListener("click", () => {
+					state.image = img.getAttribute("src");
+					render();
+				});
+			}
+		</script>
 	</body>
 </html>