zyqunix/pages
1
0
Fork 0
mirror of https://github.com/zyqunix/tools.git synced 2025-07-06 06:20:30 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

finish everything

Browse source
This commit is contained in:
zyqunix 2025-03-27 19:56:53 +01:00
parent fd95ce9ad6
commit 82bbc6c0cd
No known key found for this signature in database
GPG key ID: 134A8DEEA83B80E6
2 changed files with 48 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

36
portfolio/index.html
View file

@ -46,25 +46,23 @@
</div> </div>
<div class="contact cards"> <div class="contact cards">
<details> <h2 class="card-header">Contact</h2>
<summary><h2 class="card-header">Contact</h2></summary> <a class="contact-item github-contact" href="https://github.com/zyqunix" target="_blank">
<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">
<img class="image" src="https://raw.githubusercontent.com/zyqunix/devicon/404c165ff8d0b7eda226ec5eb66fdfc64f5f381f/icons/github/github-original.svg"> <span class="contact-name">GitHub</span>
<span class="contact-name">GitHub</span> </a>
</a> <a class="contact-item instagram-contact" href="https://instagram.com/192.168.2.217" target="_blank">
<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">
<img class="image" src="https://raw.githubusercontent.com/zyqunix/simple-icons/725d82d3e0d7feb029b84fb3ccaec2f5ec1e5fb5/icons/instagram.svg"> <span class="contact-name">Instagram</span>
<span class="contact-name">Instagram</span> </a>
</a> <a class="contact-item twitter-contact" href="https://x.com/real_zyqunix" target="_blank">
<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">
<img class="image" src="https://raw.githubusercontent.com/zyqunix/devicon/45338f81bcadf23bb3160d0ea4e15d5fcd706d15/icons/twitter/twitter-original.svg"> <span class="contact-name">Twitter</span>
<span class="contact-name">Twitter</span> </a>
</a> <a class="contact-item youtube-contact" href="https://youtube.com/@zyqunix" target="_blank">
<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">
<img class="image" src="https://raw.githubusercontent.com/zyqunix/simple-icons/7caa6bae5f54b0cfd0d82da3fa293674d408ab44/icons/youtube.svg"> <span class="contact-name">YouTube</span>
<span class="contact-name">YouTube</span> </a>
</a>
</details>
</div> </div>
<div class="software cards"> <div class="software cards">

66
portfolio/style.css
View file

@ -5,28 +5,6 @@ img {
user-select: none; user-select: none;
} }
summary::marker {
content: "" !important;
}
details[open] > summary > h2::before {
display: inline-block;
transform: rotate(-90deg);
margin-right: 8px;
}
summary > h2::before {
content: '';
display: inline-block;
width: 1em;
height: 1em;
margin-right: 0.5em;
background-size: contain;
background-repeat: no-repeat;
background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M4.29289 8.29289C4.68342 7.90237 5.31658 7.90237 5.70711 8.29289L12 14.5858L18.2929 8.29289C18.6834 7.90237 19.3166 7.90237 19.7071 8.29289C20.0976 8.68342 20.0976 9.31658 19.7071 9.70711L12.7071 16.7071C12.3166 17.0976 11.6834 17.0976 11.2929 16.7071L4.29289 9.70711C3.90237 9.31658 3.90237 8.68342 4.29289 8.29289Z"/></svg>');
transition: transform 0.2s ease;
}
body { body {
color: #ffffff; color: #ffffff;
padding: 0; padding: 0;
@ -89,6 +67,7 @@ strong {
border-radius: 10px; border-radius: 10px;
width: 600px !important; width: 600px !important;
text-align: left; text-align: left;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
} }
footer { footer {
@ -205,6 +184,7 @@ div[class="name-percent-container"] > img.image {
} }
.tooltip { .tooltip {
cursor: help;
display: flex; display: flex;
justify-content: center; justify-content: center;
position: relative; position: relative;
@ -291,6 +271,14 @@ a[class^="software-item tooltip"]::after {
max-width: 600px; 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 { .skill-item {
text-decoration: none; text-decoration: none;
display: flex; display: flex;
@ -306,7 +294,21 @@ a[class^="software-item tooltip"]::after {
margin: 0 20px; margin: 0 20px;
} }
.contact-item, .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 { .software-item {
text-decoration: none; text-decoration: none;
display: flex; display: flex;
@ -322,7 +324,8 @@ a[class^="software-item tooltip"]::after {
margin: 10px; margin: 10px;
} }
.skill-item:hover { .skill-item:hover,
.software-item:hover {
background-color: #4d4d4d; background-color: #4d4d4d;
transform: translateY(-5px); transform: translateY(-5px);
filter: brightness(1); filter: brightness(1);
@ -338,7 +341,6 @@ a[class^="software-item tooltip"]::after {
filter: brightness(0.8); filter: brightness(0.8);
} }
.skill-item:hover > .image, .skill-item:hover > .image,
.software-item:hover> .image { .software-item:hover> .image {
filter: brightness(1); filter: brightness(1);
@ -459,7 +461,8 @@ a[class^="software-item tooltip"]::after {
height: 120px; height: 120px;
} }
#skills-div:not(#skills-div > h2) { #skills-div:not(#skills-div > h2),
.software:not(.software > h2) {
grid-template-columns: repeat(1, minmax(0, 1fr)); grid-template-columns: repeat(1, minmax(0, 1fr));
} }
@ -467,13 +470,10 @@ a[class^="software-item tooltip"]::after {
width: 100%; width: 100%;
} }
.skill-item { .skill-item,
margin: 0 10px;
padding: 10px;
}
.contact-item, .contact-item,
.software-item { .software-item {
margin: 0 10px;
padding: 10px; padding: 10px;
} }
} }
@ -498,10 +498,6 @@ a[class^="software-item tooltip"]::after {
} }
.skill-item, .skill-item,
.software-item {
padding: 8px;
}
.contact-item, .contact-item,
.software-item { .software-item {
padding: 8px; padding: 8px;