Build in Hero to home and animate stuff correctly

index.html

@@ -20,6 +20,15 @@
             <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>
+    </header>
     
     <!-- Nav Bar -->
     <nav>
@@ -54,7 +63,7 @@
     <script>
         const cache = new Map();
 
-        async function loadFragment(file) {
+        async function loadApp(file) {
             if (!cache.has(file)) {
                 const res = await fetch(file);
                 if (!res.ok) {
@@ -71,68 +80,85 @@
             return { status: 200, content: cache.get(file)};
         }
 
-        async function render() {
+        async function fetchApp() {
             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) {
+            return await loadApp(file);
-                document.getElementById('app').innerHTML = result.content;
+        }
+
+        async function commit(appFile) {
+            if (appFile.content) {
+                document.getElementById('app').innerHTML = appFile.content;
             } else {
-                const errorResult = await loadFragment('/pages/error.html');
+                const errorResult = await loadApp('/pages/error.html');
                 document.getElementById('app').innerHTML = errorResult.content;
-                document.getElementById('error-code').textContent = result.status;
+                document.getElementById('error-code').textContent = appFile.status;
             }
         }
 
-        document.addEventListener('click', e => {
+        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);
-                render();
+                
+                const currentApp = document.getElementById('app');
+                currentApp.classList.add('fading');
+
+                const fetchedApp = fetchApp();
+
+                await new Promise(r => setTimeout(r, 300));
+                await commit(await fetchedApp);
+                currentApp.classList.remove('fading')
             }
         });
 
-        window.addEventListener('popstate', render);
+        
-        render().then(() => {
+        window.addEventListener('popstate', navigate);
+        navigate().then(() => {
              requestAnimationFrame(() => document.body.classList.add('ready'))
         });
        
-        // const DISTANCE = 25
+        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");
-        // const wrap = document.querySelector(".bird-wrap");
+        const wrap = document.querySelector(".bird-wrap");
         
-        // function spawnBar(distance, angle, delay = 0) {
+        function spawnBar(distance, angle, delay = 0) {
-        //     const clone = template.cloneNode(true);
+            const clone = template.cloneNode(true);
-        //     clone.removeAttribute("id");
+            clone.removeAttribute("id");
-        //     clone.classList.add("bar");
+            clone.classList.add("bar");
-        //     clone.style.setProperty("--angle", `${angle}deg`);
+            clone.style.setProperty("--angle", `${angle}deg`);
-        //     clone.style.setProperty("--distance", `${-distance}px`);
+            clone.style.setProperty("--distance", `${-distance}px`);
-        //     clone.style.setProperty("--delay", `${delay}s`);
+            clone.style.setProperty("--delay", `${delay}s`);
-        //     wrap.appendChild(clone);
+            wrap.appendChild(clone);
 
-        //     clone.addEventListener("animationend", () => clone.remove());
+            clone.addEventListener("animationend", () => clone.remove());
-        // }
+        }
 
-        // 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) => {
-        //     if (!birdSound.paused) return;
+            if (!birdSound.paused) return;
-        //     birdSound.play();
+            birdSound.play();
-        //     birdSoundAnim()
+            birdSoundAnim()
-        // });
+        });
     </script>
 </body>
 </html>

pages/home.html

@@ -1,14 +1,7 @@
-<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>
-
 <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">
+        <a href="https://gitlab.com/Nikology/nikology.dev" target="_blank" rel="noopener">
             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>

styles.css

@@ -12,18 +12,8 @@ body {
     justify-content: flex-start;
     padding: 4rem 20rem;
     box-sizing: border-box;
-}
+    position: relative;
 
-body.ready {
-    transition: padding-top 0.5s ease;
-}
-
-body.home {
-    padding-top: 35vh;
-}
-
-body.home h1 {
-    font-size: 4rem;
 }
 
 @media(max-width: 1024px) {
@@ -32,6 +22,46 @@ body.home h1 {
     }
 }
 
+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;
+}
+
+#app.fading {
+    opacity: 0;
+}
+
 /* Nav Bar */
 
 nav {
@@ -135,8 +165,8 @@ footer svg {
 .bar {
     opacity: 0;
     position: absolute;
-    top: 0;
+    top: 15px;
-    left: 10px; /* Offset */
+    left: 20px; /* Offset */
     animation: pop 0.8s ease-out var(--delay);
     pointer-events: none;
 }