diff --git a/img/bg.jpg b/img/bg.jpg
new file mode 100644
index 0000000..937380f
Binary files /dev/null and b/img/bg.jpg differ
diff --git a/img/bg_h.jpg b/img/bg_h.jpg
new file mode 100644
index 0000000..fdd37c6
Binary files /dev/null and b/img/bg_h.jpg differ
diff --git a/img/discord.png b/img/discord.png
new file mode 100644
index 0000000..f61d8e4
Binary files /dev/null and b/img/discord.png differ
diff --git a/img/github.png b/img/github.png
new file mode 100644
index 0000000..6352f6b
Binary files /dev/null and b/img/github.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..0cde87e
--- /dev/null
+++ b/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<head>
+    <title>YouHaveTrouble</title>
+    <link rel="stylesheet" href="/style/main.css">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+<body>
+    <div class="wrapper">
+        <div class="linewrapper">
+            <h1>youhavetrouble.me</h1>
+        </div>
+        <div class="linewrapper">
+            <fieldset class="window">
+                <legend>About me</legend>
+                <p>I've been programming for the last 2 years of my life. My main language is Java. I also got pretty good at optimizing minecraft servers. </p>
+            </fieldset>
+            <fieldset class="window">
+            <legend>Socials</legend>
+            <p><img src="img/github.png"><a href="https://github.com/YouHaveTrouble">GitHub</a><br>
+                <img src="img/discord.png"><a href="https://discord.gg/j8KK5dGBps">Discord</a>
+            </p>
+            </fieldset>
+        </div>
+        <div class="linewrapper">
+            <fieldset class="window">
+                <legend>My projects</legend>
+                <p>
+                    <b>Minecraft</b>
+                    <a href="https://github.com/YouHaveTrouble/minecraft-optimization">Server optimization guide</a><br>
+                    <a href="https://www.spigotmc.org/resources/commandwhitelist-spigot-1-8-1-16-bungeecord-waterfall.81326/">CommandWhitelist</a><br>
+                    <a href="https://www.spigotmc.org/resources/togglepvp.89376/">TogglePvP</a><br>
+                </p>
+                <p>
+                    <b>Bots</b>
+                    <a href="https://top.gg/bot/747037824049741924">Gamer Bot (Discord)</a><br>
+                </p>
+            </fieldset>
+            <fieldset class="window">
+                <legend>Support me</legend>
+                <script type='text/javascript' src='https://ko-fi.com/widgets/widget_2.js'></script><script type='text/javascript'>kofiwidget2.init('Support Me on Ko-fi', '#203a45', 'youhavetrouble');kofiwidget2.draw();</script>
+            </fieldset>
+        </div>
+    </div>
+</body>
\ No newline at end of file
diff --git a/style/main.css b/style/main.css
new file mode 100644
index 0000000..26d3fe0
--- /dev/null
+++ b/style/main.css
@@ -0,0 +1,101 @@
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
+:root {
+    margin: 0;
+    padding: 0;
+}
+html {
+    font-family: 'Open Sans', sans-serif;
+    color: white;
+    background-image: url("/img/bg.jpg");
+    background-color: rgba(0, 0, 0, 0.6);
+    background-blend-mode: color-burn;
+    background-position: center;
+    background-attachment: fixed;
+    background-repeat: no-repeat;
+    background-size: cover;
+    margin: 0;
+    padding: 0;
+}
+body {
+    margin: 0;
+    padding: 0;
+}
+.wrapper {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+.linewrapper {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}
+.window {
+    width: auto;
+    min-width: 7em;
+    max-width: 350px;
+    height: auto;
+    margin: 1em;
+    padding: 0.7em;
+    padding-top: 0.4em;
+    background: rgba(0, 0, 0, 0.4);
+    text-align: center;
+    backdrop-filter: blur(4px);
+}
+legend {
+    font-size: 120%;
+    text-align: center;
+}
+.window a {
+    color: rgb(190, 190, 190);
+}
+.window a:hover {
+    color: #fff;
+}
+.window p {
+    display: block;
+    margin-top: 0;
+}
+.window p:last-of-type {
+    margin-bottom: 0;
+}
+.window p b {
+    display: block;
+}
+.window img {
+    width: 1.2em;
+}
+h1 {
+    background-color: #f3ec78;
+    background-image: linear-gradient(45deg, #b0f08c, #af2048);
+    background-size: 100%;
+    background-clip: text;
+    -webkit-background-clip: text;
+    -moz-background-clip: text;
+    -webkit-text-fill-color: transparent; 
+    -moz-text-fill-color: transparent;
+  }
+@media only screen 
+and (max-width: 1000px) {
+    .wrapper {
+        height: auto;
+        flex-direction: column;
+    }
+    .linewrapper {
+        height: auto;
+        flex-direction: column;
+    }
+    .window {
+        width: 85%;
+    }
+    h1 {
+        font-size: 1.7em;
+    }
+}
\ No newline at end of file
