From 0b7c383f3fc9bb8f1b7c3917aec667de94b13d9d Mon Sep 17 00:00:00 2001
From: mikoafk <mikeycrack71@gmail.com>
Date: Thu, 14 Dec 2023 12:11:53 -0500
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20first=20commit?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore                   |   1 +
 assets/audio/click-short.ogg | Bin 0 -> 6338 bytes
 assets/css/index.css         | 128 +++++++++++++++++++++++++++++++++++
 assets/js/index.js           |  68 +++++++++++++++++++
 index.html                   |  72 ++++++++++++++++++++
 5 files changed, 269 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 assets/audio/click-short.ogg
 create mode 100644 assets/css/index.css
 create mode 100644 assets/js/index.js
 create mode 100644 index.html

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..600d2d3
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+.vscode
\ No newline at end of file
diff --git a/assets/audio/click-short.ogg b/assets/audio/click-short.ogg
new file mode 100644
index 0000000000000000000000000000000000000000..810bb2e8c18e37c122d607c21f8e1cdf9ef3ab0c
GIT binary patch
literal 6338
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

literal 0
HcmV?d00001

diff --git a/assets/css/index.css b/assets/css/index.css
new file mode 100644
index 0000000..443764f
--- /dev/null
+++ b/assets/css/index.css
@@ -0,0 +1,128 @@
+*,
+::after,
+::before {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    outline: none;
+    border: none;
+}
+
+html {
+    color: white;
+    font-size: 16px;
+    font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
+        "Lucida Sans", Arial, sans-serif;
+}
+
+html,
+body {
+    width: 100%;
+    height: 100vh;
+    overflow: hidden;
+    /* background: url("https://gif.plaza.one/74.gif") center / cover no-repeat; */
+    background-color: darkslateblue;
+}
+
+.container {
+    width: 100%;
+    height: 100%;
+}
+
+.fade-black-load {
+    position: fixed;
+    background: #000;
+    z-index: 99999;
+    transition: opacity 0.5s ease-in-out;
+}
+
+.center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.button-back {
+    color: #fff;
+    cursor: pointer;
+    position: fixed;
+    bottom: 1rem;
+    left: 1rem;
+    padding: 1rem 2rem;
+    background: palevioletred;
+    clip-path: polygon(7% 0%, 100% 0%, 93% 100%, 0% 100%);
+    transition: opacity 1s ease-in-out;
+    font-weight: bold;
+}
+
+.home-button-mask {
+    width: 25rem;
+    height: 25rem;
+    position: relative;
+    cursor: pointer;
+    z-index: 1000;
+    transition: transform 1s cubic-bezier(0, 0, 0.2, 1);
+}
+
+.home-options-button {
+    width: 100%;
+    height: 100%;
+    background-color: palevioletred;
+    border: 1rem solid white;
+    border-radius: 100%;
+}
+
+.home-options-title {
+    font-size: 7rem;
+}
+
+.home-options-list {
+    position: absolute;
+    clip-path: polygon(31% 0%, 1000% 0%, 1000% 1000%, 31% 1000%);
+    list-style: none;
+    transform-origin: center;
+    -ms-transform-origin: center;
+    -moz-transform-origin: center;
+    -o-transform-origin: center;
+    z-index: -100;
+}
+
+.home-option {
+    display: block;
+    width: 25rem;
+    font-size: 1.8rem;
+    text-align: end;
+    text-decoration: none;
+    color: white;
+    background: rgb(164, 139, 255);
+    padding: 1.5rem 3rem;
+    margin-bottom: 0.5rem;
+    transform: translateX(-10rem);
+    clip-path: polygon(0% 0%, 100% 0%, 93% 100%, 0% 100%);
+    transition: transform 1s cubic-bezier(0, 0, 0.2, 1);
+}
+
+.bounce-with-bpm {
+    animation: BounceScale calc(60000ms / 120) linear infinite;
+}
+
+.alert {
+    color: #000;
+    background: yellow;
+    border-radius: 1rem;
+    padding: 1rem;
+    font-size: 2rem;
+}
+
+@keyframes BounceScale {
+    0% {
+        transform: scale(1);
+    }
+
+    100% {
+        transform: scale(0.95);
+    }
+}
diff --git a/assets/js/index.js b/assets/js/index.js
new file mode 100644
index 0000000..7bde1b1
--- /dev/null
+++ b/assets/js/index.js
@@ -0,0 +1,68 @@
+const lb = document.getElementById("loader-black");
+const bb = document.getElementById("button-back");
+const bo = document.getElementById("button-options");
+const ol = document.getElementById("options-list");
+const clickSound = new Howl({
+    src: ["/assets/audio/click-short.ogg"],
+    html5: true,
+});
+const musicBackground = new Howl({
+    src: ["http://radio.plaza.one/mp3"],
+    html5: true,
+    preload: true,
+});
+
+musicBackground.play();
+
+window.addEventListener("error", (e) => {
+    console.log(e);
+});
+
+document.addEventListener("DOMContentLoaded", () => {
+    let toggle_bo = true;
+
+    bo.addEventListener("click", (e) => {
+        clickSound.play();
+
+        if (toggle_bo == false) {
+            bo.style = "";
+
+            for (let i = 0; i < ol.children.length; i++) {
+                setTimeout(() => {
+                    ol.children[i].style = "";
+                }, i * 90);
+            }
+
+            return (toggle_bo = true);
+        }
+
+        bo.style.transform = "translateX(-12rem)";
+
+        for (let i = 0; i < ol.children.length; i++) {
+            setTimeout(() => {
+                ol.children[i].style.transform = "translateX(17rem)";
+            }, i * 90);
+        }
+
+        toggle_bo = false;
+    });
+});
+
+function backToMenu() {
+    clickSound.play();
+    bb.style = "opacity: 0;pointer-events: none;";
+    goTo("menu");
+}
+
+function goTo(id) {
+    const el = document.getElementById(id);
+
+    if (id !== "menu") bb.style = "opacity: 1;pointer-events: all;";
+
+    lb.style = "opacity: 1;pointer-events: all;";
+
+    setTimeout(() => {
+        el.scrollIntoView();
+        lb.style = "opacity: 0;pointer-events: none;";
+    }, 1000);
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..109cb06
--- /dev/null
+++ b/index.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>miko.afk</title>
+
+        <!-- CSS Styles -->
+        <link rel="stylesheet" href="/assets/css/index.css" />
+
+        <!-- Librerias -->
+        <script
+            src="https://code.jquery.com/jquery-3.7.1.min.js"
+            integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
+            crossorigin="anonymous"
+        ></script>
+        <script
+            src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.4/howler.min.js"
+            integrity="sha512-xi/RZRIF/S0hJ+yJJYuZ5yk6/8pCiRlEXZzoguSMl+vk2i3m6UjUO/WcZ11blRL/O+rnj94JRGwt/CHbc9+6EA=="
+            crossorigin="anonymous"
+            referrerpolicy="no-referrer"
+        ></script>
+    </head>
+    <body>
+        <div
+            id="loader-black"
+            class="container fade-black-load"
+            style="opacity: 0; pointer-events: none"
+        ></div>
+        <button
+            id="button-back"
+            onclick="backToMenu()"
+            class="button-back center bounce-with-bpm"
+            style="opacity: 0; pointer-events: none"
+        >
+            Volver
+        </button>
+
+        <div id="menu" class="container center">
+            <div id="button-options" class="home-button-mask center">
+                <ul id="options-list" class="home-options-list">
+                    <a onclick="goTo('about-me')" class="home-option">
+                        Sobre mí
+                    </a>
+                    <a onclick="goTo('projects')" class="home-option">
+                        Proyectos
+                    </a>
+                    <a onclick="goTo('redes')" class="home-option">
+                        Redes sociales
+                    </a>
+                </ul>
+                <div class="home-options-button center bounce-with-bpm">
+                    <h1 class="home-options-title">Miko!</h1>
+                </div>
+            </div>
+        </div>
+
+        <div id="about-me" class="container center">
+            <span class="alert">🚧 Sección en desarrollo 🚧</span>
+        </div>
+
+        <div id="projects" class="container center">
+            <span class="alert">🚧 Sección en desarrollo 🚧</span>
+        </div>
+
+        <div id="redes" class="container center">
+            <span class="alert">🚧 Sección en desarrollo 🚧</span>
+        </div>
+
+        <script type="text/javascript" src="/assets/js/index.js"></script>
+    </body>
+</html>