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

add: website redesign

Browse Source
This commit is contained in:
sadorowo 2024-02-18 11:41:05 +01:00
parent ffc385e73b
commit eb19d8c5a6
5 changed files with 171 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
icons/youtube.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 24 KiB

43
index.html
View File

@ -16,12 +16,17 @@
<p>Kliknij mnie!</p> <p>Kliknij mnie!</p>
</div> </div>
<div id="content"> <div id="content">
<div id="left-side">
<h1>Sador</h1> <h1>Sador</h1>
<h2 id="points">Bonusowe punkty z minigry: <span>0</span></h2> <h2 id="points">Bonusowe punkty z minigry: <span>0</span></h2>
<button onclick="resetPoints()">Resetuj punkty</button> <button onclick="resetPoints()">Resetuj punkty</button>
<button onclick="toggleTheme()">Zmień motyw</button> <button onclick="toggleTheme()">Zmień motyw</button>
<button><a href="projects.html">Moje projekty</a></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> <h4>Media społecznościowe/moje konta</h4>
<div id="socials"> <div id="socials">
<a class="social" href="https://github.com/sadorowo" target="_blank"> <a class="social" href="https://github.com/sadorowo" target="_blank">
@ -39,8 +44,42 @@
</div> </div>
<h4>O mnie</h4> <h4>O mnie</h4>
<p>hej, mam <span id="age">???</span> lat i kocham hardrock/metalcore. mieszkam w okolicach Myślenic.</p> <p>hej, mam <span id="age">???</span> lat. mieszkam w okolicach Myślenic.</p>
<p>slipknot, my chemical romance, lil peep ♡</p> <p>do niedawna byłem dość aspołeczny, jednak wiele ludzi uważa, że zmieniam się na lepsze.</p>
<p>moje zainteresowania:</p>
<ul>
<li>programowanie</li>
<li>stara motoryzacja</li>
<li>elektronika</li>
<li>muzyka</li>
</ul>
<p>jestem fanem/entuzjastą:</p>
<ul>
<li>
metalu
<ul>
<li>heavy metalu</li>
<li>groove 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:
<ul>
<li>Slipknot</li>
<li>Poisonblack</li>
<li>Lil Peep</li>
<li>Death</li>
<li>System of a Down</li>
<li>Judas Priest</li>
<li>Iron Maiden</li>
</ul>
</li>
</ul>
</div>
</div> </div>
</body> </body>

8
projects.html
View File

@ -13,9 +13,13 @@
<body> <body>
<div id="content"> <div id="content">
<div id="left-side">
<h1>Sador</h1> <h1>Sador</h1>
<button onclick="toggleTheme()">Zmień motyw</button> <button onclick="toggleTheme()">Zmień motyw</button>
<button><a href="/">Powrót</a></button> <button><a href="/">Powrót</a></button>
<button id="swap">Odwróć strony :)</button>
</div>
<div id="right-side">
<h4>Moje projekty</h4> <h4>Moje projekty</h4>
<p>Opuszczone projekty mają czarno-białe zdjęcie tła!</p> <p>Opuszczone projekty mają czarno-białe zdjęcie tła!</p>
<div id="projects"> <div id="projects">
@ -47,12 +51,14 @@
<img src="thumbnails/draw.png" alt="Draw website thumbnail" /> <img src="thumbnails/draw.png" alt="Draw website thumbnail" />
<div class="description"> <div class="description">
<h3>Strona do rysowania</h3> <h3>Strona do rysowania</h3>
<p>Szkolny projekt. Na tej stronie możesz narysować to, co Ci się tylko podoba. Na chwilę obecną nie jest hostowana na mojej domenie.</p> <p>Szkolny projekt. Na tej stronie możesz narysować to, co Ci się tylko podoba. Na chwilę
obecną nie jest hostowana na mojej domenie.</p>
</div> </div>
</div> </div>
</a> </a>
</div> </div>
</div> </div>
</div>
</body> </body>
</html> </html>

16
script.js
View File

@ -1,4 +1,7 @@
const rightSideContainer = document.getElementById('right-side');
const contentContainer = document.getElementById('content'); const contentContainer = document.getElementById('content');
const swapButton = document.getElementById('swap');
const ageElement = document.getElementById('age'); const ageElement = document.getElementById('age');
const points = document.getElementById('points'); const points = document.getElementById('points');
@ -15,7 +18,7 @@ async function updateOpacity(block, show) {
await wait(0.3); await wait(0.3);
block.style.display = 'none'; block.style.display = 'none';
} else { } else {
block.style.display = 'block'; block.style.display = 'flex';
await wait(0.3); await wait(0.3);
block.style.opacity = '1'; block.style.opacity = '1';
} }
@ -35,6 +38,11 @@ function resetPoints() {
boxPoints.textContent = bonusPoints; boxPoints.textContent = bonusPoints;
} }
function swapContent() {
contentContainer.style.flexDirection =
contentContainer.style.flexDirection === 'row-reverse' ? 'row' : 'row-reverse';
}
// listeners // listeners
if (box) box.addEventListener('click', () => { if (box) box.addEventListener('click', () => {
bonusPoints++; bonusPoints++;
@ -46,7 +54,7 @@ window.onload = async () => {
if (boxPoints) boxPoints.textContent = bonusPoints; if (boxPoints) boxPoints.textContent = bonusPoints;
if (box) await updateOpacity(box, true); if (box) await updateOpacity(box, true);
await updateOpacity(contentContainer, true); await updateOpacity(rightSideContainer, true);
} }
// update theme // update theme
@ -54,7 +62,9 @@ if (currentTheme === 'dark')
document.body.classList.add('dark'); document.body.classList.add('dark');
// update age // update age
if (typeof ageElement !== 'undefined') { if (ageElement) {
const difference = (Date.now() - 1182722400000) / (1000 * 60 * 60 * 24 * 365); const difference = (Date.now() - 1182722400000) / (1000 * 60 * 60 * 24 * 365);
ageElement.innerText = difference.toFixed(4); ageElement.innerText = difference.toFixed(4);
} }
swapButton.addEventListener('click', swapContent);

75
style.css
View File

@ -4,30 +4,52 @@
--size: 100px; --size: 100px;
} }
html {
height: 100vh;
}
body {
min-height: 100vh;
}
body { body {
font-family: 'Geologica', sans-serif; font-family: 'Geologica', sans-serif;
font-weight: 700; font-weight: 700;
width: 100%;
height: 100%;
margin: 0; margin: 0;
} }
#content { #content {
position: absolute; display: flex;
top: 50%; align-items: stretch;
left: 50%; justify-content: center;
transform: translate(-50%, -50%); flex-direction: row;
margin: auto; width: 100vw;
max-width: 100%; min-height: 100vh;
max-height: 100%; }
#content>* {
padding: 20px;
width: 100vw;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
#left-side {
background-color: #ffd9a4;
text-align: center;
}
#right-side {
transition: ease-in 0.2s; transition: ease-in 0.2s;
} }
#content { #right-side {
opacity: 0 opacity: 0
} }
#content h4 { #right-side h4 {
color: #ffd9a4; color: #ffd9a4;
text-transform: uppercase; text-transform: uppercase;
} }
@ -121,12 +143,13 @@ button a {
margin-right: 10px; margin-right: 10px;
} }
.social, button { .social,
button {
margin-bottom: 5px; margin-bottom: 5px;
} }
#points span { #points span {
color: lime; color: #6c3877;
font-size: 125%; font-size: 125%;
} }
@ -145,6 +168,7 @@ button a {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
text-decoration: none; text-decoration: none;
border: 1px solid #000;
border-radius: 10px; border-radius: 10px;
transition: ease-in 0.2s; transition: ease-in 0.2s;
@ -169,7 +193,6 @@ button a {
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 10px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -182,7 +205,7 @@ button a {
.project-card .description * { .project-card .description * {
background-color: #fff; background-color: #fff;
border-radius: 10px; border-radius: 5px;
padding: 5px; padding: 5px;
margin: 10px; margin: 10px;
color: #000; color: #000;
@ -230,7 +253,7 @@ body.dark #box p {
color: #000; color: #000;
} }
body.dark #content { body.dark #right-side {
color: #fff; color: #fff;
} }
@ -243,6 +266,10 @@ body.dark a {
text-decoration-color: #fff; text-decoration-color: #fff;
} }
body.dark .project-card {
border: 1px solid #ffd9a4;
}
body.dark .project-card .description * { body.dark .project-card .description * {
background-color: #fffdcc; background-color: #fffdcc;
} }
@ -263,7 +290,7 @@ body:not(.dark) .social:hover {
background-color: rgb(132, 125, 189); background-color: rgb(132, 125, 189);
} }
body:not(.dark) #content h4 { body:not(.dark) #right-side h4 {
color: #000; color: #000;
} }
@ -276,4 +303,18 @@ body:not(.dark) #age {
#projects { #projects {
flex-direction: column; flex-direction: column;
} }
#content {
flex-direction: column;
height: unset;
}
#content>* {
padding: 0;
}
#left-side {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
} }