complete redesign
This commit is contained in:
sadorowo
parent
50e9f9bdd6
commit
9b0e346696
20
404.html
Normal file
20
404.html
Normal file
@ -0,0 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="pl">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="huh, you are lost">
|
||||
|
||||
<link rel="shortcut icon" href="assets/logo.png">
|
||||
<link rel="stylesheet" href="assets/style.css">
|
||||
<title>sador - you are lost</title>
|
||||
</head>
|
||||
|
||||
<body id="centered">
|
||||
<h1>404</h1>
|
||||
<p>huh, you are lost</p>
|
||||
<a href="index.html">go back</a>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 2.9 KiB |
42
assets/script.js
Normal file
42
assets/script.js
Normal file
@ -0,0 +1,42 @@
|
||||
if (typeof age !== 'undefined') {
|
||||
const difference = (Date.now() - 1182722400000) / (1000 * 60 * 60 * 24 * 365);
|
||||
age.textContent = difference.toFixed(4);
|
||||
}
|
||||
|
||||
if (typeof arrow !== 'undefined') {
|
||||
arrow.addEventListener('click', () => {
|
||||
window.scrollTo({
|
||||
top: document.body.scrollHeight,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const smoothScrollLinks = document.querySelectorAll('a[href^="#"]');
|
||||
smoothScrollLinks.forEach(link => {
|
||||
link.addEventListener('click', event => {
|
||||
event.preventDefault();
|
||||
const target = document.querySelector(event.target.hash);
|
||||
|
||||
target.scrollIntoView({
|
||||
behavior: 'smooth'
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
const switchTheme = document.getElementById('switch-theme');
|
||||
const theme = localStorage.getItem('theme');
|
||||
|
||||
switchTheme.addEventListener('click', () => {
|
||||
if (theme === 'dark') {
|
||||
localStorage.setItem('theme', 'light');
|
||||
} else {
|
||||
localStorage.setItem('theme', 'dark');
|
||||
}
|
||||
|
||||
document.body.classList.toggle('dark');
|
||||
});
|
||||
|
||||
if (theme === 'dark') {
|
||||
document.body.classList.add('dark');
|
||||
}
|
||||
95
assets/style.css
Normal file
95
assets/style.css
Normal file
@ -0,0 +1,95 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200..900&display=swap');
|
||||
|
||||
@import url('style.mobile.css');
|
||||
@import url('style.dark.css');
|
||||
|
||||
:root {
|
||||
--font: 'Inconsolata', monospace;
|
||||
--font-size: 16px;
|
||||
--columns: 2;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font);
|
||||
font-size: var(--font-size);
|
||||
transition: background-color 0.5s, color 0.5s;
|
||||
}
|
||||
|
||||
body#centered {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
body>div {
|
||||
display: grid;
|
||||
overflow-y: auto;
|
||||
place-items: center;
|
||||
align-content: center;
|
||||
|
||||
float: left;
|
||||
height: 100%;
|
||||
width: calc(100% / var(--columns));
|
||||
}
|
||||
|
||||
body>div:first-child #arrow {
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 2em;
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
body>div>div#inner {
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
ul li::before,
|
||||
ol li::before {
|
||||
content: "⮑ ";
|
||||
}
|
||||
|
||||
#age {
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
*[data-deprecated] {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
*[data-deprecated]::after {
|
||||
content: " (deprecated)";
|
||||
color: red;
|
||||
}
|
||||
|
||||
#contact li:first-child::before {
|
||||
content: "✉ ";
|
||||
}
|
||||
|
||||
#switch-theme {
|
||||
color: blue;
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
32
assets/style.dark.css
Normal file
32
assets/style.dark.css
Normal file
@ -0,0 +1,32 @@
|
||||
:root {
|
||||
--font: 'Inconsolata', monospace;
|
||||
--font-size: 16px;
|
||||
--columns: 2;
|
||||
|
||||
--background-color: #171616;
|
||||
--color: #fff;
|
||||
}
|
||||
|
||||
body.dark {
|
||||
background-color: var(--background-color);
|
||||
color: var(--color);
|
||||
}
|
||||
|
||||
body.dark>div:first-child #arrow {
|
||||
color: #000;
|
||||
text-align: center;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
body > div:first-child #arrow {
|
||||
background-color: var(--color);
|
||||
color: var(--background-color);
|
||||
}
|
||||
|
||||
body.dark a {
|
||||
color: var(--color);
|
||||
}
|
||||
|
||||
body.dark #switch-theme {
|
||||
color: var(--color);
|
||||
}
|
||||
9
assets/style.mobile.css
Normal file
9
assets/style.mobile.css
Normal file
@ -0,0 +1,9 @@
|
||||
@media screen and (max-width: 767px) {
|
||||
body > div {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
body > div:first-child #arrow {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
348
index.html
348
index.html
@ -4,168 +4,220 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="sadorro's personal website!">
|
||||
<meta name="description" content="hii">
|
||||
|
||||
<link rel="shortcut icon" href="logo.png">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
|
||||
<script defer src="script.js"></script>
|
||||
<title>sador.me</title>
|
||||
<link rel="shortcut icon" href="assets/logo.png">
|
||||
<link rel="stylesheet" href="assets/style.css">
|
||||
<script defer src="assets/script.js"></script>
|
||||
<title>sador</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="box">
|
||||
<p>Kliknij mnie!</p>
|
||||
</div>
|
||||
<div id="content">
|
||||
<p id="top-bar">Aby zamknąć bądź otworzyć daną kolumnę, kliknij w jej tło.</p>
|
||||
<div data-closed="false">
|
||||
<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>
|
||||
</div>
|
||||
<div data-closed="true">
|
||||
<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>
|
||||
<div>
|
||||
<div id="inner">
|
||||
<h1>sador</h1>
|
||||
<p><span id="age">?</span> years old boy, who loves to code.</p>
|
||||
|
||||
<h4>O mnie</h4>
|
||||
<p>hej, mam <span id="age">???</span> lat. mieszkam w okolicach Myślenic.</p>
|
||||
<p>moje zainteresowania:</p>
|
||||
<h2>my hobbies</h2>
|
||||
<ul>
|
||||
<li>programowanie</li>
|
||||
<li>stara motoryzacja</li>
|
||||
<li>elektronika</li>
|
||||
<li>muzyka</li>
|
||||
<li>programming</li>
|
||||
<li>music</li>
|
||||
<li>old automotive</li>
|
||||
</ul>
|
||||
<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>
|
||||
|
||||
<h2>my profiles</h2>
|
||||
<ul>
|
||||
<li><a href="https://github.com/sadorowo" target="_blank">github</a></li>
|
||||
<li><a href="https://instagram.com/sadorowo" target="_blank">instagram</a></li>
|
||||
</ul>
|
||||
|
||||
<h2>contact</h2>
|
||||
<ul id="contact">
|
||||
<li><a href="mailto:contact@sador.me">e-mail</a></li>
|
||||
</ul>
|
||||
|
||||
<h3 id="sections">go to section:</h3>
|
||||
<ul>
|
||||
<li><a href="#projects">my projects</a></li>
|
||||
<li><a href="#music-taste">my music taste</a></li>
|
||||
<li><a href="#hardware">my hardware</a></li>
|
||||
<li><a href="#software">my software</a></li>
|
||||
<li><a href="#privacy">privacy</a></li>
|
||||
</ul>
|
||||
|
||||
<h2><a href="#projects">go to top</a></h2>
|
||||
<h2 id="switch-theme">switch theme</h2>
|
||||
|
||||
<div id="arrow">▼</div>
|
||||
</div>
|
||||
<div data-closed="true">
|
||||
<p>jestem fanem/po prostu słucham:</p>
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
<div>
|
||||
<div id="inner">
|
||||
<h2 id="projects">my projects</h2>
|
||||
<ul>
|
||||
<li>
|
||||
websites
|
||||
<ol>
|
||||
<li><a href="https://github.com/sadorowo/personal-website"
|
||||
target="_blank">sadorowo/personal-website</a></li>
|
||||
<li><a href="https://github.com/sadorowo/witch-website"
|
||||
target="_blank">sadorowo/witch-website</a>
|
||||
</li>
|
||||
<li><a href="https://github.com/sadorowo/draw" target="_blank">sadorowo/draw</a></li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>
|
||||
projects
|
||||
<ol>
|
||||
<li><a href="https://github.com/sadorowo/dynamic-content-delivery"
|
||||
target="_blank">sadorowo/dynamic-content-delivery</a></li>
|
||||
<li><a href="https://github.com/sadorowo/dynamic-content-delivery-api"
|
||||
target="_blank">sadorowo/dynamic-content-delivery-api</a></li>
|
||||
<li data-deprecated><a href="https://github.com/sadorowo/dcd-legacy"
|
||||
target="_blank">sadorowo/dcd-legacy</a></li>
|
||||
<li><a href="https://github.com/sadorowo/wulkanowy-mod"
|
||||
target="_blank">sadorowo/wulkanowy-mod</a>
|
||||
</li>
|
||||
<li><a href="https://github.com/sadorowo/zine-v4" target="_blank">sadorowo/zine-v4</a></li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>
|
||||
tools
|
||||
<ol>
|
||||
<li><a href="https://github.com/sadorowo/m3u-category-matcher"
|
||||
target="_blank">sadorowo/m3u-category-matcher</a>
|
||||
</li>
|
||||
<li><a href="https://github.com/sadorowo/m3u-logo-matcher"
|
||||
target="_blank">sadorowo/m3u-logo-matcher</a>
|
||||
</li>
|
||||
<li><a href="https://github.com/sadorowo/m3u-duplicates-filter"
|
||||
target="_blank">sadorowo/m3u-duplicates-filter</a></li>
|
||||
</ol>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="music-taste">my music taste</h2>
|
||||
<p>i'm a fan of:</p>
|
||||
<ul>
|
||||
<li>
|
||||
genres
|
||||
<ol>
|
||||
<li>heavy metal</li>
|
||||
<li>black metal</li>
|
||||
<li>death metal</li>
|
||||
<li>doom metal</li>
|
||||
<li>hard rock</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>
|
||||
rock/metal bands/artists
|
||||
<ol>
|
||||
<li>Draconian</li>
|
||||
<li>Poisonblack</li>
|
||||
<li>To/Die/For</li>
|
||||
<li>For My Pain...</li>
|
||||
<li>Lacrimas Profundere</li>
|
||||
<li>Death</li>
|
||||
<li>Charon</li>
|
||||
<li>Entwine</li>
|
||||
<li>Beseech</li>
|
||||
<li>Slipknot</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>
|
||||
american rap (sometimes, very rarely)
|
||||
<ol>
|
||||
<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>
|
||||
<li>Beseech</li>
|
||||
<li>To/Die/For</li>
|
||||
<li>Entwine</li>
|
||||
<li>Lacrimas Profundere</li>
|
||||
<li>For My Pain...</li>
|
||||
<li>Draconian</li>
|
||||
<li>Charon</li>
|
||||
<li>Lil Peep</li>
|
||||
<li>Death</li>
|
||||
<li>System of a Down</li>
|
||||
<li>Evanescence</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</ol>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>i like these artists, but I can't say I'm a fan of them yet:</p>
|
||||
<ul>
|
||||
<li>Darkthrone</li>
|
||||
<li>Dark Funeral</li>
|
||||
<li>Behemoth</li>
|
||||
<li>Venom</li>
|
||||
<li>Deathstars</li>
|
||||
<li>Carpatian Forest</li>
|
||||
<li>Gorgoroth</li>
|
||||
<li>Immortal</li>
|
||||
<li>Emperor</li>
|
||||
<li>Imminence</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="hardware">my hardware</h2>
|
||||
<ul>
|
||||
<li>
|
||||
OSes
|
||||
<ol>
|
||||
<li>windows 10</li>
|
||||
<li>macOS</li>
|
||||
<li>android (lineageos)</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>
|
||||
in general
|
||||
<ol>
|
||||
<li>cpu: intel i5-4590</li>
|
||||
<li>gpu: radeon rx 5500 xt</li>
|
||||
<li>bluetooth & wi-fi: fenvi t919</li>
|
||||
<li>keyboard: microsoft all-in-one media keyboard</li>
|
||||
<li>headphones: beats studio buds</li>
|
||||
<li>display: lg m2450d</li>
|
||||
<li>motherboard: asrock h97m pro4</li>
|
||||
<li>ram: 16gb ddr3</li>
|
||||
<li>ssd: adata 500gb</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="software">my software</h2>
|
||||
<ul>
|
||||
<li>
|
||||
recording/editing
|
||||
<ol>
|
||||
<li>obs studio</li>
|
||||
<li>quicktime player</li>
|
||||
<li>gimp</li>
|
||||
<li>davinci resolve</li>
|
||||
<li>handbrake</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>
|
||||
programming
|
||||
<ol>
|
||||
<li>xcode</li>
|
||||
<li>vs code</li>
|
||||
<li>intellij idea</li>
|
||||
<li>pycharm</li>
|
||||
<li>clion</li>
|
||||
<li>android studio</li>
|
||||
<li>webstorm</li>
|
||||
<li>termius</li>
|
||||
<li>postman</li>
|
||||
<li>git</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>
|
||||
internet
|
||||
<ol>
|
||||
<li>firefox</li>
|
||||
<li>bittorrent web</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>music - apple music individual</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="privacy">privacy</h2>
|
||||
<p>i prefer to keep my privacy, so i don't use any social media, except for instagram. i also don't use any
|
||||
of the big tech companies' services, like google, facebook, amazon, etc. i use apple products, because
|
||||
they are the only ones that respect my privacy. i also use a vpn and a password manager.</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
@ -1,87 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="pl">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="sadorro's personal website!">
|
||||
|
||||
<link rel="shortcut icon" href="logo.png">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
|
||||
<script defer src="script.js"></script>
|
||||
<title>sador.me - projekty</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="content">
|
||||
<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/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 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>
|
||||
<a href="https://github.com/sadorowo">
|
||||
<div class="project-card">
|
||||
<img src="thumbnails/github_bg.png" alt="GitHub profile thumbnail" />
|
||||
<div class="description">
|
||||
<h3>Narzędzia do IPTV</h3>
|
||||
<p>Tak dokładniej to narzędzia do manipulacji playlistami. Więcej dowiesz się czytając
|
||||
README na moim GitHubie.</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="https://github.com/sadorowo/wulkanowy-mod">
|
||||
<div class="project-card">
|
||||
<img src="thumbnails/wulkanowy_mod.png" alt="Wulkanowy mod profile thumbnail" />
|
||||
<div class="description">
|
||||
<h3>Zmodyfikowana aplikacja Wulkanowego</h3>
|
||||
<p>Masz wymagających rodziców a nie chcesz męczyć się w szkole? Ta aplikacja jest dla
|
||||
Ciebie! Możesz ukrywać oceny poniżej 3, ustawić fałszywą 100% frekwencję, ukryć uwagi,
|
||||
nieusprawiedliwioną frekwencję za pomocą sekretnego menu.</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
125
script.js
125
script.js
@ -1,125 +0,0 @@
|
||||
const contentContainer = document.getElementById('content');
|
||||
|
||||
const swapButton = document.getElementById('swap');
|
||||
const ageElement = document.getElementById('age');
|
||||
const points = document.getElementById('points');
|
||||
|
||||
const box = document.getElementById('box');
|
||||
const boxPoints = document.querySelector('#points span');
|
||||
|
||||
let bonusPoints = Number(localStorage.getItem('points') ?? 0);
|
||||
let currentTheme = localStorage.getItem('theme') ?? 'light';
|
||||
|
||||
const wait = (ms) => new Promise(resolve => setTimeout(resolve, ms * 1000))
|
||||
async function updateOpacity(block, show) {
|
||||
if (!show) {
|
||||
block.style.opacity = '0';
|
||||
await wait(0.3);
|
||||
block.style.display = 'none';
|
||||
} else {
|
||||
block.style.display = 'flex';
|
||||
await wait(0.3);
|
||||
block.style.opacity = '1';
|
||||
}
|
||||
|
||||
block.classList.toggle('visible');
|
||||
}
|
||||
|
||||
function toggleTheme() {
|
||||
document.body.classList.toggle('dark');
|
||||
currentTheme = currentTheme === 'light' ? 'dark' : 'light';
|
||||
localStorage.setItem('theme', currentTheme);
|
||||
}
|
||||
|
||||
function resetPoints() {
|
||||
localStorage.removeItem('points');
|
||||
bonusPoints = 0;
|
||||
boxPoints.textContent = bonusPoints;
|
||||
}
|
||||
|
||||
function swapContent() {
|
||||
if (window.innerWidth < 768) {
|
||||
contentContainer.style.flexDirection =
|
||||
contentContainer.style.flexDirection === 'column-reverse' ? 'column' : 'column-reverse';
|
||||
} else {
|
||||
contentContainer.style.flexDirection =
|
||||
contentContainer.style.flexDirection === 'row-reverse' ? 'row' : 'row-reverse';
|
||||
}
|
||||
}
|
||||
|
||||
// listeners
|
||||
if (box) box.addEventListener('click', () => {
|
||||
bonusPoints++;
|
||||
localStorage.setItem('points', bonusPoints);
|
||||
boxPoints.textContent = bonusPoints;
|
||||
})
|
||||
|
||||
window.onload = async () => {
|
||||
if (boxPoints) boxPoints.textContent = bonusPoints;
|
||||
if (box) await updateOpacity(box, true);
|
||||
}
|
||||
|
||||
// update theme
|
||||
if (currentTheme === 'dark')
|
||||
document.body.classList.add('dark');
|
||||
|
||||
// update age
|
||||
if (ageElement) {
|
||||
const difference = (Date.now() - 1182722400000) / (1000 * 60 * 60 * 24 * 365);
|
||||
ageElement.innerText = difference.toFixed(4);
|
||||
}
|
||||
|
||||
swapButton.addEventListener('click', swapContent);
|
||||
|
||||
const accordions = document.querySelectorAll('.accordion');
|
||||
|
||||
function closeOtherAccordions(accordion) {
|
||||
accordions.forEach(acc => {
|
||||
if (acc !== accordion) {
|
||||
const panel = accordion.children[1];
|
||||
|
||||
acc.classList.remove('active');
|
||||
panel.style.maxHeight = null;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function openAccordion(accordion) {
|
||||
closeOtherAccordions(accordion);
|
||||
|
||||
const panel = accordion.children[1];
|
||||
accordion.classList.toggle('active');
|
||||
|
||||
console.log(panel, panel.style.maxHeight)
|
||||
if (panel.style.maxHeight)
|
||||
panel.style.maxHeight = null
|
||||
else
|
||||
panel.style.maxHeight = panel.scrollHeight + "px"
|
||||
}
|
||||
|
||||
accordions.forEach(accordion => {
|
||||
accordion.addEventListener('click', () => openAccordion(accordion));
|
||||
});
|
||||
|
||||
// Hide or show columns
|
||||
const columns = document.querySelectorAll('#content > div');
|
||||
|
||||
function showColumn(event, column) {
|
||||
// Check if the click was on actual column, not on its children
|
||||
if (event.target !== column) return;
|
||||
|
||||
columns.forEach(col => {
|
||||
if (col === column) return;
|
||||
|
||||
col.dataset.closed = 'true';
|
||||
});
|
||||
|
||||
column.dataset.closed = column.dataset.closed === 'true' ? 'false' : 'true';
|
||||
}
|
||||
|
||||
// Apply only to desktop
|
||||
if (window.innerWidth > 768) {
|
||||
columns.forEach(column => {
|
||||
column.addEventListener('click', (event) => showColumn(event, column));
|
||||
});
|
||||
}
|
||||
355
style.css
355
style.css
@ -1,355 +0,0 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Geologica:wght@400;700&display=swap');
|
||||
@import url('style.dark.css');
|
||||
|
||||
:root {
|
||||
--info-height: 40px;
|
||||
--size: 100px;
|
||||
--columns: 3;
|
||||
}
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Geologica', sans-serif;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#top-bar {
|
||||
background-color: #a4aaff;
|
||||
text-align: center;
|
||||
position: fixed;
|
||||
color: #fff;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
|
||||
line-height: var(--info-height);
|
||||
height: var(--info-height);
|
||||
}
|
||||
|
||||
#content {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#content>* {
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
color: #000;
|
||||
transition: ease-in-out 0.3s;
|
||||
}
|
||||
|
||||
#content>div {
|
||||
margin-top: var(--info-height);
|
||||
}
|
||||
|
||||
#content>*[data-closed="true"] {
|
||||
width: 20%;
|
||||
cursor: pointer;
|
||||
background-color: #ffd9a4;
|
||||
}
|
||||
|
||||
#content>*[data-closed="true"] * {
|
||||
filter: grayscale();
|
||||
}
|
||||
|
||||
#content>*[data-closed="false"] {
|
||||
width: calc(100% - calc((var(--columns) - 1) * 20%))
|
||||
}
|
||||
|
||||
a {
|
||||
color: #000;
|
||||
text-decoration-color: #000;
|
||||
display: inline-block;
|
||||
transition: ease-in 0.2s;
|
||||
}
|
||||
|
||||
#box {
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
border-radius: 50%;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
background-color: #000;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
transition: ease-in 0.2s;
|
||||
animation: toRight linear 6.8s infinite alternate, bounce linear 17s infinite alternate;
|
||||
|
||||
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
#box p {
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
#age {
|
||||
color: #3b3b3b;
|
||||
}
|
||||
|
||||
button {
|
||||
border: none;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
background-color: rgb(96, 77, 199);
|
||||
font-family: 'Geologica', sans-serif;
|
||||
font-weight: 400;
|
||||
transition: ease-in 0.2s;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: rgba(96, 77, 199, 0.6);
|
||||
}
|
||||
|
||||
button a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.social {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
|
||||
border: none;
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
border-radius: 10px;
|
||||
padding: 0 10px 0 10px;
|
||||
background-color: #a4aaff;
|
||||
transition: ease-in 0.2s;
|
||||
font-family: 'Geologica', sans-serif;
|
||||
}
|
||||
|
||||
.social:hover {
|
||||
background-color: #b5baff;
|
||||
}
|
||||
|
||||
.social p {
|
||||
color: #000;
|
||||
margin: 10px 0 10px 0;
|
||||
}
|
||||
|
||||
.social img {
|
||||
width: auto;
|
||||
height: 20px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.social,
|
||||
button {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
#points span {
|
||||
color: #6c3877;
|
||||
font-size: 125%;
|
||||
}
|
||||
|
||||
#projects {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.project-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
border: 1px solid #000;
|
||||
background-color: rgb(185, 175, 255);
|
||||
|
||||
border-radius: 10px;
|
||||
transition: ease-in 0.2s;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.project-card img {
|
||||
border-radius: 10px;
|
||||
height: 200px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.project-card img[data-abandoned] {
|
||||
filter: grayscale();
|
||||
}
|
||||
|
||||
.project-card .description {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.project-card .description * {
|
||||
transition: ease-in 0.2s;
|
||||
}
|
||||
|
||||
.project-card .description * {
|
||||
background-color: #fff;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
margin: 10px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.project-card:hover>.description *:not(a) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.accordion {
|
||||
width: 100%;
|
||||
background-color: #ffd9a4;
|
||||
padding: 10px 0 10px 0;
|
||||
cursor: pointer;
|
||||
transition: ease-in 0.2s;
|
||||
}
|
||||
|
||||
.accordion.active, .accordion:hover {
|
||||
background-color: #ffb752;
|
||||
}
|
||||
|
||||
.accordion p {
|
||||
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;
|
||||
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height .2s ease-in-out;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
50% {
|
||||
top: calc(100% - var(--size));
|
||||
}
|
||||
|
||||
100% {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes toRight {
|
||||
0% {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
left: calc(100% - var(--size));
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 798px) {
|
||||
#projects {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#content {
|
||||
flex-direction: column;
|
||||
height: unset;
|
||||
}
|
||||
|
||||
#content>* {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#socials {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#box {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#content>*[data-closed="true"] {
|
||||
width: auto;
|
||||
cursor: auto;
|
||||
background-color: unset;
|
||||
}
|
||||
|
||||
#content>*[data-closed="true"] * {
|
||||
filter: none;
|
||||
}
|
||||
|
||||
#content>*[data-closed="false"] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#top-bar {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
body.dark #content>* {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
body.dark #content>*[data-closed="true"] #age {
|
||||
color: unset;
|
||||
}
|
||||
}
|
||||
@ -1,60 +0,0 @@
|
||||
body.dark {
|
||||
background-color: #2f3136;
|
||||
}
|
||||
|
||||
body.dark #box {
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
body.dark #box p {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
body.dark #content > *[data-closed="false"] {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
body.dark #content #age {
|
||||
color: #ffd9a4;
|
||||
}
|
||||
|
||||
body.dark #content>*[data-closed="true"] #age {
|
||||
color: #2f3136;
|
||||
}
|
||||
|
||||
body.dark .social p {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
body.dark a {
|
||||
color: #fff;
|
||||
text-decoration-color: #fff;
|
||||
}
|
||||
|
||||
body.dark .project-card {
|
||||
border: 1px solid #ffd9a4;
|
||||
}
|
||||
|
||||
body.dark .project-card .description * {
|
||||
background-color: #fffdcc;
|
||||
}
|
||||
|
||||
body.dark #socials .social img {
|
||||
filter: invert();
|
||||
}
|
||||
|
||||
body.dark .accordion {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/* MOBILE */
|
||||
@media screen and (max-width: 798px) {
|
||||
body.dark #content>* {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
body.dark #content>*[data-closed="true"] #age {
|
||||
color: unset;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 135 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 326 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
Loading…
Reference in New Issue
Block a user