sadorowo/personal-website
1
0
Fork 0
Code Pull Requests Projects Releases Activity

update: small redesign

Browse Source
This commit is contained in:
sadorowo 2024-02-28 20:07:22 +01:00
parent 30d5c2f4e1
commit 4f8d4d9dc9
3 changed files with 163 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
index.html
View File

@ -23,8 +23,6 @@
<button onclick="toggleTheme()">Zmień motyw</button>
<button><a href="projects.html">Moje projekty</a></button>
<button id="swap">Odwróć strony :)</button>
<iframe height="450" style="width:100%;max-width:660px;overflow:hidden;border-radius:10px;" frameborder="0" src="https://embed.music.apple.com/pl/playlist/heavy-megamix/pl.u-Ymb0vyMiglN9ddW?l=pl"></iframe>
</div>
<div id="right-side">
<h4>Media społecznościowe/moje konta</h4>
@ -53,20 +51,46 @@
<li>muzyka</li>
</ul>
<p>jestem fanem/po prostu słucham:</p>
<ul>
<li>
metalu
<div class="accordion">
<p>metalu</p>
<div class="accordion-content">
<ul>
<li>heavy metalu</li>
<li>gothic metalu</li>
<li>metalu progresywnego</li>
<li>nu metalu</li>
</ul>
</li>
<li>rocka</li>
<li>części amerykańskiego rapu</li>
<li>
zespołów/artystów:
</div>
</div>
<div class="accordion">
<p>rocka</p>
<div class="accordion-content">
<p>szczególnie:</p>
<ul>
<li>Foo Fighters</li>
<li>Evanescence</li>
<li>30 Seconds To Mars</li>
<li>HIM</li>
</ul>
</div>
</div>
<div class="accordion">
<p>części amerykańskiego rapu</p>
<div class="accordion-content">
<p>szczególnie:</p>
<ul>
<li>Lil Peep</li>
<li>Lil Tracy</li>
<li>XXXTENTACION</li>
<li>Juice WRLD</li>
<li>Mackned</li>
<li>Fat Nick</li>
</ul>
</div>
</div>
<div class="accordion">
<p>zespołów/artystów</p>
<div class="accordion-content">
<ul>
<li>Slipknot</li>
<li>Poisonblack</li>
@ -82,10 +106,63 @@
<li>System of a Down</li>
<li>Evanescence</li>
</ul>
</li>
</div>
</div>
<p>sprzęt/oprogramowanie, który posiadam:</p>
<div class="accordion">
<p>sprzęt</p>
<div class="accordion-content">
<ul>
<li>CPU: Intel i5-4590</li>
<li>GPU: NVIDIA GTX 970 + Radeon RX 5500 XT</li>
<li>Bluetooth: CSR 4.0</li>
<li>Wi-Fi: TP-LINK TL-WN722N V2</li>
<li>Klawiatura: Microsoft All-In-One Media Keyboard</li>
<li>Mysz: coś z defendera :)</li>
<li>Słuchawki: Beats Studio Buds</li>
<li>Monitor: LG M2450D</li>
<li>Płyta główna: ASRock H97M Pro4</li>
<li>RAM: 16GB DDR3</li>
<li>Dysk: ADATA 500GB</li>
</ul>
</div>
</div>
<div class="accordion">
<p>systemy operacyjne</p>
<div class="accordion-content">
<ul>
<li>Hackintosh Sonoma</li>
<li>Windows 10 Pro</li>
</ul>
</div>
</div>
<div class="accordion">
<p>oprogramowanie</p>
<div class="accordion-content">
<ul>
<li>DaVinci Resolve</li>
<li>Firefox</li>
<li>GIMP</li>
<li>OBS Studio</li>
<li>Handbrake</li>
<li>VSC (only product from ms trash that I'm using LMAO)</li>
<li>BitTorrent Web</li>
<li>Apple Music</li>
<li>JetBrains IDEs</li>
</ul>
</div>
</div>
<div class="accordion">
<p>subskrypcje</p>
<div class="accordion-content">
<ul>
<li>Apple Music Individual</li>
</ul>
</div>
</div>
<p>cenię sobie prywatność, nie korzystam m.in. z facebooka, wyszukiwarki google.</p>
</div>
</div>
</body>
</html>

18
script.js
View File

@ -73,3 +73,21 @@ if (ageElement) {
}
swapButton.addEventListener('click', swapContent);
const accordions = document.querySelectorAll('.accordion');
function closeOtherAccordions(accordion) {
accordions.forEach(acc => {
if (acc !== accordion)
acc.classList.remove('active');
});
}
function openAccordion(accordion) {
closeOtherAccordions(accordion);
accordion.classList.toggle('active');
}
accordions.forEach(accordion => {
accordion.addEventListener('click', () => openAccordion(accordion));
});

61
style.css
View File

@ -4,10 +4,6 @@
--size: 100px;
}
html {
height: 100vh;
}
body {
min-height: 100vh;
}
@ -23,11 +19,13 @@ body {
align-items: stretch;
justify-content: center;
flex-direction: row;
min-height: 100vh;
height: 100vh;
width: 100%;
}
#content>* {
width: 100vw;
overflow-y: auto;
width: 100%;
display: flex;
align-items: center;
flex-direction: column;
@ -213,6 +211,53 @@ button {
opacity: 0;
}
.accordion {
width: 100%;
background-color: #ffb54c;
padding: 10px 0 10px 0;
cursor: pointer;
transition: ease-in 0.2s;
}
.accordion.active, .accordion:hover {
background-color: #fffdcc;
}
.accordion p {
text-align: center;
margin: 0;
}
.accordion>p::after {
content: '▼';
margin-left: 5px;
}
.accordion.active>p::after {
content: '▲';
}
.accordion-content {
display: none;
padding: 10px 0 10px 0;
border-radius: 10px;
text-align: center;
}
.accordion-content > *:is(ol, ul) {
list-style-type: none;
}
.accordion-content > *:is(ol, ul) li::before {
content: '•';
margin: 0 5px 0 5px;
}
.accordion.active>.accordion-content {
display: block;
}
/* ANIMATIONS */
@keyframes bounce {
0% {
top: 0;
@ -321,4 +366,8 @@ body:not(.dark) #age {
flex-direction: column;
justify-content: center;
}
#box {
display: none;
}
}