Updated 5 files and added 15 files (automated)

20 files changed, 356 insertions, 10 deletions

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..5e46596
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+cache
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 0000000..35eb1dd
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/Icon
 b/Icon

new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/Icon

diff --git a/README.md b/README.md
index 1d8ff94..cd11b6e 100644
--- a/README.md
+++ b/README.md
@@ -2,9 +2,8 @@
 
 ## Pages
 - [x] Intro page
-- [ ] Projects list
-- [ ] Plurality
-- [ ] MLP
+- [x] Projects list
+- [x] MLP
 - [ ] Links
   - [ ] Contact
   - [ ] Blog
diff --git a/assets/items.png b/assets/items.png
new file mode 100644
index 0000000..16f25e3
--- /dev/null
+++ b/assets/items.png
diff --git a/assets/mlp.png b/assets/mlp.png
new file mode 100755
index 0000000..5a52f85
--- /dev/null
+++ b/assets/mlp.png
diff --git a/assets/mlp2.png b/assets/mlp2.png
new file mode 100755
index 0000000..6070406
--- /dev/null
+++ b/assets/mlp2.png
diff --git a/assets/mlp3.png b/assets/mlp3.png
new file mode 100755
index 0000000..90a69ca
--- /dev/null
+++ b/assets/mlp3.png
diff --git a/css/base.css b/css/base.css
index 06e4736..751e98d 100644
--- a/css/base.css
+++ b/css/base.css
@@ -7,4 +7,40 @@ html, body {
     margin: 0;
     background: #111;
     color: white;
+}
+
+.uni-foreground-title-alt {
+    z-index: 1;
+    font-weight: normal;
+    line-height: 48px;
+    font-size: 48px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    opacity: 0;
+    margin: 20px auto 0;
+    width: max-content;
+    backdrop-filter: blur(20px);
+    background: rgba(17, 17, 17, .25);
+    padding: 10px 30px;
+    border-radius: 999px;
+}
+
+.alt-titles-container {
+    text-align: center;
+}
+
+h1.title-visible {
+    opacity: 1 !important;
+    transition: opacity 500ms !important;
+}
+
+h1.title-hidden {
+    opacity: 0 !important;
+    transition: opacity 500ms !important;
+}
+
+#box-skip {
+    height: 25vh;
 }
\ No newline at end of file
diff --git a/css/box-1.css b/css/box-1.css
index 59eb4a9..f208fa0 100644
--- a/css/box-1.css
+++ b/css/box-1.css
@@ -10,6 +10,7 @@
     left: 0;
     right: 0;
     bottom: 0;
+    pointer-events: none;
 }
 
 #box-1-background-cover {
@@ -49,7 +50,7 @@
 #uni-foreground-content-title {
     opacity: 0;
     font-weight: normal;
-    margin: 20px 0 0;
+    margin: 40px 0 0;
     line-height: 48px;
     font-size: 48px;
 }
diff --git a/css/box-2.css b/css/box-2.css
new file mode 100644
index 0000000..328703d
--- /dev/null
+++ b/css/box-2.css
@@ -0,0 +1,33 @@
+#box-2 {
+    height: max-content;
+}
+
+#box-2-foreground {
+    padding-top: 350px;
+    padding-left: 5vw;
+    padding-right: 5vw;
+    height: max-content;
+}
+
+#box-2-foreground-projects {
+    display: grid;
+    grid-template-columns: repeat(10, 1fr);
+    grid-template-rows: repeat(6, 1fr);
+    width: 100%;
+}
+
+.box-2-foreground-project-icon {
+    width: 100%;
+    height: 100%;
+    aspect-ratio: 1/1;
+    transition: opacity 200ms;
+    opacity: 0;
+}
+
+#box-2-foreground.hidden .box-2-foreground-project-icon {
+    transition-delay: 0ms !important;
+}
+
+#box-2-foreground.visible .box-2-foreground-project-icon {
+    opacity: 1;
+}
\ No newline at end of file
diff --git a/css/box-3.css b/css/box-3.css
new file mode 100644
index 0000000..5827a70
--- /dev/null
+++ b/css/box-3.css
@@ -0,0 +1,43 @@
+#box-3-background {
+    background-image: url("/assets/mlp3.png");
+    background-position: center;
+    background-size: cover;
+}
+
+#box-3.visible #box-3-background {
+    opacity: 1;
+}
+
+#box-3-foreground.visible {
+    opacity: 1;
+}
+
+#box-3-foreground {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    position: relative;
+    top: -100vh;
+    height: 100vh;
+}
+
+#box-3-foreground-items {
+    height: 75vh;
+    aspect-ratio: 1/1;
+    max-width: 90vw;
+    animation-name: items-rotate;
+    animation-duration: 60s;
+    animation-timing-function: linear;
+    animation-fill-mode: forwards;
+    animation-iteration-count: infinite;
+}
+
+@keyframes items-rotate {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
\ No newline at end of file
diff --git a/css/box-4.css b/css/box-4.css
new file mode 100644
index 0000000..cf81ef6
--- /dev/null
+++ b/css/box-4.css
@@ -0,0 +1,21 @@
+#box-4-background {
+    background-color: #ccc;
+}
+
+#box-4.visible #box-4-background {
+    opacity: 1;
+}
+
+#box-4-foreground.visible {
+    opacity: 1;
+}
+
+#box-4-foreground {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    position: relative;
+    top: -100vh;
+    height: 100vh;
+}
\ No newline at end of file
diff --git a/css/projects.css b/css/projects.css
new file mode 100644
index 0000000..c7d5bd8
--- /dev/null
+++ b/css/projects.css
@@ -0,0 +1,61 @@
+.project-0 { transition-delay: 0ms !important; }
+.project-1 { transition-delay: 50ms !important; }
+.project-2 { transition-delay: 100ms !important; }
+.project-3 { transition-delay: 150ms !important; }
+.project-4 { transition-delay: 200ms !important; }
+.project-5 { transition-delay: 250ms !important; }
+.project-6 { transition-delay: 300ms !important; }
+.project-7 { transition-delay: 350ms !important; }
+.project-8 { transition-delay: 400ms !important; }
+.project-9 { transition-delay: 450ms !important; }
+.project-10 { transition-delay: 500ms !important; }
+.project-11 { transition-delay: 550ms !important; }
+.project-12 { transition-delay: 600ms !important; }
+.project-13 { transition-delay: 650ms !important; }
+.project-14 { transition-delay: 700ms !important; }
+.project-15 { transition-delay: 750ms !important; }
+.project-16 { transition-delay: 800ms !important; }
+.project-17 { transition-delay: 850ms !important; }
+.project-18 { transition-delay: 900ms !important; }
+.project-19 { transition-delay: 950ms !important; }
+.project-20 { transition-delay: 1000ms !important; }
+.project-21 { transition-delay: 1050ms !important; }
+.project-22 { transition-delay: 1100ms !important; }
+.project-23 { transition-delay: 1150ms !important; }
+.project-24 { transition-delay: 1200ms !important; }
+.project-25 { transition-delay: 1250ms !important; }
+.project-26 { transition-delay: 1300ms !important; }
+.project-27 { transition-delay: 1350ms !important; }
+.project-28 { transition-delay: 1400ms !important; }
+.project-29 { transition-delay: 1450ms !important; }
+.project-30 { transition-delay: 1500ms !important; }
+.project-31 { transition-delay: 1550ms !important; }
+.project-32 { transition-delay: 1600ms !important; }
+.project-33 { transition-delay: 1650ms !important; }
+.project-34 { transition-delay: 1700ms !important; }
+.project-35 { transition-delay: 1750ms !important; }
+.project-36 { transition-delay: 1800ms !important; }
+.project-37 { transition-delay: 1850ms !important; }
+.project-38 { transition-delay: 1900ms !important; }
+.project-39 { transition-delay: 1950ms !important; }
+.project-40 { transition-delay: 2000ms !important; }
+.project-41 { transition-delay: 2050ms !important; }
+.project-42 { transition-delay: 2100ms !important; }
+.project-43 { transition-delay: 2150ms !important; }
+.project-44 { transition-delay: 2200ms !important; }
+.project-45 { transition-delay: 2250ms !important; }
+.project-46 { transition-delay: 2300ms !important; }
+.project-47 { transition-delay: 2350ms !important; }
+.project-48 { transition-delay: 2400ms !important; }
+.project-49 { transition-delay: 2450ms !important; }
+.project-50 { transition-delay: 2500ms !important; }
+.project-51 { transition-delay: 2550ms !important; }
+.project-52 { transition-delay: 2600ms !important; }
+.project-53 { transition-delay: 2650ms !important; }
+.project-54 { transition-delay: 2700ms !important; }
+.project-55 { transition-delay: 2750ms !important; }
+.project-56 { transition-delay: 2800ms !important; }
+.project-57 { transition-delay: 2850ms !important; }
+.project-58 { transition-delay: 2900ms !important; }
+.project-59 { transition-delay: 2950ms !important; }
+.project-60 { transition-delay: 3000ms !important; }
\ No newline at end of file
diff --git a/includes/update.php b/includes/update.php
new file mode 100644
index 0000000..8883001
--- /dev/null
+++ b/includes/update.php
@@ -0,0 +1,14 @@
+<?php
+
+if (!file_exists("../cache")) mkdir("../cache");
+
+$data = json_decode(file_get_contents("https://equestria.horse/projects.php"), true);
+file_put_contents("../cache/projects.json", json_encode($data));
+
+foreach ($data as $index => $project) {
+    if (str_starts_with($project["icon"], "/")) {
+        file_put_contents("../cache/" . $index . ".png", file_get_contents("https://equestria.horse/" . $project["icon"]));
+    } else {
+        file_put_contents("../cache/" . $index . ".png", file_get_contents($project["icon"]));
+    }
+}
\ No newline at end of file
diff --git a/index.php b/index.php
index 16b127a..009f756 100644
--- a/index.php
+++ b/index.php
@@ -21,22 +21,43 @@
         </div>
     </div>
 
+    <div class="alt-titles-container">
+        <h1 id="uni-foreground-content-title2" class="uni-foreground-title-alt title-hidden">Making software</h1>
+        <h1 id="uni-foreground-content-title3" class="uni-foreground-title-alt title-hidden">Equestrian at core</h1>
+        <h1 id="uni-foreground-content-title4" class="uni-foreground-title-alt title-hidden">Wanna get in touch?</h1>
+    </div>
+
     <div class="box" id="box-1">
         <div class="box-background scroll-animated" id="box-1-background">
             <div id="box-1-background-cover"></div>
         </div>
     </div>
     <div class="box" id="box-2">
-        <div class="box-background" id="box-2-background">
-            <div id="box-2-background-cover"></div>
+        <div class="box-foreground" id="box-2-foreground">
+            <div id="box-2-foreground-projects">
+                <?php foreach (json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/cache/projects.json"), true) as $index => $project): ?><img src="/cache/<?= $index ?>.png" class="box-2-foreground-project-icon project-<?= $index ?>"><?php endforeach; ?>
+            </div>
+        </div>
+    </div>
+    <div class="box" id="box-skip">
+        <div class="box-background" id="box-skip-background">
+            <div id="box-skip-background-cover"></div>
         </div>
-        <div class="box-foreground" id="box-2-foreground"></div>
+        <div class="box-foreground" id="box-skip-foreground"></div>
     </div>
     <div class="box" id="box-3">
         <div class="box-background" id="box-3-background">
             <div id="box-3-background-cover"></div>
         </div>
-        <div class="box-foreground" id="box-3-foreground"></div>
+        <div class="box-foreground" id="box-3-foreground">
+            <img src="/assets/items.png" alt="" id="box-3-foreground-items">
+        </div>
+    </div>
+    <div class="box" id="box-4">
+        <div class="box-background" id="box-4-background">
+            <div id="box-4-background-cover"></div>
+        </div>
+        <div class="box-foreground" id="box-4-foreground"></div>
     </div>
 </body>
 </html>
\ No newline at end of file
diff --git a/js/box-2.js b/js/box-2.js
new file mode 100644
index 0000000..62e8b05
--- /dev/null
+++ b/js/box-2.js
@@ -0,0 +1,22 @@
+window.addEventListener('load', () => {
+    window.Box2 = {
+        element: document.getElementById("box-2"),
+        observer: new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    document.getElementById("box-2-foreground").classList.add("visible");
+                    document.getElementById("box-2-foreground").classList.remove("hidden");
+                } else {
+                    document.getElementById("box-2-foreground").classList.remove("visible");
+                    document.getElementById("box-2-foreground").classList.add("hidden");
+                }
+            });
+        }, {
+            root: null,
+            rootMargin: "0px",
+            threshold: 0.1,
+        })
+    }
+
+    Box2.observer.observe(Box2.element);
+});
\ No newline at end of file
diff --git a/js/box-3.js b/js/box-3.js
new file mode 100644
index 0000000..9bcc9c8
--- /dev/null
+++ b/js/box-3.js
@@ -0,0 +1,22 @@
+window.addEventListener('load', () => {
+    window.Box3 = {
+        element: document.getElementById("box-3"),
+        observer: new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    document.getElementById("box-3").classList.add("visible");
+                    document.getElementById("box-3-foreground").classList.add("visible");
+                } else {
+                    document.getElementById("box-3").classList.remove("visible");
+                    document.getElementById("box-3-foreground").classList.remove("visible");
+                }
+            });
+        }, {
+            root: null,
+            rootMargin: "0px",
+            threshold: 0.5,
+        })
+    }
+
+    Box3.observer.observe(Box3.element);
+});
\ No newline at end of file
diff --git a/js/box-4.js b/js/box-4.js
new file mode 100644
index 0000000..5eefcc7
--- /dev/null
+++ b/js/box-4.js
@@ -0,0 +1,22 @@
+window.addEventListener('load', () => {
+    window.Box4 = {
+        element: document.getElementById("box-4"),
+        observer: new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    document.getElementById("box-4").classList.add("visible");
+                    document.getElementById("box-4-foreground").classList.add("visible");
+                } else {
+                    document.getElementById("box-4").classList.remove("visible");
+                    document.getElementById("box-4-foreground").classList.remove("visible");
+                }
+            });
+        }, {
+            root: null,
+            rootMargin: "0px",
+            threshold: 0.5,
+        })
+    }
+
+    Box4.observer.observe(Box4.element);
+});
\ No newline at end of file
diff --git a/js/scroll.js b/js/scroll.js
index d1798cc..d0a5848 100644
--- a/js/scroll.js
+++ b/js/scroll.js
@@ -1,3 +1,7 @@
+window.addEventListener("load", (event) => {
+    document.getElementById("uni-foreground-content-title").style.top = "-34px";
+})
+
 window.addEventListener("scroll", (event) => {
     console.log(window.scrollY, window.innerHeight, window.scrollY / window.innerHeight);
 
@@ -7,9 +11,49 @@ window.addEventListener("scroll", (event) => {
     document.getElementById("uni-foreground-content-avatar-container").style.opacity = opacity.toString();
     document.getElementById("box-1-background").style.opacity = opacity.toString();
 
-    let position = window.scrollY / 2;
-    if (position > window.innerHeight / 2) position = window.innerHeight / 2;
+    let position = window.scrollY / 2 + 34;
+    if (position > window.innerHeight / 2 + 34) position = window.innerHeight / 2 + 34;
     if (position < 0) position = 0;
+
     document.getElementById("uni-foreground-content-title").classList.add("scroll-animated");
+    document.getElementById("uni-foreground-content-title").classList.add("title-visible");
     document.getElementById("uni-foreground-content-title").style.top = "-" + position.toString() + "px";
+
+    if (window.scrollY / 2 + 34 > window.innerHeight / 2 + document.getElementById("box-3").clientHeight / 1.5 + document.getElementById("box-4").clientHeight / 1.5) {
+        document.getElementById("uni-foreground-content-title2").classList.remove("title-visible");
+        document.getElementById("uni-foreground-content-title2").classList.add("title-hidden");
+        document.getElementById("uni-foreground-content-title").classList.remove("title-visible");
+        document.getElementById("uni-foreground-content-title").classList.add("title-hidden");
+        document.getElementById("uni-foreground-content-title3").classList.remove("title-visible");
+        document.getElementById("uni-foreground-content-title3").classList.add("title-hidden");
+        document.getElementById("uni-foreground-content-title4").classList.add("title-visible");
+        document.getElementById("uni-foreground-content-title4").classList.remove("title-hidden");
+    } else if (window.scrollY / 2 + 34 > window.innerHeight / 2 + document.getElementById("box-3").clientHeight / 1.5) {
+        document.getElementById("uni-foreground-content-title2").classList.remove("title-visible");
+        document.getElementById("uni-foreground-content-title2").classList.add("title-hidden");
+        document.getElementById("uni-foreground-content-title").classList.remove("title-visible");
+        document.getElementById("uni-foreground-content-title").classList.add("title-hidden");
+        document.getElementById("uni-foreground-content-title3").classList.add("title-visible");
+        document.getElementById("uni-foreground-content-title3").classList.remove("title-hidden");
+        document.getElementById("uni-foreground-content-title4").classList.remove("title-visible");
+        document.getElementById("uni-foreground-content-title4").classList.add("title-hidden");
+    } else if (window.scrollY / 2 + 34 > window.innerHeight / 2 + 50) {
+        document.getElementById("uni-foreground-content-title").classList.remove("title-visible");
+        document.getElementById("uni-foreground-content-title").classList.add("title-hidden");
+        document.getElementById("uni-foreground-content-title3").classList.remove("title-visible");
+        document.getElementById("uni-foreground-content-title3").classList.add("title-hidden");
+        document.getElementById("uni-foreground-content-title2").classList.add("title-visible");
+        document.getElementById("uni-foreground-content-title2").classList.remove("title-hidden");
+        document.getElementById("uni-foreground-content-title4").classList.remove("title-visible");
+        document.getElementById("uni-foreground-content-title4").classList.add("title-hidden");
+    } else {
+        document.getElementById("uni-foreground-content-title").classList.add("title-visible");
+        document.getElementById("uni-foreground-content-title").classList.remove("title-hidden");
+        document.getElementById("uni-foreground-content-title2").classList.remove("title-visible");
+        document.getElementById("uni-foreground-content-title2").classList.add("title-hidden");
+        document.getElementById("uni-foreground-content-title3").classList.remove("title-visible");
+        document.getElementById("uni-foreground-content-title3").classList.add("title-hidden");
+        document.getElementById("uni-foreground-content-title4").classList.remove("title-visible");
+        document.getElementById("uni-foreground-content-title4").classList.add("title-hidden");
+    }
 })
\ No newline at end of file