Add stuff to .gitignore

Add .gitignore
Add photography.html
2026-09-12 17:30:21 +02:00 · 2026-09-12 17:29:21 +02:00 · 2026-04-20 23:22:34 +02:00 · 2026-04-20 23:20:09 +02:00 · 2026-04-20 23:16:54 +02:00 · 2026-04-20 21:31:57 +02:00
10 changed files with 285 additions and 19 deletions
@@ -0,0 +1,43 @@
+### 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
@@ -0,0 +1,2 @@
+/pages/*  /pages/:splat  404
+/*        /index.html    200
@@ -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,24 +14,127 @@
 <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> -->
+
+    <header id="hero">
        <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>
+    </header>
+    
+    <!-- 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>
        <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://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 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 birdSound = new Audio("SnowBuntingSound.ogg");
        const template = document.getElementById("barTemplate");
@@ -49,12 +153,12 @@
        }

        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) => {
@@ -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>
@@ -0,0 +1 @@
+<h1>Error: <span id="error-code">---</span></h1>
@@ -0,0 +1,2 @@
+<h1>Photography</h1>
+<p>This is where I will share photos I take, have a look! :3</p>
@@ -0,0 +1,7 @@
+{
+    "cleanUrls": false,
+    "rewrites": [
+        { "source": "/", "destination": "/index.html" },
+        { "source": "/!(pages)**", "destination": "/index.html" }
+    ]
+}
@@ -9,10 +9,11 @@ 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: 4rem 20rem;
    box-sizing: border-box;
+    position: relative;
+
 }

@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 {
-    font-size: 3rem;
+    margin-bottom: 1rem;
 }

 h1 img {
@@ -43,12 +108,49 @@ 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;
+}
+
+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 */
@@ -64,6 +166,9 @@ footer {
    top: 2rem;
    left: -3rem;
    width: 12rem;
+
+    outline: 2px dashed #faf4e8;
+    outline-offset: -4px;
 }

 /* Birdy */
@@ -75,8 +180,8 @@ footer {
 .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;
 }
Author	SHA1	Message	Date
Nikology	01ae6a8832	Add stuff to .gitignore	2026-09-12 17:30:21 +02:00
Nikology	de0fa7d0ee	Add .gitignore	2026-09-12 17:29:21 +02:00
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
				`@@ -0,0 +1 @@`
				`<h1>Error: <span id="error-code">---</span></h1>`