✨ first commit

.gitignore

@@ -0,0 +1 @@
+.vscode

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);
+    }
+}

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);
+}

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>