rewrite the thing

2026-05-11 22:06:56 +00:00 · 2022-09-21 01:01:32 +02:00
parent 3d82a60083
commit 2abf562f5d
7 changed files with 431 additions and 251 deletions
@@ -1,33 +1,108 @@
 <!DOCTYPE html>
+<html lang="en">
 <head>
    <title>YouHaveTrouble</title>
+    <meta name="title" content="YouHaveTrouble"/>
+    <meta name="description" content="Just a page about random person on the internet"/>
+    <meta property="twitter:title" content="YouHaveTrouble"/>
+    <meta property="twitter:image" content="https://youhavetrouble.me/img/avatar.png"/>
+    <meta property="twitter:description" content="Just a page about random person on the internet"/>
+    <meta property="og:title" content="YouHaveTrouble"/>
+    <meta property="og:url" content="https://youhavetrouble.me"/>
+    <meta property="og:description" content="Just a page about random person on the internet"/>
+    <meta property="og:image" content="https://youhavetrouble.me/img/avatar.png"/>
    <link rel="stylesheet" href="/style/main.css">
-    <script src="https://kit.fontawesome.com/5e96beba0c.js" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"
+          integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A=="
+          crossorigin="anonymous" referrerpolicy="no-referrer"/>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="index.js" defer></script>
 </head>
 <body>
-    <div class="wrapper">
-        <div class="linewrapper">
-            <h1><a href="/">youhavetrouble.me</a></h1>
-        </div>
-        <div class="linewrapper">
-            <fieldset class="window">
-                <legend>About me</legend>
-                <p>
-                    Self-taught programmer, game making enthusiast, java developer. Active member of purpur minecraft community.
-                </p>
-            </fieldset>
-            <fieldset class="window">
-            <legend>Links</legend>
-            <p>
-                <a href="https://github.com/YouHaveTrouble"><i class="fas fa-github fa"></i> GitHub</a><br>
-                <a href="https://discord.gg/j8KK5dGBps"><i class="fab fa-discord"></i> Discord</a><br>
-                <a href="https://ko-fi.com/youhavetrouble"><i class="fas fa-mug-hot ko-fi"></i> Ko-fi</a><br>
-                <a href="/projects"><i class="far fa-keyboard"></i> Projects</a>
-            </p>
-            </fieldset>
-        </div>
-        <p class="footer">© Paweł "YouHaveTrouble" Michalewski 2022</p>
+<nav>
+    <div class="pages">
+        <a class="button active">Home</a>
+        <a href="/projects" class="button">Projects</a>
    </div>
+</nav>
+<section>
+    <div class="card">
+        <div class="title">
+            <div class="avatar"><img alt="avatar" src="img/avatar.png" draggable="false"></div>
+            <div>
+                <div class="name">YouHaveTrouble</div>
+                <div id="status">Status unknown</div>
+                <div id="status-action"></div>
+            </div>
+        </div>
+    </div>
+</section>
+<section>
+    <div class="card">
+        <h2>About me</h2>
+        <p>I'm programming for a living. Writing plugins for minecraft servers for fun and doing generally questionable
+            things online.</p>
+    </div>
+</section>
+<section>
+    <h2>Socials</h2>
+    <div class="row">
+        <a href="https://github.com/YouHaveTrouble" class="vert-card">
+            <i class="fa-brands fa-github"></i>
+            <span>GitHub</span>
+        </a>
+        <a href="https://discord.gg/j8KK5dGBps" class="vert-card">
+            <i class="fa-brands fa-discord"></i>
+            <span>Discord</span>
+        </a>
+        <a href="https://ko-fi.com/youhavetrouble" class="vert-card">
+            <i class="fa-solid fa-mug-hot"></i>
+            <span>Ko-fi</span>
+        </a>
+        <a href="https://modrinth.com/user/YouHaveTrouble" class="vert-card">
+            <div class="svg-logos">
+                <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMin" viewBox="0 0 142 142" aria-hidden="true" class="text-logo"><g><path d="M159.07,89.29A70.94,70.94,0,1,0,20,63.52H32A58.78,58.78,0,0,1,145.23,49.93l-11.66,3.12a46.54,46.54,0,0,0-29-26.52l-2.15,12.13a34.31,34.31,0,0,1,2.77,63.26l3.19,11.9a46.52,46.52,0,0,0,28.33-49l11.62-3.1A57.94,57.94,0,0,1,147.27,85Z" transform="translate(-19.79)" fill="white" fill-rule="evenodd"></path><path d="M108.92,139.3A70.93,70.93,0,0,1,19.79,76h12a59.48,59.48,0,0,0,1.78,9.91,58.73,58.73,0,0,0,3.63,9.91l10.68-6.41a46.58,46.58,0,0,1,44.72-65L90.43,36.54A34.38,34.38,0,0,0,57.36,79.75C57.67,80.88,58,82,58.43,83l13.66-8.19L68,63.93l12.9-13.25,16.31-3.51L101.9,53l-7.52,7.61-6.55,2.06-4.69,4.82,2.3,6.38s4.64,4.94,4.65,4.94l6.57-1.74,4.67-5.13,10.2-3.24,3,6.84L104.05,88.43,86.41,94l-7.92-8.81L64.7,93.48a34.44,34.44,0,0,0,28.72,11.59L96.61,117A46.6,46.6,0,0,1,54.13,99.83l-10.64,6.38a58.81,58.81,0,0,0,99.6-9.77l11.8,4.29A70.77,70.77,0,0,1,108.92,139.3Z" transform="translate(-19.79)" fill="white"></path></g></svg>
+            </div>
+            <span>Modrinth</span>
+        </a>
+        <a href="https://www.youtube.com/c/YouHaveTrouble" class="vert-card">
+            <i class="fa-brands fa-youtube"></i>
+            <span>YouTube</span>
+        </a>
+    </div>
+</section>
+<section>
+    <h2>Technologies</h2>
+    <div class="row">
+        <div class="vert-card">
+            <i class="fa-brands fa-java"></i>
+            <span>Java</span>
+        </div>
+        <div class="vert-card">
+            <i class="fa-brands fa-php"></i>
+            <span>PHP</span>
+        </div>
+        <div class="vert-card">
+            <i class="fa-brands fa-js"></i>
+            <span>JavaScript</span>
+        </div>
+        <div class="vert-card">
+            <i class="fa-solid fa-database"></i>
+            <span>MySQL</span>
+        </div>
+        <div class="vert-card">
+            <i class="fa-brands fa-git-alt"></i>
+            <span>GIT</span>
+        </div>
+        <div class="vert-card">
+            <i class="fa-brands fa-css3-alt"></i>
+            <span>CSS3</span>
+        </div>
+    </div>
+</section>
+<footer>
+    <small>&copy; Paweł "YouHaveTrouble" Michalewski</small>
+</footer>
 </body>
+</html>
@@ -0,0 +1,43 @@
+const status = document.querySelector("#status");
+const action = document.querySelector("#status-action");
+const avatar = document.querySelector(".avatar img");
+
+updateStatus();
+window.setInterval(updateStatus, 10000);
+
+async function updateStatus() {
+    const result = await fetch("https://api.youhavetrouble.me/online");
+    if (result.status !== 200) return;
+
+    const json = await result.json();
+    if (json.steam.status === "ONLINE") {
+        status.innerText = "Currently Online";
+        action.innerText = "";
+        setavatarBg("online")
+        return;
+    }
+    if (json.steam.status === "IN_GAME") {
+        status.innerText = "Currently Online";
+        action.innerText = `Playing ${json.steam.game}`;
+        setavatarBg("online")
+        return;
+    }
+    if (json.discord === "DO_NOT_DISTURB" || json.discord === "ONLINE") {
+        status.innerText = "Currently Online";
+        action.innerText = "";
+        setavatarBg("online")
+        return;
+    }
+
+    status.innerText = "Currently Offline";
+    action.innerText = "";
+    setavatarBg("offline")
+}
+
+function setavatarBg(status) {
+    if (status === "online") {
+        avatar.style.backgroundColor = "#5a9a5a"
+    } else if (status === "offline") {
+        avatar.style.backgroundColor = "#a62d2d"
+    }
+}
@@ -1,43 +1,63 @@
 <!DOCTYPE html>
+<html lang="en">
 <head>
-    <title>YouHaveTrouble</title>
-    <link rel="stylesheet" href="/style/main.css">
-    <link rel="stylesheet" href="/style/projects.css">
-    <meta charset="UTF-8">
-    <script src="https://kit.fontawesome.com/5e96beba0c.js" crossorigin="anonymous" defer></script>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>YouHaveTrouble</title>
+  <meta name="title" content="YouHaveTrouble"/>
+  <meta name="description" content="Just a page about random person on the internet"/>
+  <meta property="twitter:title" content="YouHaveTrouble"/>
+  <meta property="twitter:image" content="https://youhavetrouble.me/img/avatar.png"/>
+  <meta property="twitter:description" content="Just a page about random person on the internet"/>
+  <meta property="og:title" content="YouHaveTrouble"/>
+  <meta property="og:url" content="https://youhavetrouble.me"/>
+  <meta property="og:description" content="Just a page about random person on the internet"/>
+  <meta property="og:image" content="https://youhavetrouble.me/img/avatar.png"/>
+  <link rel="stylesheet" href="/style/main.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"
+        integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A=="
+        crossorigin="anonymous" referrerpolicy="no-referrer"/>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script src="projects.js" defer></script>
 </head>
 <body>
-    <div class="wrapper">
-        <div class="linewrapper">
-            <h1><a href="/">youhavetrouble.me</a></h1>
-        </div>
-        <div class="linewrapper">
-            <fieldset class="project-window">
-                <legend><h2>Tutorials</h2></legend>
-                <h4>Minecraft server optimization guide</h4>
-                <h5><a href="https://github.com/YouHaveTrouble/minecraft-optimization"><i class="fas fa-link fa"></i> See project</a></h5>
-                <p>A guide for bukkit minecraft server users aiming to improve performance to get more players on their server.</p>
-            </fieldset>
-        </div>
-        <div class="linewrapper">
-            <fieldset id="minecraft-plugins" class="project-window">
-                <legend><h2>Minecraft plugins</h2></legend>
-                <p>This section is dynamically set by javascript, therefore you need to enable javascript to see it :<</p>
-            </fieldset>
-        </div>
-
-        <p class="footer">© Paweł "YouHaveTrouble" Michalewski 2021</p>
-        
-    </div>
-    <script type="application/javascript" src="projects.js" defer></script>
+<nav>
+  <div class="pages">
+    <a href="/" class="button ">Home</a>
+    <a class="button active">Projects</a>
+  </div>
+</nav>
+<section>
+  <h2>Tutorials</h2>
+  <div class="row">
+    <a href="https://github.com/YouHaveTrouble/minecraft-optimization" class="hori-card" target="_blank">
+      <div class="icon">
+        <i class="fa-solid fa-server"></i>
+      </div>
+      <div class="desc">
+        <b>Server Optimization Guide</b>
+        <small>Minecraft server optimization guide aimed for bukkit-based servers</small>
+      </div>
+    </a>
+  </div>
+</section>
+<section>
+  <h2>Minecraft plugins</h2>
+  <div class="row" data-plugins>
+  </div>
+</section>
+<footer>
+  <small>&copy; Paweł "YouHaveTrouble" Michalewski</small>
+</footer>
 </body>
-<template id="project-entry">
-    <div class="project-entry">
-        <h4 class="project-title"></h4>
-        <h5>
-            <a class="project-source" target="_blank"><span class="fas fa-github fa"></span> Source code</a><a class="project-downloads" target="_blank"><span class="fas fa-download"></span> Download</a>
-        </h5>
-        <p class="project-description"></p>
+<template id="iconTemplate">
+  <a data-link class="hori-card" target="_blank">
+    <div class="icon">
+      <img data-iconimage loading="lazy">
    </div>
+    <div class="desc">
+      <b data-name></b>
+      <small data-desc></small>
+    </div>
+  </a>
 </template>
+</html>
@@ -1,32 +1,25 @@
-const projectEntry = document.getElementById('project-entry');
-const mcPluginsSection = document.getElementById('minecraft-plugins');
-mcPluginsSection.innerHTML = '<legend><h2>Minecraft plugins</h2></legend>'
-getRepos();
+const template = document.querySelector("#iconTemplate");

-function getRepos() {
-    const xhr = new XMLHttpRequest();
-    xhr.open('GET', 'https://api.github.com/users/youhavetrouble/repos?per_page=200');
-    xhr.send();
-    xhr.onload = function() {
-        if (xhr.status !== 200) {
-            mcPluginsSection.innerHTML = '<legend><h2>Minecraft plugins</h2></legend><p>An error occured while getting data from github. Please refresh the page.</p>'
-            return;
-        }
-        let json = JSON.parse(xhr.response);
-        for (const repoId in json) {
-            const repo = json[repoId];
-            if (repo['topics'].includes('minecraft-plugin')) {
-                addMinecraftPlugin(repo);
-            }
-        }
-    };
-}
+getPlugins();

-function addMinecraftPlugin(pluginData) {
-    let newEntry = projectEntry.content.querySelector('.project-entry').cloneNode(true);
-    newEntry.querySelector('.project-title').innerText = pluginData['name'];
-    newEntry.querySelector('.project-source').href = pluginData['html_url'];
-    newEntry.querySelector('.project-description').innerText = pluginData['description']
-    newEntry.querySelector('.project-downloads').href = `${pluginData['html_url']}/releases/latest`
-    mcPluginsSection.append(newEntry);
+async function getPlugins() {
+    const result = await fetch("https://api.modrinth.com/v2/user/youhavetrouble/projects");
+    if (result.status !== 200) return;
+    const json = await result.json();
+    const pluginSection = document.querySelector("[data-plugins]");
+
+    for (const plugin in json) {
+        const pluginData = json[plugin];
+        if (pluginData.client_side !== "unsupported") continue;
+        const clonedTemplate = template.content.cloneNode(true);
+        const projectType = pluginData.project_type;
+        const slug = pluginData.slug;
+        clonedTemplate.querySelector("[data-link]").href = `https://modrinth.com/${projectType}/${slug}`;
+        clonedTemplate.querySelector("[data-name]").innerText = pluginData.title;
+        clonedTemplate.querySelector("[data-desc]").innerText = pluginData.description;
+        const icon = clonedTemplate.querySelector("[data-iconimage]");
+        icon.src = pluginData.icon_url;
+        icon.alt = pluginData.title;
+        pluginSection.append(clonedTemplate);
+    }
 }
@@ -2,130 +2,250 @@
 :root {
    margin: 0;
    padding: 0;
+    user-select: none;
 }
 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;
    font-size: 1.2em;
 }
 body {
    margin: 0;
-    padding: 0;
-}
-.wrapper {
-    margin: 0;
-    padding: 0;
-    width: 100%;
-    min-height: 100vh;
+    background-color: rgb(16, 16, 16);
    display: flex;
    flex-direction: column;
    align-items: center;
-    justify-content: center;
-}
-.linewrapper {
    width: 100%;
+    min-height: 100vh;
+    padding: 0;
+}
+
+nav {
+    top: 0;
+    position: sticky;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    max-width: 38rem;
+    width: calc(100% - 2rem);
+    align-items: center;
+    padding-inline: 1rem;
+    height: 3rem;
+    margin: 0 auto;
+    z-index: 10;
+    background-color: rgb(16, 16, 16);
+}
+
+section {
+    width: 95%;
+    max-width: 42rem;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding-block: 1rem;
+}
+
+.card {
+    width: 40rem;
+    background-color: #484848;
+    max-width: calc(85%);
+    border-radius: 1rem;
+    padding: 1rem;
+}
+
+.card .title {
+    width: 100%;
+    display: flex;
+    align-items: center;
+}
+
+.card .title .avatar {
+    width: 10rem;
+    min-width: 3rem;
+    aspect-ratio: 1/1;
+    padding: 1rem;
+}
+
+.card .title .avatar img {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    border: 2px solid #3f230f;
+    background-color: #6e6e6e;
+    border-radius: 50%;
+}
+
+.card h2 {
+    margin-top: 0;
+}
+
+.title div {
+    font-size: 1.2rem;
+    min-height: 1.5rem;
+}
+
+.title div .name {
+    font-size: 1.4rem;
+    font-weight: 800;
+}
+
+.pages {
    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.5);
-    text-align: center;
-}
-legend {
-    font-size: 120%;
-    text-align: center;
+    justify-content: end;
+    height: 100%;
+    width: 100%;
 }

-.footer {
-    font-size: 0.7em;
-    color: rgba(128, 128, 128, 0.705);
+.pages a {
+    height: 100%;
+    display: flex;
+    position: relative;
+    align-items: center;
+    justify-content: center;
+    padding-inline: 0.5rem;
+    text-decoration: none;
+    color: #fff;
+    transition: background-color 150ms linear;
+}
+
+.pages a:hover {
+    background-color: rgba(255,255,255, 0.1);
+}
+
+.pages a::after {
+    display: block;
+    position: absolute;
+    content: '';
+    width: 100%;
+    height: 1px;
+    background-color: transparent;
+    bottom: 0;
+    transition: background-color 150ms linear;
+}
+
+.button.active {
    cursor: default;
 }
-.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;
+
+.pages a:hover::after, .button.active::after {
+    background-color: #fff;
 }

-.fa-github {
-    color: #fff;
+.row {
+    display: flex;
+    justify-content: center;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 1rem;
+    width: 90%;
 }

-.fa-discord {
-    color: #fff;
+.vert-card {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    background-color: #484848;
+    padding: 1rem;
+    min-width: 3rem;
+    text-align: center;
+    border-radius: 1rem;
+    text-decoration: none;
+    color: white;
+    transition: background-color 200ms linear;
+    gap: 0.15rem;
 }

-.fa-keyboard {
-    color: #fff;
+a.vert-card:hover {
+    background-color: #595959;
 }

-.ko-fi {
-    color: #fff;
+.hori-card {
+    display: flex;
+    justify-content: left;
+    align-items: center;
+    flex-direction: row;
+    background-color: #484848;
+    padding: 1rem;
+    text-align: center;
+    border-radius: 1rem;
+    text-decoration: none;
+    color: white;
+    transition: background-color 200ms linear;
+    gap: 0.5rem;
+    width: 100%;
 }

-.ko-fi::after {
-    content: '\f004';
-    font-weight: 900;
-    font-size: 0.55em;
-    color: #ff5e5b;
+a.hori-card:hover {
+    background-color: #595959;
+}
+
+.hori-card [data-name] {
+    overflow-wrap: anywhere;
+}
+
+.hori-card .desc {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    text-align: left;
+}
+
+.hori-card .icon {
+    width: 4rem;
+    min-width: 4rem;
+    min-height: 4rem;
+    height: 4rem;
+}
+
+footer {
+    text-align: center;
+    font-size: 0.8rem;
+    color: #595959;
+    padding-block: 1rem;
+}
+
+.fa-brands, .fa-database, .fa-solid {
+    font-size: 2rem;
+}
+
+.svg-logos {
+    width: 2rem;
+    height: 2rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+}
+
+.svg-logos svg {
    position: absolute;
-    margin: 0.75em 0 0 -1.6em;
+    width: 2rem;
+    height: 2rem;
 }

-@media only screen 
-and (max-width: 1000px) {
-    .wrapper {
+.icon {
+    width: 4rem;
+    height: 4rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.icon img {
+    width: 100%;
+    height: 100%;
+    border-radius: 0.5rem;
+}
+
+@media screen and (max-width: 420px) {
+    div.title {
        flex-direction: column;
    }
-    .linewrapper {
-        flex-direction: column;
-    }
-    .window {
-        width: 85%;
-    }
-    h1 {
-        font-size: 1.7em;
-    }
 }
@@ -1,71 +0,0 @@
-.project-window {
-    width: auto;
-    min-width: 7em;
-    max-width: 750px;
-    height: auto;
-    margin: 1em;
-    padding: 0.7em;
-    padding-top: 0.4em;
-    background: rgba(0, 0, 0, 0.75);
-    text-align: center;
-}
-
-h2 {
-    margin: 0;
-}
-h4 {
-    margin: 0;
-}
-h5 {
-    margin: 0.4em;
-}
-
-.project-window p {
-    display: block;
-    margin-top: 0;
-    font-size: 0.9em;
-}
-
-.project-window a {
-    color: rgb(190, 190, 190);
-}
-.project-window a:hover {
-    color: #fff;
-}
-
-.project-window ul {
-    list-style-type:none;
-}
-
-.project-entry {
-    padding: 0.5rem 0;
-    opacity: 0;
-    animation: fadein 1s forwards;
-}
-
-@keyframes fadein {
-    from {opacity: 0;}
-    to {opacity: 1;}
-}
-
-.project-entry h5 a {
-    margin: 0.3rem;
-}
-
-@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;
-    }
-}