zyqunix/tools
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add portfolio

Browse source
This commit is contained in:
zyqunix 2025-02-25 17:59:24 +01:00
parent 13d2a5dc29
commit 39690fd923
7 changed files with 564 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
bio/style.css
View file

@ -535,4 +535,4 @@ div[id="name"]::after {
font-size: 12px;
transition: 1s;
}
}
}

0
index.js Normal file
View file

42
portfolio/index.html Normal file
View file

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://cdn.jsdelivr.net/gh/0x5841524f4e/js-lanyard/lanyard.js"></script>
<title>zyq's Portfolio</title>
<link href="style.css" rel="stylesheet" />
<link rel="shortcut icon" href="https://rimgo.pussthecat.org/RFbdMMB.png" type="image/x-icon">
</head>
<body>
<div class="info">
<img
src="https://cdn.discordapp.com/avatars/1201415921802170388/3ccc13a2825eb8c98b5371fa0706e450.webp?size=1024&amp;width=640&amp;height=640"
alt="Profile Picture"
id="profile-picture"
/>
<h1 class="name tooltip" data-tooltip="zyqunix/Fabio/Laetitia/fentboiswag/монгол/192.168.2.217">zyqunix / Fabio</h1>
<div class="time" id="time"> </div>
<div class="age tooltip" id="age" data-tooltip="December 13th, 2008"></div>
<div class="hobbies">
Coding, Listening to Music, Reverse Engineering, Playing Counter-Strike
</div>
</div>
<div class="discord cards">
<h2>Discord</h2>
<div id="status">Status</div>
<div class="activity">
<img alt="Activity Image" id="activity-image" />
<div id="activity-name"></div>
</div>
</div>
<div class="languages cards">
<h2>Languages</h2>
</div>
<div class="skills cards" id="skills-div">
<h2>Skills</h2>
</div>
<script src="index.js"></script>
</body>
</html>

153
portfolio/index.js Normal file
View file

@ -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 = `<strong class="quote">"${status ? status.state : "No Custom Status"}"</strong> - zyqunix`;
if (gameActivity) {
activityNameElem.innerHTML = `<strong>Playing</strong> ${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 = "<strong>Playing</strong> 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))

34
portfolio/lang.json Normal file
View file

@ -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"
}
]
}

28
portfolio/skills.json Normal file
View file

@ -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"
}
]
}

306
portfolio/style.css Normal file
View file

@ -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;
}
}