v2
This commit is contained in:
sadorowo
commit
29113f37c5
5
.idea/.gitignore
vendored
Normal file
5
.idea/.gitignore
vendored
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
# Default ignored files
|
||||||
|
/shelf/
|
||||||
|
/workspace.xml
|
||||||
|
# Editor-based HTTP Client requests
|
||||||
|
/httpRequests/
|
||||||
10
.idea/inspectionProfiles/Project_Default.xml
Normal file
10
.idea/inspectionProfiles/Project_Default.xml
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
<component name="InspectionProjectProfileManager">
|
||||||
|
<profile version="1.0">
|
||||||
|
<option name="myName" value="Project Default" />
|
||||||
|
<inspection_tool class="DuplicatedCode" enabled="true" level="WEAK WARNING" enabled_by_default="true">
|
||||||
|
<Languages>
|
||||||
|
<language minSize="12" name="Style Sheets" />
|
||||||
|
</Languages>
|
||||||
|
</inspection_tool>
|
||||||
|
</profile>
|
||||||
|
</component>
|
||||||
8
.idea/modules.xml
Normal file
8
.idea/modules.xml
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="ProjectModuleManager">
|
||||||
|
<modules>
|
||||||
|
<module fileurl="file://$PROJECT_DIR$/.idea/sador.dev.iml" filepath="$PROJECT_DIR$/.idea/sador.dev.iml" />
|
||||||
|
</modules>
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
12
.idea/sador.dev.iml
Normal file
12
.idea/sador.dev.iml
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<module type="WEB_MODULE" version="4">
|
||||||
|
<component name="NewModuleRootManager">
|
||||||
|
<content url="file://$MODULE_DIR$">
|
||||||
|
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
|
||||||
|
<excludeFolder url="file://$MODULE_DIR$/temp" />
|
||||||
|
<excludeFolder url="file://$MODULE_DIR$/tmp" />
|
||||||
|
</content>
|
||||||
|
<orderEntry type="inheritedJdk" />
|
||||||
|
<orderEntry type="sourceFolder" forTests="false" />
|
||||||
|
</component>
|
||||||
|
</module>
|
||||||
BIN
icons/dark/github.png
Normal file
BIN
icons/dark/github.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
BIN
icons/dark/instagram.png
Normal file
BIN
icons/dark/instagram.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 89 KiB |
BIN
icons/dark/lastfm.png
Normal file
BIN
icons/dark/lastfm.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
icons/light/github.png
Normal file
BIN
icons/light/github.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.4 KiB |
BIN
icons/light/instagram.png
Normal file
BIN
icons/light/instagram.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
icons/light/lastfm.png
Normal file
BIN
icons/light/lastfm.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.9 KiB |
52
index.html
Normal file
52
index.html
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="pl">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="shortcut icon" href="logo.png">
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<script defer src="script.js"></script>
|
||||||
|
<title>sador.dev</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="box">
|
||||||
|
<p>Kliknij mnie!</p>
|
||||||
|
</div>
|
||||||
|
<div id="content">
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<h4>Media społecznościowe</h4>
|
||||||
|
<div id="socials">
|
||||||
|
<a class="social" href="https://github.com/sadorowo" target="_blank">
|
||||||
|
<img src="icons/light/github.png" alt="github" data-only-light>
|
||||||
|
<img src="icons/dark/github.png" alt="github" data-only-dark>
|
||||||
|
<p>GitHub</p>
|
||||||
|
</a>
|
||||||
|
<a class="social" href="https://last.fm/user/sadorishere" target="_blank">
|
||||||
|
<img src="icons/light/lastfm.png" alt="lastfm" data-only-light>
|
||||||
|
<img src="icons/dark/lastfm.png" alt="lastfm" data-only-dark>
|
||||||
|
<p>Last.fm</p>
|
||||||
|
</a>
|
||||||
|
<a class="social" href="https://instagram.com/sadorowo" target="_blank">
|
||||||
|
<img src="icons/light/instagram.png" alt="instagram" data-only-light>
|
||||||
|
<img src="icons/dark/instagram.png" alt="instagram" data-only-dark>
|
||||||
|
<p>Instagram</p>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h4>BIO</h4>
|
||||||
|
<p>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:</p>
|
||||||
|
<ul>
|
||||||
|
<li>Zine - mój własny bot discord napisany w języku Rust. Projekt na chwilę obecną dalej wspierany.</li>
|
||||||
|
<li>Mini-komunikator (zarówno w wersji web, jak i mobilnej) - projekt porzucony.</li>
|
||||||
|
<li>Moja personalna strona internetowa: właśnie ją oglądasz.</li>
|
||||||
|
<li>Wiele innych projektów i botów, porzuconych</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
37
projects.html
Normal file
37
projects.html
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="pl">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="shortcut icon" href="logo.png">
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<script defer src="script.js"></script>
|
||||||
|
<title>sador.dev - projekty</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="content">
|
||||||
|
<h1>Sador</h1>
|
||||||
|
<button onclick="toggleTheme()">Zmień motyw</button>
|
||||||
|
<button><a href="index.html">Powrót</a></button>
|
||||||
|
<h4>Moje projekty</h4>
|
||||||
|
<div id="projects">
|
||||||
|
<div class="project-card">
|
||||||
|
<img src="thumbnails/zine.png" alt="Zine thumbnail"/>
|
||||||
|
<div class="description">
|
||||||
|
<h3>Zine</h3>
|
||||||
|
<p>Mój własny bot na platformę Guilded napisany w języku Rust. Projekt na chwilę obecną dalej wspierany.</p>
|
||||||
|
<a href="#" target="_blank">SOON</a>
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
53
script.js
Normal file
53
script.js
Normal file
@ -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');
|
||||||
277
style.css
Normal file
277
style.css
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
thumbnails/website.png
Normal file
BIN
thumbnails/website.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
BIN
thumbnails/zine.png
Normal file
BIN
thumbnails/zine.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Loading…
Reference in New Issue
Block a user