mirror of
https://github.com/zyqunix/tools.git
synced 2025-07-06 06:20:30 +02:00
make portfolio the landing page
This commit is contained in:
zyqunix
parent
1a8311a035
commit
02c3312728
15 changed files with 1070 additions and 1054 deletions
154
index.html
154
index.html
|
|
@ -1,59 +1,117 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>zyq's Tools</title>
|
||||
<meta name="description" content="Useful Tests Without Any Trackers, Fully Open-Source on GitHub!">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<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 id="topbar" class="topbar">
|
||||
<button id="themeToggle" class="theme-button" title="Toggle Dark/Light Mode">
|
||||
<svg fill="#747474" height="24px" width="24px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 472.618 472.618" xml:space="preserve"
|
||||
style="--darkreader-inline-fill: #747474;" data-darkreader-inline-fill="">
|
||||
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
|
||||
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
|
||||
<g id="SVGRepo_iconCarrier">
|
||||
<g>
|
||||
<g>
|
||||
<path
|
||||
d="M380.525,337.291c-135.427,0-245.302-109.773-245.302-245.302c0-32.502,6.338-63.575,17.991-91.988 C63.372,36.286,0,124.39,0,227.315c0,135.427,109.875,245.302,245.302,245.302c102.923,0,191.029-63.472,227.316-153.315 C444.201,330.954,413.129,337.291,380.525,337.291z">
|
||||
</path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<select title="Change Language" name="Language" id="langauge-selector">
|
||||
<option value="en">English 🇬🇧</option>
|
||||
<option value="de">Deutsch 🇩🇪</option>
|
||||
</select>
|
||||
|
||||
<h6>why is this one so much worse than /projects T_T T_T T_T</h6>
|
||||
</head>
|
||||
<body>
|
||||
<div class="info">
|
||||
<img
|
||||
src="https://cdn.discordapp.com/avatars/1201415921802170388/3ccc13a2825eb8c98b5371fa0706e450.webp?size=1024&width=640&height=640"
|
||||
alt="Profile Picture"
|
||||
id="profile-picture"
|
||||
/>
|
||||
<h1 class="name tooltip" data-tooltip="zyqunix / Fabio / Laetitia / fentboiswag / монгол / 192.168.2.217">zyqunix</h1>
|
||||
<div class="time tooltip" id="time"> </div>
|
||||
<div class="age tooltip" id="age" data-tooltip="December 13th"></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 id="welcome" class="welcome">
|
||||
<h1 id="welcome-title">Welcome!</h1>
|
||||
<h2 id="welcome-description">This is a website for future tools. The source code can be found on my <a href="https://github.com/zyqunix/tools" target="_blank">GitHub</a>!</h2>
|
||||
<h3 id="welcome-test-it">Clicking "Test It" will open the tool in the current tab.</h3>
|
||||
<h3 id="welcome-future">More tools will come in the future.</h3>
|
||||
<div class="languages cards">
|
||||
<h2 class="card-header">Languages</h2>
|
||||
</div>
|
||||
|
||||
<div class="tools-main" id="toolsMain"></div>
|
||||
<div class="skills cards" id="skills-div">
|
||||
<h2 class="card-header">Skills</h2>
|
||||
</div>
|
||||
|
||||
<!--<div id="footer">© zyqunix under the MIT License</div> -->
|
||||
<div class="stats cards">
|
||||
<h2>Coding Stats</h2>
|
||||
<p>Since January 5th, 2025</p>
|
||||
<img class="stat-img" src="https://github-readme-stats.vercel.app/api/wakatime?username=zyqunix&theme=transparent&hide_border=true&layout=compact">
|
||||
</div>
|
||||
|
||||
<script src="tools.js"></script>
|
||||
<script src="quote.js"></script>
|
||||
<!-- <script src="slide.js"></script> -->
|
||||
<script src="theme.js"></script>
|
||||
<script src="translate.js"></script>
|
||||
</body>
|
||||
<div class="contact cards">
|
||||
<h2 class="card-header">Contact</h2>
|
||||
<a class="contact-item github-contact" href="https://github.com/zyqunix" target="_blank">
|
||||
<img class="image" src="https://raw.githubusercontent.com/zyqunix/devicon/404c165ff8d0b7eda226ec5eb66fdfc64f5f381f/icons/github/github-original.svg">
|
||||
<span class="contact-name">GitHub</span>
|
||||
</a>
|
||||
<a class="contact-item instagram-contact" href="https://instagram.com/192.168.2.217" target="_blank">
|
||||
<img class="image" src="https://raw.githubusercontent.com/zyqunix/simple-icons/725d82d3e0d7feb029b84fb3ccaec2f5ec1e5fb5/icons/instagram.svg">
|
||||
<span class="contact-name">Instagram</span>
|
||||
</a>
|
||||
<a class="contact-item twitter-contact" href="https://x.com/real_zyqunix" target="_blank">
|
||||
<img class="image" src="https://raw.githubusercontent.com/zyqunix/devicon/45338f81bcadf23bb3160d0ea4e15d5fcd706d15/icons/twitter/twitter-original.svg">
|
||||
<span class="contact-name">Twitter</span>
|
||||
</a>
|
||||
<a class="contact-item youtube-contact" href="https://youtube.com/@zyqunix" target="_blank">
|
||||
<img class="image" src="https://raw.githubusercontent.com/zyqunix/simple-icons/7caa6bae5f54b0cfd0d82da3fa293674d408ab44/icons/youtube.svg">
|
||||
<span class="contact-name">YouTube</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="software cards">
|
||||
<h2 class="card-header">Software I Use</h2>
|
||||
<a class="software-item neovim" href="https://neovim.io/" target="_blank">
|
||||
<img class="image" src="https://upload.wikimedia.org/wikipedia/commons/0/07/Neovim-mark-flat.svg">
|
||||
<span class="software-name">Neovim</span>
|
||||
</a>
|
||||
<a class="software-item tooltip" data-tooltip="I have contributed in making 2 plugins" href="https://equicord.org" target="_blank">
|
||||
<img class="image" src="data:image/svg+xml,%3csvg%20width='443'%20height='443'%20viewBox='0%200%20443%20443'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_44_30)'%3e%3cpath%20d='M443%20221.5C443%20343.831%20343.831%20443%20221.5%20443C99.1691%20443%200%20343.831%200%20221.5C0%2099.1691%2099.1691%200%20221.5%200C343.831%200%20443%2099.1691%20443%20221.5ZM88.0751%20221.5C88.0751%20295.188%20147.811%20354.925%20221.5%20354.925C295.189%20354.925%20354.925%20295.188%20354.925%20221.5C354.925%20147.811%20295.189%2088.075%20221.5%2088.075C147.811%2088.075%2088.0751%20147.811%2088.0751%20221.5Z'%20fill='%23828282'/%3e%3cpath%20d='M292.475%20221.738C292.475%20260.805%20260.805%20292.475%20221.738%20292.475C206.464%20292.475%20192.321%20287.634%20180.759%20279.403L99.204%20328.406C213.071%20259.189%20140.312%20237.528%2065.4865%20281.979L151.513%20230.289C151.175%20227.486%20151.001%20224.632%20151.001%20221.738C151.001%20182.671%20182.671%20151.001%20221.738%20151.001C236.81%20151.001%20250.781%20155.714%20262.257%20163.748L318.541%20129.929C308.425%20119.209%20296.562%20110.196%20283.404%20103.305C262.883%2092.5569%20239.917%2087.3371%20216.767%2088.1588C193.616%2088.981%20171.078%2095.816%20151.371%20107.992C131.664%20120.168%20115.466%20137.264%20104.372%20157.6C100.352%20164.97%2097.0514%20172.673%2094.4977%20180.602C87.043%20203.753%2068.385%20224.336%2044.0682%20224.786C19.7508%20225.237%20-0.771072%20205.707%203.59034%20181.78C7.80789%20158.642%2015.7009%20136.23%2027.0546%20115.419C45.4719%2081.6595%2072.362%2053.2771%20105.078%2033.0639C137.794%2012.8507%20175.21%201.5037%20213.642%200.139448C252.074%20-1.2248%20290.2%207.44037%20324.267%2025.2823C358.334%2043.1247%20387.169%2069.5294%20407.934%20101.898C428.699%20134.267%20440.679%20171.484%20442.696%20209.888C444.712%20248.291%20436.694%20286.558%20419.433%20320.923C408.791%20342.107%20394.864%20361.358%20378.246%20378.002C361.062%20395.213%20333.322%20389.466%20319.844%20369.221C306.366%20348.976%20312.66%20321.917%20327.444%20302.605C332.508%20295.991%20336.96%20288.891%20340.729%20281.389C351.127%20260.689%20355.956%20237.638%20354.742%20214.505C354.103%20202.346%20351.807%20190.385%20347.956%20178.941L291.894%20212.626C292.278%20215.609%20292.475%20218.65%20292.475%20221.738ZM99.204%20328.406C97.8064%20329.256%2096.3807%20330.113%2094.9269%20330.976L99.204%20328.406Z'%20fill='url(%23paint0_linear_44_30)'/%3e%3cpath%20d='M224.615%20186.365C238.145%20178.236%20255.704%20182.613%20263.834%20196.143C271.963%20209.673%20267.586%20227.232%20254.055%20235.362L94.9268%20330.976L65.4863%20281.98L224.615%20186.365Z'%20fill='%23828282'/%3e%3c/g%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_44_30'%20x1='223.001'%20y1='0'%20x2='223.001'%20y2='388.178'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%235C5C5C'/%3e%3cstop%20offset='1'%20stop-color='%23333333'/%3e%3c/linearGradient%3e%3cclipPath%20id='clip0_44_30'%3e%3crect%20width='443'%20height='443'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e">
|
||||
<span class="software-name">Equicord</span>
|
||||
</a>
|
||||
<a class="software-item" href="https://archlinux.org" target="_blank">
|
||||
<img class="image" src="https://upload.wikimedia.org/wikipedia/commons/1/13/Arch_Linux_%22Crystal%22_icon.svg">
|
||||
<span class="software-name">Arch Linux</span>
|
||||
</a>
|
||||
<a class="software-item" href="https://wikiless.funami.tech/wiki/Windows_10" target="_blank">
|
||||
<img class="image" src="https://upload.wikimedia.org/wikipedia/commons/5/5f/Windows_logo_-_2012.svg">
|
||||
<span class="software-name">Windows 10</span>
|
||||
</a>
|
||||
<a class="software-item" href="https://github.com/Floorp-Projects/Floorp" target="_blank">
|
||||
<img class="image" src="https://raw.githubusercontent.com/Floorp-Projects/Floorp/refs/heads/ESR128/browser/branding/official/content/about-logo.svg">
|
||||
<span class="software-name">Floorp</span>
|
||||
</a>
|
||||
<a class="software-item" href="https://codeberg.org/librewolf" target="_blank">
|
||||
<img class="image" src="https://librewolf.net/icon.svg">
|
||||
<span class="software-name">LibreWolf</span>
|
||||
</a>
|
||||
<a class="software-item tooltip" data-tooltip="Used to make my Minecraft Mod" href="https://www.jetbrains.com/idea" target="_blank">
|
||||
<img class="image" src="https://upload.wikimedia.org/wikipedia/commons/9/9c/IntelliJ_IDEA_Icon.svg">
|
||||
<span class="software-name">IntelliJ IDEA</span>
|
||||
</a>
|
||||
<a class="software-item tooltip" data-tooltip="Used to make/customize open-source apps" href="https://developer.android.com/studio" target="_blank">
|
||||
<img class="image" src="https://wikiless.funami.tech/media/wikipedia/commons/5/51/Android_Studio_Logo_2024.svg">
|
||||
<span class="software-name">Android Studio</span>
|
||||
</a>
|
||||
<a class="software-item tooltip" data-tooltip="Main Terminal on Linux" href="https://sw.kovidgoyal.net/kitty" target="_blank">
|
||||
<img class="image" src="https://sw.kovidgoyal.net/kitty/_static/kitty.svg">
|
||||
<span class="software-name">Kitty</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<script src="index.js"></script>
|
||||
|
||||
<footer class="cards">
|
||||
<p>© 2025 zyqunix. All rights reserved.</p>
|
||||
<p>❤️ This website is open-source on <a href="https://github.com/zyqunix/tools" target="_blank">GitHub</a>.</p>
|
||||
<p>✨ Inspired by <a href="https://vmohammad.dev" target="_blank">vMohammad's Portfolio</a>.</p>
|
||||
<p>❤️ Made with love by zyqunix in Germany.</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
197
index.js
197
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 = `<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('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";
|
||||
}
|
||||
}
|
||||
|
|
@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -1,117 +0,0 @@
|
|||
<!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&width=640&height=640"
|
||||
alt="Profile Picture"
|
||||
id="profile-picture"
|
||||
/>
|
||||
<h1 class="name tooltip" data-tooltip="zyqunix / Fabio / Laetitia / fentboiswag / монгол / 192.168.2.217">zyqunix</h1>
|
||||
<div class="time tooltip" id="time"> </div>
|
||||
<div class="age tooltip" id="age" data-tooltip="December 13th"></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 class="card-header">Languages</h2>
|
||||
</div>
|
||||
|
||||
<div class="skills cards" id="skills-div">
|
||||
<h2 class="card-header">Skills</h2>
|
||||
</div>
|
||||
|
||||
<div class="stats cards">
|
||||
<h2>Coding Stats</h2>
|
||||
<p>Since January 5th, 2025</p>
|
||||
<img class="stat-img" src="https://github-readme-stats.vercel.app/api/wakatime?username=zyqunix&theme=transparent&hide_border=true&layout=compact">
|
||||
</div>
|
||||
|
||||
<div class="contact cards">
|
||||
<h2 class="card-header">Contact</h2>
|
||||
<a class="contact-item github-contact" href="https://github.com/zyqunix" target="_blank">
|
||||
<img class="image" src="https://raw.githubusercontent.com/zyqunix/devicon/404c165ff8d0b7eda226ec5eb66fdfc64f5f381f/icons/github/github-original.svg">
|
||||
<span class="contact-name">GitHub</span>
|
||||
</a>
|
||||
<a class="contact-item instagram-contact" href="https://instagram.com/192.168.2.217" target="_blank">
|
||||
<img class="image" src="https://raw.githubusercontent.com/zyqunix/simple-icons/725d82d3e0d7feb029b84fb3ccaec2f5ec1e5fb5/icons/instagram.svg">
|
||||
<span class="contact-name">Instagram</span>
|
||||
</a>
|
||||
<a class="contact-item twitter-contact" href="https://x.com/real_zyqunix" target="_blank">
|
||||
<img class="image" src="https://raw.githubusercontent.com/zyqunix/devicon/45338f81bcadf23bb3160d0ea4e15d5fcd706d15/icons/twitter/twitter-original.svg">
|
||||
<span class="contact-name">Twitter</span>
|
||||
</a>
|
||||
<a class="contact-item youtube-contact" href="https://youtube.com/@zyqunix" target="_blank">
|
||||
<img class="image" src="https://raw.githubusercontent.com/zyqunix/simple-icons/7caa6bae5f54b0cfd0d82da3fa293674d408ab44/icons/youtube.svg">
|
||||
<span class="contact-name">YouTube</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="software cards">
|
||||
<h2 class="card-header">Software I Use</h2>
|
||||
<a class="software-item neovim" href="https://neovim.io/" target="_blank">
|
||||
<img class="image" src="https://upload.wikimedia.org/wikipedia/commons/0/07/Neovim-mark-flat.svg">
|
||||
<span class="software-name">Neovim</span>
|
||||
</a>
|
||||
<a class="software-item tooltip" data-tooltip="I have contributed in making 2 plugins" href="https://equicord.org" target="_blank">
|
||||
<img class="image" src="data:image/svg+xml,%3csvg%20width='443'%20height='443'%20viewBox='0%200%20443%20443'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_44_30)'%3e%3cpath%20d='M443%20221.5C443%20343.831%20343.831%20443%20221.5%20443C99.1691%20443%200%20343.831%200%20221.5C0%2099.1691%2099.1691%200%20221.5%200C343.831%200%20443%2099.1691%20443%20221.5ZM88.0751%20221.5C88.0751%20295.188%20147.811%20354.925%20221.5%20354.925C295.189%20354.925%20354.925%20295.188%20354.925%20221.5C354.925%20147.811%20295.189%2088.075%20221.5%2088.075C147.811%2088.075%2088.0751%20147.811%2088.0751%20221.5Z'%20fill='%23828282'/%3e%3cpath%20d='M292.475%20221.738C292.475%20260.805%20260.805%20292.475%20221.738%20292.475C206.464%20292.475%20192.321%20287.634%20180.759%20279.403L99.204%20328.406C213.071%20259.189%20140.312%20237.528%2065.4865%20281.979L151.513%20230.289C151.175%20227.486%20151.001%20224.632%20151.001%20221.738C151.001%20182.671%20182.671%20151.001%20221.738%20151.001C236.81%20151.001%20250.781%20155.714%20262.257%20163.748L318.541%20129.929C308.425%20119.209%20296.562%20110.196%20283.404%20103.305C262.883%2092.5569%20239.917%2087.3371%20216.767%2088.1588C193.616%2088.981%20171.078%2095.816%20151.371%20107.992C131.664%20120.168%20115.466%20137.264%20104.372%20157.6C100.352%20164.97%2097.0514%20172.673%2094.4977%20180.602C87.043%20203.753%2068.385%20224.336%2044.0682%20224.786C19.7508%20225.237%20-0.771072%20205.707%203.59034%20181.78C7.80789%20158.642%2015.7009%20136.23%2027.0546%20115.419C45.4719%2081.6595%2072.362%2053.2771%20105.078%2033.0639C137.794%2012.8507%20175.21%201.5037%20213.642%200.139448C252.074%20-1.2248%20290.2%207.44037%20324.267%2025.2823C358.334%2043.1247%20387.169%2069.5294%20407.934%20101.898C428.699%20134.267%20440.679%20171.484%20442.696%20209.888C444.712%20248.291%20436.694%20286.558%20419.433%20320.923C408.791%20342.107%20394.864%20361.358%20378.246%20378.002C361.062%20395.213%20333.322%20389.466%20319.844%20369.221C306.366%20348.976%20312.66%20321.917%20327.444%20302.605C332.508%20295.991%20336.96%20288.891%20340.729%20281.389C351.127%20260.689%20355.956%20237.638%20354.742%20214.505C354.103%20202.346%20351.807%20190.385%20347.956%20178.941L291.894%20212.626C292.278%20215.609%20292.475%20218.65%20292.475%20221.738ZM99.204%20328.406C97.8064%20329.256%2096.3807%20330.113%2094.9269%20330.976L99.204%20328.406Z'%20fill='url(%23paint0_linear_44_30)'/%3e%3cpath%20d='M224.615%20186.365C238.145%20178.236%20255.704%20182.613%20263.834%20196.143C271.963%20209.673%20267.586%20227.232%20254.055%20235.362L94.9268%20330.976L65.4863%20281.98L224.615%20186.365Z'%20fill='%23828282'/%3e%3c/g%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_44_30'%20x1='223.001'%20y1='0'%20x2='223.001'%20y2='388.178'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%235C5C5C'/%3e%3cstop%20offset='1'%20stop-color='%23333333'/%3e%3c/linearGradient%3e%3cclipPath%20id='clip0_44_30'%3e%3crect%20width='443'%20height='443'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e">
|
||||
<span class="software-name">Equicord</span>
|
||||
</a>
|
||||
<a class="software-item" href="https://archlinux.org" target="_blank">
|
||||
<img class="image" src="https://upload.wikimedia.org/wikipedia/commons/1/13/Arch_Linux_%22Crystal%22_icon.svg">
|
||||
<span class="software-name">Arch Linux</span>
|
||||
</a>
|
||||
<a class="software-item" href="https://wikiless.funami.tech/wiki/Windows_10" target="_blank">
|
||||
<img class="image" src="https://upload.wikimedia.org/wikipedia/commons/5/5f/Windows_logo_-_2012.svg">
|
||||
<span class="software-name">Windows 10</span>
|
||||
</a>
|
||||
<a class="software-item" href="https://github.com/Floorp-Projects/Floorp" target="_blank">
|
||||
<img class="image" src="https://raw.githubusercontent.com/Floorp-Projects/Floorp/refs/heads/ESR128/browser/branding/official/content/about-logo.svg">
|
||||
<span class="software-name">Floorp</span>
|
||||
</a>
|
||||
<a class="software-item" href="https://codeberg.org/librewolf" target="_blank">
|
||||
<img class="image" src="https://librewolf.net/icon.svg">
|
||||
<span class="software-name">LibreWolf</span>
|
||||
</a>
|
||||
<a class="software-item tooltip" data-tooltip="Used to make my Minecraft Mod" href="https://www.jetbrains.com/idea" target="_blank">
|
||||
<img class="image" src="https://upload.wikimedia.org/wikipedia/commons/9/9c/IntelliJ_IDEA_Icon.svg">
|
||||
<span class="software-name">IntelliJ IDEA</span>
|
||||
</a>
|
||||
<a class="software-item tooltip" data-tooltip="Used to make/customize open-source apps" href="https://developer.android.com/studio" target="_blank">
|
||||
<img class="image" src="https://wikiless.funami.tech/media/wikipedia/commons/5/51/Android_Studio_Logo_2024.svg">
|
||||
<span class="software-name">Android Studio</span>
|
||||
</a>
|
||||
<a class="software-item tooltip" data-tooltip="Main Terminal on Linux" href="https://sw.kovidgoyal.net/kitty" target="_blank">
|
||||
<img class="image" src="https://sw.kovidgoyal.net/kitty/_static/kitty.svg">
|
||||
<span class="software-name">Kitty</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<script src="index.js"></script>
|
||||
|
||||
<footer class="cards">
|
||||
<p>© 2025 zyqunix. All rights reserved.</p>
|
||||
<p>❤️ This website is open-source on <a href="https://github.com/zyqunix/tools" target="_blank">GitHub</a>.</p>
|
||||
<p>✨ Inspired by <a href="https://vmohammad.dev" target="_blank">vMohammad's Portfolio</a>.</p>
|
||||
<p>❤️ Made with love by zyqunix in Germany.</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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 = `<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('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();
|
||||
});
|
||||
});
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
59
sitemap/index.html
Normal file
59
sitemap/index.html
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>zyq's Tools</title>
|
||||
<meta name="description" content="Useful Tests Without Any Trackers, Fully Open-Source on GitHub!">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="shortcut icon" href="https://rimgo.pussthecat.org/RFbdMMB.png" type="image/x-icon">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="topbar" class="topbar">
|
||||
<button id="themeToggle" class="theme-button" title="Toggle Dark/Light Mode">
|
||||
<svg fill="#747474" height="24px" width="24px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 472.618 472.618" xml:space="preserve"
|
||||
style="--darkreader-inline-fill: #747474;" data-darkreader-inline-fill="">
|
||||
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
|
||||
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
|
||||
<g id="SVGRepo_iconCarrier">
|
||||
<g>
|
||||
<g>
|
||||
<path
|
||||
d="M380.525,337.291c-135.427,0-245.302-109.773-245.302-245.302c0-32.502,6.338-63.575,17.991-91.988 C63.372,36.286,0,124.39,0,227.315c0,135.427,109.875,245.302,245.302,245.302c102.923,0,191.029-63.472,227.316-153.315 C444.201,330.954,413.129,337.291,380.525,337.291z">
|
||||
</path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<select title="Change Language" name="Language" id="langauge-selector">
|
||||
<option value="en">English 🇬🇧</option>
|
||||
<option value="de">Deutsch 🇩🇪</option>
|
||||
</select>
|
||||
|
||||
<h6>why is this one so much worse than /projects T_T T_T T_T</h6>
|
||||
</div>
|
||||
|
||||
<div id="welcome" class="welcome">
|
||||
<h1 id="welcome-title">Welcome!</h1>
|
||||
<h2 id="welcome-description">This is a website for future tools. The source code can be found on my <a href="https://github.com/zyqunix/tools" target="_blank">GitHub</a>!</h2>
|
||||
<h3 id="welcome-test-it">Clicking "Test It" will open the tool in the current tab.</h3>
|
||||
<h3 id="welcome-future">More tools will come in the future.</h3>
|
||||
</div>
|
||||
|
||||
<div class="tools-main" id="toolsMain"></div>
|
||||
|
||||
<!--<div id="footer">© zyqunix under the MIT License</div> -->
|
||||
|
||||
<script src="tools.js"></script>
|
||||
<script src="quote.js"></script>
|
||||
<!-- <script src="slide.js"></script> -->
|
||||
<script src="theme.js"></script>
|
||||
<script src="translate.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
0
sitemap/index.js
Normal file
0
sitemap/index.js
Normal file
231
sitemap/style.css
Normal file
231
sitemap/style.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
638
style.css
638
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;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue