Add CSS styling, bird anim, background
This commit is contained in:
Binary file not shown.
@@ -0,0 +1,50 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
version="1.0"
|
||||||
|
width="1104.000000pt"
|
||||||
|
height="1280.000000pt"
|
||||||
|
viewBox="0 0 1104.000000 1280.000000"
|
||||||
|
preserveAspectRatio="xMidYMid meet"
|
||||||
|
id="svg1"
|
||||||
|
sodipodi:docname="birb.svg"
|
||||||
|
inkscape:version="1.4.3 (0d15f75, 2025-12-25)"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<defs
|
||||||
|
id="defs1" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="namedview1"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#000000"
|
||||||
|
borderopacity="0.25"
|
||||||
|
inkscape:showpageshadow="2"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
inkscape:deskcolor="#d1d1d1"
|
||||||
|
inkscape:document-units="pt"
|
||||||
|
inkscape:zoom="0.59121094"
|
||||||
|
inkscape:cx="736.62372"
|
||||||
|
inkscape:cy="853.33333"
|
||||||
|
inkscape:window-width="1024"
|
||||||
|
inkscape:window-height="1186"
|
||||||
|
inkscape:window-x="790"
|
||||||
|
inkscape:window-y="64"
|
||||||
|
inkscape:window-maximized="0"
|
||||||
|
inkscape:current-layer="svg1" />
|
||||||
|
<metadata
|
||||||
|
id="metadata1">
|
||||||
|
Created by potrace 1.15, written by Peter Selinger 2001-2017
|
||||||
|
</metadata>
|
||||||
|
<g
|
||||||
|
transform="translate(0.000000,1280.000000) scale(0.100000,-0.100000)"
|
||||||
|
fill="#000000"
|
||||||
|
stroke="none"
|
||||||
|
id="g1">
|
||||||
|
<path
|
||||||
|
d="M8275 12794 c-11 -3 -40 -10 -65 -16 -168 -43 -350 -184 -539 -418 -155 -193 -518 -760 -658 -1030 -173 -332 -388 -673 -711 -1124 -333 -466 -546 -756 -554 -756 -31 0 -348 182 -588 337 -92 60 -142 103 -250 213 -307 313 -657 531 -1068 664 -249 80 -430 109 -682 109 -205 0 -312 -14 -475 -61 -255 -75 -441 -182 -628 -361 -143 -137 -206 -226 -245 -342 -17 -52 -36 -123 -41 -159 -16 -99 -13 -277 9 -465 11 -93 20 -208 20 -255 0 -85 0 -86 -31 -104 -117 -69 -347 -264 -401 -338 l-20 -28 54 5 c29 2 158 7 286 10 l233 6 -16 -31 c-9 -16 -71 -103 -138 -193 -190 -252 -213 -320 -203 -599 7 -202 26 -367 62 -553 142 -735 494 -1476 973 -2050 119 -143 342 -362 376 -371 44 -10 43 -9 33 -66 -24 -133 -95 -210 -312 -339 -174 -103 -244 -160 -283 -227 -14 -26 -67 -89 -117 -139 l-90 -92 13 -63 c7 -35 26 -96 42 -136 l29 -73 -80 -157 c-97 -192 -191 -357 -319 -561 -128 -205 -637 -969 -664 -999 -33 -35 -71 -52 -119 -52 l-44 0 -56 133 c-59 140 -90 266 -108 447 -16 152 -11 493 10 800 29 406 34 631 21 797 -11 138 -36 312 -47 323 -3 3 -47 5 -97 5 -78 0 -99 -4 -142 -25 -61 -31 -59 -25 -79 -280 -9 -107 -28 -319 -43 -470 l-27 -275 17 -540 c31 -954 19 -1358 -48 -1674 -33 -158 -42 -175 -210 -427 -162 -242 -238 -378 -250 -444 -5 -28 1 -49 30 -107 48 -96 102 -143 203 -176 99 -33 424 -60 742 -61 284 -1 353 15 436 106 53 57 78 101 164 286 158 339 297 571 447 741 224 257 371 343 636 371 192 20 259 31 418 70 345 86 700 222 1119 431 346 173 543 286 1410 811 334 202 597 355 760 440 254 134 324 168 347 168 41 0 190 -63 453 -194 140 -70 279 -134 310 -142 80 -23 205 -88 286 -146 104 -77 285 -265 419 -434 66 -83 161 -201 210 -263 166 -207 186 -235 362 -496 293 -433 467 -653 641 -808 313 -280 583 -329 840 -153 84 58 113 100 141 214 l17 67 91 11 c50 6 124 21 164 33 264 80 407 285 385 556 -10 137 -30 186 -138 347 -183 274 -440 537 -944 969 -245 210 -296 250 -637 503 -108 81 -230 180 -270 220 -198 198 -266 414 -267 858 l0 147 208 168 c233 189 358 305 442 410 l58 71 -10 54 c-14 81 -51 154 -90 178 -93 57 -211 2 -502 -234 -134 -108 -222 -164 -236 -150 -4 5 -31 81 -60 169 -225 691 -572 1309 -1069 1900 -196 233 -530 593 -790 850 -56 55 -101 107 -101 116 0 23 222 126 406 187 82 28 259 78 394 110 135 33 341 83 458 112 429 103 709 212 944 367 76 50 76 50 54 154 -19 86 -46 140 -92 177 -113 93 -273 63 -669 -126 -115 -55 -221 -103 -235 -107 -14 -4 -138 -50 -277 -101 -472 -175 -657 -210 -743 -138 -77 65 -40 214 107 427 190 275 401 570 889 1238 592 812 751 1033 942 1309 74 107 172 241 218 297 46 55 93 117 105 137 l21 36 -43 48 c-190 207 -438 370 -621 406 -72 15 -167 19 -213 10z m-2226 -8741 c13 -9 69 -59 125 -112 56 -53 118 -110 139 -125 20 -16 37 -34 37 -42 0 -25 -311 -221 -630 -397 -80 -44 -390 -205 -690 -357 -300 -152 -605 -309 -678 -349 -72 -40 -167 -88 -210 -106 -42 -18 -185 -86 -317 -152 -456 -228 -678 -305 -844 -289 -107 9 -183 72 -205 169 -21 90 98 311 403 749 l116 167 65 21 c128 42 212 103 263 192 14 23 42 102 61 173 58 212 98 310 165 395 l20 25 78 -27 c43 -14 151 -51 239 -82 l162 -56 156 0 c195 0 343 17 756 85 179 30 357 59 395 65 39 6 111 24 160 40 129 42 183 45 234 13z"
|
||||||
|
id="path1"
|
||||||
|
style="fill:#3d2f1f;fill-opacity:1" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
+51
-1
@@ -3,15 +3,65 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Lusitana:wght@400;700&display=swap" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="styles.css">
|
||||||
<title>nikology.dev</title>
|
<title>nikology.dev</title>
|
||||||
|
<!-- <link rel="icon" href="birbFavicon.svg" type="image/svg+xml"> -->
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>nikology.dev</h1>
|
<div class="ribbon">Work In Progress</div>
|
||||||
|
|
||||||
|
<h1>nikology.dev
|
||||||
|
<span class="bird-wrap">
|
||||||
|
<button id="birdButton"><img src="birb.svg" alt=""></button>
|
||||||
|
<svg id="barTemplate" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 8.47 8.47"><path fill="none" stroke="#3d2f1f" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.8" d="m1.5 4.23.23-.1a6 6 0 0 1 5.01 0l.23.1" style="paint-order:markers stroke fill"/></svg>
|
||||||
|
</span>
|
||||||
|
</h1>
|
||||||
<h2>About Me</h2>
|
<h2>About Me</h2>
|
||||||
<p>Hi there! I am Niki and welcome to my website, I make stuff with computers. My current project is <a href="https://roplus.dev" target="_blank" rel="noopener">roplus.dev</a>!</p>
|
<p>Hi there! I am Niki and welcome to my website, I make stuff with computers. My current project is <a href="https://roplus.dev" target="_blank" rel="noopener">roplus.dev</a>!</p>
|
||||||
<h2>Links n Stuff</h2>
|
<h2>Links n Stuff</h2>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="https://gitlab.com/Nikology" target="_blank" rel="noopener">GitLab</a></li>
|
<li><a href="https://gitlab.com/Nikology" target="_blank" rel="noopener">GitLab</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
<footer>
|
||||||
|
<p>Bird recording by Petter Westberg via <a href="https://xeno-canto.org/1087467" target="_blank" rel="noopener">xeno-canto</a>, CC BY-NC-SA 4.0</p>
|
||||||
|
</footer>
|
||||||
|
<!-- Scripts -->
|
||||||
|
<script>
|
||||||
|
const DISTANCE = 20
|
||||||
|
const birdIcon = document.getElementById("birdButton");
|
||||||
|
const birdSound = new Audio("SnowBuntingSound.ogg");
|
||||||
|
const template = document.getElementById("barTemplate");
|
||||||
|
const wrap = document.querySelector(".bird-wrap");
|
||||||
|
|
||||||
|
function spawnBar(distance, angle, delay = 0) {
|
||||||
|
const clone = template.cloneNode(true);
|
||||||
|
clone.removeAttribute("id");
|
||||||
|
clone.classList.add("bar");
|
||||||
|
clone.style.setProperty("--angle", `${angle}deg`);
|
||||||
|
clone.style.setProperty("--distance", `${-distance}px`);
|
||||||
|
clone.style.setProperty("--delay", `${delay}s`);
|
||||||
|
wrap.appendChild(clone);
|
||||||
|
|
||||||
|
clone.addEventListener("animationend", () => clone.remove());
|
||||||
|
}
|
||||||
|
|
||||||
|
function birdSoundAnim() {
|
||||||
|
const leftRandom = (Math.random() * 40) + 40
|
||||||
|
const rightRandom = (Math.random() * 40) + 40
|
||||||
|
spawnBar(DISTANCE, -leftRandom, 0.2)
|
||||||
|
spawnBar(DISTANCE, -leftRandom, 0.4)
|
||||||
|
spawnBar(DISTANCE, rightRandom, 0.6)
|
||||||
|
spawnBar(DISTANCE, rightRandom, 0.8)
|
||||||
|
}
|
||||||
|
|
||||||
|
birdIcon.addEventListener("click", (e) => {
|
||||||
|
if (!birdSound.paused) return;
|
||||||
|
birdSound.play();
|
||||||
|
birdSoundAnim()
|
||||||
|
});
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
+100
@@ -0,0 +1,100 @@
|
|||||||
|
body {
|
||||||
|
background-color: #faf4e8;
|
||||||
|
background-image: url(cream-paper.png);
|
||||||
|
color: #3d2f1f;
|
||||||
|
|
||||||
|
font-family: "Lusitana", serif;
|
||||||
|
|
||||||
|
min-height: 100vh;
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: flex-start;
|
||||||
|
padding: 2rem 20rem 2rem 20rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(max-width: 1024px) {
|
||||||
|
body {
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 img {
|
||||||
|
height: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 1rem;
|
||||||
|
left: 1rem;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
opacity: 0.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Corner Ribbon */
|
||||||
|
|
||||||
|
.ribbon {
|
||||||
|
background-color: #3d2f1f;
|
||||||
|
color: #faf4e8;
|
||||||
|
position: fixed;
|
||||||
|
text-align: center;
|
||||||
|
padding: 0.25rem;
|
||||||
|
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
top: 2rem;
|
||||||
|
left: -3rem;
|
||||||
|
width: 12rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Birdy */
|
||||||
|
|
||||||
|
.bird-wrap {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bar {
|
||||||
|
opacity: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 10px;
|
||||||
|
animation: pop 0.8s ease-out var(--delay);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#barTemplate {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pop {
|
||||||
|
0% {opacity: 0; transform: rotate(var(--angle)) translateY(var(--distance))}
|
||||||
|
50% {opacity: 1; }
|
||||||
|
100% {opacity: 0; transform: rotate(var(--angle)) translateY(calc(var(--distance) - 40px));}
|
||||||
|
}
|
||||||
|
|
||||||
|
#birdButton {
|
||||||
|
font-size: inherit;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
padding: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user