main: Updated site

404.html

@@ -53,8 +53,11 @@ setTimeout(callback(), 4000);
 
     </script>
     <script src="assets/bootstrap/js/bootstrap.min.js"></script>
+    <script src="assets/js/bs-init.js"></script>
+    <script src="assets/js/hacker.js"></script>
     <script src="assets/js/agency.js"></script>
     <script src="assets/js/404.js"></script>
 </body>
 
 </html>
+

assets/css/index.css

@@ -4,3 +4,7 @@ footer {
   bottom: 0;
 }
 
+a.no-underline {
+  text-decoration: none;
+}
+

assets/js/agency.js

@@ -35,9 +35,9 @@
       }
     };
     // Collapse now if page is not at top
-    collapseNavbar();
+    // collapseNavbar();
     // Collapse the navbar when page is scrolled
-    document.addEventListener("scroll", collapseNavbar);
+    // document.addEventListener("scroll", collapseNavbar);
 
     // Hide navbar when modals trigger
     var modals = document.querySelectorAll('.portfolio-modal');

assets/js/bs-init.js

@@ -0,0 +1,19 @@
+
+if (window.innerWidth < 768) {
+	[].slice.call(document.querySelectorAll('[data-bss-disabled-mobile]')).forEach(function (elem) {
+		elem.classList.remove('animated');
+		elem.removeAttribute('data-bss-hover-animate');
+		elem.removeAttribute('data-aos');
+		elem.removeAttribute('data-bss-parallax-bg');
+		elem.removeAttribute('data-bss-scroll-zoom');
+	});
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+
+	var hoverAnimationTriggerList = [].slice.call(document.querySelectorAll('[data-bss-hover-animate]'));
+	var hoverAnimationList = hoverAnimationTriggerList.forEach(function (hoverAnimationEl) {
+		hoverAnimationEl.addEventListener('mouseenter', function(e){ e.target.classList.add('animated', e.target.dataset.bssHoverAnimate) });
+		hoverAnimationEl.addEventListener('mouseleave', function(e){ e.target.classList.remove('animated', e.target.dataset.bssHoverAnimate) });
+	});
+}, false);

assets/js/hacker.js

@@ -0,0 +1,84 @@
+const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ/.?!@#$%^&*()_+";
+
+let interval = null;
+let interval2 = null;
+let interval3 = null;
+
+
+window.onload = (event) => {
+
+target = document.querySelector(".nathanwoodburn");
+  let iteration = 0;
+  let final = "NATHAN.WOODBURN/";
+  clearInterval(interval);
+  
+  interval = setInterval(() => {
+    target.innerText = target.innerText
+      .split("")
+      .map((letter, index) => {
+        if(index < iteration) {
+          return final[index];
+        }
+      
+        return letters[Math.floor(Math.random() * 41)]
+      })
+      .join("");
+    
+    if(iteration >= final.length){ 
+      clearInterval(interval);
+    }
+    
+    iteration += 1 / 3;
+  }, 30);
+};
+
+document.querySelector(".copyright").onmouseover = event => {  
+    let iteration2 = 0;
+    let old2 = "Copyright © Nathan Woodburn 2023";
+    console.log(old2);
+    clearInterval(interval2);
+    
+    interval2 = setInterval(() => {
+      event.target.innerText = event.target.innerText
+        .split("")
+        .map((letter, index2) => {
+          if(index2 < iteration2) {
+            return old2[index2];
+          }
+        
+          return letters[Math.floor(Math.random() * 41)]
+        })
+        .join("");
+      
+      if(iteration2 >= old2.length){ 
+        clearInterval(interval2);
+      }
+      
+      iteration2 += 1/3;
+    }, 10);
+  }
+  // document.querySelector(".hacker3").onmouseover = event => {  
+  //   let iteration3 = 0;
+  //   let old3 = event.target.innerText;
+  //   console.log(old3);
+  //   clearInterval(interval3);
+    
+  //   interval3 = setInterval(() => {
+  //     event.target.innerText = event.target.innerText
+  //       .split("")
+  //       .map((letter, index3) => {
+  //         if(index3 < iteration3) {
+  //           return old3[index3];
+  //         }
+        
+  //         return letters[Math.floor(Math.random() * 41)]
+  //       })
+  //       .join("");
+      
+  //     if(iteration3 >= old3.length){ 
+  //       clearInterval(interval3);
+  //     }
+      
+  //     iteration3 += 1 / 3;
+  //   }, 10);
+  // }

index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html data-bs-theme="light" lang="en-au" style="background: #000000;height: 100vh;">
+<html data-bs-theme="light" lang="en-au" style="background: transparent;height: 100vh;">
 
 <head>
     <meta charset="utf-8">
@@ -32,43 +32,113 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,700&amp;display=swap">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kaushan+Script&amp;display=swap">
     <link rel="stylesheet" href="assets/fonts/font-awesome.min.css">
+    <link rel="stylesheet" href="assets/css/animate.min.css">
     <link rel="stylesheet" href="assets/css/Contact-Form-Clean.css">
     <link rel="stylesheet" href="assets/css/index.css">
 <!--This Website was made by Nathan Woodburn https://nathan.woodburn.au -->
 </head>
 
-<body id="page-top" data-bs-spy="scroll" data-bs-target="#mainNav" data-bs-offset="54"><!--This Website was made by Nathan Woodburn https://nathan.woodburn.au --><script src="https://nathan.woodburn/handshake.js" domain="woodburn"></script>
+<body class="justify-content-xl-center" id="page-top" data-bs-spy="scroll" data-bs-target="#mainNav" data-bs-offset="54" style="background: url(&quot;assets/img/background.webp&quot;) top;text-align: center;background-attachment: fixed;"><!--This Website was made by Nathan Woodburn https://nathan.woodburn.au -->
-<script src="https://nathan.woodburn/https.js"></script>
+    <nav class="navbar navbar-expand-lg fixed-top bg-dark navbar-dark" id="mainNav" style="height: 67px;">
-    <nav class="navbar navbar-expand-lg fixed-top bg-dark navbar-dark" id="mainNav" style="height: 67.531px;">
         <div class="container-fluid"><a class="navbar-brand" href="/#" style="font-family: Montserrat, sans-serif;font-weight: bold;color: rgb(255,255,255);"><img src="assets/img/favicon.png" width="40px">&nbsp;Woodburn</a><button data-bs-toggle="collapse" data-bs-target="#navbarResponsive" class="navbar-toggler navbar-toggler-right" type="button" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><i class="fa fa-bars"></i></button>
             <div class="collapse navbar-collapse" id="navbarResponsive" style="margin-top: 4px;">
                 <ul class="navbar-nav ms-auto text-uppercase" style="background: rgb(52,58,64);">
-                    <li class="nav-item"><a class="nav-link" href="/" style="padding-left: 15px;">Home</a></li>
-                    <li class="nav-item"><a class="nav-link" href="https://dashboard.woodburn.au" style="padding-left: 15px;" target="_blank">Dashboard</a></li>
-                    <li class="nav-item"><a class="nav-link" href="https://nathan.woodburn.au" target="_blank" style="padding-left: 15px;">Nathan</a></li>
-                    <li class="nav-item"><a class="nav-link" href="https://nathan.woodburn.au/link" target="_blank" style="padding-left: 15px;">Links</a></li>
                     <li class="nav-item"><a class="nav-link" href="https://dash.woodburn.au" style="padding-left: 15px;">Login</a></li>
                 </ul>
             </div>
         </div>
     </nav>
-    <header class="masthead" style="background: url(&quot;assets/img/back.jpg&quot;) center / cover no-repeat;">
+    <section style="margin-top: 67px;width: 90%;max-width: 1140px;margin-right: auto;margin-left: auto;padding-bottom: 10px;padding-top: 10px;">
-        <div class="container">
+        <h2 class="fw-bold text-white mb-3" style="background: rgb(52,58,64);border-radius: 10px;">Websites</h2>
-            <div class="intro-text">
+        <div class="card-group">
-                <div class="intro-heading text-uppercase"><span>Woodburn</span></div>
+            <div class="card" data-bss-hover-animate="pulse" style="margin: 10px;background: var(--bs-secondary-color);color: white;max-width: 500px;"><a class="stretched-link no-underline" href="https://nathan.woodburn.au" style="color: white;" target="_blank"><img src="assets/img/favicon.png" style="width: 90%;margin-top: 5px;">
+                    <h4>Nathan.Woodburn/</h4>
+                </a>
+                <div class="card-body"></div>
+            </div>
+            <div class="card" data-bss-hover-animate="pulse" style="margin: 10px;background: var(--bs-secondary-color);color: white;max-width: 500px;"><a class="stretched-link no-underline" href="https://nathan3dprinting.au" style="color: white;" target="_blank"><img src="https://nathan3dprinting.au/assets/img/favicon/N3D_Logo.png" style="width: 90%;margin-top: 5px;">
+                    <h4>3D Printing</h4>
+                </a>
+                <div class="card-body"></div>
+            </div>
+            <div class="card" data-bss-hover-animate="pulse" style="margin: 10px;background: var(--bs-secondary-color);color: white;max-width: 500px;"><a class="stretched-link no-underline" href="https://podcast.woodburn.au" style="color: white;" target="_blank"><img src="assets/img/Alliance_Logo.webp" style="width: 90%;margin-top: 5px;">
+                    <h4>Church Podcasts</h4>
+                </a>
+                <div class="card-body"></div>
+            </div>
+            <div class="card" data-bss-hover-animate="pulse" style="margin: 10px;background: var(--bs-secondary-color);color: white;max-width: 500px;"><a class="stretched-link no-underline" href="https://uptime.woodburn.au" style="color: white;" target="_blank"><img src="assets/img/favicon.png" style="width: 90%;margin-top: 5px;">
+                    <h4>Uptime</h4>
+                </a>
+                <div class="card-body"></div>
             </div>
         </div>
-    </header>
+        <div class="card-group">
-    <footer style="background: #000000;color: rgb(255,255,255);">
+            <div class="card" data-bss-hover-animate="pulse" style="margin: 10px;background: var(--bs-secondary-color);color: white;max-width: 500px;"><a class="stretched-link no-underline" href="https://reg.woodburn.au" style="color: white;" target="_blank"><img src="assets/img/favicon.png" style="width: 90%;margin-top: 5px;">
+                    <h4>Registry</h4>
+                </a>
+                <div class="card-body"></div>
+            </div>
+            <div class="card" data-bss-hover-animate="pulse" style="margin: 10px;background: var(--bs-secondary-color);color: white;max-width: 500px;"><a class="stretched-link no-underline" href="https://hnscall" style="color: white;" target="_blank"><img src="https://talk.woodburn.au/images/logo.svg" style="width: 90%;margin-top: 5px;filter: invert(100%);">
+                    <h4>HNSCall/</h4>
+                </a>
+                <div class="card-body"></div>
+            </div>
+            <div class="card" data-bss-hover-animate="pulse" style="margin: 10px;background: var(--bs-secondary-color);color: white;max-width: 500px;"><a class="stretched-link no-underline" href="https://github.com/Nathanwoodburn/HNS-server" style="color: white;" target="_blank"><img src="https://github.com/fluidicon.png" style="width: 90%;margin-top: 5px;">
+                    <h4>HNS Server Scripts</h4>
+                </a>
+                <div class="card-body"></div>
+            </div>
+            <div class="card" data-bss-hover-animate="pulse" style="margin: 10px;background: var(--bs-secondary-color);color: white;max-width: 500px;"><a class="stretched-link no-underline" href="https://hnshosting" style="color: white;" target="_blank"><img src="assets/img/favicon.png" style="width: 90%;margin-top: 5px;">
+                    <h4>HNS Hosting</h4>
+                </a>
+                <div class="card-body"></div>
+            </div>
+        </div>
+    </section>
+    <section style="width: 90%;max-width: 1140px;padding-bottom: 10px;padding-top: 10px;margin-right: auto;margin-left: auto;">
+        <h2 class="fw-bold text-white mb-3" style="background: rgb(52,58,64);border-radius: 10px;">Applications</h2>
+        <div class="card-group">
+            <div class="card" data-bss-hover-animate="pulse" style="margin: 10px;background: var(--bs-secondary-color);color: white;max-width: 500px;"><a class="stretched-link no-underline" href="https://firewallet.au" style="color: white;" target="_blank"><img src="assets/img/FW.png" style="max-width: 90%;margin-top: 5px;">
+                    <h4>Fire Wallet</h4>
+                </a>
+                <div class="card-body"></div>
+            </div>
+            <div class="card" data-bss-hover-animate="pulse" style="margin: 10px;background: var(--bs-secondary-color);color: white;max-width: 500px;"><a class="stretched-link no-underline" href="https://git.woodburn.au/nathanwoodburn/FireWalletLite" style="color: white;" target="_blank"><img src="assets/img/favicon.png" width="229" height="253" style="width: 90%;height: auto;margin-top: 5px;">
+                    <h4>Fire Wallet Lite</h4>
+                </a>
+                <div class="card-body"></div>
+            </div>
+            <div class="card" data-bss-hover-animate="pulse" style="margin: 10px;background: var(--bs-secondary-color);color: white;max-width: 500px;"><a class="stretched-link no-underline" href="https://github.com/Nathanwoodburn/HSDBatcherGUI" style="color: white;" target="_blank"><img src="assets/img/HSDBatcher.png" style="max-width: 90%;margin-top: 5px;">
+                    <h4>HSD Batcher</h4>
+                </a>
+                <div class="card-body"></div>
+            </div>
+            <div class="card" data-bss-hover-animate="pulse" style="margin: 10px;background: var(--bs-secondary-color);color: white;max-width: 500px;"><a class="stretched-link no-underline" href="https://github.com/Nathanwoodburn/EOL" style="color: white;" target="_blank"><img src="assets/img/favicon.png" style="max-width: 90%;margin-top: 5px;">
+                    <h4>EOL Encryptor</h4>
+                </a>
+                <div class="card-body"></div>
+            </div>
+            <div class="card" data-bss-hover-animate="pulse" style="margin: 10px;background: var(--bs-secondary-color);color: white;max-width: 500px;"><a class="stretched-link no-underline" href="https://github.com/Nathanwoodburn/Watermark" style="color: white;" target="_blank"><img src="assets/img/favicon.png" style="max-width: 90%;margin-top: 5px;">
+                    <h4>Watermark</h4>
+                </a>
+                <div class="card-body"></div>
+            </div>
+        </div>
+    </section>
+    <section style="padding: 0px;height: 100px;"></section>
+    <footer style="background: black;color: rgb(255,255,255);height: 40px;width: 100%;padding-top: 0px;padding-bottom: 0px;position: fixed;">
         <div class="container">
             <div class="row justify-content-center align-items-center">
-                <div class="col-md-4"><a href="mailto:contact@woodburn.au">contact@woodburn.au</a></div>
+                <div class="col-md-4"><a href="mailto:contact@woodburn.au" style="color: white;">contact@woodburn.au</a></div>
-                <div class="col-md-4"><span class="copyright">Copyright&nbsp;© <a href="https://nathan.woodburn.au" target="_blank">Nathan Woodburn</a> 2023</span></div>
+                <div class="col-md-4"><span class="copyright">Copyright&nbsp;© <span style="color: rgb(255, 255, 255);">Nathan Woodburn</span> 2023</span></div>
             </div>
         </div>
     </footer>
     <script src="assets/bootstrap/js/bootstrap.min.js"></script>
+    <script src="assets/js/bs-init.js"></script>
+    <script src="assets/js/hacker.js"></script>
     <script src="assets/js/agency.js"></script>
 </body>
 
 </html>
+