commit 29113f37c5ea7d7621ab6d1855453b5fe6722796 Author: sadorowo Date: Thu Jun 8 18:14:18 2023 +0200 v2 diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..b58b603 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,5 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml new file mode 100644 index 0000000..25719e5 --- /dev/null +++ b/.idea/inspectionProfiles/Project_Default.xml @@ -0,0 +1,10 @@ + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..dcca0ed --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/sador.dev.iml b/.idea/sador.dev.iml new file mode 100644 index 0000000..24643cc --- /dev/null +++ b/.idea/sador.dev.iml @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/icons/dark/github.png b/icons/dark/github.png new file mode 100644 index 0000000..a6de6a9 Binary files /dev/null and b/icons/dark/github.png differ diff --git a/icons/dark/instagram.png b/icons/dark/instagram.png new file mode 100644 index 0000000..643cdee Binary files /dev/null and b/icons/dark/instagram.png differ diff --git a/icons/dark/lastfm.png b/icons/dark/lastfm.png new file mode 100644 index 0000000..606a1b4 Binary files /dev/null and b/icons/dark/lastfm.png differ diff --git a/icons/light/github.png b/icons/light/github.png new file mode 100644 index 0000000..9490ffc Binary files /dev/null and b/icons/light/github.png differ diff --git a/icons/light/instagram.png b/icons/light/instagram.png new file mode 100644 index 0000000..3146658 Binary files /dev/null and b/icons/light/instagram.png differ diff --git a/icons/light/lastfm.png b/icons/light/lastfm.png new file mode 100644 index 0000000..47b0063 Binary files /dev/null and b/icons/light/lastfm.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..0b7ce07 --- /dev/null +++ b/index.html @@ -0,0 +1,52 @@ + + + + + + + + + + sador.dev + + +

Kliknij mnie!

Sador

Bonusowe punkty z minigry: 0

+ + + + +

Media społecznościowe

+ + + +

+ +

BIO

Cześć! Jestem Franek i mam 16 lat. Interesuję się programowaniem, informatyką, muzyką oraz motoryzacją (niekoniecznie tą nowoczesną). Moje przykładowe projekty, które napisałem własnoręcznie:

Zine - mój własny bot discord napisany w języku Rust. Projekt na chwilę obecną dalej wspierany.
Mini-komunikator (zarówno w wersji web, jak i mobilnej) - projekt porzucony.
Moja personalna strona internetowa: właśnie ją oglądasz.
Wiele innych projektów i botów, porzuconych

+ + \ No newline at end of file diff --git a/logo.png b/logo.png new file mode 100644 index 0000000..6790e6a Binary files /dev/null and b/logo.png differ diff --git a/projects.html b/projects.html new file mode 100644 index 0000000..fd9ae86 --- /dev/null +++ b/projects.html @@ -0,0 +1,37 @@ + + + + + + + + + + sador.dev - projekty + + +

Sador

+ + +

Moje projekty

Zine

Mój własny bot na platformę Guilded napisany w języku Rust. Projekt na chwilę obecną dalej wspierany.

+ SOON +

Personalna strona

Moja własna strona internetowa, ta, którą teraz przeglądasz.

+ + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..622eab9 --- /dev/null +++ b/script.js @@ -0,0 +1,53 @@ +const contentContainer = document.getElementById('content'); +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 = 'block'; + 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; +} + +// 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); + + await updateOpacity(contentContainer, true); +} + +// update theme +if (currentTheme === 'dark') + document.body.classList.add('dark'); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..ec4b4f0 --- /dev/null +++ b/style.css @@ -0,0 +1,277 @@ +@import url('https://fonts.googleapis.com/css2?family=Geologica:wght@400;700&display=swap'); + +:root { + --size: 100px; +} + +body { + font-family: 'Geologica', sans-serif; + font-weight: 700; + width: 100%; + height: 100%; + margin: 0; +} + +#content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + transition: ease-in 0.2s; +} + +#content { + opacity: 0 +} + +#content h4 { + color: #ffd9a4; + text-transform: uppercase; +} + +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%); +} + +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; + border-radius: 10px; + padding: 0 10px 0 10px; + background-color: rgb(101, 44, 255); + font-family: 'Geologica', sans-serif; + font-weight: 400; + transition: ease-in 0.2s; + color: #fff; +} + +.social:hover { + background-color: rgb(78, 31, 208); +} + +.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: lime; + 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-radius: 10px; + transition: ease-in 0.2s; + position: relative; + cursor: pointer; + margin: 10px; +} + +.project-card img { + border-radius: 10px; + margin: 0; +} + +.project-card .description { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: 10px; + 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: 10px; + padding: 5px; + margin: 10px; + color: #000; +} + +.project-card:hover > .description *:not(a) { + opacity: 0; +} + +@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)); + } +} + +/* DARK THEME */ +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 { + color: #fff; +} + +body.dark .social p { + color: #fff; +} + +body.dark a { + color: #fff; + text-decoration-color: #fff; +} + +body.dark .project-card .description * { + background-color: #b4b4b4; +} + +body.dark *[data-only-light] { + display: none; +} + +body:not(.dark) .project-card { + background-color: rgb(185, 175, 255); +} + +body:not(.dark) *[data-only-dark] { + display: none; +} + +body:not(.dark) .social { + background-color: rgb(185, 175, 255); +} + +body:not(.dark) .social:hover { + background-color: rgb(132, 125, 189); +} + +body:not(.dark) #content h4 { + color: #000; +} + +/* MOBILE */ +@media screen and (max-width: 798px) { + #content { + display: block; + top: 0; + left: 0; + transform: none; + padding: 10px; + width: 100%; + height: 100%; + } + + #projects { + flex-direction: column; + } +} \ No newline at end of file diff --git a/thumbnails/website.png b/thumbnails/website.png new file mode 100644 index 0000000..67b7297 Binary files /dev/null and b/thumbnails/website.png differ diff --git a/thumbnails/zine.png b/thumbnails/zine.png new file mode 100644 index 0000000..dd974d7 Binary files /dev/null and b/thumbnails/zine.png differ