diff --git a/404.html b/404.html new file mode 100644 index 0000000..fa60c98 --- /dev/null +++ b/404.html @@ -0,0 +1,20 @@ + + + + + + + + + + + sador - you are lost + + + +

404

+

huh, you are lost

+ go back + + + \ No newline at end of file diff --git a/logo.png b/assets/logo.png similarity index 100% rename from logo.png rename to assets/logo.png diff --git a/assets/script.js b/assets/script.js new file mode 100644 index 0000000..fc5b727 --- /dev/null +++ b/assets/script.js @@ -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'); +} \ No newline at end of file diff --git a/assets/style.css b/assets/style.css new file mode 100644 index 0000000..301bae4 --- /dev/null +++ b/assets/style.css @@ -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; +} \ No newline at end of file diff --git a/assets/style.dark.css b/assets/style.dark.css new file mode 100644 index 0000000..c9ae5b6 --- /dev/null +++ b/assets/style.dark.css @@ -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); +} \ No newline at end of file diff --git a/assets/style.mobile.css b/assets/style.mobile.css new file mode 100644 index 0000000..9326233 --- /dev/null +++ b/assets/style.mobile.css @@ -0,0 +1,9 @@ +@media screen and (max-width: 767px) { + body > div { + width: 100% !important; + } + + body > div:first-child #arrow { + display: block !important; + } +} \ No newline at end of file diff --git a/index.html b/index.html index d3a1936..457846c 100644 --- a/index.html +++ b/index.html @@ -4,168 +4,220 @@ - + - - - - - sador.me + + + + sador -
-

Kliknij mnie!

-
-
-

Aby zamknąć bądź otworzyć daną kolumnę, kliknij w jej tło.

-
-

Sador

-

Bonusowe punkty z minigry: 0

- - - - -
-
-

Media społecznościowe/moje konta

- +
+
+

sador

+

? years old boy, who loves to code.

-

O mnie

-

hej, mam ??? lat. mieszkam w okolicach Myślenic.

-

moje zainteresowania:

+

my hobbies

    -
  • programowanie
    • -
  • stara motoryzacja
    • -
  • elektronika
    • -
  • muzyka
    • +
  • programming
    • +
  • music
    • +
  • old automotive
-

sprzęt/oprogramowanie, który posiadam:

-
-

sprzęt

-
-
    -
  • CPU: Intel i5-4590
    • -
  • GPU: NVIDIA GTX 970 + Radeon RX 5500 XT
    • -
  • Bluetooth: CSR 4.0
    • -
  • Wi-Fi: TP-LINK TL-WN722N V2
    • -
  • Klawiatura: Microsoft All-In-One Media Keyboard
    • -
  • Mysz: coś z defendera :)
    • -
  • Słuchawki: Beats Studio Buds
    • -
  • Monitor: LG M2450D
    • -
  • Płyta główna: ASRock H97M Pro4
    • -
  • RAM: 16GB DDR3
    • -
  • Dysk: ADATA 500GB
    • -
-
-
-
-

systemy operacyjne

-
-
    -
  • Hackintosh Sonoma
    • -
  • Windows 10 Pro
    • -
-
-
-
-

oprogramowanie

-
-
    -
  • DaVinci Resolve
    • -
  • Firefox
    • -
  • GIMP
    • -
  • OBS Studio
    • -
  • Handbrake
    • -
  • VSC (only product from ms trash that I'm using LMAO)
    • -
  • BitTorrent Web
    • -
  • Apple Music
    • -
  • JetBrains IDEs
    • -
-
-
-
-

subskrypcje

-
-
    -
  • Apple Music Individual
    • -
-
-
-

cenię sobie prywatność, nie korzystam m.in. z facebooka, wyszukiwarki google.

+ +

my profiles

+ + +

contact

+ + +

go to section:

+ + +

go to top

+

switch theme

+ +
▼
-
-

jestem fanem/po prostu słucham:

-
-

metalu

-
-
    -
  • heavy metalu
    • -
  • gothic metalu
    • -
  • metalu progresywnego
    • -
  • nu metalu
    • -
-
-
-
-

rocka

-
-

szczególnie:

-
    -
  • Foo Fighters
    • -
  • Evanescence
    • -
  • 30 Seconds To Mars
    • -
  • HIM
    • -
-
-
-
-

części amerykańskiego rapu

-
-

szczególnie:

-
    +
+
+
+

my projects

+ + +

my music taste

+

i'm a fan of:

+
    +
  • + genres +
      +
    1. heavy metal
      2. +
    2. black metal
      3. +
    3. death metal
      4. +
    4. doom metal
      5. +
    5. hard rock
      6. +
    +
    • +
  • + rock/metal bands/artists +
      +
    1. Draconian
      2. +
    2. Poisonblack
      3. +
    3. To/Die/For
      4. +
    4. For My Pain...
      5. +
    5. Lacrimas Profundere
      6. +
    6. Death
      7. +
    7. Charon
      8. +
    8. Entwine
      9. +
    9. Beseech
      10. +
    10. Slipknot
      11. +
    +
    • +
  • + american rap (sometimes, very rarely) +
    1. Lil Peep
    2. Lil Tracy
    3. XXXTENTACION
    4. Juice WRLD
    5. Mackned
    6. Fat Nick
      7. -
-
-
-
-

zespołów/artystów

-
-
    -
  • Slipknot
    • -
  • Poisonblack
    • -
  • Beseech
    • -
  • To/Die/For
    • -
  • Entwine
    • -
  • Lacrimas Profundere
    • -
  • For My Pain...
    • -
  • Draconian
    • -
  • Charon
    • -
  • Lil Peep
    • -
  • Death
    • -
  • System of a Down
    • -
  • Evanescence
    • -
-
-
+ + + + +

i like these artists, but I can't say I'm a fan of them yet:

+
    +
  • Darkthrone
    • +
  • Dark Funeral
    • +
  • Behemoth
    • +
  • Venom
    • +
  • Deathstars
    • +
  • Carpatian Forest
    • +
  • Gorgoroth
    • +
  • Immortal
    • +
  • Emperor
    • +
  • Imminence
    • +
+ +

my hardware

+
    +
  • + OSes +
      +
    1. windows 10
      2. +
    2. macOS
      3. +
    3. android (lineageos)
      4. +
    +
    • +
  • + in general +
      +
    1. cpu: intel i5-4590
      2. +
    2. gpu: radeon rx 5500 xt
      3. +
    3. bluetooth & wi-fi: fenvi t919
      4. +
    4. keyboard: microsoft all-in-one media keyboard
      5. +
    5. headphones: beats studio buds
      6. +
    6. display: lg m2450d
      7. +
    7. motherboard: asrock h97m pro4
      8. +
    8. ram: 16gb ddr3
      9. +
    9. ssd: adata 500gb
      10. +
    +
    • +
+ +

my software

+
    +
  • + recording/editing +
      +
    1. obs studio
      2. +
    2. quicktime player
      3. +
    3. gimp
      4. +
    4. davinci resolve
      5. +
    5. handbrake
      6. +
    +
    • +
  • + programming +
      +
    1. xcode
      2. +
    2. vs code
      3. +
    3. intellij idea
      4. +
    4. pycharm
      5. +
    5. clion
      6. +
    6. android studio
      7. +
    7. webstorm
      8. +
    8. termius
      9. +
    9. postman
      10. +
    10. git
      11. +
    +
    • +
  • + internet +
      +
    1. firefox
      2. +
    2. bittorrent web
      3. +
    +
    • +
  • music - apple music individual
    • +
+ +

privacy

+

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.

diff --git a/projects.html b/projects.html deleted file mode 100644 index c786a5a..0000000 --- a/projects.html +++ /dev/null @@ -1,87 +0,0 @@ - - - - - - - - - - - - - sador.me - projekty - - - -
-
-

Sador

- - - -
- -
- - - \ No newline at end of file diff --git a/script.js b/script.js deleted file mode 100644 index fdcaab9..0000000 --- a/script.js +++ /dev/null @@ -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)); - }); -} \ No newline at end of file diff --git a/style.css b/style.css deleted file mode 100644 index 7c760c9..0000000 --- a/style.css +++ /dev/null @@ -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; - } -} \ No newline at end of file diff --git a/style.dark.css b/style.dark.css deleted file mode 100644 index 0f85886..0000000 --- a/style.dark.css +++ /dev/null @@ -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; - } -} \ No newline at end of file diff --git a/thumbnails/draw.png b/thumbnails/draw.png deleted file mode 100644 index 9e5dae0..0000000 Binary files a/thumbnails/draw.png and /dev/null differ diff --git a/thumbnails/github_bg.png b/thumbnails/github_bg.png deleted file mode 100644 index e5717dd..0000000 Binary files a/thumbnails/github_bg.png and /dev/null differ diff --git a/thumbnails/website.png b/thumbnails/website.png deleted file mode 100644 index 67b7297..0000000 Binary files a/thumbnails/website.png and /dev/null differ diff --git a/thumbnails/witch_website.png b/thumbnails/witch_website.png deleted file mode 100644 index 6acfa58..0000000 Binary files a/thumbnails/witch_website.png and /dev/null differ diff --git a/thumbnails/wulkanowy_mod.png b/thumbnails/wulkanowy_mod.png deleted file mode 100644 index ed9a3c6..0000000 Binary files a/thumbnails/wulkanowy_mod.png and /dev/null differ diff --git a/thumbnails/zine.png b/thumbnails/zine.png deleted file mode 100644 index dd974d7..0000000 Binary files a/thumbnails/zine.png and /dev/null differ