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