diff --git a/en/index.html b/en/index.html
new file mode 100644
index 0000000..0a40ffb
--- /dev/null
+++ 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:contact@happy7.xyz">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>
\ No newline at end of file
diff --git a/es/index.html b/es/index.html
new file mode 100644
index 0000000..44ee819
--- /dev/null
+++ b/es/index.html
@@ -0,0 +1,233 @@
+<html lang="es">
+<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">
+            Hola soy Happyuky7, developer, gamer, streamer, creador de contenido y mucho más. 
+        </br>
+            Si necesitas contactar conmigo hazlo vía Discord preferiblemente es la forma más rápida de obtener una respuesta.
+        </br></br>
+            Habilidades, lenguajes de programación, herramientas y otros: 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>
+            Actualmente estoy aprendiendo otros idiomas, lo siento si mi inglés o japonés no es el mejor, estoy tratando de mejorarlo ^^
+        </br></br>
+            Sigo trabajando en este sitio web/portafolio, puedes consultar mis enlaces y redes o mi github haciendo clic en uno de los botones de abajo.
+        </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">Ver Enlaces, Redes Sociales y Otros</a></button>
+        <button><a href="https://github.com/happyuky7">Ver mi Github</a></button>
+
+        <div class="conctact">
+            <h3>Póngase en contacto conmigo</h3>
+            <p>Se recomienda ponerse en contacto conmigo por discord o 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:contact@happy7.xyz">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>
\ No newline at end of file
diff --git a/imgs/animewaifu1.jpg b/imgs/animewaifu1.jpg
new file mode 100644
index 0000000..18ba9d7
Binary files /dev/null and b/imgs/animewaifu1.jpg differ
diff --git a/imgs/background.gif b/imgs/background.gif
new file mode 100644
index 0000000..1adb14a
Binary files /dev/null and b/imgs/background.gif differ
diff --git a/imgs/background1.gif b/imgs/background1.gif
new file mode 100644
index 0000000..02fe1ab
Binary files /dev/null and b/imgs/background1.gif differ
diff --git a/imgs/discord-logo.png b/imgs/discord-logo.png
new file mode 100644
index 0000000..e9dc50d
Binary files /dev/null and b/imgs/discord-logo.png differ
diff --git a/imgs/world-langs.png b/imgs/world-langs.png
new file mode 100644
index 0000000..dc16ae2
Binary files /dev/null and b/imgs/world-langs.png differ
diff --git a/imgs/x-logo.png b/imgs/x-logo.png
new file mode 100644
index 0000000..2609e58
Binary files /dev/null and b/imgs/x-logo.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..0a40ffb
--- /dev/null
+++ b/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:contact@happy7.xyz">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>
\ No newline at end of file
diff --git a/jp/index.html b/jp/index.html
new file mode 100644
index 0000000..adadc60
--- /dev/null
+++ b/jp/index.html
@@ -0,0 +1,233 @@
+<html lang="jp">
+<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">
+            デベロッパー、ゲーマー、ストリーマー、コンテンツクリエイターなどなど。
+        </p>
+        <p id="description">
+            Happyuky7 は開発者、ゲーマー、ストリーマー、コンテンツクリエイター、その他もろもろ。
+        </br>
+            もし私に連絡する必要があるのなら、できればDiscordを使ってほしい。.
+        </br></br>
+            スキル、プログラム言語、ツールとオーサー： Java, JavaScript, NodeJS, NPM, Python, HTML, CSS, MongoDB, Redis, Blender, Unity, Arduino, Unity (VRChatより), Spigot/Paper/BungeeCord API Minecraft Servers., Nginx, 3D Print, Linux
+        </br></br>
+            僕は今、他の言語を勉強しているんだ。もし僕の英語や日本語がベストじゃなかったらごめんね。^^
+        </br></br>
+            下のボタンをクリックして、私のリンクやネットワーク、Githubをチェックしてください。
+        </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">リンク集を見る ソーシャルその他</a></button>
+        <button><a href="https://github.com/happyuky7">私のGithubをチェックする</a></button>
+
+        <div class="conctact">
+            <h3>連絡先</h3>
+            <p>Discordか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:contact@happy7.xyz">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>
\ No newline at end of file
