-
- Java
-
-
- PHP
-
-
- JavaScript
-
-
- MySQL
-
-
- Git
-
-
- CSS3
-
-
- HTML 5
-
-
- Vue
-
-
- NodeJS
-
-
-
- Linux
-
+
+
+
+ Featured Projects
+
+
+
+ Socials
+
+
+
+
+
+
© Paweł "YouHaveTrouble" Michalewski
diff --git a/index.js b/index.js
index a6ca156..07191cb 100644
--- a/index.js
+++ b/index.js
@@ -1,27 +1,29 @@
const status = document.querySelector("#status");
const action = document.querySelector("#status-action");
-const avatar = document.querySelector(".avatar img");
+const avatar = document.querySelector(".avatar");
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;
+ switch (json.steam.status) {
+ case "ONLINE":
+ status.innerText = "Currently Online";
+ action.innerText = "";
+ setavatarBg("online")
+ return;
+ case "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 = "";
diff --git a/main.css b/main.css
new file mode 100644
index 0000000..0791af4
--- /dev/null
+++ b/main.css
@@ -0,0 +1,302 @@
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
+:root {
+ margin: 0;
+ padding: 0;
+ --max-width: 40rem;
+}
+
+::-moz-selection {
+ background: rgba(255,255,255, 0.2);
+}
+
+::selection {
+ background: rgba(255,255,255, 0.2);
+}
+
+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.jpeg");
+ 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: calc(100% - 2rem);
+ max-width: var(--max-width);
+ padding-inline: 1rem;
+ display: flex;
+ flex-direction: column;
+ gap: 3rem;
+}
+
+main article {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ 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;
+ transition: background-color 0.3s linear;
+}
+
+.avatar img {
+ width: 100%;
+ height: 100%;
+}
+
+.status {
+ max-width: var(--max-width);
+ width: min(100%, 16rem);
+ border: 2px solid #000;
+ border-radius: 0.2rem;
+ background-color: rgba(0,0,0, 0.5);
+ backdrop-filter: blur(4px);
+ box-sizing: border-box;
+ min-height: 5rem;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 0.5rem;
+}
+
+.status #status-action:empty {
+ display: none;
+}
+
+.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: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: center;
+ gap: 1rem;
+}
+
+.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;
+ width: 12rem;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: center;
+ text-decoration: none;
+ color: #fff;
+ transition: border-color 0.1s linear;
+}
+
+.vertical-screen:hover {
+ border-color: #fff;
+}
+
+.vertical-screen p {
+ font-size: 0.8rem;
+ color: rgba(255,255,255, 0.75);
+}
+
+.vertical-screen .logo {
+ width: 100%;
+ height: 100%;
+ opacity: 0.75;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ min-height: 15rem;
+}
+
+.vertical-screen .bg {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: -1;
+ overflow: hidden;
+ opacity: 0.075;
+ transition: opacity 0.1s linear;
+}
+
+.vertical-screen:hover .bg {
+ opacity: 0.15;
+}
+
+.vertical-screen.side-projects .bg {
+ background-image: url("img/board.jpeg");
+ background-position: center;
+ animation: pan-image-1 60s infinite alternate both ease-in-out;
+}
+
+.vertical-screen.side-projects .logo {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ min-height: 15rem;
+ opacity: 0.75;
+}
+
+.vertical-screen.side-projects .logo .small {
+ font-size: 0.6rem;
+}
+
+.vertical-screen.side-projects .logo .big {
+ font-size: 1.3rem;
+ font-weight: bold;
+ line-height: 1;
+}
+
+.vertical-screen.purpur .bg {
+ background-image: url("img/minecraft-hobbit-hole.jpeg");
+ background-position: center;
+ animation: pan-image-2 90s infinite alternate both ease-in-out;
+}
+
+.flex-row {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ gap: 1rem;
+ justify-content: center;
+ align-items: center;
+}
+
+.icon-square {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ width: 6rem;
+ height: 6rem;
+ border-radius: 0.2rem;
+ background-color: rgba(0,0,0, 0.4);
+ backdrop-filter: blur(4px);
+ box-sizing: border-box;
+ border: 2px solid #000;
+ transition: border 0.1s linear, background 0.1s linear;
+ padding: 1rem;
+ color: #fff;
+}
+
+.icon-square img {
+ width: 100%;
+ aspect-ratio: 1/1;
+ opacity: 0.8;
+ transition: opacity 0.1s linear, transform 0.1s linear;
+ transform: scale(0.8);
+}
+
+.icon-square:hover img {
+ opacity: 1;
+ transform: scale(0.85);
+}
+
+.icon-square:hover {
+ border-color: #fff;
+ background-color: rgba(0,0,0, 0.6);
+}
+
+@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%;
+ }
+}
+
+@keyframes pan-image-2 {
+ 0% {
+ background-position: 0 0;
+ }
+ 33% {
+ background-position: 56% 60%;
+ }
+ 66% {
+ background-position: 77% 42%;
+ }
+ 100% {
+ background-position: 0 0;
+ }
+}
\ 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
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Minecraft projects
-
- Sorry, but this data is loaded by javascript, which seems to not be enabled!
-
-
-
-
- © Paweł "YouHaveTrouble" Michalewski
-
-
-
-
-
-
-
-
-
-
-
\ 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
+ 
+ GitHub
+
+
+ 
+ Discord
+
+
+ 
+ Ko-fi
+
+
+ 
+ Steam
+
+
+ 
+ YouTube
+
+
+ 
+ Modrinth
+
+
+ 
+ Wakatime
+
+ 
-