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

83
index.html
View File

@ -16,31 +16,70 @@
<p>Kliknij mnie!</p>
</div>
<div id="content">
<h1>Sador</h1>
<h2 id="points">Bonusowe punkty z minigry: <span>0</span></h2>
<button onclick="resetPoints()">Resetuj punkty</button>
<button onclick="toggleTheme()">Zmień motyw</button>
<button><a href="projects.html">Moje projekty</a></button>
<div id="left-side">
<h1>Sador</h1>
<h2 id="points">Bonusowe punkty z minigry: <span>0</span></h2>
<button onclick="resetPoints()">Resetuj punkty</button>
<button onclick="toggleTheme()">Zmień motyw</button>
<button><a href="projects.html">Moje projekty</a></button>
<button id="swap">Odwróć strony :)</button>
<h4>Media społecznościowe/moje konta</h4>
<div id="socials">
<a class="social" href="https://github.com/sadorowo" target="_blank">
<img src="icons/github.png" alt="github">
<p>GitHub</p>
</a>
<a class="social" href="https://instagram.com/sadorowo" target="_blank">
<img src="icons/instagram.png" alt="instagram">
<p>Instagram</p>
</a>
<a class="social" href="https://youtube.com/c/Sadorowo" target="_blank">
<img src="icons/youtube.png" alt="youtube">
<p>YouTube</p>
</a>
<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>
<div id="socials">
<a class="social" href="https://github.com/sadorowo" target="_blank">
<img src="icons/github.png" alt="github">
<p>GitHub</p>
</a>
<a class="social" href="https://instagram.com/sadorowo" target="_blank">
<img src="icons/instagram.png" alt="instagram">
<p>Instagram</p>
</a>
<a class="social" href="https://youtube.com/c/Sadorowo" target="_blank">
<img src="icons/youtube.png" alt="youtube">
<p>YouTube</p>
</a>
</div>
<h4>O mnie</h4>
<p>hej, mam <span id="age">???</span> lat i kocham hardrock/metalcore. mieszkam w okolicach Myślenic.</p>
<p>slipknot, my chemical romance, lil peep ♡</p>
<h4>O mnie</h4>
<p>hej, mam <span id="age">???</span> lat. mieszkam w okolicach Myślenic.</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>
</body>

66
projects.html
View File

@ -13,44 +13,50 @@
<body>
<div id="content">
<h1>Sador</h1>
<button onclick="toggleTheme()">Zmień motyw</button>
<button><a href="/">Powrót</a></button>
<h4>Moje projekty</h4>
<p>Opuszczone projekty mają czarno-białe zdjęcie tła!</p>
<div id="projects">
<div class="project-card">
<img src="thumbnails/zine.png" alt="Zine thumbnail" data-abandoned />
<div class="description">
<h3>Zine</h3>
<p>Mój własny bot na platformy Guilded&Discord napisany w języku Rust.</p>
</div>
</div>
<div class="project-card">
<img src="thumbnails/website.png" alt="Website thumbnail" />
<div class="description">
<h3>Personalna strona</h3>
<p>Moja własna strona internetowa, ta, którą teraz przeglądasz.</p>
</div>
</div>
<a href="https://witch.sador.me/">
<div id="left-side">
<h1>Sador</h1>
<button onclick="toggleTheme()">Zmień motyw</button>
<button><a href="/">Powrót</a></button>
<button id="swap">Odwróć strony :)</button>
</div>
<div id="right-side">
<h4>Moje projekty</h4>
<p>Opuszczone projekty mają czarno-białe zdjęcie tła!</p>
<div id="projects">
<div class="project-card">
<img src="thumbnails/witch_website.png" alt="Witch website thumbnail" />
<img src="thumbnails/zine.png" alt="Zine thumbnail" data-abandoned />
<div class="description">
<h3>Strona o...</h3>
<p>Jeden z wielu szkolnych projektów, hostowany na GitHub Pages.</p>
<h3>Zine</h3>
<p>Mój własny bot na platformy Guilded&Discord napisany w języku Rust.</p>
</div>
</div>
</a>
<a href="https://sadorowo.github.io/draw">
<div class="project-card">
<img src="thumbnails/draw.png" alt="Draw website thumbnail" />
<img src="thumbnails/website.png" alt="Website thumbnail" />
<div class="description">
<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>
<h3>Personalna strona</h3>
<p>Moja własna strona internetowa, ta, którą teraz przeglądasz.</p>
</div>
</div>
</a>
<a href="https://witch.sador.me/">
<div class="project-card">
<img src="thumbnails/witch_website.png" alt="Witch website thumbnail" />
<div class="description">
<h3>Strona o...</h3>
<p>Jeden z wielu szkolnych projektów, hostowany na GitHub Pages.</p>
</div>
</div>
</a>
<a href="https://sadorowo.github.io/draw">
<div class="project-card">
<img src="thumbnails/draw.png" alt="Draw website thumbnail" />
<div class="description">
<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>
</div>
</div>
</a>
</div>
</div>
</div>
</body>

16
script.js
View File

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

77
style.css
View File

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