Init repo

The-Last-Inuit · Jan 14, 2024 · 14d216f · 14d216f
commit 14d216f
Show file tree

Hide file tree

Showing 17 changed files with 124 additions and 0 deletions.
diff --git a/1.jpg b/1.jpg
diff --git a/10.jpg b/10.jpg
diff --git a/11.jpg b/11.jpg
diff --git a/12.jpg b/12.jpg
diff --git a/13.jpg b/13.jpg
diff --git a/14.jpg b/14.jpg
diff --git a/15.jpg b/15.jpg
diff --git a/2.jpg b/2.jpg
diff --git a/3.jpg b/3.jpg
diff --git a/4.jpg b/4.jpg
diff --git a/5.jpg b/5.jpg
diff --git a/6.jpg b/6.jpg
diff --git a/7.jpg b/7.jpg
diff --git a/8.jpg b/8.jpg
diff --git a/9.jpg b/9.jpg
diff --git a/CNAME b/CNAME
@@ -0,0 +1 @@
+gianellalarreategui.com
diff --git a/index.html b/index.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Gianella Larreátegui Garcia | Modelo, Artista, Bailarina, Cantante</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+
+    <style>
+    body {
+      margin: 0;
+      padding: 0;
+      overflow: hidden;
+      background: #000;
+    }
+
+    .bg-container {
+      height: 100vh;
+      width: 100vw;
+      background-size: cover;
+      background-position: center;
+      background-attachment: fixed; /* Keep the background fixed while scrolling */
+      transition: opacity 0.333s ease-in-out;
+      position: fixed;
+    }
+
+    .content {
+      max-width: 800px;
+      margin: 0 auto;
+      padding: 40px;
+      color: #FFF;
+      text-align: center;
+      position: fixed;
+      left: calc(50% - 225px);
+      top: 1064px;
+    }
+    </style>
+
+    <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          colors: {
+            clifford: '#da373d',
+          }
+        }
+      }
+    }
+    </script>
+  </head>
+
+  <body style="transform:translateY(0px)">
+    <div class="bg-container" style="background-image: url('1.jpg')"></div>
+    <div class="bg-container" style="background-image: url('2.jpg')"></div>
+    <div class="bg-container" style="background-image: url('3.jpg')"></div>
+    <div class="bg-container" style="background-image: url('4.jpg')"></div>
+    <div class="bg-container" style="background-image: url('5.jpg')"></div>
+    <div class="bg-container" style="background-image: url('6.jpg')"></div>
+    <div class="bg-container" style="background-image: url('7.jpg')"></div>
+    <div class="bg-container" style="background-image: url('8.jpg')"></div>
+    <div class="bg-container" style="background-image: url('9.jpg')"></div>
+    <div class="bg-container" style="background-image: url('10.jpg')"></div>
+    <div class="bg-container" style="background-image: url('11.jpg')"></div>
+    <div class="bg-container" style="background-image: url('12.jpg')"></div>
+    <div class="bg-container" style="background-image: url('13.jpg')"></div>
+    <div class="bg-container" style="background-image: url('14.jpg')"></div>
+    <div class="bg-container" style="background-image: url('15.jpg')"></div>
+
+    <div class="content">
+      <h1 class="text-4xl font-bold mb-4">Gianella Larreátegui Garcia</h1>
+      <p class="text-lg">Modelo | Artista | Bailarina | Cantante</p>
+      <p class="text-lg"><a href="tel:+528119163582">+52.811.916.3582</a> | <a href="mailto:[email protected]">[email protected]</a></p>
+    </div>
+
+    <script>
+    document.addEventListener("wheel", function (e) {
+      var oldVal = parseInt(document.body.style.transform.replace("translateY(","").replace("px)",""));
+      var variation = parseInt(e.deltaY);
+      const bgContainers = document.querySelectorAll('.bg-container');
+      const content = document.querySelector('.content');
+
+      document.body.style.transform = "translateY(" + (oldVal - variation) + "px)";
+
+      if ((oldVal - variation) > bgContainers[0].offsetHeight) 
+        document.body.style.transform = "translateY(" + bgContainers[0].offsetHeight + "px)";
+      if ((oldVal - variation) < -1*bgContainers[0].offsetHeight) 
+        document.body.style.transform = "translateY(-" + bgContainers[0].offsetHeight + "px)";
+
+      let currentImageIndex = 0;
+      const scrollPosition = oldVal - variation;
+      const height = bgContainers[0].offsetHeight / 15;
+      const limit = bgContainers[0].offsetHeight;
+
+      bgContainers.forEach((node, index) => {
+        node.style.top = `${-1*scrollPosition}px`;
+        content.style.top = `calc(${-1*scrollPosition}px + ${0.80*node.offsetHeight}px)`;
+      })
+
+      const absScrollPosition = Math.abs(scrollPosition);
+
+      if (absScrollPosition < limit) {
+        bgContainers[0].style.opacity = ((absScrollPosition >= 0) && (absScrollPosition <= height)) ? 1 : 0;
+        bgContainers[1].style.opacity = ((absScrollPosition > height) && (absScrollPosition <= height*2)) ? 1 : 0;
+        bgContainers[2].style.opacity = ((absScrollPosition > height*2) && (absScrollPosition <= height*3)) ? 1 : 0;
+        bgContainers[3].style.opacity = ((absScrollPosition > height*3) && (absScrollPosition <= height*4)) ? 1 : 0;
+        bgContainers[4].style.opacity = ((absScrollPosition > height*4) && (absScrollPosition <= height*5)) ? 1 : 0;
+        bgContainers[5].style.opacity = ((absScrollPosition > height*5) && (absScrollPosition <= height*6)) ? 1 : 0;
+        bgContainers[6].style.opacity = ((absScrollPosition > height*6) && (absScrollPosition <= height*7)) ? 1 : 0;
+        bgContainers[7].style.opacity = ((absScrollPosition > height*7) && (absScrollPosition <= height*8)) ? 1 : 0;
+        bgContainers[8].style.opacity = ((absScrollPosition > height*8) && (absScrollPosition <= height*9)) ? 1 : 0;
+        bgContainers[9].style.opacity = ((absScrollPosition > height*9) && (absScrollPosition <= height*10)) ? 1 : 0;
+        bgContainers[10].style.opacity = ((absScrollPosition > height*10) && (absScrollPosition <= height*11)) ? 1 : 0;
+        bgContainers[11].style.opacity = ((absScrollPosition > height*11) && (absScrollPosition <= height*12)) ? 1 : 0;
+        bgContainers[12].style.opacity = ((absScrollPosition > height*12) && (absScrollPosition <= height*13)) ? 1 : 0;
+        bgContainers[13].style.opacity = ((absScrollPosition > height*13) && (absScrollPosition <= height*14)) ? 1 : 0;
+        bgContainers[14].style.opacity = ((absScrollPosition > height*14) && (absScrollPosition <= height*15)) ? 1 : 0;
+      }
+
+      return false;
+    }, true);
+    </script>
+  </body>
+</html>