138 lines
5.6 KiB
HTML
138 lines
5.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<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="preload" href="cream-paper.png" as="image">
|
|
<link rel="stylesheet" href="styles.css">
|
|
<title>nikology.dev</title>
|
|
<!-- <link rel="icon" href="birbFavicon.svg" type="image/svg+xml"> -->
|
|
</head>
|
|
<body>
|
|
<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> -->
|
|
|
|
<!-- Nav Bar -->
|
|
<nav>
|
|
<a href="/" data-link>Home</a>
|
|
<span>-</span>
|
|
<a href="/about" data-link>About</a>
|
|
<!-- <span>-</span>
|
|
<a href="">Test</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>
|
|
<li><a href="https://gitlab.com/Nikology" target="_blank" rel="noopener">GitLab</a></li>
|
|
</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>
|
|
<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> -->
|
|
|
|
<!-- Scripts -->
|
|
<script>
|
|
const cache = new Map();
|
|
|
|
async function loadFragment(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 render() {
|
|
const path = location.pathname;
|
|
document.body.classList.toggle('home', path === '/');
|
|
const file = `/pages${path === '/' ? '/home' : path}.html`;
|
|
|
|
const result = await loadFragment(file);
|
|
|
|
if (result.content) {
|
|
document.getElementById('app').innerHTML = result.content;
|
|
} else {
|
|
const errorResult = await loadFragment('/pages/error.html');
|
|
document.getElementById('app').innerHTML = errorResult.content;
|
|
document.getElementById('error-code').textContent = result.status;
|
|
}
|
|
}
|
|
|
|
document.addEventListener('click', e => {
|
|
const link = e.target.closest('[data-link]');
|
|
if (link) {
|
|
e.preventDefault();
|
|
history.pushState(null, '', link.href);
|
|
render();
|
|
}
|
|
});
|
|
|
|
window.addEventListener('popstate', render);
|
|
render().then(() => {
|
|
requestAnimationFrame(() => document.body.classList.add('ready'))
|
|
});
|
|
|
|
// const DISTANCE = 25
|
|
// 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>
|
|
</html> |