mirror of
https://github.com/zyqunix/tools.git
synced 2025-07-06 14:30:31 +02:00
add summary and software
This commit is contained in:
zyqunix
parent
fc2f045447
commit
fd95ce9ad6
2 changed files with 127 additions and 23 deletions
|
|
@ -46,7 +46,8 @@
|
|||
</div>
|
||||
|
||||
<div class="contact cards">
|
||||
<h2 class="card-header">Contact</h2>
|
||||
<details>
|
||||
<summary><h2 class="card-header">Contact</h2></summary>
|
||||
<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>
|
||||
|
|
@ -63,6 +64,39 @@
|
|||
<img class="image" src="https://raw.githubusercontent.com/zyqunix/simple-icons/7caa6bae5f54b0cfd0d82da3fa293674d408ab44/icons/youtube.svg">
|
||||
<span class="contact-name">YouTube</span>
|
||||
</a>
|
||||
</details>
|
||||
</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 a plugin" 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 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>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,28 @@ img {
|
|||
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 {
|
||||
color: #ffffff;
|
||||
padding: 0;
|
||||
|
|
@ -101,7 +123,8 @@ footer {
|
|||
}
|
||||
|
||||
.languages,
|
||||
.contact {
|
||||
.contact,
|
||||
.software {
|
||||
margin-top: 30px;
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -225,6 +248,25 @@ a[class="skill-item tooltip"]::after {
|
|||
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;
|
||||
|
|
@ -264,7 +306,8 @@ a[class="skill-item tooltip"]::after {
|
|||
margin: 0 20px;
|
||||
}
|
||||
|
||||
.contact-item {
|
||||
.contact-item,
|
||||
.software-item {
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -282,30 +325,53 @@ a[class="skill-item tooltip"]::after {
|
|||
.skill-item:hover {
|
||||
background-color: #4d4d4d;
|
||||
transform: translateY(-5px);
|
||||
filter: brightness(1);
|
||||
}
|
||||
|
||||
.skill-item:hover .skill-name {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.skill-item > .image {
|
||||
.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 {
|
||||
.contact-name,
|
||||
.software-name {
|
||||
font-size: 16px;
|
||||
color: #efefef;
|
||||
color: #ccc;
|
||||
margin-left: 10px;
|
||||
transition: 0.1s;
|
||||
}
|
||||
|
||||
.contact-item > .image,
|
||||
.software-item > .image {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
|
|
@ -315,8 +381,9 @@ a[class="skill-item tooltip"]::after {
|
|||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.contact-item:hover {
|
||||
transform: translateY(-5px);
|
||||
.contact-item:hover .contact-name,
|
||||
.software-item:hover .software-name {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.github-contact {
|
||||
|
|
@ -405,7 +472,8 @@ a[class="skill-item tooltip"]::after {
|
|||
padding: 10px;
|
||||
}
|
||||
|
||||
.contact-item {
|
||||
.contact-item,
|
||||
.software-item {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
|
@ -429,11 +497,13 @@ a[class="skill-item tooltip"]::after {
|
|||
padding: 10px;
|
||||
}
|
||||
|
||||
.skill-item {
|
||||
.skill-item,
|
||||
.software-item {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.contact-item {
|
||||
.contact-item,
|
||||
.software-item {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue