Update about

.gitignore

@@ -0,0 +1,46 @@
+### macOS ###
+.DS_Store
+.AppleDouble
+.LSOverride
+._*
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.Trashes
+.TemporaryItems
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+### Windows ###
+Thumbs.db
+ehthumbs.db
+Desktop.ini
+$RECYCLE.BIN/
+*.cab
+*.msi
+*.msm
+*.msp
+*.lnk
+
+### Linux ###
+*~
+.fuse_hidden*
+.directory
+.Trash-*
+.nfs*
+
+### VS Code ###
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+*.code-workspace
+
+## Wrangler ##
+.wrangler

.gitlab-ci.yml

@@ -1,16 +0,0 @@
-# You can override the included template(s) by including variable overrides
-# SAST customization: https://docs.gitlab.com/user/application_security/sast/#available-cicd-variables
-# Secret Detection customization: https://docs.gitlab.com/user/application_security/secret_detection/pipeline/configure/
-# Dependency Scanning customization: https://docs.gitlab.com/user/application_security/dependency_scanning/dependency_scanning_sbom/#customizing-analyzer-behavior
-# Container Scanning customization: https://docs.gitlab.com/user/application_security/container_scanning/#customizing-analyzer-behavior
-# Note that environment variables can be set in several places
-# See https://docs.gitlab.com/ci/variables/#cicd-variable-precedence
-stages:
-- test
-- secret-detection
-variables:
-  SECRET_DETECTION_ENABLED: 'true'
-secret_detection:
-  stage: secret-detection
-include:
-- template: Security/Secret-Detection.gitlab-ci.yml

_redirects

@@ -0,0 +1,2 @@
+/pages/*  /pages/:splat  404
+/*        /index.html    200

gitea.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 640 640"><path d="M622.7 149.8c-4.1-4.1-9.6-4-9.6-4s-117.2 6.6-177.9 8c-13.3.3-26.5.6-39.6.7v117.2c-5.5-2.6-11.1-5.3-16.6-7.9 0-36.4-.1-109.2-.1-109.2-29 .4-89.2-2.2-89.2-2.2s-141.4-7.1-156.8-8.5c-9.8-.6-22.5-2.1-39 1.5-8.7 1.8-33.5 7.4-53.8 26.9C-4.9 212.4 6.6 276.2 8 285.8c1.7 11.7 6.9 44.2 31.7 72.5 45.8 56.1 144.4 54.8 144.4 54.8s12.1 28.9 30.6 55.5c25 33.1 50.7 58.9 75.7 62 63 0 188.9-.1 188.9-.1s12 .1 28.3-10.3c14-8.5 26.5-23.4 26.5-23.4S547 483 565 451.5c5.5-9.7 10.1-19.1 14.1-28 0 0 55.2-117.1 55.2-231.1-1.1-34.5-9.6-40.6-11.6-42.6M125.6 353.9c-25.9-8.5-36.9-18.7-36.9-18.7S69.6 321.8 60 295.4c-16.5-44.2-1.4-71.2-1.4-71.2s8.4-22.5 38.5-30c13.8-3.7 31-3.1 31-3.1s7.1 59.4 15.7 94.2c7.2 29.2 24.8 77.7 24.8 77.7s-26.1-3.1-43-9.1m300.3 107.6s-6.1 14.5-19.6 15.4c-5.8.4-10.3-1.2-10.3-1.2s-.3-.1-5.3-2.1l-112.9-55s-10.9-5.7-12.8-15.6c-2.2-8.1 2.7-18.1 2.7-18.1L322 273s4.8-9.7 12.2-13c.6-.3 2.3-1 4.5-1.5 8.1-2.1 18 2.8 18 2.8L467.4 315s12.6 5.7 15.3 16.2c1.9 7.4-.5 14-1.8 17.2-6.3 15.4-55 113.1-55 113.1" style="fill:#3d2f1f"/><path d="M326.8 380.1c-8.2.1-15.4 5.8-17.3 13.8s2 16.3 9.1 20c7.7 4 17.5 1.8 22.7-5.4 5.1-7.1 4.3-16.9-1.8-23.1l24-49.1c1.5.1 3.7.2 6.2-.5 4.1-.9 7.1-3.6 7.1-3.6 4.2 1.8 8.6 3.8 13.2 6.1 4.8 2.4 9.3 4.9 13.4 7.3.9.5 1.8 1.1 2.8 1.9 1.6 1.3 3.4 3.1 4.7 5.5 1.9 5.5-1.9 14.9-1.9 14.9-2.3 7.6-18.4 40.6-18.4 40.6-8.1-.2-15.3 5-17.7 12.5-2.6 8.1 1.1 17.3 8.9 21.3s17.4 1.7 22.5-5.3c5-6.8 4.6-16.3-1.1-22.6 1.9-3.7 3.7-7.4 5.6-11.3 5-10.4 13.5-30.4 13.5-30.4.9-1.7 5.7-10.3 2.7-21.3-2.5-11.4-12.6-16.7-12.6-16.7-12.2-7.9-29.2-15.2-29.2-15.2s0-4.1-1.1-7.1c-1.1-3.1-2.8-5.1-3.9-6.3 4.7-9.7 9.4-19.3 14.1-29-4.1-2-8.1-4-12.2-6.1-4.8 9.8-9.7 19.7-14.5 29.5-6.7-.1-12.9 3.5-16.1 9.4-3.4 6.3-2.7 14.1 1.9 19.8z" style="fill:#3d2f1f"/></svg>

index.html

@@ -6,6 +6,7 @@
     <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"> -->
@@ -13,25 +14,129 @@
 <body>
     <div class="ribbon">Work In Progress</div>
 
-    <h1>nikology.dev 
+    <!-- <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>
-    <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>
+    </h1> -->
+    <header>
+        <div id="hero">
+            <h1>nikology.dev</h1>
+            <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>
+        </div>
+        <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>
+    </header>
+    
+    <!-- Nav Bar -->
+
+
+    <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>
+    </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 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://gitea.nikology.dev/Nikology/nikology.dev">
+                Page Source                
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M622.7 149.8c-4.1-4.1-9.6-4-9.6-4s-117.2 6.6-177.9 8c-13.3.3-26.5.6-39.6.7v117.2c-5.5-2.6-11.1-5.3-16.6-7.9 0-36.4-.1-109.2-.1-109.2-29 .4-89.2-2.2-89.2-2.2s-141.4-7.1-156.8-8.5c-9.8-.6-22.5-2.1-39 1.5-8.7 1.8-33.5 7.4-53.8 26.9C-4.9 212.4 6.6 276.2 8 285.8c1.7 11.7 6.9 44.2 31.7 72.5 45.8 56.1 144.4 54.8 144.4 54.8s12.1 28.9 30.6 55.5c25 33.1 50.7 58.9 75.7 62 63 0 188.9-.1 188.9-.1s12 .1 28.3-10.3c14-8.5 26.5-23.4 26.5-23.4S547 483 565 451.5c5.5-9.7 10.1-19.1 14.1-28 0 0 55.2-117.1 55.2-231.1-1.1-34.5-9.6-40.6-11.6-42.6M125.6 353.9c-25.9-8.5-36.9-18.7-36.9-18.7S69.6 321.8 60 295.4c-16.5-44.2-1.4-71.2-1.4-71.2s8.4-22.5 38.5-30c13.8-3.7 31-3.1 31-3.1s7.1 59.4 15.7 94.2c7.2 29.2 24.8 77.7 24.8 77.7s-26.1-3.1-43-9.1m300.3 107.6s-6.1 14.5-19.6 15.4c-5.8.4-10.3-1.2-10.3-1.2s-.3-.1-5.3-2.1l-112.9-55s-10.9-5.7-12.8-15.6c-2.2-8.1 2.7-18.1 2.7-18.1L322 273s4.8-9.7 12.2-13c.6-.3 2.3-1 4.5-1.5 8.1-2.1 18 2.8 18 2.8L467.4 315s12.6 5.7 15.3 16.2c1.9 7.4-.5 14-1.8 17.2-6.3 15.4-55 113.1-55 113.1"/><path d="M326.8 380.1c-8.2.1-15.4 5.8-17.3 13.8s2 16.3 9.1 20c7.7 4 17.5 1.8 22.7-5.4 5.1-7.1 4.3-16.9-1.8-23.1l24-49.1c1.5.1 3.7.2 6.2-.5 4.1-.9 7.1-3.6 7.1-3.6 4.2 1.8 8.6 3.8 13.2 6.1 4.8 2.4 9.3 4.9 13.4 7.3.9.5 1.8 1.1 2.8 1.9 1.6 1.3 3.4 3.1 4.7 5.5 1.9 5.5-1.9 14.9-1.9 14.9-2.3 7.6-18.4 40.6-18.4 40.6-8.1-.2-15.3 5-17.7 12.5-2.6 8.1 1.1 17.3 8.9 21.3s17.4 1.7 22.5-5.3c5-6.8 4.6-16.3-1.1-22.6 1.9-3.7 3.7-7.4 5.6-11.3 5-10.4 13.5-30.4 13.5-30.4.9-1.7 5.7-10.3 2.7-21.3-2.5-11.4-12.6-16.7-12.6-16.7-12.2-7.9-29.2-15.2-29.2-15.2s0-4.1-1.1-7.1c-1.1-3.1-2.8-5.1-3.9-6.3 4.7-9.7 9.4-19.3 14.1-29-4.1-2-8.1-4-12.2-6.1-4.8 9.8-9.7 19.7-14.5 29.5-6.7-.1-12.9 3.5-16.1 9.4-3.4 6.3-2.7 14.1 1.9 19.8z"/></svg>
+            </a>
+        </p>
     </footer>
+
     <!-- Scripts -->
     <script>
+        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 = 20
-        const birdIcon = document.getElementById("birdButton");
+        const birdButton = document.getElementById("birdButton");
         const birdSound = new Audio("SnowBuntingSound.ogg");
         const template = document.getElementById("barTemplate");
         const wrap = document.querySelector(".bird-wrap");
@@ -43,21 +148,21 @@
             clone.style.setProperty("--angle", `${angle}deg`);
             clone.style.setProperty("--distance", `${-distance}px`);
             clone.style.setProperty("--delay", `${delay}s`);
-            wrap.appendChild(clone);
+            birdButton.appendChild(clone);
 
             clone.addEventListener("animationend", () => clone.remove());
         }
 
         function birdSoundAnim() {
-            const leftRandom = (Math.random() * 40) + 40
-            const rightRandom = (Math.random() * 40) + 40
+            const leftRandom = (Math.random() * 20) + 80
+            const rightRandom = (Math.random() * 20) + 40
             spawnBar(DISTANCE, -leftRandom, 0.2)
             spawnBar(DISTANCE, -leftRandom, 0.4)
-            spawnBar(DISTANCE, rightRandom, 0.6)
-            spawnBar(DISTANCE, rightRandom, 0.8)
+            spawnBar(DISTANCE, -rightRandom, 0.6)
+            spawnBar(DISTANCE, -rightRandom, 0.8)
         }
 
-        birdIcon.addEventListener("click", (e) => {
+        birdButton.addEventListener("click", (e) => {
             if (!birdSound.paused) return;
             birdSound.play();
             birdSoundAnim()

pages/about.html

@@ -0,0 +1,2 @@
+<h1>About</h1>
+<p>Hi there! I am Niki and welcome to my website. I am a gay guy studying computer science in Denmark. In case you did not know I am in face a furry and my fursona is a <a href="https://en.wikipedia.org/wiki/Snow_bunting" target="_blank" rel="noopener">Snow Bunting</a>. Writing is not really my expertise so I am sorta just dumping stuff here.</p>

pages/error.html

@@ -0,0 +1 @@
+<h1>Error: <span id="error-code">---</span></h1>

pages/photography.html

@@ -0,0 +1,2 @@
+<h1>Photography</h1>
+<p>This is where I will share photos I take, have a look! :3</p>

serve.json

@@ -0,0 +1,7 @@
+{
+    "cleanUrls": false,
+    "rewrites": [
+        { "source": "/", "destination": "/index.html" },
+        { "source": "/!(pages)**", "destination": "/index.html" }
+    ]
+}

styles.css

@@ -9,20 +9,81 @@ body {
     margin: 0;
     display: flex;
     flex-direction: column;
-    justify-content: center;
-    align-items: flex-start;
-    padding: 2rem 20rem 2rem 20rem;
+    justify-content: flex-start;
+    padding: clamp(2rem, 8vw, 6rem);
     box-sizing: border-box;
+    position: relative;
 }
 
-@media(max-width: 1024px) {
-    body {
-        padding: 2rem;
+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;
+}
+
+header {
+    position: relative;
+}
+
+#hero {
+    position: absolute;
+    bottom: calc(100% + 1rem);
+    font-size: clamp(1.5rem, 8vw, 4rem);
+    display: flex;
+    align-items: baseline;
+}
+
+#hero h1 {
+    margin: 0;
+}
+
+body:not(.home) #hero {
+    opacity: 0;
+    pointer-events: none;
+}
+
+/* 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 {
-    font-size: 3rem;
+    margin-bottom: 1rem;
 }
 
 h1 img {
@@ -43,12 +104,50 @@ p {
     margin-bottom: 0;
 }
 
+/* a {
+    transition: color 0.5s;
+}
+
+a:hover {
+    color: #3d2f1f;
+} */
+
+/* Footer */
+
 footer {
+    display: flex;
     position: fixed;
     bottom: 1rem;
     left: 1rem;
     font-size: 0.8rem;
-    opacity: 0.4;
+    gap: 1rem;
+    transition: opacity 0.3s;
+    flex-wrap: wrap;
+}
+
+footer p {
+    color: #3d2f1f66;
+}
+
+footer a {
+    color: #3d2f1f66;
+    transition: color 0.5s;
+}
+
+footer a:hover {
+    color: #3d2f1f;
+}
+
+footer svg {
+    margin-left: 0.25rem;
+    height: 1.25em;
+    width: 1.25em;
+    vertical-align: -0.25rem;
+    fill: currentColor;
+}
+
+body:not(.homeCommitted) .birdSoundCredit {
+    display: none;
 }
 
 /* Corner Ribbon */
@@ -64,19 +163,26 @@ footer {
     top: 2rem;
     left: -3rem;
     width: 12rem;
+
+    outline: 2px dashed #faf4e8;
+    outline-offset: -4px;
 }
 
 /* Birdy */
 
 .bird-wrap {
     position: relative;
+    padding-left: 1rem;
+    height: 2em;
+    width: auto;
 }
 
 .bar {
     opacity: 0;
     position: absolute;
-    top: 0;
-    left: 10px;
+    top: 15px;
+    left: 20px;
+    /* Offset */
     animation: pop 0.8s ease-out var(--delay);
     pointer-events: none;
 }
@@ -86,15 +192,29 @@ footer {
 }
 
 @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));}
+    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;
+    height: 100%;
+    border: none;
+    background: none;
     cursor: pointer;
 }
+
+#birdButton img {
+    height: 100%;
+}