Nikology/nikology.dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: Nikology/nikology.dev:485d2b2c766b75c783cf849ccf2ac26b536bc7de
Branches Tags
Nikology/nikology.dev:main
..
compare: Nikology/nikology.dev:36a9e47bcd766017d94483c37314bd5880843548
Branches Tags
Nikology/nikology.dev:main
10 Commits
485d2b2c76 .. 36a9e47bcd
Author SHA1 Message Date
Nikology 36a9e47bcd Add photography.html 2026-04-20 23:22:34 +02:00
Nikology b9af747314 Update error.html 2026-04-20 23:20:09 +02:00
Nikology 28ca13fdea Fix the footer so its like not part of the thing app and can work on its own, STRONG FOOTER FOREVER 2026-04-20 23:16:54 +02:00
Nikology 1d8c130019 Build in Hero to home and animate stuff correctly 2026-04-20 21:31:57 +02:00
Nikology 037f3cf1fc Add SPA navigation 2026-04-20 13:37:12 +02:00
Nikology 1dac91ac38 Remove natural-paper.png 2026-04-20 01:54:46 +02:00
Nikology 6acc03d51a Resize hero header 2026-04-20 01:52:50 +02:00
Nikology 5566991bc8 Add Nav Bar, Temporarily Remove Home Content 2026-04-20 01:48:55 +02:00
Nikology 0fa1699dff Add page source link and footer link hover effects 2026-04-20 01:11:46 +02:00
Nikology 0f65c953ba Changed offset from 10px to 5px 2026-04-19 20:51:28 +02:00
9 changed files with 242 additions and 19 deletions
Expand all files Collapse all files
_redirects
+2
View File
@@ -0,0 +1,2 @@
/pages/* /pages/:splat 404
/* /index.html 200
index.html
+114 -10
View File
@@ -6,6 +6,7 @@
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <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 href="https://fonts.googleapis.com/css2?family=Lusitana:wght@400;700&display=swap" rel="stylesheet">
<link rel="preload" href="cream-paper.png" as="image">
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<title>nikology.dev</title> <title>nikology.dev</title>
<!-- <link rel="icon" href="birbFavicon.svg" type="image/svg+xml"> --> <!-- <link rel="icon" href="birbFavicon.svg" type="image/svg+xml"> -->
@@ -13,24 +14,127 @@
<body> <body>
<div class="ribbon">Work In Progress</div> <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> -->
<header id="hero">
<h1>nikology.dev <h1>nikology.dev
<span class="bird-wrap"> <span class="bird-wrap">
<button id="birdButton"><img src="birb.svg" alt=""></button> <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> <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> </span>
</h1> </h1>
<h2>About Me</h2> </header>
<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> <!-- Nav Bar -->
<nav>
<a href="/" data-link>Home</a>
<span>-</span>
<a href="/about" data-link>About</a>
<span>-</span>
<a href="/photography" data-link>Photography</a>
</nav>
<div id="app"></div>
<!-- <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> -->
<!-- <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> <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> <p class="birdSoundCredit">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>
<p>
<a href="https://gitlab.com/Nikology/nikology.dev">
Page Source
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 380 380"><path d="m282.83 170.73-.27-.69-26.14-68.22a6.8 6.8 0 0 0-2.69-3.24 7 7 0 0 0-8 .43 7 7 0 0 0-2.32 3.52l-17.65 54h-71.47l-17.65-54a6.86 6.86 0 0 0-2.32-3.53 7 7 0 0 0-8-.43 6.87 6.87 0 0 0-2.69 3.24L97.44 170l-.26.69a48.54 48.54 0 0 0 16.1 56.1l.09.07.24.17 39.82 29.82 19.7 14.91 12 9.06a8.07 8.07 0 0 0 9.76 0l12-9.06 19.7-14.91 40.06-30 .1-.08a48.56 48.56 0 0 0 16.08-56.04" transform="matrix(1.9787 0 0 2.0178 -185.94 -193.36)"/></svg>
</a>
</p>
</footer> </footer>
<!-- Scripts --> <!-- Scripts -->
<script> <script>
const DISTANCE = 20 const cache = new Map();
async function loadApp(file) {
if (!cache.has(file)) {
const res = await fetch(file);
if (!res.ok) {
return { status: res.status, content: null };
}
const text = await res.text();
if (text.includes('id="app"')) {
return { status: 404, content: null};
}
cache.set(file, text);
}
return { status: 200, content: cache.get(file)};
}
async function fetchApp() {
const path = location.pathname;
document.body.classList.toggle('home', path === '/');
const file = `/pages${path === '/' ? '/home' : path}.html`;
document.querySelectorAll('nav a').forEach(a => {
a.classList.toggle('active', a.pathname === location.pathname);
})
return await loadApp(file);
}
async function commit(appFile) {
if (appFile.content !== null) {
document.getElementById('app').innerHTML = appFile.content;
} else {
const errorResult = await loadApp('/pages/error.html');
document.getElementById('app').innerHTML = errorResult.content;
document.getElementById('error-code').textContent = appFile.status;
}
document.body.classList.toggle('homeCommitted' , location.pathname === '/')
}
async function navigate() {
const result = await fetchApp();
await commit(result);
}
document.addEventListener('click', async e => {
const link = e.target.closest('[data-link]');
if (link) {
e.preventDefault();
if (link.pathname === location.pathname) return;
history.pushState(null, '', link.href);
document.body.classList.add('fading');
const fetchedApp = fetchApp();
await new Promise(r => setTimeout(r, 300));
await commit(await fetchedApp);
document.body.classList.remove('fading')
}
});
window.addEventListener('popstate', navigate);
navigate().then(() => {
requestAnimationFrame(() => document.body.classList.add('ready'))
});
// Bird Button
const DISTANCE = 40
const birdIcon = document.getElementById("birdButton"); const birdIcon = document.getElementById("birdButton");
const birdSound = new Audio("SnowBuntingSound.ogg"); const birdSound = new Audio("SnowBuntingSound.ogg");
const template = document.getElementById("barTemplate"); const template = document.getElementById("barTemplate");
@@ -49,12 +153,12 @@
} }
function birdSoundAnim() { function birdSoundAnim() {
const leftRandom = (Math.random() * 40) + 40 const leftRandom = (Math.random() * 20) + 80
const rightRandom = (Math.random() * 40) + 40 const rightRandom = (Math.random() * 20) + 40
spawnBar(DISTANCE, -leftRandom, 0.2) spawnBar(DISTANCE, -leftRandom, 0.2)
spawnBar(DISTANCE, -leftRandom, 0.4) spawnBar(DISTANCE, -leftRandom, 0.4)
spawnBar(DISTANCE, rightRandom, 0.6) spawnBar(DISTANCE, -rightRandom, 0.6)
spawnBar(DISTANCE, rightRandom, 0.8) spawnBar(DISTANCE, -rightRandom, 0.8)
} }
birdIcon.addEventListener("click", (e) => { birdIcon.addEventListener("click", (e) => {
natural-paper.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 99 KiB

pages/about.html
+2
View File
@@ -0,0 +1,2 @@
<h1>About</h1>
<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>
pages/error.html
+1
View File
@@ -0,0 +1 @@
<h1>Error: <span id="error-code">---</span></h1>
pages/home.html
View File
pages/photography.html
+2
View File
@@ -0,0 +1,2 @@
<h1>Photography</h1>
<p>This is where I will share photos I take, have a look! :3</p>
serve.json
+7
View File
@@ -0,0 +1,7 @@
{
"cleanUrls": false,
"rewrites": [
{ "source": "/", "destination": "/index.html" },
{ "source": "/!(pages)**", "destination": "/index.html" }
]
}
styles.css
+112 -7
View File
@@ -9,10 +9,11 @@ body {
margin: 0; margin: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: flex-start;
align-items: flex-start; padding: 4rem 20rem;
padding: 2rem 20rem 2rem 20rem;
box-sizing: border-box; box-sizing: border-box;
position: relative;
} }
@media(max-width: 1024px) { @media(max-width: 1024px) {
@@ -21,8 +22,72 @@ body {
} }
} }
body.ready {
transition: padding-top 0.6s ease;
}
body.ready #hero {
transition: transform 0.6s ease, opacity 0.3s ease;
}
body.home {
padding-top: 45vh;
}
body:not(.home) #hero {
pointer-events: none;
opacity: 0;
transform: translateY(-40vh);
}
#hero {
/* opacity: 0; */
top: 30vh;
position:absolute;
font-size: 4rem;
opacity: 1;
}
#hero h1 {
margin: 0;
}
/* App */
#app {
transition: opacity 0.3s;
}
body.fading #app,
body.fading footer {
opacity: 0;
}
/* Nav Bar */
nav {
display: flex;
gap: 1rem;
}
nav a {
color: #3d2f1f99;
text-decoration: none;
transition: color 0.5s, -webkit-text-stroke-width 0.5s;
}
nav a:hover {
color: #3d2f1f;
}
nav a.active {
-webkit-text-stroke-width: 1px;
}
/* Other */
h1 { h1 {
font-size: 3rem; margin-bottom: 1rem;
} }
h1 img { h1 img {
@@ -43,12 +108,49 @@ p {
margin-bottom: 0; margin-bottom: 0;
} }
/* a {
transition: color 0.5s;
}
a:hover {
color: #3d2f1f;
} */
/* Footer */
footer { footer {
display: flex;
position: fixed; position: fixed;
bottom: 1rem; bottom: 1rem;
left: 1rem; left: 1rem;
font-size: 0.8rem; font-size: 0.8rem;
opacity: 0.4; gap: 1rem;
transition: opacity 0.3s;
}
footer p {
color: #3d2f1f66;
}
footer a {
color: #3d2f1f66;
transition: color 0.5s;
}
footer a:hover {
color: #3d2f1f;
}
footer svg {
margin-left: 0.25rem;
height: 1em;
width: 1em;
vertical-align: -0.15rem;
fill: currentColor;
}
body:not(.homeCommitted) .birdSoundCredit {
display: none;
} }
/* Corner Ribbon */ /* Corner Ribbon */
@@ -64,6 +166,9 @@ footer {
top: 2rem; top: 2rem;
left: -3rem; left: -3rem;
width: 12rem; width: 12rem;
outline: 2px dashed #faf4e8;
outline-offset: -4px;
} }
/* Birdy */ /* Birdy */
@@ -75,8 +180,8 @@ footer {
.bar { .bar {
opacity: 0; opacity: 0;
position: absolute; position: absolute;
top: 0; top: 15px;
left: 10px; left: 20px; /* Offset */
animation: pop 0.8s ease-out var(--delay); animation: pop 0.8s ease-out var(--delay);
pointer-events: none; pointer-events: none;
} }