complete redesign

This commit is contained in:
sadorowo 2024-03-16 10:04:38 +01:00
parent 50e9f9bdd6
commit 9b0e346696
17 changed files with 398 additions and 775 deletions

20
404.html Normal file
View 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>

View File

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

42
assets/script.js Normal file
View 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
View 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
View 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
View File

@ -0,0 +1,9 @@
@media screen and (max-width: 767px) {
body > div {
width: 100% !important;
}
body > div:first-child #arrow {
display: block !important;
}
}

View File

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

View File

@ -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
View File

@ -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
View File

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

View File

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