Initial commit

20 files changed, 301 insertions, 0 deletions

diff --git a/.idea/.gitignore b/.idea/.gitignore
new file mode 100644
index 0000000..13566b8
--- /dev/null
+++ b/.idea/.gitignore
@@ -0,0 +1,8 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml
diff --git a/.idea/discord.xml b/.idea/discord.xml
new file mode 100644
index 0000000..d8e9561
--- /dev/null
+++ b/.idea/discord.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="DiscordProjectSettings">
+    <option name="show" value="PROJECT_FILES" />
+    <option name="description" value="" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
new file mode 100644
index 0000000..dfd00d9
--- /dev/null
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/violette.iml" filepath="$PROJECT_DIR$/.idea/violette.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/php.xml b/.idea/php.xml
new file mode 100644
index 0000000..7d11e4f
--- /dev/null
+++ b/.idea/php.xml
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="MessDetectorOptionsConfiguration">
+    <option name="transferred" value="true" />
+  </component>
+  <component name="PHPCSFixerOptionsConfiguration">
+    <option name="transferred" value="true" />
+  </component>
+  <component name="PHPCodeSnifferOptionsConfiguration">
+    <option name="highlightLevel" value="WARNING" />
+    <option name="transferred" value="true" />
+  </component>
+  <component name="PhpProjectSharedConfiguration" php_language_level="8.1" />
+  <component name="PhpStanOptionsConfiguration">
+    <option name="transferred" value="true" />
+  </component>
+  <component name="PsalmOptionsConfiguration">
+    <option name="transferred" value="true" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/violette.iml b/.idea/violette.iml
new file mode 100644
index 0000000..c956989
--- /dev/null
+++ b/.idea/violette.iml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..1d8ff94
--- /dev/null
+++ b/README.md
@@ -0,0 +1,11 @@
+# Codename "Violette"
+
+## Pages
+- [x] Intro page
+- [ ] Projects list
+- [ ] Plurality
+- [ ] MLP
+- [ ] Links
+  - [ ] Contact
+  - [ ] Blog
+  - [ ] About/API
\ No newline at end of file
diff --git a/assets/bg.jpg b/assets/bg.jpg
new file mode 100644
index 0000000..4a2a48e
--- /dev/null
+++ b/assets/bg.jpg
diff --git a/assets/bg.png b/assets/bg.png
new file mode 100644
index 0000000..8e0cbd6
--- /dev/null
+++ b/assets/bg.png
diff --git a/assets/font.ttf b/assets/font.ttf
new file mode 100755
index 0000000..d0ad399
--- /dev/null
+++ b/assets/font.ttf
diff --git a/avatar/index.php b/avatar/index.php
new file mode 100644
index 0000000..d9400ad
--- /dev/null
+++ b/avatar/index.php
@@ -0,0 +1,6 @@
+<?php
+
+$email = "raindrops@equestria.dev";
+header("Content-Type: image/png");
+
+die(file_get_contents("https://www.gravatar.com/avatar/" . md5($email) . "?s=200&d=" . urlencode("https://ponies.equestria.horse/assets/avatars/7d9f543ef74240f69d0786c3f2983124.webp")));
\ No newline at end of file
diff --git a/css/base.css b/css/base.css
new file mode 100644
index 0000000..06e4736
--- /dev/null
+++ b/css/base.css
@@ -0,0 +1,10 @@
+* {
+    font-family: "CNViolette", "Baloo 2", ".AppleSystemUIFont", -apple-system, system-ui, sans-serif;
+    transition: all 500ms;
+}
+
+html, body {
+    margin: 0;
+    background: #111;
+    color: white;
+}
\ No newline at end of file
diff --git a/css/box-1.css b/css/box-1.css
new file mode 100644
index 0000000..59eb4a9
--- /dev/null
+++ b/css/box-1.css
@@ -0,0 +1,86 @@
+#box-1-background {
+    background-image: url("/assets/bg.jpg");
+    background-size: cover;
+    background-position: center;
+}
+
+#uni-foreground {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+#box-1-background-cover {
+    background-color: rgba(0, 0, 0, .5);
+    height: 100vh;
+    width: 100vw;
+}
+
+#box-1.visible #box-1-background {
+    opacity: 1;
+}
+
+#uni-foreground.visible {
+    opacity: 1;
+}
+
+#uni-foreground-content-avatar {
+    opacity: 0;
+    border-radius: 999px;
+    width: 128px;
+    height: 128px;
+    position: relative;
+    z-index: 5;
+}
+
+#uni-foreground-content-avatar-decoration {
+    border-radius: 999px;
+    width: 160px;
+    position: absolute;
+    filter: blur(25px);
+    z-index: 2;
+    opacity: 0;
+    margin-left: -16px;
+    margin-top: -16px;
+}
+
+#uni-foreground-content-title {
+    opacity: 0;
+    font-weight: normal;
+    margin: 20px 0 0;
+    line-height: 48px;
+    font-size: 48px;
+}
+
+.visible #uni-foreground-content-avatar {
+    transition-delay: 1000ms;
+    opacity: 1;
+}
+
+.visible #uni-foreground-content-title {
+    transition-delay: 1500ms;
+    position: relative;
+    opacity: 1;
+}
+
+.visible #uni-foreground-content-avatar-decoration {
+    transition: opacity 2000ms;
+    transition-delay: 2000ms;
+    opacity: 1;
+    animation-name: avatar-decoration;
+    animation-duration: 10s;
+    animation-timing-function: linear;
+    animation-fill-mode: forwards;
+    animation-iteration-count: infinite;
+}
+
+@keyframes avatar-decoration {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
\ No newline at end of file
diff --git a/css/box.css b/css/box.css
new file mode 100644
index 0000000..8b07d4c
--- /dev/null
+++ b/css/box.css
@@ -0,0 +1,29 @@
+.box {
+    height: 100vh;
+    width: 100vw;
+}
+
+.box-background {
+    width: 100vw;
+    height: 100vh;
+    background: #111;
+    z-index: 0;
+    opacity: 0;
+}
+
+.uni-foreground {
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    z-index: 10;
+    position: relative;
+    top: -100vh;
+    opacity: 0;
+}
+
+.scroll-animated {
+    transition: none !important;
+}
\ No newline at end of file
diff --git a/css/font.css b/css/font.css
new file mode 100644
index 0000000..d34c91e
--- /dev/null
+++ b/css/font.css
@@ -0,0 +1,4 @@
+@font-face {
+    src: url("/assets/font.ttf");
+    font-family: "CNViolette";
+}
\ No newline at end of file
diff --git a/css/index.php b/css/index.php
new file mode 100644
index 0000000..b24be0d
--- /dev/null
+++ b/css/index.php
@@ -0,0 +1,14 @@
+<?php
+
+header("Content-Type: text/css");
+$text = "";
+
+$files = array_filter(scandir($_SERVER['DOCUMENT_ROOT'] . "/css"), function ($i) {
+    return str_ends_with($i, ".css");
+});
+
+foreach ($files as $file) {
+    $text .= "\n" . file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/css/" . $file);
+}
+
+die($text);
\ No newline at end of file
diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 0000000..1e811a0
--- /dev/null
+++ b/favicon.ico
diff --git a/index.php b/index.php
new file mode 100644
index 0000000..16b127a
--- /dev/null
+++ b/index.php
@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="icon" href="/favicon.ico" type="image/ico">
+    <link rel="stylesheet" href="/css/">
+    <script src="/js/"></script>
+    <title>Raindrops</title>
+</head>
+<body>
+    <div class="uni-foreground" id="uni-foreground">
+        <div id="uni-foreground-content">
+            <div id="uni-foreground-content-avatar-container" class="scroll-animated">
+                <img src="/avatar" id="uni-foreground-content-avatar-decoration" alt="">
+                <img src="/avatar" id="uni-foreground-content-avatar" alt="">
+            </div>
+            <h1 id="uni-foreground-content-title">I am Raindrops!</h1>
+        </div>
+    </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>
+        <div class="box-foreground" id="box-2-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>
+</body>
+</html>
\ No newline at end of file
diff --git a/js/box-1.js b/js/box-1.js
new file mode 100644
index 0000000..6e84c5c
--- /dev/null
+++ b/js/box-1.js
@@ -0,0 +1,19 @@
+window.addEventListener('load', () => {
+    window.Box1 = {
+        element: document.getElementById("box-1"),
+        observer: new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    document.getElementById("box-1").classList.add("visible");
+                    document.getElementById("uni-foreground").classList.add("visible");
+                }
+            });
+        }, {
+            root: null,
+            rootMargin: "0px",
+            threshold: 0.5,
+        })
+    }
+
+    Box1.observer.observe(Box1.element);
+});
\ No newline at end of file
diff --git a/js/index.php b/js/index.php
new file mode 100644
index 0000000..b5ee9d6
--- /dev/null
+++ b/js/index.php
@@ -0,0 +1,14 @@
+<?php
+
+header("Content-Type: application/javascript");
+$text = "";
+
+$files = array_filter(scandir($_SERVER['DOCUMENT_ROOT'] . "/js"), function ($i) {
+    return str_ends_with($i, ".js");
+});
+
+foreach ($files as $file) {
+    $text .= "\n" . file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/js/" . $file);
+}
+
+die($text);
\ No newline at end of file
diff --git a/js/scroll.js b/js/scroll.js
new file mode 100644
index 0000000..d1798cc
--- /dev/null
+++ b/js/scroll.js
@@ -0,0 +1,15 @@
+window.addEventListener("scroll", (event) => {
+    console.log(window.scrollY, window.innerHeight, window.scrollY / window.innerHeight);
+
+    let opacity = 1 - window.scrollY / window.innerHeight;
+    if (opacity > 1) opacity = 1;
+    if (opacity < 0) opacity = 0;
+    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;
+    if (position < 0) position = 0;
+    document.getElementById("uni-foreground-content-title").classList.add("scroll-animated");
+    document.getElementById("uni-foreground-content-title").style.top = "-" + position.toString() + "px";
+})
\ No newline at end of file