From fd95ce9ad61cc26cefcc2bd1bd68318f4ce156c9 Mon Sep 17 00:00:00 2001 From: zyqunix Date: Thu, 27 Mar 2025 18:18:13 +0100 Subject: [PATCH] add summary and software --- portfolio/index.html | 60 ++++++++++++++++++++++------- portfolio/style.css | 90 +++++++++++++++++++++++++++++++++++++++----- 2 files changed, 127 insertions(+), 23 deletions(-) diff --git a/portfolio/index.html b/portfolio/index.html index b34cb80..753082a 100644 --- a/portfolio/index.html +++ b/portfolio/index.html @@ -46,22 +46,56 @@
-

Contact

- - - GitHub +
+

Contact

 + + + GitHub + + + + Instagram + + + + + YouTube + +
+
+ +
+

Software I Use

+ + + Neovim - - - Instagram + + + Equicord - + + Arch Linux - - - YouTube + + + Windows 10 + + + + IntelliJ IDEA + + + + Android Studio + + + + Kitty
diff --git a/portfolio/style.css b/portfolio/style.css index ec22bcf..b28ae1c 100644 --- a/portfolio/style.css +++ b/portfolio/style.css @@ -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,'); + 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; } }