From 39690fd923afd694169c17e1ef634c2f48bcdbda Mon Sep 17 00:00:00 2001 From: zyqunix Date: Tue, 25 Feb 2025 17:59:24 +0100 Subject: [PATCH] add portfolio --- bio/style.css | 2 +- index.js | 0 portfolio/index.html | 42 ++++++ portfolio/index.js | 153 +++++++++++++++++++++ portfolio/lang.json | 34 +++++ portfolio/skills.json | 28 ++++ portfolio/style.css | 306 ++++++++++++++++++++++++++++++++++++++++++ 7 files changed, 564 insertions(+), 1 deletion(-) create mode 100644 index.js create mode 100644 portfolio/index.html create mode 100644 portfolio/index.js create mode 100644 portfolio/lang.json create mode 100644 portfolio/skills.json create mode 100644 portfolio/style.css diff --git a/bio/style.css b/bio/style.css index 50f0b29..d3ea7dc 100644 --- a/bio/style.css +++ b/bio/style.css @@ -535,4 +535,4 @@ div[id="name"]::after { font-size: 12px; transition: 1s; } -} \ No newline at end of file +} diff --git a/index.js b/index.js new file mode 100644 index 0000000..e69de29 diff --git a/portfolio/index.html b/portfolio/index.html new file mode 100644 index 0000000..5802a2f --- /dev/null +++ b/portfolio/index.html @@ -0,0 +1,42 @@ + + + + + + + zyq's Portfolio + + + + +
+ Profile Picture +

zyqunix / Fabio

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

Discord

+
Status
+
+ Activity Image +
+
+
+
+

Languages

+
+
+

Skills

+
+ + + + diff --git a/portfolio/index.js b/portfolio/index.js new file mode 100644 index 0000000..79afac8 --- /dev/null +++ b/portfolio/index.js @@ -0,0 +1,153 @@ +const timeElem = document.getElementById('time'); +const timezone = 'Europe/Berlin'; + +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('language-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('skill-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)) diff --git a/portfolio/lang.json b/portfolio/lang.json new file mode 100644 index 0000000..814ed56 --- /dev/null +++ b/portfolio/lang.json @@ -0,0 +1,34 @@ +{ + "languages": [ + { + "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" + }, + { + "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" + }, + { + "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" + }, + { + "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" + }, + { + "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" + } + ] +} diff --git a/portfolio/skills.json b/portfolio/skills.json new file mode 100644 index 0000000..9374954 --- /dev/null +++ b/portfolio/skills.json @@ -0,0 +1,28 @@ +{ + "skills": [ + { + "name": "Python", + "url": "https://www.python.org", + "tooltip": "The second programming language I've learned", + "img": "https://search.im-in.space/image_proxy?url=https%3A%2F%2F1.bp.blogspot.com%2F-wAuQ3GCX8r4%2FWgIvLOr23tI%2FAAAAAAAACdA%2Fppii2ACqTR8VqkYW-MeYJqXr1myTdR01ACLcBGAs%2Fs1600%2Flogo-python-programacion.png&h=59be89f2146eb4db14955882451f2a4631f92e88832a7e7627804d7968a63755" + }, + { + "name": "JavaScript", + "url": "https://www.javascript.com/", + "tooltip": "Its syntax pisses me off sometimes", + "img": "https://search.im-in.space/image_proxy?url=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Fthumb%2F6%2F6a%2FJavaScript-logo.png%2F640px-JavaScript-logo.png&h=bc8b69a465219df76ce937bf1c6e32deda0d982f1fa0bf41d13f51b58ccef960" + }, + { + "name": "HTML/CSS", + "url": "https://www.w3schools.com/html/default.asp", + "tooltip": "I hate you, CSS", + "img": "https://search.im-in.space/image_proxy?url=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Fthumb%2F6%2F61%2FHTML5_logo_and_wordmark.svg%2F640px-HTML5_logo_and_wordmark.svg.png&h=60a773175af1c2795e1afb8ba22e19e3089744ca988c667999c756319c6c09e3" + }, + { + "name": "Discord.JS", + "url": "https://discord.js.org/", + "tooltip": "Used in my selfbot", + "img": "https://avatars.githubusercontent.com/u/26492485?s=200&v=4" + } + ] +} diff --git a/portfolio/style.css b/portfolio/style.css new file mode 100644 index 0000000..9740011 --- /dev/null +++ b/portfolio/style.css @@ -0,0 +1,306 @@ +@import url(/global.css); + +img { + pointer-events: 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: #bbbbbb; +} + +.cards { + margin-top: 30px !important; + background-color: #252525; + padding: 20px; + border-radius: 10px; + width: 600px !important; + text-align: left; +} + +div[class*="cards"]:last-of-type { + 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 { + 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%; +} + +.language-item img.language-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; +} + +.tooltip:hover::after { + opacity: 1; + visibility: visible; +} + +@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; +} + +.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; +} + +.skill-item:hover { + background-color: #4d4d4d; + transform: translateY(-5px); +} + +.skill-image { + height: 50px; + border-radius: 5px; + margin-bottom: 10px; +} + +.skill-name { + font-size: 16px; + color: #aaaaaa; +} + +#skills-div > h2 { + color: white; + text-align: left; + width: 100%; + grid-column: span 2; +} + +@media (max-width: 768px) { + .language-item { + width: 150px; + margin: 10px; + } + + .language-item img.language-image { + width: 25px; + height: 17px; + } + + .language-item .language-name { + font-size: 16px; + } + + .language-item .percent { + font-size: 14px; + } +}