ambient background thing and change song

bio/assets/pause.svg

@@ -1,6 +1 @@
-<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="-1 0 8 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#ffffff" style="--darkreader-inline-fill: var(--darkreader-background-ffffff, #181a1b);" data-darkreader-inline-fill=""><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title>pause [#ffffff]</title> <desc>Created with Sketch.</desc> <defs> </defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" style="--darkreader-inline-stroke: none;" data-darkreader-inline-stroke=""> <g id="Dribbble-Light-Preview" transform="translate(-227.000000, -3765.000000)" fill="#ffffff" style="--darkreader-inline-fill: var(--darkreader-background-ffffff, #181a1b);" data-darkreader-inline-fill=""> <g id="icons" transform="translate(56.000000, 160.000000)"> <path d="M172,3605 C171.448,3605 171,3605.448 171,3606 L171,3612 C171,3612.552 171.448,3613 172,3613 C172.552,3613 173,3612.552 173,3612 L173,3606 C173,3605.448 172.552,3605 172,3605 M177,3606 L177,3612 C177,3612.552 176.552,3613 176,3613 C175.448,3613 175,3612.552 175,3612 L175,3606 C175,3605.448 175.448,3605 176,3605 C176.552,3605 177,3605.448 177,3606" id="pause-[#ffffff]"> </path> </g> </g> </g> </g></svg>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="512px" height="512px" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" xmlns:xlink="http://www.w3.org/1999/xlink">
-<g><path style="opacity:0.989" fill="#ffffff" d="M 109.5,-0.5 C 117.5,-0.5 125.5,-0.5 133.5,-0.5C 164.186,6.35023 183.686,25.0169 192,55.5C 193.155,122.141 193.655,188.807 193.5,255.5C 193.655,322.193 193.155,388.859 192,455.5C 183.686,485.983 164.186,504.65 133.5,511.5C 125.5,511.5 117.5,511.5 109.5,511.5C 73.7039,502.963 53.8706,480.296 50,443.5C 49.3333,318.167 49.3333,192.833 50,67.5C 53.8706,30.7036 73.7039,8.03692 109.5,-0.5 Z"/></g>
-<g><path style="opacity:0.989" fill="#ffffff" d="M 377.5,-0.5 C 385.5,-0.5 393.5,-0.5 401.5,-0.5C 437.597,8.30243 457.43,31.3024 461,68.5C 461.667,193.167 461.667,317.833 461,442.5C 457.43,479.698 437.597,502.698 401.5,511.5C 393.5,511.5 385.5,511.5 377.5,511.5C 346.814,504.65 327.314,485.983 319,455.5C 317.845,388.859 317.345,322.193 317.5,255.5C 317.345,188.807 317.845,122.141 319,55.5C 327.314,25.0169 346.814,6.35023 377.5,-0.5 Z"/></g>
-</svg>

bio/assets/play.svg

@@ -1,5 +1 @@
-<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="-0.5 0 7 7" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000" style="--darkreader-inline-fill: var(--darkreader-background-000000, #000000);" data-darkreader-inline-fill=""><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title>play [#ffffff]</title> <desc>Created with Sketch.</desc> <defs> </defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" style="--darkreader-inline-stroke: none;" data-darkreader-inline-stroke=""> <g id="Dribbble-Light-Preview" transform="translate(-347.000000, -3766.000000)" fill="#ffffff" style="--darkreader-inline-fill: var(--darkreader-background-ffffff, #181a1b);" data-darkreader-inline-fill=""> <g id="icons" transform="translate(56.000000, 160.000000)"> <path d="M296.494737,3608.57322 L292.500752,3606.14219 C291.83208,3605.73542 291,3606.25002 291,3607.06891 L291,3611.93095 C291,3612.7509 291.83208,3613.26444 292.500752,3612.85767 L296.494737,3610.42771 C297.168421,3610.01774 297.168421,3608.98319 296.494737,3608.57322" id="play-[#ffffff]"> </path> </g> </g> </g> </g></svg>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="512px" height="512px" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" xmlns:xlink="http://www.w3.org/1999/xlink">
-<g><path style="opacity:0.995" fill="#ffffff" d="M 47.5,-0.5 C 52.1667,-0.5 56.8333,-0.5 61.5,-0.5C 198.065,77.4539 334.398,155.954 470.5,235C 480.366,243.134 483.199,253.301 479,265.5C 476.925,269.579 474.092,273.079 470.5,276C 334.398,355.046 198.065,433.546 61.5,511.5C 56.8333,511.5 52.1667,511.5 47.5,511.5C 39.5191,508.351 34.0191,502.684 31,494.5C 30.3333,335.167 30.3333,175.833 31,16.5C 34.0191,8.31563 39.5191,2.64896 47.5,-0.5 Z"/></g>
-</svg>

bio/audio.js

@@ -4,7 +4,13 @@ const songs = [
         src: "https://atums.world/raw/epic%206455.mp4",
         duration: 106
     },
-    
+
+    {
+        song: "Tenkay - Jerry Springer Based Freestyle",
+        src: "https://atums.world/raw/2025-05-08_22%3A08%3A44.mp4",
+        duration: 179 
+    },
+
     {
         song: "YABUJIN - Open",
         src: "https://easyfiles.cc/2025/5/5a9bf2f5-3844-4e0c-8dfb-943012f4acd8/YABUJIN%20-%20open.mp4",
@@ -17,13 +23,7 @@ const songs = [
         duration: 100
     },
 
-    {
+	{
-        song: "Joeyy - PR Package",
-        src: "https://easyfiles.cc/2024/8/7c649f45-6573-4665-9675-4d869ea1332a/youtube_ZvphwrKo52s_1280x720_h264(1).mp4",
-        duration: 111
-    },
-
-    {
         song: "woody - Heaven & Hell",
         src: "https://easyfiles.cc/2024/9/20fa08a2-8212-4212-93b7-9c62fc563505/woody%20heaven%20&%20hell%20prod.%201mint%20-%20real1woody%20(1080p,%20h264)(1).mp4",
         duration: 142

bio/index.html

@@ -21,11 +21,12 @@
 
     <div class="video-container">
         <video id="videoPlayer"></video>
+		<canvas id="ambient-canvas"></canvas>
     </div>
 
     <div class="player" id="player">
         <div>
-            <img class="pfp" id="pfp" src="https://easyfiles.cc/2024/12/a3046d6f-a1b1-415a-8f55-8981a8e45ddb/3ccc13a2825eb8c98b5371fa0706e450.webp">
+            <img class="pfp" id="pfp" src="https://cdn.discordapp.com/avatars/1201415921802170388/3ccc13a2825eb8c98b5371fa0706e450.webp?size=1024&width=640&height=640">
             <div class="tooltip" data-tooltip="" id="status"></div>
         </div>
         <div data-tooltip="" class="tooltip" id="name">zyqunix</div>

bio/index.js

@@ -1,8 +1,6 @@
 const messages = [
-    "PinkPantheress 💘💘💖🥰",
-    "lispnb and pluggnb 💖💖",
     "woody.. my dearest 🥰💓",
-    "Donate Crypto!",
+    "giv crypto",
     "iluvshed",
     "#lacethemwithfent",
     "#lifeiseasy",
@@ -88,7 +86,7 @@ document.addEventListener("DOMContentLoaded", function () {
     updateTitle();
 });
 
-let clickToEnterOverlay = document.getElementById("clickToEnter");
+const clickToEnterOverlay = document.getElementById("clickToEnter");
 clickToEnterOverlay.onclick = () => {
     clickToEnterOverlay.style.transition = '0.75s';
     clickToEnterOverlay.style.opacity = '0';
@@ -98,7 +96,7 @@ clickToEnterOverlay.onclick = () => {
     main.style.marginTop = "0px";
 
     videoPlayer.play();
-    playPauseButton.innerHTML = "❚❚";
+    document.getElementById('plIcon').src = "./assets/pause.svg";
     isPlaying = !isPlaying;
 
     typeWriter();
@@ -140,3 +138,24 @@ document.addEventListener("DOMContentLoaded", () => {
         });
     });
 });
+
+const canvas = document.getElementById('ambient-canvas');
+const ctx = canvas.getContext('2d');
+const video = document.getElementById('videoPlayer')
+
+function resizeCanvas() {
+    canvas.width = video.videoWidth;
+    canvas.height = video.videoHeight;
+}
+
+video.addEventListener('loadeddata', () => {
+    resizeCanvas();
+    drawLoop();
+});
+
+function drawLoop() {
+    if (!video.paused && !video.ended) {
+        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+    }
+    requestAnimationFrame(drawLoop);
+}

bio/style.css

@@ -543,13 +543,19 @@ div[id="name"]::after {
 }
 
 #bkIcon,
-#fwIcon {
+#fwIcon,
-	filter: invert(100%);
+#plIcon {
 	transition: 0.1s;
 	margin: 5px;
+	height: 16px;
 }
 
-#bkIcon:not(:hover),
+#ambient-canvas {
-#fwIcon:not(:hover) {
+    position: absolute;
-	filter: invert(1) brightness(86.6%) grayscale(1) !important;
+    top: 0;
+    left: 0;
+    z-index: -1;
+    width: 100%;
+    height: 100%;
+	filter: brightness(50%) blur(1000px);
 }