add: website redesign

index.html

@@ -16,31 +16,70 @@
         <p>Kliknij mnie!</p>
     </div>
     <div id="content">
-        <h1>Sador</h1>
+        <div id="left-side">
-        <h2 id="points">Bonusowe punkty z minigry: <span>0</span></h2>
+            <h1>Sador</h1>
-        <button onclick="resetPoints()">Resetuj punkty</button>
+            <h2 id="points">Bonusowe punkty z minigry: <span>0</span></h2>
-        <button onclick="toggleTheme()">Zmień motyw</button>
+            <button onclick="resetPoints()">Resetuj punkty</button>
-        <button><a href="projects.html">Moje projekty</a></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>
+            <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 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>
+        <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>
+            <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>
 </body>
 

projects.html

@@ -13,44 +13,50 @@
 
 <body>
     <div id="content">
-        <h1>Sador</h1>
+        <div id="left-side">
-        <button onclick="toggleTheme()">Zmień motyw</button>
+            <h1>Sador</h1>
-        <button><a href="/">Powrót</a></button>
+            <button onclick="toggleTheme()">Zmień motyw</button>
-        <h4>Moje projekty</h4>
+            <button><a href="/">Powrót</a></button>
-        <p>Opuszczone projekty mają czarno-białe zdjęcie tła!</p>
+            <button id="swap">Odwróć strony :)</button>
-        <div id="projects">
+        </div>
-            <div class="project-card">
+        <div id="right-side">
-                <img src="thumbnails/zine.png" alt="Zine thumbnail" data-abandoned />
+            <h4>Moje projekty</h4>
-                <div class="description">
+            <p>Opuszczone projekty mają czarno-białe zdjęcie tła!</p>
-                    <h3>Zine</h3>
+            <div id="projects">
-                    <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 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>
+                        <h3>Zine</h3>
-                        <p>Jeden z wielu szkolnych projektów, hostowany na GitHub Pages.</p>
+                        <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>
+                        <h3>Personalna strona</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>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>

script.js

@@ -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);

style.css

@@ -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;
+    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;
 }
 
-#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;
+    }
+}