feat: add arts section and move FA and Itaku to it

index.html

@@ -268,7 +268,7 @@
                             <img class="absolute inset-0 object-cover w-full h-full -z-10 translate-y-[var(--transform-y,0)] transition-transform ease-out duration-[var(--transform-duration,150ms)]"
                                 alt="" src="./static/assets/photo_trains.png" data-section-image="photos" data-slide="5"
                                 data-photo="photo_trains" />
-                            <p class="font-bold text-4xl p-[8px]">PHOTOS</p>
+                            <p class="font-bold text-4xl p-[8px] w-full h-full bg-black bg-opacity-20 flex items-end justify-end">PHOTOS</p>
                         </div>
                     </div>
                     <a class="hover:border-bg-blue w-[170px] xs:flex-1 border-transparent border-2 border-solid transition-[border-color] aspect-square overflow-hidden rounded-lg"
@@ -302,6 +302,61 @@
                         </div>
                     </a>
                 </div>
+                <div class="flex flex-wrap w-full gap-1">
+                    <div
+                        class="w-full overflow-hidden border-2 border-transparent border-solid rounded-lg aspect-[2/1] max-h-[182px]">
+                        <div class="relative flex items-end justify-end w-full h-full overflow-hidden" id="arts-image">
+                            <img class="absolute inset-0 object-cover w-full h-full -z-10 translate-y-[var(--transform-y,0)] transition-transform ease-out duration-[var(--transform-duration,150ms)]"
+                                alt="" src="./static/assets/arts/art_sleepwithplush.jpg" data-section-image="arts"
+                                data-slide="0" data-photo="art_sleepwithplush" />
+                            <img class="absolute inset-0 object-cover w-full h-full -z-10 translate-y-[var(--transform-y,0)] transition-transform ease-out duration-[var(--transform-duration,150ms)]"
+                                alt="" src="./static/assets/arts/art_standing.jpg" data-section-image="arts"
+                                data-slide="1" data-photo="art_standing" />
+                            <img class="absolute inset-0 object-cover w-full h-full -z-10 translate-y-[var(--transform-y,0)] transition-transform ease-out duration-[var(--transform-duration,150ms)]"
+                                alt="" src="./static/assets/arts/art_sad.jpg" data-section-image="arts" data-slide="2"
+                                data-photo="art_sad" />
+                            <img class="absolute inset-0 object-cover w-full h-full -z-10 translate-y-[var(--transform-y,0)] transition-transform ease-out duration-[var(--transform-duration,150ms)]"
+                                alt="" src="./static/assets/arts/art_kiguboys.jpg" data-section-image="arts"
+                                data-slide="3" data-photo="art_kiguboys" />
+                            <img class="absolute inset-0 object-cover w-full h-full -z-10 translate-y-[var(--transform-y,0)] transition-transform ease-out duration-[var(--transform-duration,150ms)]"
+                                alt="" src="./static/assets/arts/art_hugs.jpg" data-section-image="arts" data-slide="4"
+                                data-photo="art_hugs" />
+                            <img class="absolute inset-0 object-cover w-full h-full -z-10 translate-y-[var(--transform-y,0)] transition-transform ease-out duration-[var(--transform-duration,150ms)]"
+                                alt="" src="./static/assets/arts/art_park.jpg" data-section-image="arts" data-slide="5"
+                                data-photo="art_park" />
+                            <img class="absolute inset-0 object-cover w-full h-full -z-10 translate-y-[var(--transform-y,0)] transition-transform ease-out duration-[var(--transform-duration,150ms)]"
+                                alt="" src="./static/assets/arts/art_blep.jpg" data-section-image="arts" data-slide="6"
+                                data-photo="art_blep" />
+                            <img class="absolute inset-0 object-cover w-full h-full -z-10 translate-y-[var(--transform-y,0)] transition-transform ease-out duration-[var(--transform-duration,150ms)]"
+                                alt="" src="./static/assets/arts/art_cheeseoncheese.jpg" data-section-image="arts"
+                                data-slide="7" data-photo="art_cheeseoncheese" />
+                            <p
+                                class="font-bold text-4xl p-[8px] w-full h-full bg-black bg-opacity-20 flex items-end justify-end">
+                                ARTS</p>
+                        </div>
+                    </div>
+                    <a class="hover:border-bg-blue aspect-square w-[170px] xs:[flex-grow:1] border-transparent border-2 border-solid transition-[border-color] overflow-hidden rounded-lg"
+                        href="https://furaffinity.net/user/radiquum" target="_blank" referrerpolicy="origin">
+                        <div class="flex flex-col justify-around w-full h-full p-4 text-white bg-[#715b38]">
+                            <img class="object-contain w-16 h-16 mx-auto" alt=""
+                                src="./static/assets/fur-affinity.png" />
+                            <div class="flex flex-col gap-1">
+                                <p class="text-2xl font-medium ">Furaffinity</p>
+                                <p class="text-base font-light ">radiquum</p>
+                            </div>
+                        </div>
+                    </a>
+                    <a class="hover:border-bg-blue w-[170px] xs:[flex-grow:1] aspect-square border-transparent border-2 border-solid transition-[border-color] overflow-hidden rounded-lg"
+                        href="https://itaku.ee/profile/radiquum" target="_blank" referrerpolicy="origin">
+                        <div class="flex flex-col justify-around w-full h-full p-4 text-black bg-[#ffeb3c]">
+                            <img class="object-contain w-16 h-16 mx-auto" alt="" src="./static/assets/itaku.png" />
+                            <div class="flex flex-col gap-1">
+                                <p class="text-2xl font-medium">Itaku</p>
+                                <p class="text-base font-light">radiquum</p>
+                            </div>
+                        </div>
+                    </a>
+                </div>
             </div>
 
             <div class="flex flex-col gap-4">
@@ -355,17 +410,6 @@
                             </div>
                         </div>
                     </a>
-                    <a class="hover:border-bg-blue aspect-square w-[170px] xs:[flex-grow:1] border-transparent border-2 border-solid transition-[border-color] overflow-hidden rounded-lg"
-                        href="https://furaffinity.net/user/radiquum" target="_blank" referrerpolicy="origin">
-                        <div class="flex flex-col justify-around w-full h-full p-4 text-white bg-[#715b38]">
-                            <img class="object-contain w-16 h-16 mx-auto" alt=""
-                                src="./static/assets/fur-affinity.png" />
-                            <div class="flex flex-col gap-1">
-                                <p class="text-2xl font-medium ">Furaffinity</p>
-                                <p class="text-base font-light ">radiquum</p>
-                            </div>
-                        </div>
-                    </a>
                     <a class="hover:border-bg-blue w-[170px] xs:[flex-grow:1] aspect-square border-transparent border-2 border-solid transition-[border-color] overflow-hidden rounded-lg"
                         href="https://t.me/radiquumprojects" target="_blank" referrerpolicy="origin">
                         <div class="flex flex-col justify-around w-full h-full p-4 text-white bg-[#2f7ca3]">
@@ -375,16 +419,6 @@
                             </div>
                         </div>
                     </a>
-                    <a class="hover:border-bg-blue w-[170px] xs:[flex-grow:1] aspect-square border-transparent border-2 border-solid transition-[border-color] overflow-hidden rounded-lg"
-                        href="https://itaku.ee/profile/radiquum" target="_blank" referrerpolicy="origin">
-                        <div class="flex flex-col justify-around w-full h-full p-4 text-black bg-[#ffeb3c]">
-                            <img class="object-contain w-16 h-16 mx-auto" alt="" src="./static/assets/itaku.png" />
-                            <div class="flex flex-col gap-1">
-                                <p class="text-2xl font-medium">Itaku</p>
-                                <p class="text-base font-light">radiquum</p>
-                            </div>
-                        </div>
-                    </a>
                 </div>
             </div>
 

static/script.js

@@ -119,7 +119,7 @@ function setPhotoSectionImagesMargin() {
   for (i = 1; i < photoSectionImages.length; i++) {
     photoSectionImages[i].style.setProperty(
       "--transform-y",
-      `calc(376px*-${i})`
+      `calc(372px*-${i})`
     );
     photoSectionImages[i].style.setProperty("display", `none`);
   }
@@ -133,7 +133,7 @@ function changePhotoSectionImage() {
   photoSectionImages[1].style.setProperty("display", `block`);
 
   setTimeout(() => {
-    photoSectionImages[0].style.setProperty("--transform-y", `376px`);
+    photoSectionImages[0].style.setProperty("--transform-y", `372px`);
     photoSectionImages[1].style.setProperty("--transform-y", `0px`);
   }, IMAGE_TRANSITION_DELAY / 2);
 
@@ -159,7 +159,70 @@ function changePhotoSectionImage() {
       );
       element.style.setProperty(
         "--transform-y",
-        `calc(376px*-${Number(element.getAttribute("data-slide")) - 1})`
+        `calc(372px*-${Number(element.getAttribute("data-slide")) - 1})`
+      );
+      element.setAttribute(
+        "data-slide",
+        Number(element.getAttribute("data-slide")) - 1
+      );
+    }
+  }, IMAGE_ANIMATION_DELAY + (IMAGE_TRANSITION_DELAY + 500));
+}
+
+function setArtsSectionImagesMargin() {
+  const artSectionImages = document.querySelectorAll(
+    "[data-section-image='arts']"
+  );
+  for (i = 0; i < artSectionImages.length; i++) {
+    artSectionImages[i].style.setProperty(
+      "--transform-duration",
+      `${IMAGE_TRANSITION_DELAY}ms`
+    );
+  }
+  for (i = 1; i < artSectionImages.length; i++) {
+    artSectionImages[i].style.setProperty(
+      "--transform-y",
+      `calc(186px*-${i})`
+    );
+    artSectionImages[i].style.setProperty("display", `none`);
+  }
+}
+
+function changeArtsSectionImage() {
+  const artSectionImages = document.querySelectorAll(
+    "[data-section-image='arts']"
+  );
+  const artSectionContainer = document.getElementById("arts-image");
+  artSectionImages[1].style.setProperty("display", `block`);
+
+  setTimeout(() => {
+    artSectionImages[0].style.setProperty("--transform-y", `186px`);
+    artSectionImages[1].style.setProperty("--transform-y", `0px`);
+  }, IMAGE_TRANSITION_DELAY / 2);
+
+  setTimeout(() => {
+    artSectionImages[0].style.setProperty("display", `none`);
+    const backEl = document
+      .querySelector(`[data-section-image='arts'][data-slide='0']`)
+      .cloneNode(true);
+    artSectionContainer.removeChild(
+      document.querySelector(`[data-section-image='arts'][data-slide='0']`)
+    );
+    backEl.setAttribute("data-slide", artSectionImages.length - 1);
+    artSectionContainer.appendChild(backEl);
+  }, IMAGE_ANIMATION_DELAY + IMAGE_TRANSITION_DELAY);
+
+  setTimeout(() => {
+    const artSectionImagesRev = document.querySelectorAll(
+      "[data-section-image='arts']"
+    );
+    for (i = 1; i < artSectionImagesRev.length; i++) {
+      const element = document.querySelector(
+        `[data-section-image='arts'][data-slide='${i}']`
+      );
+      element.style.setProperty(
+        "--transform-y",
+        `calc(186px*-${Number(element.getAttribute("data-slide")) - 1})`
       );
       element.setAttribute(
         "data-slide",
@@ -174,4 +237,6 @@ window.onload = () => {
   setInterval(updatePlayingTrack, 180000);
   setPhotoSectionImagesMargin();
   setInterval(changePhotoSectionImage, IMAGE_CHANGE_DELAY);
+  setArtsSectionImagesMargin();
+  setInterval(changeArtsSectionImage, IMAGE_CHANGE_DELAY);
 };

static/tailwind.css

@@ -1081,6 +1081,11 @@ video {
   background-color: rgb(255 235 60 / var(--tw-bg-opacity));
 }
 
+.bg-slate-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(100 116 139 / var(--tw-bg-opacity));
+}
+
 .bg-opacity-40 {
   --tw-bg-opacity: 0.4;
 }
@@ -1089,6 +1094,14 @@ video {
   --tw-bg-opacity: 0.5;
 }
 
+.bg-opacity-10 {
+  --tw-bg-opacity: 0.1;
+}
+
+.bg-opacity-20 {
+  --tw-bg-opacity: 0.2;
+}
+
 .object-contain {
   -o-object-fit: contain;
      object-fit: contain;
@@ -1153,6 +1166,10 @@ video {
   text-align: right;
 }
 
+.align-text-bottom {
+  vertical-align: text-bottom;
+}
+
 .text-2xl {
   font-size: 1.5rem;
   line-height: 2rem;
@@ -1219,15 +1236,56 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.text-gray-500 {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+
 .underline {
   text-decoration-line: underline;
 }
 
+.mix-blend-multiply {
+  mix-blend-mode: multiply;
+}
+
+.mix-blend-exclusion {
+  mix-blend-mode: exclusion;
+}
+
+.shadow {
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-md {
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-inner {
+  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-black {
+  --tw-shadow-color: #000;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
 .brightness-50 {
   --tw-brightness: brightness(.5);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
+.invert {
+  --tw-invert: invert(100%);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
@@ -1238,6 +1296,12 @@ video {
   backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
 }
 
+.backdrop-invert {
+  --tw-backdrop-invert: invert(100%);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
+
 .transition-\[border-color\] {
   transition-property: border-color;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);