From 02c3312728761d799b6af1a0247196c4289334b0 Mon Sep 17 00:00:00 2001 From: zyqunix <117040076+zyqunix@users.noreply.github.com> Date: Tue, 22 Apr 2025 00:17:40 +0200 Subject: [PATCH] make portfolio the landing page --- index.html | 158 ++++--- index.js | 197 +++++++++ portfolio/lang.json => lang.json | 15 +- portfolio/index.html | 117 ----- portfolio/index.js | 186 -------- portfolio/style.css | 523 ---------------------- sitemap/index.html | 59 +++ sitemap/index.js | 0 quote.js => sitemap/quote.js | 0 sitemap/style.css | 231 ++++++++++ tools.js => sitemap/tools.js | 0 tools.json => sitemap/tools.json | 0 translate.js => sitemap/translate.js | 0 portfolio/skills.json => skills.json | 0 style.css | 638 +++++++++++++++++++-------- 15 files changed, 1070 insertions(+), 1054 deletions(-) rename portfolio/lang.json => lang.json (84%) delete mode 100644 portfolio/index.html delete mode 100644 portfolio/index.js delete mode 100644 portfolio/style.css create mode 100644 sitemap/index.html create mode 100644 sitemap/index.js rename quote.js => sitemap/quote.js (100%) create mode 100644 sitemap/style.css rename tools.js => sitemap/tools.js (100%) rename tools.json => sitemap/tools.json (100%) rename translate.js => sitemap/translate.js (100%) rename portfolio/skills.json => skills.json (100%) diff --git a/index.html b/index.html index 60f4338..92d22f9 100644 --- a/index.html +++ b/index.html @@ -1,59 +1,117 @@ + + + + + zyq's Portfolio + + + + +
+ Profile Picture +

zyqunix

+
+
+
+ Coding, Listening to Music, Reverse Engineering, Playing Counter-Strike +
+
+
+

Discord

+
Status
+
+ Activity Image +
+
+
- - - - zyq's Tools - - - - +
+

Languages

+
- -
- +
+

Skills

+
- +
+

Coding Stats

+

Since January 5th, 2025

+ +
-
why is this one so much worse than /projects T_T T_T T_T
-
+
+

Contact

+ + + GitHub + + + + Instagram + + + + Twitter + + + + YouTube + +
-
-

Welcome!

-

This is a website for future tools. The source code can be found on my GitHub!

-

Clicking "Test It" will open the tool in the current tab.

-

More tools will come in the future.

-
- -
- - - - - - - - - +
+

Software I Use

+ + + Neovim + + + + Equicord + + + + Arch Linux + + + + Windows 10 + + + + Floorp + + + + LibreWolf + + + + IntelliJ IDEA + + + + Android Studio + + + + Kitty + +
+ + + + diff --git a/index.js b/index.js index e69de29..b694503 100644 --- a/index.js +++ b/index.js @@ -0,0 +1,197 @@ +const timeElem = document.getElementById('time'); +const timezone = 'Europe/Berlin'; + +timeElem.setAttribute('data-tooltip',timezone); + +function getTime(timezone) { + const now = new Date(); + return now.toLocaleString("en-US", { + timezone, + hour12: false, + hour: '2-digit', + minute: '2-digit', + second: '2-digit' + }); +}; + +timeElem.innerHTML = getTime(timezone); + +setInterval(() => { + timeElem.innerHTML = getTime(timezone); +}, 1000); + +const ageElem = document.getElementById('age'); +let birthday = new Date('2008-12-13'); +let age = 0; + +const updateAge = () => { + const now = new Date(); + const diff = now.getTime() - birthday.getTime(); + age = diff / (1000 * 60 * 60 * 24 * 365.25); + ageElem.innerHTML = `${age.toFixed(2)} years old`; +} + +updateAge(); + +const timeInterval = setInterval(() => { + updateAge(); +}, 3600 * 1000); + + +lanyard({ + userId: "1201415921802170388", +}).then(data => { + const statusElem = document.getElementById('status'); + const pfpElem = document.getElementById('profile-picture'); + const activityNameElem = document.getElementById('activity-name'); + const activityImageElem = document.getElementById('activity-image'); + + const gameActivity = data.activities.find(activity => activity.type === 0); + const status = data.activities.find(activity => activity.type === 4); + const statusColors = { + online: "#23a55a", + idle: "#f0b232", + dnd: "#f23f43", + offline: "#80848e" + }; + + const borderColor = statusColors[data.discord_status] || statusColors.offline; + pfpElem.style.borderColor = borderColor; + + statusElem.innerHTML = `"${status ? status.state : "No Custom Status"}" - zyqunix`; + + if (gameActivity) { + activityNameElem.innerHTML = `Playing ${gameActivity.name}: ${gameActivity.details}, ${gameActivity.state}`; + + if (gameActivity.assets && gameActivity.assets.large_image) { + const imgId = gameActivity.assets.large_image; + const imageUrl = imgId.startsWith("mp:external/") + ? `https://media.discordapp.net/${imgId.replace("mp:", "")}` + : `https://cdn.discordapp.com/app-assets/${gameActivity.application_id}/${imgId}.png`; + activityImageElem.src = imageUrl; + activityImageElem.style.display = "block"; + } else { + activityImageElem.style.display = "none"; + } + } else { + activityNameElem.innerHTML = "Playing No Game Activity"; + activityImageElem.style.display = "none"; + } +}); + +function generateLanguageCards(languagesData) { + const container = document.querySelector('.languages'); + + languagesData.languages.forEach(language => { + const languageItem = document.createElement('div'); + languageItem.classList.add('language-item'); + + const namePercentContainer = document.createElement('div'); + namePercentContainer.classList.add('name-percent-container'); + + const languageImage = document.createElement('img'); + languageImage.classList.add('image'); + languageImage.src = language.img; + + const languageName = document.createElement('div'); + languageName.classList.add('language-name', 'tooltip'); + languageName.textContent = language.name; + languageName.id = language.id; + languageName.setAttribute('data-tooltip', language.tooltip); + + const languagePercentage = document.createElement('span'); + languagePercentage.classList.add('percent'); + languagePercentage.textContent = `${language.percentage}%`; + + namePercentContainer.appendChild(languageImage); + namePercentContainer.appendChild(languageName); + namePercentContainer.appendChild(languagePercentage); + + const percentageBar = document.createElement('div'); + percentageBar.classList.add('percentage-bar'); + const barAfter = document.createElement('div'); + barAfter.classList.add('bar-after'); + barAfter.style.width = `${language.percentage}%`; + percentageBar.appendChild(barAfter); + + languageItem.appendChild(namePercentContainer); + languageItem.appendChild(percentageBar); + + container.appendChild(languageItem); + }); +} + +function generateSkillCards(skillData) { + const skillContainer = document.querySelector('.skills'); + skillData.skills.forEach(skill => { + const skillItem = document.createElement('a'); + skillItem.classList.add('skill-item', 'tooltip'); + skillItem.href = skill.url; + skillItem.target = '_blank'; + + const skillImage = document.createElement('img'); + skillImage.classList.add('image'); + skillImage.src = skill.img; + + const skillName = document.createElement('span'); + skillName.classList.add('skill-name'); + skillName.textContent = skill.name; + skillItem.setAttribute('data-tooltip', skill.tooltip); + + skillItem.appendChild(skillImage); + skillItem.appendChild(skillName); + + skillContainer.appendChild(skillItem); + }); +} + +fetch('lang.json') + .then(response => response.json()) + .then(generateLanguageCards) + .catch(error => console.error('Error fetching lang.json:', error)); + +fetch('skills.json') + .then(response => response.json()) + .then(generateSkillCards) + .catch(error => console.error('Error fetching skills.json', error)); + +document.querySelectorAll('.tooltip').forEach(elem => { + elem.addEventListener('mouseenter', () => { + const tooltipText = elem.getAttribute('data-tooltip'); + if (!tooltipText) return; + + const dummy = document.createElement('div'); + dummy.style.position = 'absolute'; + dummy.style.visibility = 'hidden'; + dummy.style.whiteSpace = 'nowrap'; + dummy.style.padding = '5px 10px'; + dummy.style.fontSize = '14px'; + dummy.innerText = tooltipText; + document.body.appendChild(dummy); + + const elemRect = elem.getBoundingClientRect(); + const tipRect = dummy.getBoundingClientRect(); + const leftEdge = elemRect.left + (elemRect.width / 2) - (tipRect.width / 2); + const rightEdge = elemRect.left + (elemRect.width / 2) + (tipRect.width / 2); + + elem.classList.remove('slide-left', 'slide-right'); + + if (rightEdge > window.innerWidth) { + elem.classList.add('slide-left'); + } else if (leftEdge < 0) { + elem.classList.add('slide-right'); + } + + dummy.remove(); + }); +}); + + +window.onload = function() { + const frEl = document.getElementById('fr'); + let rn = Math.floor(Math.random() * 2) + 1; + console.log(rn); + if (rn == 1) { + frEl.innerHTML = "Fr*nch"; + } +} diff --git a/portfolio/lang.json b/lang.json similarity index 84% rename from portfolio/lang.json rename to lang.json index 814ed56..b2d7dff 100644 --- a/portfolio/lang.json +++ b/lang.json @@ -4,31 +4,36 @@ "name": "English", "percentage": 100, "img": "https://search.im-in.space/image_proxy?url=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fen%2Fthumb%2Fb%2Fbe%2FFlag_of_England.svg%2F1200px-Flag_of_England.svg.png&h=3ab694f926f7ab0c024da77e1d5e3a1f4de267f6bf9984f7adc3a9743114ef95", - "tooltip": "Started learning in 1st grade" + "tooltip": "Started learning in 1st grade", + "id": "en" }, { "name": "German", "percentage": 100, "img": "https://search.im-in.space/image_proxy?url=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fen%2Fthumb%2Fb%2Fba%2FFlag_of_Germany.svg%2F640px-Flag_of_Germany.svg.png&h=3921b6290fe87e6919522a8e273efe494d70123859d147682c935a29e375aaae", - "tooltip": "Started learning in 2nd grade" + "tooltip": "Started learning in 2nd grade", + "id": "de" }, { "name": "French", "percentage": 50, "img": "https://search.im-in.space/image_proxy?url=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2F1%2F1f%2FFlag_of_France_official.svg&h=d139dd7e87b1d627b8079636ea584d96d71161f57d41ce44c465ea4cb3fe23e9", - "tooltip": "Started learning in 7th grade" + "tooltip": "Started learning in 7th grade", + "id": "fr" }, { "name": "Slovak", "percentage": 100, "img": "https://search.im-in.space/image_proxy?url=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Fthumb%2Fe%2Fe6%2FFlag_of_Slovakia.svg%2F800px-Flag_of_Slovakia.svg.png&h=aa2494acbea2f461750d3d2b5ecace7289323834862f071b082e511c6e11e71c", - "tooltip": "First language, born in Slovakia" + "tooltip": "First language, born in Slovakia", + "id": "sk" }, { "name": "Czech", "percentage": 90, "img": "https://search.im-in.space/image_proxy?url=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Fthumb%2Fc%2Fcb%2FFlag_of_the_Czech_Republic.svg%2F640px-Flag_of_the_Czech_Republic.svg.png&h=aaf894a4054a000fd36036b44cfeb3a81a3d65e0ec0688a81c299224a9bec60e", - "tooltip": "Free DLC when you're born in Slovakia, you understand Czech fluently" + "tooltip": "Free DLC when you're born in Slovakia, you understand Czech fluently", + "id": "cz" } ] } diff --git a/portfolio/index.html b/portfolio/index.html deleted file mode 100644 index 92d22f9..0000000 --- a/portfolio/index.html +++ /dev/null @@ -1,117 +0,0 @@ - - - - - - - zyq's Portfolio - - - - -
- Profile Picture -

zyqunix

-
-
-
- Coding, Listening to Music, Reverse Engineering, Playing Counter-Strike -
-
-
-

Discord

-
Status
-
- Activity Image -
-
-
- -
-

Languages

-
- -
-

Skills

-
- -
-

Coding Stats

-

Since January 5th, 2025

- -
- -
-

Contact

- - - GitHub - - - - Instagram - - - - Twitter - - - - YouTube - -
- -
-

Software I Use

- - - Neovim - - - - Equicord - - - - Arch Linux - - - - Windows 10 - - - - Floorp - - - - LibreWolf - - - - IntelliJ IDEA - - - - Android Studio - - - - Kitty - -
- - - - - - diff --git a/portfolio/index.js b/portfolio/index.js deleted file mode 100644 index 7a1c161..0000000 --- a/portfolio/index.js +++ /dev/null @@ -1,186 +0,0 @@ -const timeElem = document.getElementById('time'); -const timezone = 'Europe/Berlin'; - -timeElem.setAttribute('data-tooltip',timezone); - -function getTime(timezone) { - const now = new Date(); - return now.toLocaleString("en-US", { - timezone, - hour12: false, - hour: '2-digit', - minute: '2-digit', - second: '2-digit' - }); -}; - -timeElem.innerHTML = getTime(timezone); - -setInterval(() => { - timeElem.innerHTML = getTime(timezone); -}, 1000); - -const ageElem = document.getElementById('age'); -let birthday = new Date('2008-12-13'); -let age = 0; - -const updateAge = () => { - const now = new Date(); - const diff = now.getTime() - birthday.getTime(); - age = diff / (1000 * 60 * 60 * 24 * 365.25); - ageElem.innerHTML = `${age.toFixed(2)} years old`; -} - -updateAge(); - -const timeInterval = setInterval(() => { - updateAge(); -}, 3600 * 1000); - - -lanyard({ - userId: "1201415921802170388", -}).then(data => { - const statusElem = document.getElementById('status'); - const pfpElem = document.getElementById('profile-picture'); - const activityNameElem = document.getElementById('activity-name'); - const activityImageElem = document.getElementById('activity-image'); - - const gameActivity = data.activities.find(activity => activity.type === 0); - const status = data.activities.find(activity => activity.type === 4); - const statusColors = { - online: "#23a55a", - idle: "#f0b232", - dnd: "#f23f43", - offline: "#80848e" - }; - - const borderColor = statusColors[data.discord_status] || statusColors.offline; - pfpElem.style.borderColor = borderColor; - - statusElem.innerHTML = `"${status ? status.state : "No Custom Status"}" - zyqunix`; - - if (gameActivity) { - activityNameElem.innerHTML = `Playing ${gameActivity.name}: ${gameActivity.details}, ${gameActivity.state}`; - - if (gameActivity.assets && gameActivity.assets.large_image) { - const imgId = gameActivity.assets.large_image; - const imageUrl = imgId.startsWith("mp:external/") - ? `https://media.discordapp.net/${imgId.replace("mp:", "")}` - : `https://cdn.discordapp.com/app-assets/${gameActivity.application_id}/${imgId}.png`; - activityImageElem.src = imageUrl; - activityImageElem.style.display = "block"; - } else { - activityImageElem.style.display = "none"; - } - } else { - activityNameElem.innerHTML = "Playing No Game Activity"; - activityImageElem.style.display = "none"; - } -}); - -function generateLanguageCards(languagesData) { - const container = document.querySelector('.languages'); - - languagesData.languages.forEach(language => { - const languageItem = document.createElement('div'); - languageItem.classList.add('language-item'); - - const namePercentContainer = document.createElement('div'); - namePercentContainer.classList.add('name-percent-container'); - - const languageImage = document.createElement('img'); - languageImage.classList.add('image'); - languageImage.src = language.img; - - const languageName = document.createElement('div'); - languageName.classList.add('language-name', 'tooltip'); - languageName.textContent = language.name; - languageName.setAttribute('data-tooltip', language.tooltip); - - const languagePercentage = document.createElement('span'); - languagePercentage.classList.add('percent'); - languagePercentage.textContent = `${language.percentage}%`; - - namePercentContainer.appendChild(languageImage); - namePercentContainer.appendChild(languageName); - namePercentContainer.appendChild(languagePercentage); - - const percentageBar = document.createElement('div'); - percentageBar.classList.add('percentage-bar'); - const barAfter = document.createElement('div'); - barAfter.classList.add('bar-after'); - barAfter.style.width = `${language.percentage}%`; - percentageBar.appendChild(barAfter); - - languageItem.appendChild(namePercentContainer); - languageItem.appendChild(percentageBar); - - container.appendChild(languageItem); - }); -} - -function generateSkillCards(skillData) { - const skillContainer = document.querySelector('.skills'); - skillData.skills.forEach(skill => { - const skillItem = document.createElement('a'); - skillItem.classList.add('skill-item', 'tooltip'); - skillItem.href = skill.url; - skillItem.target = '_blank'; - - const skillImage = document.createElement('img'); - skillImage.classList.add('image'); - skillImage.src = skill.img; - - const skillName = document.createElement('span'); - skillName.classList.add('skill-name'); - skillName.textContent = skill.name; - skillItem.setAttribute('data-tooltip', skill.tooltip); - - skillItem.appendChild(skillImage); - skillItem.appendChild(skillName); - - skillContainer.appendChild(skillItem); - }); -} - -fetch('lang.json') - .then(response => response.json()) - .then(generateLanguageCards) - .catch(error => console.error('Error fetching lang.json:', error)); - -fetch('skills.json') - .then(response => response.json()) - .then(generateSkillCards) - .catch(error => console.error('Error fetching skills.json', error)); - -document.querySelectorAll('.tooltip').forEach(elem => { - elem.addEventListener('mouseenter', () => { - const tooltipText = elem.getAttribute('data-tooltip'); - if (!tooltipText) return; - - const dummy = document.createElement('div'); - dummy.style.position = 'absolute'; - dummy.style.visibility = 'hidden'; - dummy.style.whiteSpace = 'nowrap'; - dummy.style.padding = '5px 10px'; - dummy.style.fontSize = '14px'; - dummy.innerText = tooltipText; - document.body.appendChild(dummy); - - const elemRect = elem.getBoundingClientRect(); - const tipRect = dummy.getBoundingClientRect(); - const leftEdge = elemRect.left + (elemRect.width / 2) - (tipRect.width / 2); - const rightEdge = elemRect.left + (elemRect.width / 2) + (tipRect.width / 2); - - elem.classList.remove('slide-left', 'slide-right'); - - if (rightEdge > window.innerWidth) { - elem.classList.add('slide-left'); - } else if (leftEdge < 0) { - elem.classList.add('slide-right'); - } - - dummy.remove(); - }); -}); diff --git a/portfolio/style.css b/portfolio/style.css deleted file mode 100644 index 2a030c1..0000000 --- a/portfolio/style.css +++ /dev/null @@ -1,523 +0,0 @@ -@import url(/global.css); - -img { - pointer-events: none; - user-select: none; -} - -body { - color: #ffffff; - padding: 0; - display: flex; - flex-direction: column; - align-items: center; - text-align: center; - background-color: #2a2a2a; - min-height: 100vh; - overflow-x: hidden; -} - -.languages { - margin-bottom: 20px; -} - -strong { - font-weight: 900; - color: #dddddd; -} - -.info { - margin-top: 50px; -} - -#profile-picture { - width: 150px; - height: 150px; - border-radius: 50%; - border: 3px solid #80848e; -} - -.name { - font-size: 24px; - margin-top: 10px; -} - -.time { - font-size: 18px; - margin-bottom: 10px; - color: #cccccc; -} - -.age { - font-size: 18px; - margin-top: 5px; - color: #cccccc; -} - -.hobbies { - margin-top: 10px; - font-size: 16px; - color: #cccccc; -} - -.cards { - margin-top: 30px !important; - background-color: #252525; - padding: 20px; - border-radius: 10px; - width: 600px !important; - text-align: left; - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); -} - -footer { - margin-bottom: 50px !important; -} - -#status { - font-weight: bold; - margin: 10px 0 15px 10px; - color: #cccccc; -} - -.activity { - display: flex; - align-items: center; - justify-content: center; - text-align: left; - width: 100%; - gap: 2px; -} - -#activity-name { - flex-grow: 1; - text-align: left; - color: #cccccc; -} - -#activity-image { - display: block; - height: 36px; - width: 36px; -} - -.languages, -.contact, -.software { - margin-top: 30px; - width: 100%; -} - -.language-item { - display: block; - background-color: #3b3b3b; - padding: 10px 15px; - border-radius: 8px; - transition: background-color 0.3s, transform 0.2s; - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); - margin: 10px; -} - -.language-item:hover { - background-color: #4d4d4d; - transform: translateY(-5px); -} - -.language-item:hover span, -.language-item:hover .language-name { - color: #f0f0f0; -} - -.name-percent-container { - display: inline-flex; - align-items: center; - gap: 10px; - width: 100%; -} - -div[class="name-percent-container"] > img.image { - width: 30px; - height: 20px; - border-radius: 2px; -} - - -.language-item .language-name { - cursor: default; - font-size: 18px; - color: #aaaaaa; - display: inline-block; - margin-right: 10px; -} - -.language-item .percent { - font-size: 16px; - color: #aaaaaa; - font-weight: bold; -} - -.percentage-bar { - display: block; - width: 100%; - height: 8px; - background-color: #444; - margin-top: 10px; - border-radius: 5px; - position: relative; -} - -.percentage-bar .bar-after { - position: relative; - width: 100%; - height: 100%; - background-color: #00aa00; - border-radius: 5px; - background: linear-gradient(to right, #005500 0%, #009900 50%, #005500 100%); - background-size: 200% 100%; - animation: shimmer 3s infinite linear; -} - -.language-item:hover .percentage-bar .bar-after { - background: linear-gradient(to right, #008800 0%, #00ff00 50%, #008800 100%); - animation: shimmer 3s infinite linear; - background-size: 200% 100%; -} - -.tooltip { - display: flex; - justify-content: center; - position: relative; -} - -.tooltip::after { - content: attr(data-tooltip); - position: absolute; - left: 50%; - transform: translateX(-50%); - bottom: 125%; - background-color: #2a2a2a; - border: 2px solid rgba(150, 150, 150, 0.1); - color: #fff; - padding: 5px 10px; - border-radius: 5px; - font-size: 14px; - white-space: nowrap; - opacity: 0; - visibility: hidden; - transition: opacity 0.3s, visibility 0.3s; - cursor: default; -} - -a[class="skill-item tooltip"]::after { - content: attr(data-tooltip); - position: absolute; - left: 50%; - transform: translateX(-50%); - bottom: 110%; - background-color: #2a2a2a; - border: 2px solid rgba(150, 150, 150, 0.1); - color: #fff; - padding: 5px 10px; - border-radius: 5px; - font-size: 14px; - white-space: nowrap; - opacity: 0; - visibility: hidden; - transition: opacity 0.3s, visibility 0.3s; - cursor: default; -} - -a[class^="software-item tooltip"]::after { - content: attr(data-tooltip); - position: absolute; - left: 50%; - transform: translateX(-50%); - bottom: 100%; - background-color: #2a2a2a; - border: 2px solid rgba(150, 150, 150, 0.1); - color: #fff; - padding: 5px 10px; - border-radius: 5px; - font-size: 16px; - white-space: nowrap; - opacity: 0; - visibility: hidden; - transition: opacity 0.3s, visibility 0.3s; - cursor: default; -} - -.tooltip:hover::after { - opacity: 1; - visibility: visible; -} - -.tooltip.slide-left::after { - transform: translateX(-100%); -} - -.tooltip.slide-right::after { - transform: translateX(0%); -} - -@keyframes shimmer { - 0% { - background-position: 100% 0; - } - 100% { - background-position: -100% 0; - } -} - -#skills-div:not(#skills-div > h2) { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 15px; - justify-content: center; - margin-top: 20px; - width: 100%; - max-width: 600px; -} - -.software:not(.software > h2) { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - justify-content: center; - width: 100%; - max-width: 600px; -} - -.skill-item { - text-decoration: none; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - background-color: #3b3b3b; - padding: 15px; - border-radius: 8px; - transition: background-color 0.3s, transform 0.2s; - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); - text-align: center; - margin: 0 20px; -} - -.contact-item { - text-decoration: none; - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - background-color: #3b3b3b; - padding: 15px; - border-radius: 8px; - transition: background-color 0.3s, transform 0.2s; - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); - text-align: center; - margin: 10px; -} - -.software-item { - text-decoration: none; - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - background-color: #3b3b3b; - padding: 15px; - border-radius: 8px; - transition: background-color 0.3s, transform 0.2s; - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); - text-align: center; - margin: 10px; -} - -.software > .software-item:last-child { - grid-column: 1 / -1; -} - -.skill-item:hover, -.software-item:hover { - background-color: #4d4d4d; - transform: translateY(-5px); - filter: brightness(1); -} - -.skill-item:hover .skill-name { - color: #ffffff; -} - -.skill-item > .image, -.software-item > .image { - margin-bottom: 10px; - filter: brightness(0.8); -} - -.skill-item:hover > .image, -.software-item:hover> .image { - filter: brightness(1); -} - -.image { - height: 50px; - border-radius: 5px; - transition: 0.1s; -} - -.software-item > .image { - height: 50px !important; - border-radius: 0px; -} - -.skill-name { - font-size: 16px; - color: #aaaaaa; - transition: 0.1s; -} - -.contact-name, -.software-name { - font-size: 16px; - color: #ccc; - margin-left: 10px; - transition: 0.1s; -} - -.contact-item > .image, -.software-item > .image { - margin-top: 5px; -} - -.card-header { - color: white; - text-align: left; - width: 100%; - grid-column: span 2; -} - -.contact-item:hover .contact-name, -.software-item:hover .software-name { - color: #fff; -} - -.github-contact { - background-color: #040404; -} - -.github-contact:hover { - background-color: #080808; -} - -.instagram-contact { - background-color: #c13584; -} - -.instagram-contact:hover { - background-color: #d44190; -} - -.twitter-contact { - background-color: #1da1f2; -} - -.twitter-contact:hover { - background-color: #33b2ff; -} - -.youtube-contact { - background-color: #e03535; -} - -.youtube-contact:hover { - background-color: #ff4444; -} - - -@media (max-width: 768px) { - .language-item { - margin: 10px; - } - - .language-item img.image { - height: 1px; - width: 25px; - height: 17px; - } - - .language-item .language-name { - font-size: 16px; - } - - .language-item .percent { - font-size: 14px; - } -} - -@media (max-width: 600px) { - .cards { - width: 90% !important; - padding: 15px; - } - - .name { - font-size: 20px; - } - - .time, .age, .hobbies { - font-size: 16px; - } - - #profile-picture { - width: 120px; - height: 120px; - } - - .stat-img { - width: 100%; - } - - .skill-item, - .contact-item, - .software-item { - padding: 10px; - } -} - -@media (max-width: 400px) { - .name { - font-size: 18px; - } - - .time, .age, .hobbies { - font-size: 14px; - } - - #profile-picture { - width: 100px; - height: 100px; - } - - .cards { - width: 100% !important; - padding: 10px; - } - - .skill-item, - .contact-item, - .software-item { - padding: 8px; - } -} - -div[class="stats cards"] { - text-align: center; -} - -div[class="stats cards"] > h2 { - text-align: left; -} - -div[class="stats cards"] > p { - text-align: left; - color: #AAAAAA; -} - diff --git a/sitemap/index.html b/sitemap/index.html new file mode 100644 index 0000000..60f4338 --- /dev/null +++ b/sitemap/index.html @@ -0,0 +1,59 @@ + + + + + + + zyq's Tools + + + + + + +
+ + + + +
why is this one so much worse than /projects T_T T_T T_T
+
+ +
+

Welcome!

+

This is a website for future tools. The source code can be found on my GitHub!

+

Clicking "Test It" will open the tool in the current tab.

+

More tools will come in the future.

+
+ +
+ + + + + + + + + + + diff --git a/sitemap/index.js b/sitemap/index.js new file mode 100644 index 0000000..e69de29 diff --git a/quote.js b/sitemap/quote.js similarity index 100% rename from quote.js rename to sitemap/quote.js diff --git a/sitemap/style.css b/sitemap/style.css new file mode 100644 index 0000000..4fcd95f --- /dev/null +++ b/sitemap/style.css @@ -0,0 +1,231 @@ +@font-face { + font-family: 'Hack'; + src: url('/Fonts/Hack/Hack-Regular.ttf') format('truetype'); +} + +@font-face { + font-family: 'JetBrainsMono'; + src: url('/Fonts/JetBrainsMono/JetBrainsMono-Regular.woff2'); +} + +body { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + min-height: 100vh; + margin: 0; + font-family: monospace; + font-size: 1rem; + background-color: #2a2a2a; + color: #f0f0f0; + overflow-x: hidden; + font-family: 'Hack', 'JetBrainsMono', monospace; +} + +html { + height: 100%; +} + +::selection { + background-color: #c099ff; + color: #2a2a2a; +} + +#motd { + font-style: italic; +} + +.topbar { + display: flex; + align-items: center; + justify-content: start; + gap: 2vw; + width: 100%; + max-width: 100vw; + position: fixed; + background-color: rgba(59, 59, 59, 0.885); + backdrop-filter: blur(5px); + -webkit-backdrop-filter: blur(5px); + font-size: large; + top: 0; + border-bottom: 1px solid rgba(70, 70, 70, 0.885); + z-index: 9999; + overflow-x: hidden; +} + +.welcome { + text-align: center; + margin: 0; + width: 60vw; + max-width: 1920px; + line-height: 1.4; + padding-top: 60px; + box-sizing: border-box; + overflow-wrap: break-word; +} + +.welcome * { + color: #f0f0f0; +} + +#welcome :not(h1) { + margin: 0 0 10px 0; +} + +.tools-main { + display: flex; + flex-wrap: wrap; + gap: 2.5vw; + justify-content: center; + min-height: 10vh; + max-width: 80vw; + margin-bottom: 100px; +} + +.tool-div { + bottom: 20px !important; + background-color: rgba(50, 50, 50, 1); + border: 2px solid rgba(65, 65, 65, 1); + border-radius: 7px; + transition: 0.3s; + text-align: center; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: auto; + max-width: 90vw; + width: 50vw; + box-shadow: 0 4px 10px rgba(16, 16, 16, 0.5); + scale: 0.79; + margin-bottom: -100px; +} + +.tool-header { + margin-bottom: 0; + padding-top: 15px; + text-decoration: underline; +} + +.tool-desc { + margin: 5px; + font-weight: normal; + max-width: 90%; +} + +.tool-media { + max-width: 30vw; + border-radius: 5px; + margin: 10px; +} + +.visit-tool { + padding: 10px 20px; + background-color: rgb(40, 100, 65); + color: #fff; + border: 2px solid rgb(75, 135, 100); + border-radius: 4px; + transition: 0.1s; + font-weight: bolder; + font-size: large; + margin: 5px 0 15px 0; +} + +.visit-tool:hover { + background-color: rgb(35, 95, 60); + border-color: rgb(90, 150, 115); +} + +.slideshow-container { + position: relative; + width: 90vw; + max-width: 500px; + margin: auto; +} + +.tool-image { + width: 100%; + max-width: 90vw; + max-height: 40vh; + border-radius: 10px; + object-fit: contain; +} + +.theme-button { + cursor: pointer; + background: none; + border: none; + transition: 0.3s; + margin-left: 30px; +} + +@media (max-width: 768px) { + .tools-main { + max-width: 100%; + gap: 1.5vw; + } + + .tool-div { + width: 100%; + scale: 1; + margin-bottom: 20px; + font-size: 0.9rem; + } + + .tool-header { + font-size: 1.2rem; + } + + .tool-desc { + font-size: 0.8rem; + } + + .visit-tool { + font-size: 0.9rem; + padding: 8px 16px; + } + + .welcome { + font-size: 0.9rem; + width: 90vw; + padding-top: 40px; + } +} + +@media (max-width: 480px) { + + body { + margin: 0 10px; + } + + .tools-main { + max-width: 100%; + } + + .tool-div { + width: 100%; + scale: 1; + margin-bottom: 20px; + font-size: 0.8rem; + } + + .tool-header { + font-size: 1rem; + } + + .tool-desc { + font-size: 0.75rem; + } + + .visit-tool { + font-size: 0.85rem; + padding: 6px 12px; + } + + .welcome { + font-size: 0.8rem; + width: 100%; + margin-top: 70px; + } +} diff --git a/tools.js b/sitemap/tools.js similarity index 100% rename from tools.js rename to sitemap/tools.js diff --git a/tools.json b/sitemap/tools.json similarity index 100% rename from tools.json rename to sitemap/tools.json diff --git a/translate.js b/sitemap/translate.js similarity index 100% rename from translate.js rename to sitemap/translate.js diff --git a/portfolio/skills.json b/skills.json similarity index 100% rename from portfolio/skills.json rename to skills.json diff --git a/style.css b/style.css index 4fcd95f..2a030c1 100644 --- a/style.css +++ b/style.css @@ -1,231 +1,523 @@ -@font-face { - font-family: 'Hack'; - src: url('/Fonts/Hack/Hack-Regular.ttf') format('truetype'); -} +@import url(/global.css); -@font-face { - font-family: 'JetBrainsMono'; - src: url('/Fonts/JetBrainsMono/JetBrainsMono-Regular.woff2'); +img { + pointer-events: none; + user-select: none; } body { + color: #ffffff; + padding: 0; display: flex; - justify-content: center; - align-items: center; flex-direction: column; - min-height: 100vh; - margin: 0; - font-family: monospace; - font-size: 1rem; + align-items: center; + text-align: center; background-color: #2a2a2a; - color: #f0f0f0; + min-height: 100vh; overflow-x: hidden; - font-family: 'Hack', 'JetBrainsMono', monospace; } -html { - height: 100%; +.languages { + margin-bottom: 20px; } -::selection { - background-color: #c099ff; - color: #2a2a2a; +strong { + font-weight: 900; + color: #dddddd; } -#motd { - font-style: italic; +.info { + margin-top: 50px; } -.topbar { +#profile-picture { + width: 150px; + height: 150px; + border-radius: 50%; + border: 3px solid #80848e; +} + +.name { + font-size: 24px; + margin-top: 10px; +} + +.time { + font-size: 18px; + margin-bottom: 10px; + color: #cccccc; +} + +.age { + font-size: 18px; + margin-top: 5px; + color: #cccccc; +} + +.hobbies { + margin-top: 10px; + font-size: 16px; + color: #cccccc; +} + +.cards { + margin-top: 30px !important; + background-color: #252525; + padding: 20px; + border-radius: 10px; + width: 600px !important; + text-align: left; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); +} + +footer { + margin-bottom: 50px !important; +} + +#status { + font-weight: bold; + margin: 10px 0 15px 10px; + color: #cccccc; +} + +.activity { display: flex; align-items: center; - justify-content: start; - gap: 2vw; + justify-content: center; + text-align: left; width: 100%; - max-width: 100vw; - position: fixed; - background-color: rgba(59, 59, 59, 0.885); - backdrop-filter: blur(5px); - -webkit-backdrop-filter: blur(5px); - font-size: large; - top: 0; - border-bottom: 1px solid rgba(70, 70, 70, 0.885); - z-index: 9999; - overflow-x: hidden; + gap: 2px; } -.welcome { - text-align: center; - margin: 0; - width: 60vw; - max-width: 1920px; - line-height: 1.4; - padding-top: 60px; - box-sizing: border-box; - overflow-wrap: break-word; +#activity-name { + flex-grow: 1; + text-align: left; + color: #cccccc; } -.welcome * { - color: #f0f0f0; +#activity-image { + display: block; + height: 36px; + width: 36px; } -#welcome :not(h1) { - margin: 0 0 10px 0; +.languages, +.contact, +.software { + margin-top: 30px; + width: 100%; } -.tools-main { - display: flex; - flex-wrap: wrap; - gap: 2.5vw; - justify-content: center; - min-height: 10vh; - max-width: 80vw; - margin-bottom: 100px; -} - -.tool-div { - bottom: 20px !important; - background-color: rgba(50, 50, 50, 1); - border: 2px solid rgba(65, 65, 65, 1); - border-radius: 7px; - transition: 0.3s; - text-align: center; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - height: auto; - max-width: 90vw; - width: 50vw; - box-shadow: 0 4px 10px rgba(16, 16, 16, 0.5); - scale: 0.79; - margin-bottom: -100px; -} - -.tool-header { - margin-bottom: 0; - padding-top: 15px; - text-decoration: underline; -} - -.tool-desc { - margin: 5px; - font-weight: normal; - max-width: 90%; -} - -.tool-media { - max-width: 30vw; - border-radius: 5px; +.language-item { + display: block; + background-color: #3b3b3b; + padding: 10px 15px; + border-radius: 8px; + transition: background-color 0.3s, transform 0.2s; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); margin: 10px; } -.visit-tool { - padding: 10px 20px; - background-color: rgb(40, 100, 65); - color: #fff; - border: 2px solid rgb(75, 135, 100); - border-radius: 4px; - transition: 0.1s; - font-weight: bolder; - font-size: large; - margin: 5px 0 15px 0; +.language-item:hover { + background-color: #4d4d4d; + transform: translateY(-5px); } -.visit-tool:hover { - background-color: rgb(35, 95, 60); - border-color: rgb(90, 150, 115); +.language-item:hover span, +.language-item:hover .language-name { + color: #f0f0f0; } -.slideshow-container { - position: relative; - width: 90vw; - max-width: 500px; - margin: auto; -} - -.tool-image { +.name-percent-container { + display: inline-flex; + align-items: center; + gap: 10px; width: 100%; - max-width: 90vw; - max-height: 40vh; - border-radius: 10px; - object-fit: contain; } -.theme-button { - cursor: pointer; - background: none; - border: none; - transition: 0.3s; - margin-left: 30px; +div[class="name-percent-container"] > img.image { + width: 30px; + height: 20px; + border-radius: 2px; } + +.language-item .language-name { + cursor: default; + font-size: 18px; + color: #aaaaaa; + display: inline-block; + margin-right: 10px; +} + +.language-item .percent { + font-size: 16px; + color: #aaaaaa; + font-weight: bold; +} + +.percentage-bar { + display: block; + width: 100%; + height: 8px; + background-color: #444; + margin-top: 10px; + border-radius: 5px; + position: relative; +} + +.percentage-bar .bar-after { + position: relative; + width: 100%; + height: 100%; + background-color: #00aa00; + border-radius: 5px; + background: linear-gradient(to right, #005500 0%, #009900 50%, #005500 100%); + background-size: 200% 100%; + animation: shimmer 3s infinite linear; +} + +.language-item:hover .percentage-bar .bar-after { + background: linear-gradient(to right, #008800 0%, #00ff00 50%, #008800 100%); + animation: shimmer 3s infinite linear; + background-size: 200% 100%; +} + +.tooltip { + display: flex; + justify-content: center; + position: relative; +} + +.tooltip::after { + content: attr(data-tooltip); + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: 125%; + background-color: #2a2a2a; + border: 2px solid rgba(150, 150, 150, 0.1); + color: #fff; + padding: 5px 10px; + border-radius: 5px; + font-size: 14px; + white-space: nowrap; + opacity: 0; + visibility: hidden; + transition: opacity 0.3s, visibility 0.3s; + cursor: default; +} + +a[class="skill-item tooltip"]::after { + content: attr(data-tooltip); + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: 110%; + background-color: #2a2a2a; + border: 2px solid rgba(150, 150, 150, 0.1); + color: #fff; + padding: 5px 10px; + border-radius: 5px; + font-size: 14px; + white-space: nowrap; + opacity: 0; + visibility: hidden; + transition: opacity 0.3s, visibility 0.3s; + cursor: default; +} + +a[class^="software-item tooltip"]::after { + content: attr(data-tooltip); + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: 100%; + background-color: #2a2a2a; + border: 2px solid rgba(150, 150, 150, 0.1); + color: #fff; + padding: 5px 10px; + border-radius: 5px; + font-size: 16px; + white-space: nowrap; + opacity: 0; + visibility: hidden; + transition: opacity 0.3s, visibility 0.3s; + cursor: default; +} + +.tooltip:hover::after { + opacity: 1; + visibility: visible; +} + +.tooltip.slide-left::after { + transform: translateX(-100%); +} + +.tooltip.slide-right::after { + transform: translateX(0%); +} + +@keyframes shimmer { + 0% { + background-position: 100% 0; + } + 100% { + background-position: -100% 0; + } +} + +#skills-div:not(#skills-div > h2) { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 15px; + justify-content: center; + margin-top: 20px; + width: 100%; + max-width: 600px; +} + +.software:not(.software > h2) { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + justify-content: center; + width: 100%; + max-width: 600px; +} + +.skill-item { + text-decoration: none; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #3b3b3b; + padding: 15px; + border-radius: 8px; + transition: background-color 0.3s, transform 0.2s; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); + text-align: center; + margin: 0 20px; +} + +.contact-item { + text-decoration: none; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + background-color: #3b3b3b; + padding: 15px; + border-radius: 8px; + transition: background-color 0.3s, transform 0.2s; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); + text-align: center; + margin: 10px; +} + +.software-item { + text-decoration: none; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + background-color: #3b3b3b; + padding: 15px; + border-radius: 8px; + transition: background-color 0.3s, transform 0.2s; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); + text-align: center; + margin: 10px; +} + +.software > .software-item:last-child { + grid-column: 1 / -1; +} + +.skill-item:hover, +.software-item:hover { + background-color: #4d4d4d; + transform: translateY(-5px); + filter: brightness(1); +} + +.skill-item:hover .skill-name { + color: #ffffff; +} + +.skill-item > .image, +.software-item > .image { + margin-bottom: 10px; + filter: brightness(0.8); +} + +.skill-item:hover > .image, +.software-item:hover> .image { + filter: brightness(1); +} + +.image { + height: 50px; + border-radius: 5px; + transition: 0.1s; +} + +.software-item > .image { + height: 50px !important; + border-radius: 0px; +} + +.skill-name { + font-size: 16px; + color: #aaaaaa; + transition: 0.1s; +} + +.contact-name, +.software-name { + font-size: 16px; + color: #ccc; + margin-left: 10px; + transition: 0.1s; +} + +.contact-item > .image, +.software-item > .image { + margin-top: 5px; +} + +.card-header { + color: white; + text-align: left; + width: 100%; + grid-column: span 2; +} + +.contact-item:hover .contact-name, +.software-item:hover .software-name { + color: #fff; +} + +.github-contact { + background-color: #040404; +} + +.github-contact:hover { + background-color: #080808; +} + +.instagram-contact { + background-color: #c13584; +} + +.instagram-contact:hover { + background-color: #d44190; +} + +.twitter-contact { + background-color: #1da1f2; +} + +.twitter-contact:hover { + background-color: #33b2ff; +} + +.youtube-contact { + background-color: #e03535; +} + +.youtube-contact:hover { + background-color: #ff4444; +} + + @media (max-width: 768px) { - .tools-main { - max-width: 100%; - gap: 1.5vw; + .language-item { + margin: 10px; } - .tool-div { - width: 100%; - scale: 1; - margin-bottom: 20px; - font-size: 0.9rem; + .language-item img.image { + height: 1px; + width: 25px; + height: 17px; } - .tool-header { - font-size: 1.2rem; + .language-item .language-name { + font-size: 16px; } - .tool-desc { - font-size: 0.8rem; - } - - .visit-tool { - font-size: 0.9rem; - padding: 8px 16px; - } - - .welcome { - font-size: 0.9rem; - width: 90vw; - padding-top: 40px; + .language-item .percent { + font-size: 14px; } } -@media (max-width: 480px) { - - body { - margin: 0 10px; +@media (max-width: 600px) { + .cards { + width: 90% !important; + padding: 15px; } - .tools-main { - max-width: 100%; + .name { + font-size: 20px; } - .tool-div { + .time, .age, .hobbies { + font-size: 16px; + } + + #profile-picture { + width: 120px; + height: 120px; + } + + .stat-img { width: 100%; - scale: 1; - margin-bottom: 20px; - font-size: 0.8rem; } - .tool-header { - font-size: 1rem; - } - - .tool-desc { - font-size: 0.75rem; - } - - .visit-tool { - font-size: 0.85rem; - padding: 6px 12px; - } - - .welcome { - font-size: 0.8rem; - width: 100%; - margin-top: 70px; + .skill-item, + .contact-item, + .software-item { + padding: 10px; } } + +@media (max-width: 400px) { + .name { + font-size: 18px; + } + + .time, .age, .hobbies { + font-size: 14px; + } + + #profile-picture { + width: 100px; + height: 100px; + } + + .cards { + width: 100% !important; + padding: 10px; + } + + .skill-item, + .contact-item, + .software-item { + padding: 8px; + } +} + +div[class="stats cards"] { + text-align: center; +} + +div[class="stats cards"] > h2 { + text-align: left; +} + +div[class="stats cards"] > p { + text-align: left; + color: #AAAAAA; +} +