New Nav Bar

2022-12-12 01:47:53 -05:00 · 2022-12-12 01:47:53 -05:00 · c4f854b1db
commit c4f854b1db
parent e786af20e8
28 changed files with 207 additions and 151 deletions
--- a/.gitignore
+++ b/.gitignore
@ -11,3 +11,5 @@ speak.js
 videochat
 woz
 mulan
+raya
+
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -1,3 +1,4 @@
 {
-    "liveServer.settings.port": 5502
+    "liveServer.settings.port": 5503,
+    "liveServer.settings.NoBrowser": true
 }
--- a/25.gif
+++ b/25.gif
--- a/MTG/index.html
+++ b/MTG/index.html
@ -13,16 +13,18 @@
 <meta name="theme-color" content="#4C633C">
    <title>MTG Life Counter</title>

-    <script defer data-domain="chrisedwards.tech" src="https://metric1.chrisedwards.tech/js/plausible.js"></script>
+    <script defer data-domain="mtg.chrisedwards.tech" src="https://metric1.chrisedwards.tech/js/plausible.js"></script>

    <link rel="stylesheet" href="style.css">
-
+    <link rel="stylesheet" href="/menu/menu.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="manifest" href="site.webmainfest" />

 </head>
 <body>
-
+    <script defer src="/menu/menu.js"></script>
+    <div id="navContainer"></div>
   <script>
    if('serviceWorker' in navigator) {
        window.addEventListiner('load', () => {
--- a/MTG/style.css
+++ b/MTG/style.css
@ -14,6 +14,7 @@ background: radial-gradient(circle, #792f22 0%, #4f644f 47%, rgb(108, 127, 131)
  margin: 0;
  display: flex;
  /* height: 100vh; */
+  height:100%

 }
 html{
@ -178,7 +179,7 @@ color:rgb(141, 140, 140);

 .lifeUp{
  font-size: 7vh;
-  color: #00cc00
+  color: #00cc00;
 }
 .lifeDown{
  font-size: 7vh;
--- a/binary/binary.css
+++ b/binary/binary.css
@ -1,6 +1,7 @@
 body {
  background-color: #6497b1;
  font-family: "Courier Prime", monospace;
+  height: 100%;
 }

 #input {
--- a/binary/index.html
+++ b/binary/index.html
@ -12,14 +12,15 @@
    <link rel="icon" type="image/ico" href="../binary.ico">
    <link rel="stylesheet" type="text/css" href="binary.css" />
    <script defer data-domain="chrisedwards.tech" src="https://metric1.chrisedwards.tech/js/plausible.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">

 </head>
 <body>
    

-        <div id="nav_menu">
+        <div id="navContainer">
        </div>
-        <script src="/menu/menu.js"></script>
+        <script defer src="/menu/menu.js"></script>
        <br /><br /><br />
    
        <form id="form">
--- a/cetech.png
+++ b/cetech.png
--- a/cetechwhite.png
+++ b/cetechwhite.png
--- a/index.html
+++ b/index.html
@ -6,6 +6,7 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="/menu/menu.css" />
    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@ -34,12 +35,10 @@

 </head>
 <body>
-     <nav>
-         <div id="nav_menu">
-           
-    </div>    
-   <!-- <span style="margin: auto; display:inline-block">/home/</span>    -->
-    </nav>
+  <div id="navContainer"></div>
+
+
+
    <main>
        <div id="term">
            <span id='user'>user@localhost:</span>
@ -51,7 +50,9 @@



-
+<script>
+   
+</script>
    <script src="/menu/menu.js"></script>
   <script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>
    <script src="script.js" defer></script>
--- a/logo.png
+++ b/logo.png
--- a/memory/index.html
+++ b/memory/index.html
@ -8,6 +8,7 @@
 <link rel="stylesheet" type="text/css" href="/menu/menu.css" />
 <link rel="icon" type="image/ico" href="mem.ico">
 <script defer data-domain="chrisedwards.tech" src="https://metric1.chrisedwards.tech/js/plausible.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">

 <!--<meta name="viewport" content="width=device-width, initial-scale=1"/>-->
 <style>
@ -118,8 +119,8 @@ perspective: 1000;
 </head>

 <body>
-  <div id="nav_menu"></div>
-  <script src="/menu/menu.js"></script> 
+ <div id="navContainer"></div>
+  <script defer src="/menu/menu.js"></script> 
 <br />
 <br />
 <br />
--- a/menu/menu.css
+++ b/menu/menu.css
@ -7,70 +7,17 @@
  margin: 0;
  padding: 0;
 }
-#ham{
-  background-color:#999999 ; 
-  /* margin-right: 20px;   */
-  
-  padding: 5px;
-}
-#menu{
-  background-color:white;
-  width:50px;
-  height:50px;
-  /* box-shadow: 5px 5px 2.5px #5F5F5F; */
-  /* position:relative;  */
-  display: flex;
-  align-self: center;
-  margin-top: 5px;
-  margin-left: 5px;
-  /* padding: 20px; */
-  z-index:5; 
-  border-radius: 25%;
-  /* margin-right: 5%; */
-}
-#bars, #bigx{
-  height:50px; 
-  width:50px}
-.ham-menu {
-  height:100%; 
-  width:0%;
-  display:none; 
-  border:black solid 2px;
-  /* box-shadow: 10px 10px 5px #5F5F5F */
-}
-.ham-menu2 {display:inline;border:black solid 2px;
-  /* box-shadow: 10px 10px 5px #5F5F5F; */
-  position:absolute; top:5px; left:5px; z-index:5; margin-right: 5%;}
-#ham a {color:white; text-decoration:none; z-index:10 !important; }
-#ham ul{ list-style-type: none; margin-right: 15%;}
-#ham:focus{outline-color:black; }
-#site{margin-right: 15%;}
-#bars {
-    -webkit-transition: -webkit-transform .3s ease-in-out;
-  transition: transform .3s ease-in-out;
+html{
+  height: 100%
 }


-#bigx {
-    -webkit-transition: -webkit-transform .3s ease-in-out;
-  transition: transform .3s ease-in-out;
-  z-index:11;
+.navbar-menu, .navbar-dropdown{
+  background-color:rgb(24, 24, 24) !important;
 }
-
-#body {z-index:0;
-box-sizing: border-box;
-margin: 0;
-padding: 0%;
-margin-top: 60px}
-#nav-menu{
-display: flex;
-align-self: center;
-}
-nav{
-  /* background-color: #666666; */
-  min-width: 100%;
-  height: 60px;
-  position: absolute;
-  left: 0;
-  top: 0;
+.navbar-item{
+  color: white !important;
 }
+.navbar-item:hover {
+  color: #363636 !important;
+}
--- a/menu/menu.js
+++ b/menu/menu.js
@ -1,52 +1,25 @@
-function slideout() {
-    if (document.getElementById("ham").className == "ham-menu") {
-        document.getElementById("ham").className = "ham-menu2";
-        document.getElementById("ham").focus();
-        document.getElementById("menu").onclick = null; // console.log("show");
-    } else if (document.getElementById("ham").className == "ham-menu2") {
-        document.getElementById("ham").className = "ham-menu";
-        document.getElementById("menu").onclick = function() {
-            slideout()
-        }; // console.log("hide");
-    }
-}
+var navString = '<nav class="navbar is-dark" role="navigation" aria-label="main navigation"> <div class="navbar-brand"> <a class="navbar-item" href="/index.html"> <img src="/cetechwhite.png" width="50" height="50"> </a> <a role="button" class="navbar-burger is-dark" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample"> <span aria-hidden="true"></span> <span aria-hidden="true"></span> <span aria-hidden="true"></span> </a> </div> <div id="navbarBasicExample" class="navbar-menu is-dark"> <div class="navbar-start is-dark"> <a class="navbar-item is-dark" href="/index.html"> Home </a> <a class="navbar-item" href="/resume/" > Resume </a> <div class="navbar-item has-dropdown is-hoverable"> <a class="navbar-link" > Games </a> <div class="navbar-dropdown"> <a class="navbar-item" href="/yatzee/"> Yatzee </a> <a class="navbar-item" href="/tictac/"> Tic Tac Toe </a> <a class="navbar-item" href="/bingo/"> Bingo </a> <a class="navbar-item" href="/memory/"> Memory </a> <a class="navbar-item" href="https://mtg.chrisedwards.tech"> MTG Life Counter </a> </div> </div> <div class="navbar-item has-dropdown is-hoverable is-dark"> <a class="navbar-link" > Ultilities </a> <div class="navbar-dropdown"> <a class="navbar-item" href="/speak"> Speak </a> <a class="navbar-item" href="/binary/"> Binary to ASCII </a> <a class="navbar-item" href="/youtube_convert/"> YouTube Converter </a> <a class="navbar-item" href="/nato/"> NATO Alpha </a> </div> </div> </div> </div> </nav>'
+document.getElementById('navContainer').innerHTML = navString;

+document.addEventListener('DOMContentLoaded', () => {

-function closemenu1() {
-    setTimeout(function() {
-        document.getElementById("ham").className = "ham-menu";
-        document.getElementById("menu").onclick = function() {
-            slideout()
-        }
-    }, 250); //console.log("off click");
-}
-var sites = [
-    ["/", "Home"],
-    ["/resume/", "Resume"],
-    ["/tictac/", "Tic Tac Touch"],
-    ["/bingo/", "Bingo!"],
-    ["/memory/", "Memory"],
-    ["/yatzee/", "Yatzee!"],
-    ["/MTG/", "MTG"],
-    ["/youtube_convert/", "Youtube Converter"],
-    ["/binary/", "Binary Converter"],
-    ["/speak/", "Speak"],
-    ["/nato/", "NATO Phonetic Alphabet"],
-    ["/rollDice", "Dice"],
-    ["/be_mine/", "Be Mine!"],
-    ["/media/Movies", "Movies"],
-    ["/media/Tv%20Shows", "Tv Shows"]
-];
-var foobar = "";
-for (i = 0; i < sites.length; i++) {
-    // console.log(i)
-    foobar += '<ul> <li><a href="' + sites[i][0] + '">' + sites[i][1] + '</a></li> <br />';
-    // console.log(foobar)
-    foobar += "</ul>"
-}
-
-//document.getElementById("ham").addEventListener('onmouseleave', function() {slideout(), alert('test')});
-var foo = '<div  id="menu" onclick="slideout()"   ><img id="bars" src="/menu/3bar.png" /></div><div id="ham" class="ham-menu"  ><img id="bars" src="/menu/x.png" onclick="slideout()"/><div id="site"></div> </div>'
-
-document.getElementById("nav_menu").innerHTML = foo;
-document.getElementById("site").innerHTML = foobar;
+    // Get all "navbar-burger" elements
+    const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
+    
+    // Add a click event on each of them
+    $navbarBurgers.forEach( el => {
+      el.addEventListener('click', () => {
+    
+        // Get the target from the "data-target" attribute
+        const target = el.dataset.target;
+        const $target = document.getElementById(target);
+    
+        // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
+        el.classList.toggle('is-active');
+        $target.classList.toggle('is-active');
+    
+      });
+    });
+    
+    });
+  
--- a/menu/menu.js.bak
+++ b/menu/menu.js.bak
@ -0,0 +1,52 @@
+function slideout() {
+    if (document.getElementById("ham").className == "ham-menu") {
+        document.getElementById("ham").className = "ham-menu2";
+        document.getElementById("ham").focus();
+        document.getElementById("menu").onclick = null; // console.log("show");
+    } else if (document.getElementById("ham").className == "ham-menu2") {
+        document.getElementById("ham").className = "ham-menu";
+        document.getElementById("menu").onclick = function() {
+            slideout()
+        }; // console.log("hide");
+    }
+}
+
+
+function closemenu1() {
+    setTimeout(function() {
+        document.getElementById("ham").className = "ham-menu";
+        document.getElementById("menu").onclick = function() {
+            slideout()
+        }
+    }, 250); //console.log("off click");
+}
+var sites = [
+    ["/", "Home"],
+    ["/resume/", "Resume"],
+    ["/tictac/", "Tic Tac Touch"],
+    ["/bingo/", "Bingo!"],
+    ["/memory/", "Memory"],
+    ["/yatzee/", "Yatzee!"],
+    ["/MTG/", "MTG"],
+    ["/youtube_convert/", "Youtube Converter"],
+    ["/binary/", "Binary Converter"],
+    ["/speak/", "Speak"],
+    ["/nato/", "NATO Phonetic Alphabet"],
+    ["/rollDice", "Dice"],
+    ["/be_mine/", "Be Mine!"],
+    ["/media/Movies", "Movies"],
+    ["/media/Tv%20Shows", "Tv Shows"]
+];
+var foobar = "";
+for (i = 0; i < sites.length; i++) {
+    // console.log(i)
+    foobar += '<ul> <li><a href="' + sites[i][0] + '">' + sites[i][1] + '</a></li> <br />';
+    // console.log(foobar)
+    foobar += "</ul>"
+}
+
+//document.getElementById("ham").addEventListener('onmouseleave', function() {slideout(), alert('test')});
+var foo = '<div  id="menu" onclick="slideout()"   ><img id="bars" src="/menu/3bar.png" /></div><div id="ham" class="ham-menu"  ><img id="bars" src="/menu/x.png" onclick="slideout()"/><div id="site"></div> </div>'
+
+document.getElementById("nav_menu").innerHTML = foo;
+document.getElementById("site").innerHTML = foobar;
--- a/nato/index.html
+++ b/nato/index.html
@ -8,25 +8,26 @@
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" type="text/css" href="/menu/menu.css" />
    <script defer data-domain="chrisedwards.tech" src="https://metric1.chrisedwards.tech/js/plausible.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">


 </head>
 <body>
    <nav>
-        <div id="nav_menu">
+        <div id="navContainer">
    </nav>
    
-    <main>
+    <main id="main">
    <h1>Nato Phonetic Alphabet</h1>
    <input  id="input" autocomplete="off" autofocus="autofocus" maxlength="100"  type="text" onkeyup="convert()">
 <div class="button">
-    <button onclick="clearInput()">Clear Input</button>
+    <button id="clear" onclick="clearInput()">Clear Input</button>
 </div>
 <div id="output"></div>

    </main>

    <script src="index.js"></script>
-    <script src="/menu/menu.js"></script>
+    <script defer src="/menu/menu.js"></script>
 </body>
 </html>
--- a/nato/style.css
+++ b/nato/style.css
@ -7,6 +7,7 @@
 }
 body{
    background-color:#2d2e2e;
+    height: 100%;
 }
 h1{
    text-align: center;
@ -19,24 +20,30 @@ h1{
    justify-content: center;
    align-items: center;    
    padding: 30px;
-}
+    background-color: #2d2e2e !important;
+border-color:#2d2e2e !important}
 #main{
+    margin-top: 7%;
    display: flex;
    justify-items: center;
    flex-direction: column;
 }
-button{
+#clear{
 font-size: 35px; margin: 3%;
 background-color:cornflowerblue;
 border-radius: 15px;
 color: white;
 padding: 5px;
+margin: auto !important;
+text-align: center !important;
 }
 #output{
    background-color: cornflowerblue;
    max-width: 60%;
+    width: 300px;
    height: 15rem;
    margin: auto;
+    margin-top: 50px;
    color: white;
    padding: 12px;
    border-radius: 15px;
--- a/script.js
+++ b/script.js
@ -5,7 +5,7 @@ document.getElementById("type").scrollIntoView({behavior: "smooth", block: "end"
 var typewriter = new Typewriter(document.getElementById('type'), {
  loop: false,
  cursor: "_",
-  delay: 150,
+  delay: 120,
  // onCreateTextNode: scroll,
 });

@ -35,6 +35,7 @@ typewriter
  .pasteString('<br>')
  .callFunction(scroll)
  .pasteString('<a class="link" href="/resume/">resume</a>  <a class="link" href="/yatzee/">yatzee</a>  <a class="link" href="/tictac/">tic tac touch</a><br>')
+  .callFunction(scroll)
  .pasteString('<a class="link" href="/MTG/">mtg life counter</a>  <a class="link" href="/youtube_convert/">youtube downloader</a>  <a class="link" href="/binary/">binary to ascii converter</a>')
   .pasteString('<br>')
   .callFunction(scroll)
--- a/speak/index.html
+++ b/speak/index.html
@ -8,6 +8,7 @@
  <link rel="stylesheet" type="text/css" href="/menu/menu.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <script defer data-domain="chrisedwards.tech" src="https://metric1.chrisedwards.tech/js/plausible.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">

  <title>Speak</title>
  <style>
@ -18,7 +19,7 @@

 </head>
 <body>
-  <div id="nav_menu"></div>
+<div id="navContainer"></div>
 <main>
 
  
--- a/speak/style.css
+++ b/speak/style.css
@ -1,5 +1,5 @@
 body {
-
+height: 100%;


 background-color: darkred;
--- a/speak1/index.html
+++ b/speak1/index.html
@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <script defer src='https://unpkg.com/tesseract.js@v2.1.0/dist/tesseract.min.js'></script>
+  <script src="script.js" defer></script>
+</head>
+<body>
+  <video width="720" height="560" autoplay muted></video>
+  <pre data-text style="font-size: 2rem; font-family: inherit; width: 100%; white-space: pre-wrap;"></pre>
+<button id="press" onsubmit="press()">capture</button>
+</body>
+</html>
--- a/speak1/script.js
+++ b/speak1/script.js
@ -0,0 +1,42 @@
+const video = document.querySelector("video")
+const textElem = document.querySelector("[data-text]")
+
+async function setup() {
+  const stream = await navigator.mediaDevices.getUserMedia({
+    audio: false,
+    video: {
+      facingMode: 'environment'
+    }
+  })
+  video.srcObject = stream
+
+  video.addEventListener("playing", async () => {
+    const worker = Tesseract.createWorker()
+    await worker.load()
+    await worker.loadLanguage("eng")
+    await worker.initialize("eng")
+
+    const canvas = document.createElement("canvas")
+    canvas.width = video.width
+    canvas.height = video.height
+
+    document.getElementById('press').addEventListener("click", function () {
+      canvas.getContext("2d").drawImage(video, 0, 0, video.width, video.height)
+      const {
+        data: { text },
+      } = await worker.recognize(canvas)
+
+      speechSynthesis.speak(
+        new SpeechSynthesisUtterance(text.replace(/\s/g, " "))
+      )
+
+      textElem.textContent = text
+    
+  });
+})
+ 
+
+  
+  }
+
+setup()
--- a/style.css
+++ b/style.css
@ -1,11 +1,12 @@
 body {
  background-color: #667788;
+  height: 100%
 }
 main {
  display: flex;
  justify-content: center;
  margin: auto;
-  margin-top: 100px;
+  margin-top: 7%;
  padding: 7px;
 }
 #term {
--- a/tictac/index.html
+++ b/tictac/index.html
@ -12,15 +12,15 @@
    <title> Tic Tac Toe Touch</title>
    <script defer src="tictac.js"></script>
        <script defer data-domain="chrisedwards.tech" src="https://metric1.chrisedwards.tech/js/plausible.js"></script>
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">

    </script>
 </head>

 <body>
-    <div id="nav_menu">
-    </div>
-    <script src="/menu/menu.js"></script>
-    <br /><br /><br />
+    <div id="navContainer"></div>
+    <script defer src="/menu/menu.js"></script>
+
   <main>
        </br>

--- a/tictac/tictac.css
+++ b/tictac/tictac.css
@ -1,6 +1,10 @@
+html{
+    height:100%;
+}
 body {
    background: -webkit-linear-gradient(45deg, hsla(0, 0%, 97%, 1) 0%, hsla(0, 0%, 97%, 0) 70%), -webkit-linear-gradient(315deg, hsla(0, 0%, 38%, 1) 10%, hsla(0, 0%, 38%, 0) 80%), -webkit-linear-gradient(225deg, hsla(0, 0%, 63%, 1) 10%, hsla(0, 0%, 63%, 0) 80%), -webkit-linear-gradient(135deg, hsla(0, 0%, 29%, 1) 100%, hsla(0, 0%, 29%, 0) 70%);
    background: linear-gradient(45deg, hsla(0, 0%, 97%, 1) 0%, hsla(0, 0%, 97%, 0) 70%), linear-gradient(135deg, hsla(0, 0%, 38%, 1) 10%, hsla(0, 0%, 38%, 0) 80%), linear-gradient(225deg, hsla(0, 0%, 63%, 1) 10%, hsla(0, 0%, 63%, 0) 80%), linear-gradient(315deg, hsla(0, 0%, 29%, 1) 100%, hsla(0, 0%, 29%, 0) 70%);
+    height:100%;
 }
 td{
    border: 3px solid black;
--- a/yatzee/index.html
+++ b/yatzee/index.html
@ -10,11 +10,12 @@
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <script defer data-domain="chrisedwards.tech" src="https://metric1.chrisedwards.tech/js/plausible.js"></script>
-
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
+<script defer src="/menu/menu.js"></script>
    <title>Yatzee!</title>
    </head>
 <body>
-    <div id="nav_menu">
+    <div id="navContainer"></div>
    </div>
    <div id="full" onclick="fullscreen()">
        <i class="fas fa-expand"></i>
@ -75,8 +76,7 @@
    <div id="help">
        <img src="/how.png" id="how" onclick="how_to()" />
    </div>
-    <script type="text/javascript">
-    </script>
+  
    <script src="yatzee.js"></script>

 </body>
--- a/yatzee/yatzee.css
+++ b/yatzee/yatzee.css
@ -3,6 +3,7 @@ body {
  cursor: default;
  font-size: 130%;
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
+  height: 100%;
 }

 #score {
@ -95,7 +96,7 @@ body {

 #full {
  position: absolute;
-  top: 5px;
+  /* top: 5px; */
  right: 0;
  z-index: 100;
  color: rgb(165, 162, 162);
--- a/youtube_convert/index.php
+++ b/youtube_convert/index.php
@ -17,15 +17,15 @@ echo '
  <link rel="stylesheet" type="text/css" href="/menu/menu.css" />
 <title>YouTube Music</title>
 <style>
-body {background-color:#8f98a8; color:white}
+body {background-color:#8f98a8; color:white; height: 100%}
 </style>
 </head>
 <body onload="">
-<div id="nav_menu">
+<div id="navContainer">
 </div>
-<script src="/menu/menu.js"></script> 
+<script defer src="/menu/menu.js"></script> 
 <script defer data-domain="chrisedwards.tech" src="https://metric1.chrisedwards.tech/js/plausible.js"></script>
-
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
 <script language="javascript">

 function reload(){