Add files via upload

Happyuky7 · Aug 27, 2024 · 15f3b4a · 15f3b4a
1 parent 97edef6
commit 15f3b4a
Show file tree

Hide file tree

Showing 10 changed files with 932 additions and 0 deletions.
diff --git a/en/index.html b/en/index.html
@@ -0,0 +1,233 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Happyuky7</title>
+    <style>
+        body {
+            background-color: #252525;
+            background-image: url('./imgs/background1.gif');
+            background-size: cover;
+            background-position: center; 
+            background-repeat: no-repeat;
+            color: #fff;
+            font-family: Arial, sans-serif;
+        }
+
+        .container {
+            width: 80%;
+            margin: auto;
+            overflow: hidden;
+        }
+
+        h1 {
+            text-align: center;
+            margin-top: 20px;
+            color: #24ffb6;
+        }
+
+        p {
+            text-align: center;
+            margin-top: 20px;
+        }
+
+        a {
+            color: #24ffb6;
+            text-decoration: none;
+        }
+
+        a:hover {
+            color: #23945f;
+        }
+
+        button {
+            display: block;
+            width: 200px;
+            margin: auto;
+            margin-top: 20px;
+            padding: 10px;
+            /*background-color: #1eff00c5;*/
+            background-color: #0df883;
+            color: #424242;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+
+        button a {
+            color: #000000;
+            font-size: 18px;
+            text-decoration: none;
+        }
+
+        button a:hover {
+            color: #fff;
+        }
+
+        button:hover {
+            background-color: #45a049;
+        }
+
+        .conctact {
+            margin-top: 20px;
+            text-align: center;
+        }
+
+        h3 {
+            margin-bottom: 20px;
+        }
+
+        #skills {
+            font-size: 20px;
+            font-weight: bold;
+            margin-top: -10px;
+        }
+
+        #description {
+            margin-top: -20px;
+            margin-bottom: 10px;
+            background-color: #29292956;
+            padding: 10px;
+            border-radius: 5px;
+            font-size: 18px;
+        }
+
+        #note {
+            display: flex;
+            background-color: #ff000056;
+            padding: 10px;
+            border-radius: 5px;
+            margin-top: 20px;
+            margin-bottom: 20px;
+            margin-left: 120px;
+            margin-right: 120px;
+            align-self: center;
+            justify-content: center;
+            font-size: 18px;
+        }
+
+        #language {
+            display: flex;
+            justify-content: flex-end;
+            margin-top: 10px;
+            margin-bottom: -40px;
+        }
+
+        #language img {
+            margin-right: 10px;
+        }
+
+        #language ul {
+            display: none;
+            position: absolute;
+            background-color: #333;
+            list-style: none;
+            padding: 10px;
+            border-radius: 5px;
+            margin-top: 20px;
+            margin-right: 20px;
+        }
+
+        #language ul li {
+            margin-bottom: 10px;
+        }
+
+        #language ul:hover {
+            display: block;
+        }
+
+        @media (max-width: 768px) {
+            .container {
+                width: 90%;
+            }
+
+            p {
+                font-size: 16px;
+            }
+
+            #note {
+                font-size: 16px;
+                margin-left: 20px;
+                margin-right: 20px;
+            }
+
+            #language {
+                margin-top: 20px;
+                margin-bottom: -50px;
+            }
+
+
+        }
+
+
+    </style>
+</head>
+<body>
+
+    <div class="container">
+
+        <div id="language">
+            <img src="./imgs/world-langs.png" alt="Language Icon" style="width: 30px;">
+            <ul>
+                <li><a href="./index.html">Default (English)</a></li>
+                <li><a href="./en/index.html">English</a></li>
+                <li><a href="./es/index.html">Español</a></li>
+                <li><a href="./jp/index.html">日本語</a></li>
+            </ul>
+        </div>
+
+        <img src="./imgs/animewaifu1.jpg" alt="Icon Anime Waifu" style="display: block; margin: auto; margin-top: 50px; width: 200px;">
+        <!--img src="https://happy7.xyz/img/logo.png" alt="Happyuky7 Logo" style="display: block; margin: auto; margin-top: 50px; width: 200px;"-->
+
+        <h1>Happyuky7</h1>
+        <p id="skills">
+            Developer, Gamer, Streamer, Content Creator, and more.
+        </p>
+        <p id="description">
+            Hi, I'm Happyuky7, developer, gamer, streamer, content creator and much more. 
+        </br>
+            If you need to contact me do it via Discord preferably it's the fastest way to respond.
+        </br></br>
+            Skills, Program Languages, Tools & Orthers: Java, JavaScript, NodeJS, NPM, Python, HTML, CSS, MongoDB, Redis, Blender, Unity, Arduino, Unity (From VRChat), Spigot/Paper/BungeeCord API Minecraft Servers., Nginx, 3D Print, Linux
+        </br></br>
+            I'm currently learning other languages, sorry if my english or japanese isn't the best, I'm trying to improve it ^^
+        </br></br>
+            I'm still working on this website/portfolio, you can check my links and networks or my Github by clicking one of the buttons below.
+        </p>
+        <!--p id="note">
+            Note: I am still working on this web/portfolio you can check on my web links or if my networks or my github on it by clicking on the buttons below.
+        </p-->
+        <button><a href="http://happy7.xyz/links">View Links Socials and Others</a></button>
+        <button><a href="https://github.com/happyuky7">Check My Github</a></button>
+
+        <div class="conctact">
+            <h3>Contact Me</h3>
+            <p>Recomended to contact me for discord or twitter</p>
+            <p><a href="https://discord.com/users/Happy7">Discord <img src="./imgs/discord-logo.png" alt="Discord Logo" style="width: 20px;"></a></p>
+            <p><a href="https://discord.gg/3EebYUyeUX">Discord Server <img src="./imgs/discord-logo.png" alt="Discord Logo" style="width: 20px;"></a></p>
+            <p><a href="https://twitter.com/happyuky7">Twitter (X) <img src="./imgs/x-logo.png" alt="Twitter Logo" style="width: 20px;"></a></p>
+            <p><a href="mailto:[email protected]">Email <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Gmail_icon_%282020%29.svg/1200px-Gmail_icon_%282020%29.svg.png" alt="Email Logo" style="width: 20px;"></a></p>
+        </div>
+    </div>
+
+    <script>
+        const language = document.getElementById('language');
+        const ul = document.querySelector('ul');
+
+        function toggleMenu() {
+            ul.style.display = ul.style.display === 'none' ? 'block' : 'none';
+        }
+
+        function clickOutside(event) {
+            if (!language.contains(event.target) && !ul.contains(event.target)) {
+                ul.style.display = 'none';
+            }
+        }
+
+        language.addEventListener('click', toggleMenu);
+
+        document.addEventListener('click', clickOutside);
+    </script>
+
+</body>
+</html>