diff --git a/img/bg.jpg b/img/bg.jpg index 937380f..a7b904f 100644 Binary files a/img/bg.jpg and b/img/bg.jpg differ diff --git a/img/board.jpg b/img/board.jpg new file mode 100644 index 0000000..052192f Binary files /dev/null and b/img/board.jpg differ diff --git a/index.html b/index.html index 731362e..cebad06 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@ - + @@ -20,126 +20,40 @@ - -
-
-
-
avatar
-
-
YouHaveTrouble
-
Status unknown
-
-
-
-
-
-
-
-

About me

-

I'm self-taught software developer. I'm currently working as a fullstack web developer. In my free time I - make plugins for minecraft servers and mods for Terraria.

-
-
-
-

Socials

-
- - - GitHub - - - - Discord - - - - Ko-fi - - -
- -
- Modrinth - - -
- -
- WakaTime - - - - YouTube - - - - Steam - -
-
-
-

Technologies

-
-
- - Java -
-
- - PHP -
-
- - JavaScript -
-
- - MySQL -
-
- - Git -
-
- - CSS3 -
-
- - HTML 5 -
-
- - Vue -
-
- - NodeJS -
-
-
- - - - - - - -
- C# -
-
- - Linux -
+
+
+
+

+ Hi! I'm Trouble, and I'm currently working as a fullstack developer. In my free time I enjoy working on my + side projects that mostly include programming. I'm extremely passionate about games and what goes into + creating them. I'm also "that one person" of every friend group that sets game servers up! Additionally, + I own and am slowly learning bass. +

-
+ +
+

Projects

+
+ +
+
+

Side Project Den

+

A list of my side projects

+
+ + +
+

Purpur

+

Minecraft server software

+
+ +
+

Test

+
+
+
+ diff --git a/index.js b/index.js index a6ca156..1950e89 100644 --- a/index.js +++ b/index.js @@ -2,8 +2,8 @@ const status = document.querySelector("#status"); const action = document.querySelector("#status-action"); const avatar = document.querySelector(".avatar img"); -updateStatus(); -window.setInterval(updateStatus, 10000); +// updateStatus(); +// window.setInterval(updateStatus, 10000); async function updateStatus() { const result = await fetch("https://api.youhavetrouble.me/online"); diff --git a/main.css b/main.css new file mode 100644 index 0000000..e022596 --- /dev/null +++ b/main.css @@ -0,0 +1,153 @@ +@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap'); +:root { + margin: 0; + padding: 0; + --max-width: 40rem; +} +html { + font-family: 'Open Sans', sans-serif; + color: white; + background-size: cover; + font-size: 1.2em; +} +body { + margin: 0; + background-color: rgba(16, 16, 16, 0.7); + display: flex; + flex-direction: column; + align-items: center; + gap: 1rem; + width: 100%; + min-height: 100vh; + padding: 0; + background-image: url("img/bg.jpg"); + background-position: center; + background-attachment: fixed; + background-size: cover; + background-blend-mode: overlay; +} + +small { + font-size: 0.6rem; +} + +p, h1, h2, h3, h4, h5, h6 { + text-align: center; + margin: 0; +} + +a { + text-decoration: none; +} + +h2 { + font-size: 1.1rem; +} + +header { + padding-block: 2rem; + padding-inline: 1rem; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 1rem; +} + +main { + width: 100%; + max-width: var(--max-width); + padding-inline: 1rem; + display: flex; + flex-direction: column; + gap: 1rem; +} + +.avatar { + width: min(16rem, 100%); + height: min(16rem, 100%); + aspect-ratio: 1/1; + border-radius: 50%; + border: 3px solid #44251a; + background-color: gray; + overflow: clip; +} + +.avatar img { + width: 100%; + height: 100%; +} + +.bio { + padding: 1rem; + max-width: var(--max-width); + width: 100%; + border: 2px solid #000; + border-radius: 0.2rem; + background-color: rgba(0,0,0, 0.5); + backdrop-filter: blur(4px); + box-sizing: border-box; +} + +.projects { + text-align: center; + width: 100%; + display: grid; + grid-gap: 1rem; + grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); + +} + +.vertical-screen { + padding: 1rem; + border: 2px solid #000; + border-radius: 0.2rem; + position: relative; + background-color: rgba(0,0,0, 0.5); + backdrop-filter: blur(4px); + box-sizing: border-box; + min-height: 20rem; + display: flex; + flex-direction: column; + justify-content: flex-end; + align-items: center; + text-decoration: none; + color: #fff; +} + +.vertical-screen p { + font-size: 0.8rem; + color: rgba(255,255,255, 0.75); +} + +.vertical-screen .bg { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; + overflow: hidden; + opacity: 0.075; + background-image: url("img/board.jpg"); + background-position: center; + animation: pan-image-1 30s infinite; +} + +@keyframes pan-image-1 { + 0% { + background-position: 36% 42%; + } + 25% { + background-position: 60% 84%; + } + 50% { + background-position: 45% 60%; + } + 75% { + background-position: 12% 20%; + } + 100% { + background-position: 36% 42%; + } +} \ No newline at end of file diff --git a/projects/index.html b/projects/index.html deleted file mode 100644 index 979b745..0000000 --- a/projects/index.html +++ /dev/null @@ -1,78 +0,0 @@ - - - - YouHaveTrouble - - - - - - - - - - - - - - - - - -
-

Tutorials

-
- -
- -
-
- Server Optimization Guide - Minecraft server optimization guide aimed for bukkit-based servers -
- -
-
-
-

Minecraft projects

-
- -
-
-
-

Terraria projects

-
- -
- -
-
- YHT Mod - TModLoader mod with a bit of content and quality of life changes -
- -
-
- - - - \ No newline at end of file diff --git a/projects/projects.js b/projects/projects.js deleted file mode 100644 index 075e649..0000000 --- a/projects/projects.js +++ /dev/null @@ -1,26 +0,0 @@ -const template = document.querySelector("#iconTemplate"); - -getPlugins(); - -async function getPlugins() { - const pluginSection = document.querySelector("[data-plugins]"); - pluginSection.innerHTML = "

Loading data...

"; - const result = await fetch("https://api.modrinth.com/v2/user/youhavetrouble/projects"); - if (result.status !== 200) return; - const json = await result.json(); - pluginSection.innerHTML = ""; - - for (const plugin in json) { - const pluginData = json[plugin]; - 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); - } -} \ No newline at end of file diff --git a/style/main.css b/style/main.css deleted file mode 100644 index 95b9b31..0000000 --- a/style/main.css +++ /dev/null @@ -1,255 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap'); -:root { - margin: 0; - padding: 0; - user-select: none; -} -html { - font-family: 'Open Sans', sans-serif; - color: white; - background-size: cover; - font-size: 1.2em; -} -body { - margin: 0; - background-color: rgb(16, 16, 16); - display: flex; - flex-direction: column; - align-items: center; - 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: end; - height: 100%; - width: 100%; -} - -.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; -} - -.pages a:hover::after, .button.active::after { - background-color: #fff; -} - -.row { - display: flex; - justify-content: center; - flex-direction: row; - flex-wrap: wrap; - gap: 1rem; - width: 90%; -} - -.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; -} - -a.vert-card:hover { - background-color: #595959; -} - -.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%; -} - -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; - width: 2rem; - height: 2rem; -} - -.icon { - width: 4rem; - height: 4rem; - display: flex; - justify-content: center; - align-items: center; -} - -.icon img { - width: 100%; - height: 100%; - border-radius: 0.5rem; -} - -.black-n-white { - filter: grayscale(1); -} - -@media screen and (max-width: 420px) { - div.title { - flex-direction: column; - } -} \ No newline at end of file