Merge branch 'feat/preloader'

2025-07-03 14:19:46 +10:00
parent e43ae63d8a e65fe8cd30
commit 45709632d5
47 changed files with 282 additions and 33 deletions
--- a/server.py
+++ b/server.py
@@ -536,6 +536,13 @@ def index():
        # Check if referrer includes nathan.woodburn.au
        if "nathan.woodburn.au" in request.referrer:
            loaded = True
+    if request.cookies.get("loaded"):
+        loaded = True
+    
+    # Always load if load is in the query string
+    if request.args.get("load"):
+        loaded = False
+

    # Check if crawler
    if request.headers and request.headers.get("User-Agent"):
@@ -554,7 +561,7 @@ def index():
            "User-Agent"
        ) and "Bingbot" not in request.headers.get("User-Agent"):
            # Check if cookie is set
-            if not request.cookies.get("loaded") and not loaded:
+            if not loaded:
                # Set cookie
                resp = make_response(
                    render_template("loading.html").replace(
@@ -831,34 +838,6 @@ def blog_path(path):

    return blog.render_blog_page(path,handshake_scripts)

-#TODO add rss json and xml for blog
-# @app.route("/blog.rss")
-# @app.route("/blog.xml")
-# @app.route("/rss.xml")
-# def blog_rss():
-#     host = "https://" + request.host
-#     if ":" in request.host:
-#         host = "http://" + request.host
-#     # Generate RSS feed
-#     blog_pages = blog.list_blog_page_files()
-#     rss = f'<?xml version="1.0" encoding="UTF-8"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Nathan.Woodburn/</title><link>{host}</link><description>See what I\'ve been up to</description><language>en-us</language><lastBuildDate>{datetime.datetime.blog(tz=datetime.timezone.utc).strftime("%a, %d %b %Y %H:%M:%S %z")}</lastBuildDate><atom:link href="{host}/blog.rss" rel="self" type="application/rss+xml" />'
-#     for page in blog_pages:
-#         link = page.strip(".html")
-#         date = datetime.datetime.strptime(link, "%y_%m_%d")
-#         date = date.strftime("%A, %B %d, %Y")
-#         rss += f'<item><title>What\'s Happening {date}</title><link>{host}/blog/{link}</link><description>Latest updates for {date}</description><guid>{host}/blog/{link}</guid></item>'
-#     rss += "</channel></rss>"
-#     return make_response(rss, 200, {"Content-Type": "application/rss+xml"})
-
-# @app.route("/blog.json")
-# def blog_json():
-#     blog_pages = blog.list_blog_page_files()
-#     host = "https://" + request.host
-#     if ":" in request.host:
-#         host = "http://" + request.host
-#     blog_pages = [{"url":host+"/blog/"+page.strip(".html"), "date":datetime.datetime.strptime(page.strip(".html"), "%y_%m_%d").strftime("%A, %B %d, %Y"), "title":"What's Happening "+datetime.datetime.strptime(page.strip(".html"), "%y_%m_%d").strftime("%A, %B %d, %Y")} for page in blog_pages]
-#     return jsonify(blog_pages)
-
 # endregion


--- a/templates/404.html
+++ b/templates/404.html
@@ -32,7 +32,9 @@
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&amp;display=swap">
    <link rel="stylesheet" href="/assets/css/styles.min.css">
    <link rel="stylesheet" href="/assets/css/404.min.css">
+    <link rel="stylesheet" href="/assets/css/brand-reveal.min.css">
    <link rel="stylesheet" href="/assets/css/profile.min.css">
+    <link rel="stylesheet" href="/assets/css/Social-Icons.min.css">
 <link rel="me" href="https://mastodon.woodburn.au/@nathanwoodburn" />
 <script async src="https://umami.woodburn.au/script.js" data-website-id="6a55028e-aad3-481c-9a37-3e096ff75589"></script>
 </head>
@@ -44,6 +46,7 @@
    </div>
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="/assets/js/script.min.js"></script>
+    <script src="/assets/js/grayscale.min.js"></script>
    <script src="/assets/js/404.min.js"></script>
 </body>

--- a/templates/about.html
+++ b/templates/about.html
@@ -33,8 +33,10 @@
    <link rel="stylesheet" href="/assets/fonts/fontawesome-all.min.css">
    <link rel="stylesheet" href="/assets/fonts/ionicons.min.css">
    <link rel="stylesheet" href="/assets/css/styles.min.css">
+    <link rel="stylesheet" href="/assets/css/brand-reveal.min.css">
    <link rel="stylesheet" href="/assets/css/fixes.min.css">
    <link rel="stylesheet" href="/assets/css/profile.min.css">
+    <link rel="stylesheet" href="/assets/css/Social-Icons.min.css">
 <link rel="me" href="https://mastodon.woodburn.au/@nathanwoodburn" />
 <script async src="https://umami.woodburn.au/script.js" data-website-id="6a55028e-aad3-481c-9a37-3e096ff75589"></script>
 </head>
@@ -109,6 +111,7 @@
    <p style="margin-top: 1em;">Hi, I am Nathan Woodburn and I live in Canberra<br>I am currently studying at the Australian National University<br>I enjoy 3D printing and CAD<br>I code stuff with C#, Linux Bash and tons of other languages<br>I'm a co-founder of <a href="https://hns.au" target="_blank">Handshake Australia</a><br>I currently work for <a href="https://learn.namebase.io" target="_blank">Namebase</a><br><br></p><i class="fas fa-arrow-down" style="font-size: 50px;" onclick="slideout()"></i>
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="/assets/js/script.min.js"></script>
+    <script src="/assets/js/grayscale.min.js"></script>
    <script src="/assets/js/about.min.js"></script>
    <script src="/assets/js/hacker.min.js"></script>
 </body>
--- a/templates/assets/css/Social-Icons.min.css
+++ b/templates/assets/css/Social-Icons.min.css
@@ -0,0 +1 @@
+.social-icons{color:#313437;background-color:#fff;padding:70px 0}@media (max-width:767px){.social-icons{padding:50px 0}}@media (max-width:500px){img.profile{width:200px;margin-left:-100px}.profile-container{height:200px;margin-top:2em!important}}.social-div{display:flex;justify-content:center;align-items:center}.social-list-sml{display:flex;list-style:none;gap:1rem}.social-list{display:flex;list-style:none;gap:2.5rem}.social-icons i{color:#757980;margin:0 10px;width:60px;height:60px;border:1px solid #c8ced7;text-align:center;border-radius:50%;line-height:60px;display:inline-block}.social-link-sml a{text-decoration:none;width:3.5rem;height:3.5rem;background-color:#f0f9fe;border-radius:50%;display:flex;justify-content:center;align-items:center;position:relative;z-index:1;border:3px solid #f0f9fe;overflow:hidden}.social-link a{text-decoration:none;width:4.8rem;height:4.8rem;background-color:#f0f9fe;border-radius:50%;display:flex;justify-content:center;align-items:center;position:relative;z-index:1;border:3px solid #f0f9fe;overflow:hidden}.social-link a::before,.social-link-sml a::before{content:"";position:absolute;width:100%;height:100%;background:var(--bg-color);z-index:0;scale:1 0;transform-origin:bottom;transition:scale .5s}.social-link-sml:hover a::before,.social-link:hover a::before{scale:1 1}.icon-sml{font-size:1.5rem;color:#011827;transition:.5s;z-index:2}.icon{font-size:2rem;color:#011827;transition:.5s;z-index:2}.social-link a:hover .icon{color:#fff;transform:rotateY(360deg)}.social-link,.social-link-sml{--bg-color:#000}.social-link-sml.discord,.social-link.discord{--bg-color:#5865f2}.social-link-sml.mastodon,.social-link.mastodon{--bg-color:#6364ff}.social-link-sml.youtube,.social-link.youtube{--bg-color:#ff0000}.social-link-sml.signal,.social-link.signal{--bg-color:#365eb6}
--- a/templates/assets/css/brand-reveal.min.css
+++ b/templates/assets/css/brand-reveal.min.css
@@ -0,0 +1 @@
+.name-container{display:inline-flex;align-items:center;overflow:hidden;position:absolute;width:fit-content;left:50%;transform:translateX(-50%)}.slider{position:relative;left:0;animation:1s linear 1s forwards slide}@keyframes slide{0%{left:0}100%{left:calc(100%)}}.brand{mask-image:linear-gradient(to right,black 50%,transparent 50%);-webkit-mask-image:linear-gradient(to right,black 50%,transparent 50%);mask-position:100% 0;-webkit-mask-position:100% 0;mask-size:200%;-webkit-mask-size:200%;animation:1s linear 1s forwards reveal}@keyframes reveal{0%{mask-position:100% 0;-webkit-mask-position:100% 0}100%{mask-position:0 0;-webkit-mask-position:0 0}}
--- a/templates/assets/css/styles.min.css
+++ b/templates/assets/css/styles.min.css
@@ -1 +1 @@
-:root,[data-bs-theme=light]{--bs-primary:#6E0E9C;--bs-primary-rgb:110,14,156;--bs-primary-text-emphasis:#2C063E;--bs-primary-bg-subtle:#E2CFEB;--bs-primary-border-subtle:#C59FD7;--bs-link-color:#6E0E9C;--bs-link-color-rgb:110,14,156;--bs-link-hover-color:#a41685;--bs-link-hover-color-rgb:164,22,133}.btn-primary{--bs-btn-color:#fff;--bs-btn-bg:#6E0E9C;--bs-btn-border-color:#6E0E9C;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#5E0C85;--bs-btn-hover-border-color:#580B7D;--bs-btn-focus-shadow-rgb:233,219,240;--bs-btn-active-color:#fff;--bs-btn-active-bg:#580B7D;--bs-btn-active-border-color:#530B75;--bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:#6E0E9C;--bs-btn-disabled-border-color:#6E0E9C}.btn-outline-primary{--bs-btn-color:#6E0E9C;--bs-btn-border-color:#6E0E9C;--bs-btn-focus-shadow-rgb:110,14,156;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#6E0E9C;--bs-btn-hover-border-color:#6E0E9C;--bs-btn-active-color:#fff;--bs-btn-active-bg:#6E0E9C;--bs-btn-active-border-color:#6E0E9C;--bs-btn-disabled-color:#6E0E9C;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#6E0E9C}.py-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}@media (min-width:992px){.py-lg-5{padding-top:3rem!important;padding-bottom:3rem!important}}.name-container{display:inline-flex;align-items:center;overflow:hidden;position:absolute;width:fit-content;left:50%;transform:translateX(-50%)}.slider{position:relative;left:0;animation:1s linear 1s forwards slide}@keyframes slide{0%{left:0}100%{left:calc(100%)}}.brand{mask-image:linear-gradient(to right,black 50%,transparent 50%);-webkit-mask-image:linear-gradient(to right,black 50%,transparent 50%);mask-position:100% 0;-webkit-mask-position:100% 0;mask-size:200%;-webkit-mask-size:200%;animation:1s linear 1s forwards reveal}@keyframes reveal{0%{mask-position:100% 0;-webkit-mask-position:100% 0}100%{mask-position:0 0;-webkit-mask-position:0 0}}.social-icons{color:#313437;background-color:#fff;padding:70px 0}@media (max-width:767px){.social-icons{padding:50px 0}}@media (max-width:500px){img.profile{width:200px;margin-left:-100px}.profile-container{height:200px;margin-top:2em!important}}.social-div{display:flex;justify-content:center;align-items:center}.social-list-sml{display:flex;list-style:none;gap:1rem}.social-list{display:flex;list-style:none;gap:2.5rem}.social-icons i{color:#757980;margin:0 10px;width:60px;height:60px;border:1px solid #c8ced7;text-align:center;border-radius:50%;line-height:60px;display:inline-block}.social-link-sml a{text-decoration:none;width:3.5rem;height:3.5rem;background-color:#f0f9fe;border-radius:50%;display:flex;justify-content:center;align-items:center;position:relative;z-index:1;border:3px solid #f0f9fe;overflow:hidden}.social-link a{text-decoration:none;width:4.8rem;height:4.8rem;background-color:#f0f9fe;border-radius:50%;display:flex;justify-content:center;align-items:center;position:relative;z-index:1;border:3px solid #f0f9fe;overflow:hidden}.social-link a::before,.social-link-sml a::before{content:"";position:absolute;width:100%;height:100%;background:var(--bg-color);z-index:0;scale:1 0;transform-origin:bottom;transition:scale .5s}.social-link-sml:hover a::before,.social-link:hover a::before{scale:1 1}.icon-sml{font-size:1.5rem;color:#011827;transition:.5s;z-index:2}.icon{font-size:2rem;color:#011827;transition:.5s;z-index:2}.social-link a:hover .icon{color:#fff;transform:rotateY(360deg)}.social-link,.social-link-sml{--bg-color:#000}.social-link-sml.discord,.social-link.discord{--bg-color:#5865f2}.social-link-sml.mastodon,.social-link.mastodon{--bg-color:#6364ff}.social-link-sml.youtube,.social-link.youtube{--bg-color:#ff0000}.social-link-sml.signal,.social-link.signal{--bg-color:#365eb6}
+:root,[data-bs-theme=light]{--bs-primary:#6E0E9C;--bs-primary-rgb:110,14,156;--bs-primary-text-emphasis:#2C063E;--bs-primary-bg-subtle:#E2CFEB;--bs-primary-border-subtle:#C59FD7;--bs-link-color:#6E0E9C;--bs-link-color-rgb:110,14,156;--bs-link-hover-color:#a41685;--bs-link-hover-color-rgb:164,22,133}.btn-primary{--bs-btn-color:#fff;--bs-btn-bg:#6E0E9C;--bs-btn-border-color:#6E0E9C;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#5E0C85;--bs-btn-hover-border-color:#580B7D;--bs-btn-focus-shadow-rgb:233,219,240;--bs-btn-active-color:#fff;--bs-btn-active-bg:#580B7D;--bs-btn-active-border-color:#530B75;--bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:#6E0E9C;--bs-btn-disabled-border-color:#6E0E9C}.btn-outline-primary{--bs-btn-color:#6E0E9C;--bs-btn-border-color:#6E0E9C;--bs-btn-focus-shadow-rgb:110,14,156;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#6E0E9C;--bs-btn-hover-border-color:#6E0E9C;--bs-btn-active-color:#fff;--bs-btn-active-bg:#6E0E9C;--bs-btn-active-border-color:#6E0E9C;--bs-btn-disabled-color:#6E0E9C;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#6E0E9C}.py-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}@media (min-width:992px){.py-lg-5{padding-top:3rem!important;padding-bottom:3rem!important}}
--- a/templates/assets/js/grayscale.min.js
+++ b/templates/assets/js/grayscale.min.js
@@ -0,0 +1 @@
+!function(){"use strict";var e=document.querySelector("#mainNav");if(e){var o=e.querySelector(".navbar-collapse");if(o){var n=new bootstrap.Collapse(o,{toggle:!1}),t=o.querySelectorAll("a");for(var a of t)a.addEventListener("click",(function(e){n.hide()}))}var r=function(){(void 0!==window.pageYOffset?window.pageYOffset:(document.documentElement||document.body.parentNode||document.body).scrollTop)>100?e.classList.add("navbar-shrink"):e.classList.remove("navbar-shrink")};r(),document.addEventListener("scroll",r)}}();
--- a/templates/assets/js/loading-enhanced.js
+++ b/templates/assets/js/loading-enhanced.js
@@ -0,0 +1,154 @@
+document.addEventListener("DOMContentLoaded", function() {
+    const loadingScreen = document.getElementById("loading-screen");
+    
+    // Terminal simulation data
+    const commands = [
+        { pre: '┌──(<span class="blue">nathan@NWTux</span>)-[<span class="white">~</span>]', message: "cd Git" },
+        { pre: '┌──(<span class="blue">nathan@NWTux</span>)-[<span class="white">~/Git</span>]', message: "cd Nathanwoodburn.github.io" },
+        { pre: '┌──(<span class="blue">nathan@NWTux</span>)-[<span class="white">~/Git/Nathanwoodburn.github.io</span>]', message: "python3 main.py" }
+    ];
+    
+    const serverMessages = [
+        "Starting server with 1 workers and 2 threads",
+        "+0000] [1] [INFO] Starting gunicorn 22.0.0",
+        "+0000] [1] [INFO] Listening at: http://0.0.0.0:5000 (1)",
+        "+0000] [1] [INFO] Using worker: gthread",
+        "+0000] [8] [INFO] Booting worker with pid: 8",
+        "Preloading assets for faster navigation..."
+    ];
+    
+    let currentCommand = 0;
+    let assetsLoaded = false;
+    let terminalComplete = false;
+    
+    // Enhanced asset preloading function
+    function preloadAssets() {
+        const assets = [
+            // Additional CSS files that might not be in preload
+            '/assets/css/animate.min.min.css',
+            '/assets/css/fixes.min.css',
+            '/assets/css/Footer-Dark-icons.min.css',
+            '/assets/css/GridSystem-1.min.css',
+            // Font files
+            '/assets/fonts/fa-solid-900.woff2',
+            '/assets/fonts/fa-brands-400.woff2',
+            '/assets/fonts/fa-regular-400.woff2'
+        ];
+        
+        let loadedCount = 0;
+        const totalAssets = assets.length;
+        
+        function onAssetLoad() {
+            loadedCount++;
+            if (loadedCount === totalAssets) {
+                assetsLoaded = true;
+                checkReadyToRedirect();
+            }
+        }
+        
+        // Load additional assets
+        assets.forEach(assetUrl => {
+            const link = document.createElement('link');
+            link.rel = 'preload';
+            link.as = assetUrl.endsWith('.css') ? 'style' : 
+                     assetUrl.endsWith('.js') ? 'script' : 
+                     assetUrl.includes('/fonts/') ? 'font' : 'fetch';
+            if (link.as === 'font') {
+                link.crossOrigin = 'anonymous';
+            }
+            link.href = assetUrl;
+            link.onload = onAssetLoad;
+            link.onerror = onAssetLoad; // Count errors as loaded to prevent hanging
+            document.head.appendChild(link);
+        });
+        
+        // If no additional assets, mark as loaded
+        if (totalAssets === 0) {
+            assetsLoaded = true;
+            checkReadyToRedirect();
+        }
+    }
+    
+    function checkReadyToRedirect() {
+        if (assetsLoaded && terminalComplete) {
+            setTimeout(redirectToIndex, 200);
+        }
+    }
+    
+    function getCurrentTime() {
+        const now = new Date();
+        return `${now.getUTCFullYear()}-${String(now.getUTCMonth() + 1).padStart(2, '0')}-${String(now.getUTCDate()).padStart(2, '0')} ${String(now.getUTCHours()).padStart(2, '0')}:${String(now.getUTCMinutes()).padStart(2, '0')}:${String(now.getUTCSeconds()).padStart(2, '0')}`;
+    }
+    
+    function displayServerMessages(messages, callback) {
+        const timestamp = getCurrentTime();
+        
+        for (let i = 0; i < messages.length; i++) {
+            const messageDiv = document.createElement("div");
+            messageDiv.classList.add("loading-line");
+            messageDiv.innerHTML = i !== 0 ? "[" + timestamp + "] " + messages[i] : messages[i];
+            loadingScreen.appendChild(messageDiv);
+        }
+        
+        callback();
+    }
+    
+    function redirectToIndex() {
+        if (window.location.pathname === "/") {
+            window.location.reload();
+        } else {
+            window.location.href = "/";
+        }
+    }
+    
+    // Event listeners for manual redirect
+    window.addEventListener("keypress", redirectToIndex);
+    
+    if (window.innerWidth < 768) {
+        console.log("Screen width is less than 768px, allowing click to redirect");
+        window.addEventListener("click", redirectToIndex);
+    }
+    
+    function typeCommand(command, callback) {
+        const preDiv = document.createElement("div");
+        preDiv.classList.add("loading-pre");
+        preDiv.innerHTML = command.pre;
+        loadingScreen.appendChild(preDiv);
+        
+        const commandDiv = document.createElement("div");
+        commandDiv.classList.add("loading-line");
+        commandDiv.innerHTML = '└─<span class="blue">$</span> <span class="cursor"></span>';
+        loadingScreen.appendChild(commandDiv);
+        
+        let charIndex = 0;
+        const typeInterval = setInterval(() => {
+            commandDiv.removeChild(commandDiv.querySelector(".cursor"));
+            commandDiv.innerHTML += command.message[charIndex] + '<span class="cursor"></span>';
+            charIndex++;
+            
+            if (charIndex === command.message.length) {
+                commandDiv.removeChild(commandDiv.querySelector(".cursor"));
+                clearInterval(typeInterval);
+                callback();
+            }
+        }, 50);
+    }
+    
+    function runTerminalSimulation() {
+        if (currentCommand < commands.length) {
+            typeCommand(commands[currentCommand], () => {
+                currentCommand++;
+                setTimeout(runTerminalSimulation, 200);
+            });
+        } else {
+            displayServerMessages(serverMessages, () => {
+                terminalComplete = true;
+                checkReadyToRedirect();
+            });
+        }
+    }
+    
+    // Start the loading process
+    preloadAssets();
+    runTerminalSimulation();
+});
--- a/templates/assets/js/loading.min.js
+++ b/templates/assets/js/loading.min.js
@@ -1 +1 @@
-document.addEventListener("DOMContentLoaded",(function(){const n=document.getElementById("loading-screen"),e=[{pre:'┌──(<span class="blue">nathan@NWTux</span>)-[<span class="white">~</span>]',message:"cd Git"},{pre:'┌──(<span class="blue">nathan@NWTux</span>)-[<span class="white">~/Git</span>]',message:"cd Nathanwoodburn.github.io"},{pre:'┌──(<span class="blue">nathan@NWTux</span>)-[<span class="white">~/Git/Nathanwoodburn.github.io</span>]',message:"python3 main.py"}],t=["Starting server with 1 workers and 2 threads","+0000] [1] [INFO] Starting gunicorn 22.0.0","+0000] [1] [INFO] Listening at: http://0.0.0.0:5000 (1)","+0000] [1] [INFO] Using worker: gthread","+0000] [8] [INFO] Booting worker with pid: 8"];let a=0;function s(e,t){const a=function(){const n=new Date;return`${n.getUTCFullYear()}-${String(n.getUTCMonth()+1).padStart(2,"0")}-${String(n.getUTCDate()).padStart(2,"0")} ${String(n.getUTCHours()).padStart(2,"0")}:${String(n.getUTCMinutes()).padStart(2,"0")}:${String(n.getUTCSeconds()).padStart(2,"0")}`}();for(let t=0;t<e.length;t++){const s=document.createElement("div");s.classList.add("loading-line"),s.innerHTML=0!==t?"["+a+e[t]:e[t],n.appendChild(s)}t()}function i(){"/"===window.location.pathname?window.location.reload():window.location.href="/"}window.addEventListener("keypress",i);window.innerWidth<768&&(console.log("Screen width is less than 768px, allowing click to redirect"),window.addEventListener("click",i)),function r(){a<e.length?function(e,t){const a=document.createElement("div");a.classList.add("loading-pre"),a.innerHTML=e.pre,n.appendChild(a);const s=document.createElement("div");s.classList.add("loading-line"),s.innerHTML='└─<span class="blue">$</span> <span class="cursor"></span>',n.appendChild(s);let i=0;const r=setInterval((()=>{s.removeChild(s.querySelector(".cursor")),s.innerHTML+=e.message[i]+'<span class="cursor"></span>',i++,i===e.message.length&&(s.removeChild(s.querySelector(".cursor")),clearInterval(r),t())}),50)}(e[a],(()=>{a++,setTimeout(r,200)})):s(t,(()=>{setTimeout(i,200)}))}()}));
+document.addEventListener("DOMContentLoaded",(function(){const s=document.getElementById("loading-screen"),e=[{pre:'┌──(<span class="blue">nathan@NWTux</span>)-[<span class="white">~</span>]',message:"cd Git"},{pre:'┌──(<span class="blue">nathan@NWTux</span>)-[<span class="white">~/Git</span>]',message:"cd Nathanwoodburn.github.io"},{pre:'┌──(<span class="blue">nathan@NWTux</span>)-[<span class="white">~/Git/Nathanwoodburn.github.io</span>]',message:"python3 main.py"}],t=["Starting server with 1 workers and 2 threads","+0000] [1] [INFO] Starting gunicorn 22.0.0","+0000] [1] [INFO] Listening at: http://0.0.0.0:5000 (1)","+0000] [1] [INFO] Using worker: gthread","+0000] [8] [INFO] Booting worker with pid: 8"];let n=0,a=!1,i=!1;function r(){i&&setTimeout(l,200)}function o(e,t){const n=function(){const s=new Date;return`${s.getUTCFullYear()}-${String(s.getUTCMonth()+1).padStart(2,"0")}-${String(s.getUTCDate()).padStart(2,"0")} ${String(s.getUTCHours()).padStart(2,"0")}:${String(s.getUTCMinutes()).padStart(2,"0")}:${String(s.getUTCSeconds()).padStart(2,"0")}`}();for(let t=0;t<e.length;t++){const a=document.createElement("div");a.classList.add("loading-line"),a.innerHTML=0!==t?"["+n+"] "+e[t]:e[t],s.appendChild(a)}i=!0,t()}function l(){"/"===window.location.pathname?window.location.reload():window.location.href="/"}window.addEventListener("keypress",l),window.innerWidth<768&&(console.log("Screen width is less than 768px, allowing click to redirect"),window.addEventListener("click",l)),setTimeout((function(){const s=[{url:"/assets/fonts/fontawesome-all.min.css",type:"style"},{url:"/assets/fonts/font-awesome.min.css",type:"style"},{url:"/assets/fonts/ionicons.min.css",type:"style"},{url:"/assets/fonts/fontawesome5-overrides.min.css",type:"style"},{url:"/assets/css/index.min.css",type:"style"},{url:"/assets/css/swiper.min.css",type:"style"},{url:"/assets/css/animate.min.min.css",type:"style"},{url:"/assets/css/fixes.min.css",type:"style"},{url:"/assets/css/Footer-Dark-icons.min.css",type:"style"},{url:"/assets/css/GridSystem-1.min.css",type:"style"},{url:"/assets/js/hacker.min.js",type:"script"},{url:"/assets/js/downtime.min.js",type:"script"},{url:"/assets/js/pfp.min.js",type:"script"},{url:"/assets/js/sites.min.js",type:"script"},{url:"/assets/img/pfront.webp",type:"image"},{url:"/assets/img/profile.jpg",type:"image"},{url:"/assets/img/tilt.svg",type:"image"},{url:"/assets/img/bg/BlueMountains.jpg",type:"image"},{url:"/assets/img/wavesblack.svg",type:"image"}];let e=0;const t=s.length;function n(){e++,e===t&&(a=!0,r())}s.forEach((s=>{const e=document.createElement("link");e.rel="preload",e.as=s.type,e.href=s.url,"font"===s.type&&(e.crossOrigin="anonymous"),e.onload=n,e.onerror=n,document.head.appendChild(e)}))}),100),function a(){n<e.length?function(e,t){const n=document.createElement("div");n.classList.add("loading-pre"),n.innerHTML=e.pre,s.appendChild(n);const a=document.createElement("div");a.classList.add("loading-line"),a.innerHTML='└─<span class="blue">$</span> <span class="cursor"></span>',s.appendChild(a);let i=0;const r=setInterval((()=>{a.removeChild(a.querySelector(".cursor")),a.innerHTML+=e.message[i]+'<span class="cursor"></span>',i++,i===e.message.length&&(a.removeChild(a.querySelector(".cursor")),clearInterval(r),t())}),50)}(e[n],(()=>{n++,setTimeout(a,200)})):o(t,(()=>{r()}))}()}));
--- a/templates/assets/js/script.min.js
+++ b/templates/assets/js/script.min.js
@@ -1 +1 @@
-window.innerWidth<768&&[].slice.call(document.querySelectorAll("[data-bss-disabled-mobile]")).forEach((function(e){e.classList.remove("animated"),e.removeAttribute("data-bss-hover-animate"),e.removeAttribute("data-aos"),e.removeAttribute("data-bss-parallax-bg"),e.removeAttribute("data-bss-scroll-zoom")})),document.addEventListener("DOMContentLoaded",(function(){[].slice.call(document.querySelectorAll("[data-bss-hover-animate]")).forEach((function(e){e.addEventListener("mouseenter",(function(e){e.target.classList.add("animated",e.target.dataset.bssHoverAnimate)})),e.addEventListener("mouseleave",(function(e){e.target.classList.remove("animated",e.target.dataset.bssHoverAnimate)}))})),[].slice.call(document.querySelectorAll("[data-bss-tooltip]")).map((function(e){return new bootstrap.Tooltip(e)}))}),!1),function(){"use strict";var e=document.querySelector("#mainNav");if(e){var t=e.querySelector(".navbar-collapse");if(t){var a=new bootstrap.Collapse(t,{toggle:!1}),o=t.querySelectorAll("a");for(var n of o)n.addEventListener("click",(function(e){a.hide()}))}var r=function(){(void 0!==window.pageYOffset?window.pageYOffset:(document.documentElement||document.body.parentNode||document.body).scrollTop)>100?e.classList.add("navbar-shrink"):e.classList.remove("navbar-shrink")};r(),document.addEventListener("scroll",r)}}();
+window.innerWidth<768&&[].slice.call(document.querySelectorAll("[data-bss-disabled-mobile]")).forEach((function(e){e.classList.remove("animated"),e.removeAttribute("data-bss-hover-animate"),e.removeAttribute("data-aos"),e.removeAttribute("data-bss-parallax-bg"),e.removeAttribute("data-bss-scroll-zoom")})),document.addEventListener("DOMContentLoaded",(function(){[].slice.call(document.querySelectorAll("[data-bss-hover-animate]")).forEach((function(e){e.addEventListener("mouseenter",(function(e){e.target.classList.add("animated",e.target.dataset.bssHoverAnimate)})),e.addEventListener("mouseleave",(function(e){e.target.classList.remove("animated",e.target.dataset.bssHoverAnimate)}))})),[].slice.call(document.querySelectorAll("[data-bss-tooltip]")).map((function(e){return new bootstrap.Tooltip(e)}))}),!1);
--- a/templates/blog/blog.html
+++ b/templates/blog/blog.html
@@ -36,7 +36,9 @@ Find something interesting to read. Or maybe check one of my tutorials">
    <link rel="stylesheet" href="/assets/fonts/font-awesome.min.css">
    <link rel="stylesheet" href="/assets/fonts/ionicons.min.css">
    <link rel="stylesheet" href="/assets/css/styles.min.css">
+    <link rel="stylesheet" href="/assets/css/brand-reveal.min.css">
    <link rel="stylesheet" href="/assets/css/profile.min.css">
+    <link rel="stylesheet" href="/assets/css/Social-Icons.min.css">
 <link rel="me" href="https://mastodon.woodburn.au/@nathanwoodburn" />
 <script async src="https://umami.woodburn.au/script.js" data-website-id="6a55028e-aad3-481c-9a37-3e096ff75589"></script>
 </head>
@@ -144,6 +146,7 @@ Find something interesting to read. Or maybe check one of my tutorials">
    </footer>
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="/assets/js/script.min.js"></script>
+    <script src="/assets/js/grayscale.min.js"></script>
    <script src="/assets/js/hacker.min.js"></script>
 </body>

--- a/templates/blog/template.html
+++ b/templates/blog/template.html
@@ -37,7 +37,9 @@ Find something interesting to read. Or maybe check one of my tutorials">
    <link rel="stylesheet" href="/assets/fonts/ionicons.min.css">
    <link rel="stylesheet" href="/assets/css/styles.min.css">
    <link rel="stylesheet" href="/assets/css/blog.min.css">
+    <link rel="stylesheet" href="/assets/css/brand-reveal.min.css">
    <link rel="stylesheet" href="/assets/css/profile.min.css">
+    <link rel="stylesheet" href="/assets/css/Social-Icons.min.css">
 <link rel="me" href="https://mastodon.woodburn.au/@nathanwoodburn" />
 <script async src="https://umami.woodburn.au/script.js" data-website-id="6a55028e-aad3-481c-9a37-3e096ff75589"></script>
 </head>
@@ -142,6 +144,7 @@ Find something interesting to read. Or maybe check one of my tutorials">
    </footer>
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="/assets/js/script.min.js"></script>
+    <script src="/assets/js/grayscale.min.js"></script>
    <script src="/assets/js/hacker.min.js"></script>
 </body>

--- a/templates/donate.html
+++ b/templates/donate.html
@@ -34,7 +34,9 @@
    <link rel="stylesheet" href="/assets/fonts/font-awesome.min.css">
    <link rel="stylesheet" href="/assets/fonts/fontawesome5-overrides.min.css">
    <link rel="stylesheet" href="/assets/css/styles.min.css">
+    <link rel="stylesheet" href="/assets/css/brand-reveal.min.css">
    <link rel="stylesheet" href="/assets/css/profile.min.css">
+    <link rel="stylesheet" href="/assets/css/Social-Icons.min.css">
 <link rel="me" href="https://mastodon.woodburn.au/@nathanwoodburn" />
 <script async src="https://umami.woodburn.au/script.js" data-website-id="6a55028e-aad3-481c-9a37-3e096ff75589"></script>
 </head>
@@ -196,6 +198,7 @@
 </script>{{custom | safe}}
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="/assets/js/script.min.js"></script>
+    <script src="/assets/js/grayscale.min.js"></script>
    <script src="/assets/js/hacker.min.js"></script>
 </body>

--- a/templates/gitpgp.html
+++ b/templates/gitpgp.html
@@ -31,7 +31,9 @@
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Anonymous+Pro&amp;display=swap">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&amp;display=swap">
    <link rel="stylesheet" href="/assets/css/styles.min.css">
+    <link rel="stylesheet" href="/assets/css/brand-reveal.min.css">
    <link rel="stylesheet" href="/assets/css/profile.min.css">
+    <link rel="stylesheet" href="/assets/css/Social-Icons.min.css">
 <link rel="me" href="https://mastodon.woodburn.au/@nathanwoodburn" />
 <script async src="https://umami.woodburn.au/script.js" data-website-id="6a55028e-aad3-481c-9a37-3e096ff75589"></script>
 </head>
@@ -49,6 +51,7 @@
    <p style="margin-top: 3em;">All commits changing this page have been signed with my PGP key as shown on Keybase&nbsp;<a href="https://keybase.io/nathanwoodburn" target="_blank">https://keybase.io/nathanwoodburn</a></p>
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="/assets/js/script.min.js"></script>
+    <script src="/assets/js/grayscale.min.js"></script>
    <script src="/assets/js/hacker.min.js"></script>
 </body>

--- a/templates/index.html
+++ b/templates/index.html
@@ -43,8 +43,10 @@
    <link rel="stylesheet" href="/assets/fonts/ionicons.min.css">
    <link rel="stylesheet" href="/assets/fonts/fontawesome5-overrides.min.css">
    <link rel="stylesheet" href="/assets/css/styles.min.css">
+    <link rel="stylesheet" href="/assets/css/brand-reveal.min.css">
    <link rel="stylesheet" href="/assets/css/index.min.css">
    <link rel="stylesheet" href="/assets/css/profile.min.css">
+    <link rel="stylesheet" href="/assets/css/Social-Icons.min.css">
    <link rel="stylesheet" href="/assets/css/swiper.min.css">
 <link rel="me" href="https://mastodon.woodburn.au/@nathanwoodburn" />
 <script async src="https://umami.woodburn.au/script.js" data-website-id="6a55028e-aad3-481c-9a37-3e096ff75589"></script>
@@ -287,6 +289,7 @@ Check them out here!</blockquote><img class="img-fluid" src="/assets/img/pfront.
        </svg><span style="margin-left: 10px;font-family: 'Anonymous Pro', monospace;">{{time|safe}}</span></div>
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="/assets/js/script.min.js"></script>
+    <script src="/assets/js/grayscale.min.js"></script>
    <script src="/assets/js/hacker.min.js"></script>
    <script src="/assets/js/downtime.min.js"></script>
    <script src="/assets/js/pfp.min.js"></script>
--- a/templates/link.html
+++ b/templates/link.html
@@ -34,8 +34,10 @@
    <link rel="stylesheet" href="/assets/fonts/line-awesome.min.css">
    <link rel="stylesheet" href="/assets/css/styles.min.css">
    <link rel="stylesheet" href="/assets/css/animate.min.min.css">
+    <link rel="stylesheet" href="/assets/css/brand-reveal.min.css">
    <link rel="stylesheet" href="/assets/css/GridSystem-1.min.css">
    <link rel="stylesheet" href="/assets/css/profile.min.css">
+    <link rel="stylesheet" href="/assets/css/Social-Icons.min.css">
 <link rel="me" href="https://mastodon.woodburn.au/@nathanwoodburn" />
 <script async src="https://umami.woodburn.au/script.js" data-website-id="6a55028e-aad3-481c-9a37-3e096ff75589"></script>
 </head>
@@ -102,6 +104,7 @@
    </div>
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="/assets/js/script.min.js"></script>
+    <script src="/assets/js/grayscale.min.js"></script>
    <script src="/assets/js/hacker.min.js"></script>
 </body>

--- a/templates/loading.html
+++ b/templates/loading.html
@@ -32,7 +32,6 @@
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&amp;display=swap">
    <link rel="stylesheet" href="/assets/css/styles.min.css">
    <link rel="stylesheet" href="/assets/css/loading.min.css">
-    <link rel="stylesheet" href="/assets/css/profile.min.css">
 <link rel="me" href="https://mastodon.woodburn.au/@nathanwoodburn" />
 <script async src="https://umami.woodburn.au/script.js" data-website-id="6a55028e-aad3-481c-9a37-3e096ff75589"></script>
 </head>
--- a/templates/now.html
+++ b/templates/now.html
@@ -32,7 +32,9 @@
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Anonymous+Pro&amp;display=swap">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&amp;display=swap">
    <link rel="stylesheet" href="/assets/css/styles.min.css">
+    <link rel="stylesheet" href="/assets/css/brand-reveal.min.css">
    <link rel="stylesheet" href="/assets/css/profile.min.css">
+    <link rel="stylesheet" href="/assets/css/Social-Icons.min.css">
 <link rel="me" href="https://mastodon.woodburn.au/@nathanwoodburn" />
 <script async src="https://umami.woodburn.au/script.js" data-website-id="6a55028e-aad3-481c-9a37-3e096ff75589"></script>
 </head>
@@ -40,6 +42,7 @@
 <body>
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="/assets/js/script.min.js"></script>
+    <script src="/assets/js/grayscale.min.js"></script>
    <script src="/assets/js/hacker.min.js"></script>
 </body>

--- a/templates/now/24_02_18.html
+++ b/templates/now/24_02_18.html
@@ -36,8 +36,10 @@ Find out what I've been up to in the last week">
    <link rel="stylesheet" href="/assets/fonts/font-awesome.min.css">
    <link rel="stylesheet" href="/assets/fonts/ionicons.min.css">
    <link rel="stylesheet" href="/assets/css/styles.min.css">
+    <link rel="stylesheet" href="/assets/css/brand-reveal.min.css">
    <link rel="stylesheet" href="/assets/css/now.min.css">
    <link rel="stylesheet" href="/assets/css/profile.min.css">
+    <link rel="stylesheet" href="/assets/css/Social-Icons.min.css">
 <link rel="me" href="https://mastodon.woodburn.au/@nathanwoodburn" />
 <script async src="https://umami.woodburn.au/script.js" data-website-id="6a55028e-aad3-481c-9a37-3e096ff75589"></script>
 </head>
@@ -162,6 +164,7 @@ Find out what I've been up to in the last week">
    </section>
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="/assets/js/script.min.js"></script>
+    <script src="/assets/js/grayscale.min.js"></script>
    <script src="/assets/js/hacker.min.js"></script>
 </body>

--- a/templates/now/24_02_25.html
+++ b/templates/now/24_02_25.html
@@ -36,8 +36,10 @@ Find out what I've been up to in the last week">
    <link rel="stylesheet" href="/assets/fonts/font-awesome.min.css">
    <link rel="stylesheet" href="/assets/fonts/ionicons.min.css">
    <link rel="stylesheet" href="/assets/css/styles.min.css">
+    <link rel="stylesheet" href="/assets/css/brand-reveal.min.css">
    <link rel="stylesheet" href="/assets/css/now.min.css">
    <link rel="stylesheet" href="/assets/css/profile.min.css">
+    <link rel="stylesheet" href="/assets/css/Social-Icons.min.css">
 <link rel="me" href="https://mastodon.woodburn.au/@nathanwoodburn" />
 <script async src="https://umami.woodburn.au/script.js" data-website-id="6a55028e-aad3-481c-9a37-3e096ff75589"></script>
 </head>
@@ -129,6 +131,7 @@ Find out what I've been up to in the last week">
    </section>
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="/assets/js/script.min.js"></script>
+    <script src="/assets/js/grayscale.min.js"></script>
    <script src="/assets/js/hacker.min.js"></script>
 </body>

--- a/templates/now/24_04_19.html
+++ b/templates/now/24_04_19.html
@@ -36,8 +36,10 @@ Find out what I've been up to in the last week">
    <link rel="stylesheet" href="/assets/fonts/font-awesome.min.css">
    <link rel="stylesheet" href="/assets/fonts/ionicons.min.css">
    <link rel="stylesheet" href="/assets/css/styles.min.css">
+    <link rel="stylesheet" href="/assets/css/brand-reveal.min.css">
    <link rel="stylesheet" href="/assets/css/now.min.css">
    <link rel="stylesheet" href="/assets/css/profile.min.css">
+    <link rel="stylesheet" href="/assets/css/Social-Icons.min.css">
 <link rel="me" href="https://mastodon.woodburn.au/@nathanwoodburn" />
 <script async src="https://umami.woodburn.au/script.js" data-website-id="6a55028e-aad3-481c-9a37-3e096ff75589"></script>
 </head>
@@ -142,6 +144,7 @@ Find out what I've been up to in the last week">
    </section>
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="/assets/js/script.min.js"></script>
+    <script src="/assets/js/grayscale.min.js"></script>
    <script src="/assets/js/hacker.min.js"></script>
 </body>

--- a/templates/now/24_05_20.html
+++ b/templates/now/24_05_20.html
@@ -36,7 +36,9 @@ Find out what I've been up to in the last week">
    <link rel="stylesheet" href="/assets/fonts/font-awesome.min.css">
    <link rel="stylesheet" href="/assets/fonts/ionicons.min.css">
    <link rel="stylesheet" href="/assets/css/styles.min.css">
+    <link rel="stylesheet" href="/assets/css/brand-reveal.min.css">
    <link rel="stylesheet" href="/assets/css/profile.min.css">
+    <link rel="stylesheet" href="/assets/css/Social-Icons.min.css">
 <link rel="me" href="https://mastodon.woodburn.au/@nathanwoodburn" />
 <script async src="https://umami.woodburn.au/script.js" data-website-id="6a55028e-aad3-481c-9a37-3e096ff75589"></script>
 </head>
@@ -111,6 +113,7 @@ Find out what I've been up to in the last week">
    </section>
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="/assets/js/script.min.js"></script>
+    <script src="/assets/js/grayscale.min.js"></script>
    <script src="/assets/js/hacker.min.js"></script>
 </body>

--- a/templates/now/24_05_28.html
+++ b/templates/now/24_05_28.html
@@ -36,7 +36,9 @@ Find out what I've been up to in the last week">
    <link rel="stylesheet" href="/assets/fonts/font-awesome.min.css">
    <link rel="stylesheet" href="/assets/fonts/ionicons.min.css">
    <link rel="stylesheet" href="/assets/css/styles.min.css">
+    <link rel="stylesheet" href="/assets/css/brand-reveal.min.css">
    <link rel="stylesheet" href="/assets/css/profile.min.css">
+    <link rel="stylesheet" href="/assets/css/Social-Icons.min.css">
 <link rel="me" href="https://mastodon.woodburn.au/@nathanwoodburn" />
 <script async src="https://umami.woodburn.au/script.js" data-website-id="6a55028e-aad3-481c-9a37-3e096ff75589"></script>
 </head>
@@ -111,6 +113,7 @@ Find out what I've been up to in the last week">
    </section>
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="/assets/js/script.min.js"></script>
+    <script src="/assets/js/grayscale.min.js"></script>
    <script src="/assets/js/hacker.min.js"></script>
 </body>

--- a/templates/now/24_06_06.html
+++ b/templates/now/24_06_06.html
@@ -36,7 +36,9 @@ Find out what I've been up to in the last week">
    <link rel="stylesheet" href="/assets/fonts/font-awesome.min.css">
    <link rel="stylesheet" href="/assets/fonts/ionicons.min.css">
    <link rel="stylesheet" href="/assets/css/styles.min.css">
+    <link rel="stylesheet" href="/assets/css/brand-reveal.min.css">
    <link rel="stylesheet" href="/assets/css/profile.min.css">
+    <link rel="stylesheet" href="/assets/css/Social-Icons.min.css">
 <link rel="me" href="https://mastodon.woodburn.au/@nathanwoodburn" />
 <script async src="https://umami.woodburn.au/script.js" data-website-id="6a55028e-aad3-481c-9a37-3e096ff75589"></script>
 </head>
@@ -127,6 +129,7 @@ Find out what I've been up to in the last week">
    </footer>
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="/assets/js/script.min.js"></script>
+    <script src="/assets/js/grayscale.min.js"></script>
    <script src="/assets/js/hacker.min.js"></script>
 </body>

--- a/templates/now/24_06_17.html
+++ b/templates/now/24_06_17.html
@@ -36,7 +36,9 @@ Find out what I've been up to in the last week">
    <link rel="stylesheet" href="/assets/fonts/font-awesome.min.css">
    <link rel="stylesheet" href="/assets/fonts/ionicons.min.css">
    <link rel="stylesheet" href="/assets/css/styles.min.css">
+    <link rel="stylesheet" href="/assets/css/brand-reveal.min.css">
    <link rel="stylesheet" href="/assets/css/profile.min.css">
+    <link rel="stylesheet" href="/assets/css/Social-Icons.min.css">
 <link rel="me" href="https://mastodon.woodburn.au/@nathanwoodburn" />
 <script async src="https://umami.woodburn.au/script.js" data-website-id="6a55028e-aad3-481c-9a37-3e096ff75589"></script>
 </head>
@@ -127,6 +129,7 @@ Find out what I've been up to in the last week">
    </footer>
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="/assets/js/script.min.js"></script>
+    <script src="/assets/js/grayscale.min.js"></script>
    <script src="/assets/js/hacker.min.js"></script>
 </body>

--- a/templates/now/24_06_24.html
+++ b/templates/now/24_06_24.html
@@ -36,7 +36,9 @@ Find out what I've been up to in the last week">
    <link rel="stylesheet" href="/assets/fonts/font-awesome.min.css">
    <link rel="stylesheet" href="/assets/fonts/ionicons.min.css">
    <link rel="stylesheet" href="/assets/css/styles.min.css">
+    <link rel="stylesheet" href="/assets/css/brand-reveal.min.css">
    <link rel="stylesheet" href="/assets/css/profile.min.css">
+    <link rel="stylesheet" href="/assets/css/Social-Icons.min.css">
 <link rel="me" href="https://mastodon.woodburn.au/@nathanwoodburn" />
 <script async src="https://umami.woodburn.au/script.js" data-website-id="6a55028e-aad3-481c-9a37-3e096ff75589"></script>
 </head>
@@ -127,6 +129,7 @@ Find out what I've been up to in the last week">
    </footer>
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="/assets/js/script.min.js"></script>
+    <script src="/assets/js/grayscale.min.js"></script>
    <script src="/assets/js/hacker.min.js"></script>
 </body>

--- a/templates/now/24_07_15.html
+++ b/templates/now/24_07_15.html
@@ -36,7 +36,9 @@ Find out what I've been up to in the last week">
    <link rel="stylesheet" href="/assets/fonts/font-awesome.min.css">
    <link rel="stylesheet" href="/assets/fonts/ionicons.min.css">
    <link rel="stylesheet" href="/assets/css/styles.min.css">
+    <link rel="stylesheet" href="/assets/css/brand-reveal.min.css">
    <link rel="stylesheet" href="/assets/css/profile.min.css">
+    <link rel="stylesheet" href="/assets/css/Social-Icons.min.css">
 <link rel="me" href="https://mastodon.woodburn.au/@nathanwoodburn" />
 <script async src="https://umami.woodburn.au/script.js" data-website-id="6a55028e-aad3-481c-9a37-3e096ff75589"></script>
 </head>
@@ -127,6 +129,7 @@ Find out what I've been up to in the last week">
    </footer>
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="/assets/js/script.min.js"></script>
+    <script src="/assets/js/grayscale.min.js"></script>
    <script src="/assets/js/hacker.min.js"></script>
 </body>

--- a/templates/now/24_08_05.html
+++ b/templates/now/24_08_05.html
@@ -36,7 +36,9 @@ Find out what I've been up to in the last week">
    <link rel="stylesheet" href="/assets/fonts/font-awesome.min.css">
    <link rel="stylesheet" href="/assets/fonts/ionicons.min.css">
    <link rel="stylesheet" href="/assets/css/styles.min.css">
+    <link rel="stylesheet" href="/assets/css/brand-reveal.min.css">
    <link rel="stylesheet" href="/assets/css/profile.min.css">
+    <link rel="stylesheet" href="/assets/css/Social-Icons.min.css">
 <link rel="me" href="https://mastodon.woodburn.au/@nathanwoodburn" />
 <script async src="https://umami.woodburn.au/script.js" data-website-id="6a55028e-aad3-481c-9a37-3e096ff75589"></script>
 </head>
@@ -156,6 +158,7 @@ Find out what I've been up to in the last week">
    </footer>
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="/assets/js/script.min.js"></script>
+    <script src="/assets/js/grayscale.min.js"></script>
    <script src="/assets/js/hacker.min.js"></script>
 </body>

--- a/templates/now/24_09_07.html
+++ b/templates/now/24_09_07.html
@@ -36,7 +36,9 @@ Find out what I've been up to in the last week">
    <link rel="stylesheet" href="/assets/fonts/font-awesome.min.css">
    <link rel="stylesheet" href="/assets/fonts/ionicons.min.css">
    <link rel="stylesheet" href="/assets/css/styles.min.css">
+    <link rel="stylesheet" href="/assets/css/brand-reveal.min.css">
    <link rel="stylesheet" href="/assets/css/profile.min.css">
+    <link rel="stylesheet" href="/assets/css/Social-Icons.min.css">
 <link rel="me" href="https://mastodon.woodburn.au/@nathanwoodburn" />
 <script async src="https://umami.woodburn.au/script.js" data-website-id="6a55028e-aad3-481c-9a37-3e096ff75589"></script>
 </head>
@@ -164,6 +166,7 @@ Find out what I've been up to in the last week">
    </footer>
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="/assets/js/script.min.js"></script>
+    <script src="/assets/js/grayscale.min.js"></script>
    <script src="/assets/js/hacker.min.js"></script>
 </body>

--- a/templates/now/24_09_27.html
+++ b/templates/now/24_09_27.html
@@ -36,7 +36,9 @@ Find out what I've been up to in the last week">
    <link rel="stylesheet" href="/assets/fonts/font-awesome.min.css">
    <link rel="stylesheet" href="/assets/fonts/ionicons.min.css">
    <link rel="stylesheet" href="/assets/css/styles.min.css">
+    <link rel="stylesheet" href="/assets/css/brand-reveal.min.css">
    <link rel="stylesheet" href="/assets/css/profile.min.css">
+    <link rel="stylesheet" href="/assets/css/Social-Icons.min.css">
 <link rel="me" href="https://mastodon.woodburn.au/@nathanwoodburn" />
 <script async src="https://umami.woodburn.au/script.js" data-website-id="6a55028e-aad3-481c-9a37-3e096ff75589"></script>
 </head>
@@ -162,6 +164,7 @@ Find out what I've been up to in the last week">
    </footer>
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="/assets/js/script.min.js"></script>
+    <script src="/assets/js/grayscale.min.js"></script>
    <script src="/assets/js/hacker.min.js"></script>
 </body>

--- a/templates/now/24_10_07.html
+++ b/templates/now/24_10_07.html
@@ -36,7 +36,9 @@ Find out what I've been up to in the last week">
    <link rel="stylesheet" href="/assets/fonts/font-awesome.min.css">
    <link rel="stylesheet" href="/assets/fonts/ionicons.min.css">
    <link rel="stylesheet" href="/assets/css/styles.min.css">
+    <link rel="stylesheet" href="/assets/css/brand-reveal.min.css">
    <link rel="stylesheet" href="/assets/css/profile.min.css">
+    <link rel="stylesheet" href="/assets/css/Social-Icons.min.css">
 <link rel="me" href="https://mastodon.woodburn.au/@nathanwoodburn" />
 <script async src="https://umami.woodburn.au/script.js" data-website-id="6a55028e-aad3-481c-9a37-3e096ff75589"></script>
 </head>
@@ -174,6 +176,7 @@ Find out what I've been up to in the last week">
    </footer>
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="/assets/js/script.min.js"></script>
+    <script src="/assets/js/grayscale.min.js"></script>
    <script src="/assets/js/hacker.min.js"></script>
 </body>

--- a/templates/now/24_10_15.html
+++ b/templates/now/24_10_15.html
@@ -36,7 +36,9 @@ Find out what I've been up to in the last week">
    <link rel="stylesheet" href="/assets/fonts/font-awesome.min.css">
    <link rel="stylesheet" href="/assets/fonts/ionicons.min.css">
    <link rel="stylesheet" href="/assets/css/styles.min.css">
+    <link rel="stylesheet" href="/assets/css/brand-reveal.min.css">
    <link rel="stylesheet" href="/assets/css/profile.min.css">
+    <link rel="stylesheet" href="/assets/css/Social-Icons.min.css">
 <link rel="me" href="https://mastodon.woodburn.au/@nathanwoodburn" />
 <script async src="https://umami.woodburn.au/script.js" data-website-id="6a55028e-aad3-481c-9a37-3e096ff75589"></script>
 </head>
@@ -156,6 +158,7 @@ Find out what I've been up to in the last week">
    </footer>
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="/assets/js/script.min.js"></script>
+    <script src="/assets/js/grayscale.min.js"></script>
    <script src="/assets/js/hacker.min.js"></script>
 </body>

--- a/templates/now/24_10_22.html
+++ b/templates/now/24_10_22.html
@@ -36,7 +36,9 @@ Find out what I've been up to in the last week">
    <link rel="stylesheet" href="/assets/fonts/font-awesome.min.css">
    <link rel="stylesheet" href="/assets/fonts/ionicons.min.css">
    <link rel="stylesheet" href="/assets/css/styles.min.css">
+    <link rel="stylesheet" href="/assets/css/brand-reveal.min.css">
    <link rel="stylesheet" href="/assets/css/profile.min.css">
+    <link rel="stylesheet" href="/assets/css/Social-Icons.min.css">
 <link rel="me" href="https://mastodon.woodburn.au/@nathanwoodburn" />
 <script async src="https://umami.woodburn.au/script.js" data-website-id="6a55028e-aad3-481c-9a37-3e096ff75589"></script>
 </head>
@@ -156,6 +158,7 @@ Find out what I've been up to in the last week">
    </footer>
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="/assets/js/script.min.js"></script>
+    <script src="/assets/js/grayscale.min.js"></script>
    <script src="/assets/js/hacker.min.js"></script>
 </body>

--- a/templates/now/24_12_19.html
+++ b/templates/now/24_12_19.html
@@ -36,7 +36,9 @@ Find out what I've been up to in the last week">
    <link rel="stylesheet" href="/assets/fonts/font-awesome.min.css">
    <link rel="stylesheet" href="/assets/fonts/ionicons.min.css">
    <link rel="stylesheet" href="/assets/css/styles.min.css">
+    <link rel="stylesheet" href="/assets/css/brand-reveal.min.css">
    <link rel="stylesheet" href="/assets/css/profile.min.css">
+    <link rel="stylesheet" href="/assets/css/Social-Icons.min.css">
 <link rel="me" href="https://mastodon.woodburn.au/@nathanwoodburn" />
 <script async src="https://umami.woodburn.au/script.js" data-website-id="6a55028e-aad3-481c-9a37-3e096ff75589"></script>
 </head>
@@ -156,6 +158,7 @@ Find out what I've been up to in the last week">
    </footer>
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="/assets/js/script.min.js"></script>
+    <script src="/assets/js/grayscale.min.js"></script>
    <script src="/assets/js/hacker.min.js"></script>
 </body>

--- a/templates/now/25_01_01.html
+++ b/templates/now/25_01_01.html
@@ -36,7 +36,9 @@ Find out what I've been up to in the last week">
    <link rel="stylesheet" href="/assets/fonts/font-awesome.min.css">
    <link rel="stylesheet" href="/assets/fonts/ionicons.min.css">
    <link rel="stylesheet" href="/assets/css/styles.min.css">
+    <link rel="stylesheet" href="/assets/css/brand-reveal.min.css">
    <link rel="stylesheet" href="/assets/css/profile.min.css">
+    <link rel="stylesheet" href="/assets/css/Social-Icons.min.css">
 <link rel="me" href="https://mastodon.woodburn.au/@nathanwoodburn" />
 <script async src="https://umami.woodburn.au/script.js" data-website-id="6a55028e-aad3-481c-9a37-3e096ff75589"></script>
 </head>
@@ -162,6 +164,7 @@ Find out what I've been up to in the last week">
    </footer>
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="/assets/js/script.min.js"></script>
+    <script src="/assets/js/grayscale.min.js"></script>
    <script src="/assets/js/hacker.min.js"></script>
 </body>

--- a/templates/now/25_01_30.html
+++ b/templates/now/25_01_30.html
@@ -36,7 +36,9 @@ Find out what I've been up to in the last week">
    <link rel="stylesheet" href="/assets/fonts/font-awesome.min.css">
    <link rel="stylesheet" href="/assets/fonts/ionicons.min.css">
    <link rel="stylesheet" href="/assets/css/styles.min.css">
+    <link rel="stylesheet" href="/assets/css/brand-reveal.min.css">
    <link rel="stylesheet" href="/assets/css/profile.min.css">
+    <link rel="stylesheet" href="/assets/css/Social-Icons.min.css">
 <link rel="me" href="https://mastodon.woodburn.au/@nathanwoodburn" />
 <script async src="https://umami.woodburn.au/script.js" data-website-id="6a55028e-aad3-481c-9a37-3e096ff75589"></script>
 </head>
@@ -156,6 +158,7 @@ Find out what I've been up to in the last week">
    </footer>
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="/assets/js/script.min.js"></script>
+    <script src="/assets/js/grayscale.min.js"></script>
    <script src="/assets/js/hacker.min.js"></script>
 </body>

--- a/templates/now/25_03_27.html
+++ b/templates/now/25_03_27.html
@@ -36,7 +36,9 @@ Find out what I've been up to in the last week">
    <link rel="stylesheet" href="/assets/fonts/font-awesome.min.css">
    <link rel="stylesheet" href="/assets/fonts/ionicons.min.css">
    <link rel="stylesheet" href="/assets/css/styles.min.css">
+    <link rel="stylesheet" href="/assets/css/brand-reveal.min.css">
    <link rel="stylesheet" href="/assets/css/profile.min.css">
+    <link rel="stylesheet" href="/assets/css/Social-Icons.min.css">
 <link rel="me" href="https://mastodon.woodburn.au/@nathanwoodburn" />
 <script async src="https://umami.woodburn.au/script.js" data-website-id="6a55028e-aad3-481c-9a37-3e096ff75589"></script>
 </head>
@@ -156,6 +158,7 @@ Find out what I've been up to in the last week">
    </footer>
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="/assets/js/script.min.js"></script>
+    <script src="/assets/js/grayscale.min.js"></script>
    <script src="/assets/js/hacker.min.js"></script>
 </body>

--- a/templates/now/25_05_28.html
+++ b/templates/now/25_05_28.html
@@ -36,7 +36,9 @@ Find out what I've been up to in the last week">
    <link rel="stylesheet" href="/assets/fonts/font-awesome.min.css">
    <link rel="stylesheet" href="/assets/fonts/ionicons.min.css">
    <link rel="stylesheet" href="/assets/css/styles.min.css">
+    <link rel="stylesheet" href="/assets/css/brand-reveal.min.css">
    <link rel="stylesheet" href="/assets/css/profile.min.css">
+    <link rel="stylesheet" href="/assets/css/Social-Icons.min.css">
 <link rel="me" href="https://mastodon.woodburn.au/@nathanwoodburn" />
 <script async src="https://umami.woodburn.au/script.js" data-website-id="6a55028e-aad3-481c-9a37-3e096ff75589"></script>
 </head>
@@ -162,6 +164,7 @@ Find out what I've been up to in the last week">
    </footer>
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="/assets/js/script.min.js"></script>
+    <script src="/assets/js/grayscale.min.js"></script>
    <script src="/assets/js/hacker.min.js"></script>
 </body>

--- a/templates/now/25_06_19.html
+++ b/templates/now/25_06_19.html
@@ -36,7 +36,9 @@ Find out what I've been up to in the last week">
    <link rel="stylesheet" href="/assets/fonts/font-awesome.min.css">
    <link rel="stylesheet" href="/assets/fonts/ionicons.min.css">
    <link rel="stylesheet" href="/assets/css/styles.min.css">
+    <link rel="stylesheet" href="/assets/css/brand-reveal.min.css">
    <link rel="stylesheet" href="/assets/css/profile.min.css">
+    <link rel="stylesheet" href="/assets/css/Social-Icons.min.css">
 <link rel="me" href="https://mastodon.woodburn.au/@nathanwoodburn" />
 <script async src="https://umami.woodburn.au/script.js" data-website-id="6a55028e-aad3-481c-9a37-3e096ff75589"></script>
 </head>
@@ -174,6 +176,7 @@ Find out what I've been up to in the last week">
    </footer>
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="/assets/js/script.min.js"></script>
+    <script src="/assets/js/grayscale.min.js"></script>
    <script src="/assets/js/hacker.min.js"></script>
 </body>

--- a/templates/now/old.html
+++ b/templates/now/old.html
@@ -36,8 +36,10 @@ Find out what I've been up to in the last week">
    <link rel="stylesheet" href="/assets/fonts/font-awesome.min.css">
    <link rel="stylesheet" href="/assets/fonts/ionicons.min.css">
    <link rel="stylesheet" href="/assets/css/styles.min.css">
+    <link rel="stylesheet" href="/assets/css/brand-reveal.min.css">
    <link rel="stylesheet" href="/assets/css/now.min.css">
    <link rel="stylesheet" href="/assets/css/profile.min.css">
+    <link rel="stylesheet" href="/assets/css/Social-Icons.min.css">
 <link rel="me" href="https://mastodon.woodburn.au/@nathanwoodburn" />
 <script async src="https://umami.woodburn.au/script.js" data-website-id="6a55028e-aad3-481c-9a37-3e096ff75589"></script>
 </head>
@@ -105,6 +107,7 @@ Find out what I've been up to in the last week">
    </section>
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="/assets/js/script.min.js"></script>
+    <script src="/assets/js/grayscale.min.js"></script>
    <script src="/assets/js/hacker.min.js"></script>
 </body>

--- a/templates/now/template.html
+++ b/templates/now/template.html
@@ -36,8 +36,10 @@ Find out what I've been up to in the last little bit">
    <link rel="stylesheet" href="/assets/fonts/font-awesome.min.css">
    <link rel="stylesheet" href="/assets/fonts/ionicons.min.css">
    <link rel="stylesheet" href="/assets/css/styles.min.css">
+    <link rel="stylesheet" href="/assets/css/brand-reveal.min.css">
    <link rel="stylesheet" href="/assets/css/now.min.css">
    <link rel="stylesheet" href="/assets/css/profile.min.css">
+    <link rel="stylesheet" href="/assets/css/Social-Icons.min.css">
 <link rel="me" href="https://mastodon.woodburn.au/@nathanwoodburn" />
 <script async src="https://umami.woodburn.au/script.js" data-website-id="6a55028e-aad3-481c-9a37-3e096ff75589"></script>
 </head>
@@ -151,6 +153,7 @@ Find out what I've been up to in the last little bit">
    </footer>
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="/assets/js/script.min.js"></script>
+    <script src="/assets/js/grayscale.min.js"></script>
    <script src="/assets/js/hacker.min.js"></script>
 </body>

--- a/templates/pgp.html
+++ b/templates/pgp.html
@@ -31,7 +31,9 @@
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Anonymous+Pro&amp;display=swap">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&amp;display=swap">
    <link rel="stylesheet" href="/assets/css/styles.min.css">
+    <link rel="stylesheet" href="/assets/css/brand-reveal.min.css">
    <link rel="stylesheet" href="/assets/css/profile.min.css">
+    <link rel="stylesheet" href="/assets/css/Social-Icons.min.css">
 <link rel="me" href="https://mastodon.woodburn.au/@nathanwoodburn" />
 <script async src="https://umami.woodburn.au/script.js" data-website-id="6a55028e-aad3-481c-9a37-3e096ff75589"></script>
 </head>
@@ -40,6 +42,7 @@
    <p style="margin-top: 3em;">This key's fingerprint is&nbsp;203B000478AD0EF1 (or&nbsp;1C7AAF75F5333B3E484940B7203B000478AD0EF1)<br>All commits changing pgp pages have been signed with my PGP key as shown on Keybase&nbsp;<a href="https://keybase.io/nathanwoodburn" target="_blank">https://keybase.io/nathanwoodburn</a></p>
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="/assets/js/script.min.js"></script>
+    <script src="/assets/js/grayscale.min.js"></script>
    <script src="/assets/js/hacker.min.js"></script>
 </body>

--- a/templates/podcast.html
+++ b/templates/podcast.html
@@ -31,8 +31,10 @@
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Anonymous+Pro&amp;display=swap">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&amp;display=swap">
    <link rel="stylesheet" href="/assets/css/styles.min.css">
+    <link rel="stylesheet" href="/assets/css/brand-reveal.min.css">
    <link rel="stylesheet" href="/assets/css/podcast.min.css">
    <link rel="stylesheet" href="/assets/css/profile.min.css">
+    <link rel="stylesheet" href="/assets/css/Social-Icons.min.css">
 <link rel="me" href="https://mastodon.woodburn.au/@nathanwoodburn" />
 <script async src="https://umami.woodburn.au/script.js" data-website-id="6a55028e-aad3-481c-9a37-3e096ff75589"></script>
 </head>
@@ -80,6 +82,7 @@
    </footer>
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="/assets/js/script.min.js"></script>
+    <script src="/assets/js/grayscale.min.js"></script>
    <script src="/assets/js/hacker-podcast.min.js"></script>
 </body>

--- a/templates/projects.html
+++ b/templates/projects.html
@@ -32,7 +32,9 @@
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&amp;display=swap">
    <link rel="stylesheet" href="/assets/fonts/font-awesome.min.css">
    <link rel="stylesheet" href="/assets/css/styles.min.css">
+    <link rel="stylesheet" href="/assets/css/brand-reveal.min.css">
    <link rel="stylesheet" href="/assets/css/profile.min.css">
+    <link rel="stylesheet" href="/assets/css/Social-Icons.min.css">
 <link rel="me" href="https://mastodon.woodburn.au/@nathanwoodburn" />
 <script async src="https://umami.woodburn.au/script.js" data-website-id="6a55028e-aad3-481c-9a37-3e096ff75589"></script>
 </head>
@@ -83,6 +85,7 @@
    </footer>{{handshake_scripts | safe}}
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="/assets/js/script.min.js"></script>
+    <script src="/assets/js/grayscale.min.js"></script>
    <script src="/assets/js/hacker.min.js"></script>
 </body>

--- a/templates/resume.html
+++ b/templates/resume.html
@@ -30,8 +30,10 @@
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cabin:700&amp;display=swap">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans&amp;display=swap">
    <link rel="stylesheet" href="/assets/css/styles.min.css">
+    <link rel="stylesheet" href="/assets/css/brand-reveal.min.css">
    <link rel="stylesheet" href="/assets/css/Footer-Dark-icons.min.css">
    <link rel="stylesheet" href="/assets/css/resume.min.css">
+    <link rel="stylesheet" href="/assets/css/Social-Icons.min.css">
 <link rel="me" href="https://mastodon.woodburn.au/@nathanwoodburn" />
 <script async src="https://umami.woodburn.au/script.js" data-website-id="6a55028e-aad3-481c-9a37-3e096ff75589"></script>
 </head>
@@ -262,6 +264,7 @@
    </footer>
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="/assets/js/script.min.js"></script>
+    <script src="/assets/js/grayscale.min.js"></script>
 </body>

 </html>
--- a/templates/servers.html
+++ b/templates/servers.html
@@ -31,7 +31,9 @@
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Anonymous+Pro&amp;display=swap">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&amp;display=swap">
    <link rel="stylesheet" href="/assets/css/styles.min.css">
+    <link rel="stylesheet" href="/assets/css/brand-reveal.min.css">
    <link rel="stylesheet" href="/assets/css/profile.min.css">
+    <link rel="stylesheet" href="/assets/css/Social-Icons.min.css">
 <link rel="me" href="https://mastodon.woodburn.au/@nathanwoodburn" />
 <script async src="https://umami.woodburn.au/script.js" data-website-id="6a55028e-aad3-481c-9a37-3e096ff75589"></script>
 </head>
@@ -250,6 +252,7 @@
    </footer>{{handshake_scripts | safe}}
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="/assets/js/script.min.js"></script>
+    <script src="/assets/js/grayscale.min.js"></script>
    <script src="/assets/js/hacker.min.js"></script>
 </body>

--- a/templates/signalQR.html
+++ b/templates/signalQR.html
@@ -31,7 +31,9 @@
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Anonymous+Pro&amp;display=swap">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&amp;display=swap">
    <link rel="stylesheet" href="/assets/css/styles.min.css">
+    <link rel="stylesheet" href="/assets/css/brand-reveal.min.css">
    <link rel="stylesheet" href="/assets/css/profile.min.css">
+    <link rel="stylesheet" href="/assets/css/Social-Icons.min.css">
 <link rel="me" href="https://mastodon.woodburn.au/@nathanwoodburn" />
 <script async src="https://umami.woodburn.au/script.js" data-website-id="6a55028e-aad3-481c-9a37-3e096ff75589"></script>
 </head>
@@ -40,6 +42,7 @@
    <div class="text-center" style="margin-top: 20px;"><img src="/assets/img/signalQR.jpg" width="470" height="547"><span class="fs-2" style="display: block;">Create a chat with my username or<br>scan this QR code on your phone<br>to chat with me on signal</span></div>
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="/assets/js/script.min.js"></script>
+    <script src="/assets/js/grayscale.min.js"></script>
    <script src="/assets/js/hacker.min.js"></script>
 </body>
				`@@ -0,0 +1 @@`
				.social-icons{color:#313437;background-color:#fff;padding:70px 0}@media (max-width:767px){.social-icons{padding:50px 0}}@media (max-width:500px){img.profile{width:200px;margin-left:-100px}.profile-container{height:200px;margin-top:2em!important}}.social-div{display:flex;justify-content:center;align-items:center}.social-list-sml{display:flex;list-style:none;gap:1rem}.social-list{display:flex;list-style:none;gap:2.5rem}.social-icons i{color:#757980;margin:0 10px;width:60px;height:60px;border:1px solid #c8ced7;text-align:center;border-radius:50%;line-height:60px;display:inline-block}.social-link-sml a{text-decoration:none;width:3.5rem;height:3.5rem;background-color:#f0f9fe;border-radius:50%;display:flex;justify-content:center;align-items:center;position:relative;z-index:1;border:3px solid #f0f9fe;overflow:hidden}.social-link a{text-decoration:none;width:4.8rem;height:4.8rem;background-color:#f0f9fe;border-radius:50%;display:flex;justify-content:center;align-items:center;position:relative;z-index:1;border:3px solid #f0f9fe;overflow:hidden}.social-link a::before,.social-link-sml a::before{content:"";position:absolute;width:100%;height:100%;background:var(--bg-color);z-index:0;scale:1 0;transform-origin:bottom;transition:scale .5s}.social-link-sml:hover a::before,.social-link:hover a::before{scale:1 1}.icon-sml{font-size:1.5rem;color:#011827;transition:.5s;z-index:2}.icon{font-size:2rem;color:#011827;transition:.5s;z-index:2}.social-link a:hover .icon{color:#fff;transform:rotateY(360deg)}.social-link,.social-link-sml{--bg-color:#000}.social-link-sml.discord,.social-link.discord{--bg-color:#5865f2}.social-link-sml.mastodon,.social-link.mastodon{--bg-color:#6364ff}.social-link-sml.youtube,.social-link.youtube{--bg-color:#ff0000}.social-link-sml.signal,.social-link.signal{--bg-color:#365eb6}
				`@@ -0,0 +1 @@`
				.name-container{display:inline-flex;align-items:center;overflow:hidden;position:absolute;width:fit-content;left:50%;transform:translateX(-50%)}.slider{position:relative;left:0;animation:1s linear 1s forwards slide}@keyframes slide{0%{left:0}100%{left:calc(100%)}}.brand{mask-image:linear-gradient(to right,black 50%,transparent 50%);-webkit-mask-image:linear-gradient(to right,black 50%,transparent 50%);mask-position:100% 0;-webkit-mask-position:100% 0;mask-size:200%;-webkit-mask-size:200%;animation:1s linear 1s forwards reveal}@keyframes reveal{0%{mask-position:100% 0;-webkit-mask-position:100% 0}100%{mask-position:0 0;-webkit-mask-position:0 0}}
				`@@ -0,0 +1 @@`
				!function(){"use strict";var e=document.querySelector("#mainNav");if(e){var o=e.querySelector(".navbar-collapse");if(o){var n=new bootstrap.Collapse(o,{toggle:!1}),t=o.querySelectorAll("a");for(var a of t)a.addEventListener("click",(function(e){n.hide()}))}var r=function(){(void 0!==window.pageYOffset?window.pageYOffset:(document.documentElement\|\|document.body.parentNode\|\|document.body).scrollTop)>100?e.classList.add("navbar-shrink"):e.classList.remove("navbar-shrink")};r(),document.addEventListener("scroll",r)}}();