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

improvement: projects page

Browse Source
This commit is contained in:
sadorowo 2023-11-24 12:14:14 +00:00
parent 2d1d7416f4
commit 5b91424b33
3 changed files with 23 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="pl"> <html lang="pl">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -9,6 +10,7 @@
<script defer src="script.js"></script> <script defer src="script.js"></script>
<title>sador.me</title> <title>sador.me</title>
</head> </head>
<body> <body>
<div id="box"> <div id="box">
<p>Kliknij mnie!</p> <p>Kliknij mnie!</p>
@ -38,6 +40,8 @@
<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 i kocham hardrock/metalcore. mieszkam w okolicach Myślenic.</p>
<p>slipknot, my chemical romance, lil peep ♡</p>
</div> </div>
</body> </body>
</html> </html>

14
projects.html
View File

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="pl"> <html lang="pl">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -9,35 +10,40 @@
<script defer src="script.js"></script> <script defer src="script.js"></script>
<title>sador.me - projekty</title> <title>sador.me - projekty</title>
</head> </head>
<body> <body>
<div id="content"> <div id="content">
<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>
<h4>Moje projekty</h4> <h4>Moje projekty</h4>
<p>Opuszczone projekty mają czarno-białe zdjęcie tła!</p>
<div id="projects"> <div id="projects">
<div class="project-card"> <div class="project-card">
<img src="thumbnails/zine.png" alt="Zine thumbnail"/> <img src="thumbnails/zine.png" alt="Zine thumbnail" data-abandoned />
<div class="description"> <div class="description">
<h3>Zine</h3> <h3>Zine</h3>
<p>Mój własny bot na platformy Guilded&Discord napisany w języku Rust. (Projekt porzucony)</p> <p>Mój własny bot na platformy Guilded&Discord napisany w języku Rust.</p>
</div> </div>
</div> </div>
<div class="project-card"> <div class="project-card">
<img src="thumbnails/website.png" alt="Website thumbnail"/> <img src="thumbnails/website.png" alt="Website thumbnail" />
<div class="description"> <div class="description">
<h3>Personalna strona</h3> <h3>Personalna strona</h3>
<p>Moja własna strona internetowa, ta, którą teraz przeglądasz.</p> <p>Moja własna strona internetowa, ta, którą teraz przeglądasz.</p>
</div> </div>
</div> </div>
<a href="https://witch.sador.me/">
<div class="project-card"> <div class="project-card">
<img src="thumbnails/witch_website.png" alt="Witch website thumbnail"/> <img src="thumbnails/witch_website.png" alt="Witch website thumbnail" />
<div class="description"> <div class="description">
<h3>Strona o...</h3> <h3>Strona o...</h3>
<p>Jeden z wielu szkolnych projektów, hostowany na GitHub Pages.</p> <p>Jeden z wielu szkolnych projektów, hostowany na GitHub Pages.</p>
</div> </div>
</div> </div>
</a>
</div> </div>
</div> </div>
</body> </body>
</html> </html>

5
style.css
View File

@ -155,11 +155,14 @@ button a {
.project-card img { .project-card img {
border-radius: 10px; border-radius: 10px;
width: 200px;
height: 200px; height: 200px;
margin: 0; margin: 0;
} }
.project-card img[data-abandoned] {
filter: grayscale();
}
.project-card .description { .project-card .description {
position: absolute; position: absolute;
top: 0; top: 0;