updated header, made index page unscrollable since no need + the blob will made it scroll

6 files changed, 32 insertions, 22 deletions

diff --git a/public/css/index.css b/public/css/index.css
index 4a7dd335..92e0d910 100644
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -1 +1 @@
-html{--text:#f4e8c1}.wrapper{height:100vh;left:0;overflow-x:hidden;top:0;width:100%;-ms-overflow-style:none;scrollbar-width:none;z-index:-6}.wrapper::-webkit-scrollbar{display:none}.indexPage{background-color:var(--neon-bg-color);background-position:50%;background-repeat:no-repeat;background-size:cover;color:var(--text);height:100%;left:0;margin:0;overflow:hidden;padding:0;top:0;width:100%;z-index:-10}.window{background:transparent;height:70%;left:10%;top:15%;width:80%;z-index:999}.window,.window .windowWrap{align-items:center;display:flex;justify-content:center;position:relative}.window .windowWrap{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid #fff;border-radius:1em;box-shadow:0 0 10mm #000;height:100%;text-align:center;width:100%;z-index:11}.window .windowWrap .text{position:relative;text-align:center;width:100%}.window .windowWrap .text .title{font-family:monoton;font-size:7vw;text-transform:uppercase}.description{font-family:rocksalt;font-size:1.75vw}.title{text-shadow:15px 15px 15px #000;-webkit-transition:all .5s;transition:all .5s}.title:hover{transform:scale(1.1);-webkit-transition:all .5s;transition:all .5s}.window .windowWrap .text .br{display:block;height:0;margin-bottom:5vh;width:0}.text{text-shadow:0 1px 0 #e9e6e6,0 2px 0 #e9e6e6,0 3px 0 #e9e6e6,0 4px 0 #e9e6e6,0 5px 0 #e9e6e6,0 6px 0 #e9e6e6,0 7px 0 #e9e6e6,0 8px 0 #e9e6e6,0 9px 0 #e9e6e6,0 10px 0 #e9e6e6,0 30px 10px rgba(0,0,0,.7);transform:translateZ(200px)}.tilt,.windowWrap{transform-style:preserve-3d}
\ No newline at end of file
+html{--text:#f4e8c1}.wrapper{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;-ms-overflow-style:none;scrollbar-width:none;z-index:-6}.wrapper::-webkit-scrollbar{display:none}.indexPage{background-color:var(--neon-bg-color);background-position:50%;background-repeat:no-repeat;background-size:cover;color:var(--text);height:100%;left:0;margin:0;overflow:hidden;padding:0;top:0;width:100%;z-index:-10}.window{background:transparent;height:70%;left:10%;top:15%;width:80%;z-index:999}.window,.window .windowWrap{align-items:center;display:flex;justify-content:center;position:relative}.window .windowWrap{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid #fff;border-radius:1em;box-shadow:0 0 10mm #000;height:100%;text-align:center;width:100%;z-index:11}.window .windowWrap .text{position:relative;text-align:center;width:100%}.window .windowWrap .text .title{font-family:monoton;font-size:7vw;text-transform:uppercase}.description{font-family:rocksalt;font-size:1.75vw}.title{text-shadow:15px 15px 15px #000;-webkit-transition:all .5s;transition:all .5s}.title:hover{transform:scale(1.1);-webkit-transition:all .5s;transition:all .5s}.window .windowWrap .text .br{display:block;height:0;margin-bottom:5vh;width:0}.text{text-shadow:0 1px 0 #e9e6e6,0 2px 0 #e9e6e6,0 3px 0 #e9e6e6,0 4px 0 #e9e6e6,0 5px 0 #e9e6e6,0 6px 0 #e9e6e6,0 7px 0 #e9e6e6,0 8px 0 #e9e6e6,0 9px 0 #e9e6e6,0 10px 0 #e9e6e6,0 30px 10px rgba(0,0,0,.7);transform:translateZ(200px)}.tilt,.windowWrap{transform-style:preserve-3d}
\ No newline at end of file
diff --git a/public/css/style.css b/public/css/style.css
index 477c9a59..6d8db4a8 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -1 +1 @@
-html{--topBarHeight:3em;--neon-bg-color:#05010d;color-scheme:dark}@font-face{font-family:hacked;src:url(/fonts/Hacked-KerX.ttf)}@font-face{font-family:smooth;src:url(/fonts/SmoothElegantRegular-ZLv3.ttf)}@font-face{font-family:liga;src:url(/fonts/LigaJetBrainsMonoNerdFont-Regular.ttf)}@font-face{font-family:big;src:url(/fonts/Big500-8MLOM.ttf)}@font-face{font-family:monoton;src:url(/fonts/Monoton.ttf)}@font-face{font-family:rocksalt;src:url(/fonts/RockSalt-Regular.ttf)}@font-face{font-family:audiowide;src:url(/fonts/audiowide.ttf)}*{box-sizing:border-box;font-family:liga;margin:0;padding:0;text-shadow:0 0 1px #000;-webkit-font-smoothing:antialiased;font-smooth:antialiased}@media (pointer:coarse),(pointer:none){*{transition:all .3s}}body{left:0;top:0;transition:background 1s ease-in-out}body::-webkit-scrollbar{display:none}@keyframes slideInTop{0%{transform:translateY(-300px)}to{transform:translateY(0)}}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(30px)}80%{transform:translateY(-15px)}}@keyframes zoomIn{0%{scale:.01}65%{scale:1.05}to{position:relative;scale:1}}@keyframes zoomOut{0%{transform:scale(1)}to{transform:scale(.01)}}@keyframes fadeZoomIn{0%{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=35)";opacity:.35;scale:1.15}to{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";opacity:1;scale:1}}@keyframes reveal{0%{-webkit-backdrop-filter:blur(32px);backdrop-filter:blur(32px);-webkit-filter:blur(32px);-moz-filter:blur(32px);-o-filter:blur(32px);-ms-filter:blur(32px);filter:blur(32px);transform:scale(2)}}@keyframes shake{0%{transform:rotate(0deg)}25%{transform:rotate(.5deg)}50%{transform:rotate(0eg)}75%{transform:rotate(-.5deg)}to{transform:rotate(0deg)}}@keyframes background-pan{0%{background-position:0}to{background-position:-200%}}@keyframes fadeIn{0%{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";opacity:0;scale:.8}to{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";opacity:1;scale:1}}@keyframes fadeOut{to{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";opacity:0;scale:.8}}@keyframes scroll{0%{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";opacity:.8;scale:.75}to{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";opacity:1;scale:1}}@keyframes rotate{0%{rotate:0deg}50%{scale:1 1.25}to{rotate:1turn}}.animate{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animate.animate--infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animate.animation--delay-1s{-webkit-animation-delay:1s;animation-delay:1s}.animate.animation--delay-p5s{animation-delay:.5s;-webkit-animation-duration:.5s;animation-duration:.5s}.animate.animation--delay-p3s{animation-delay:.3s}.animate.animation--delay-p3s,.animate.animation--fast{-webkit-animation-duration:.3s;animation-duration:.3s}.animate.animation--slow{-webkit-animation-duration:1s;animation-duration:1s}.animate.slideInTop{animation-name:slideInTop;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}.animate.bounce{-webkit-animation-name:bounce;animation-name:bounce}.animate.zoomIn{-webkit-animation-name:reveal;animation-name:zoomIn}.animate.zoomIn,.animate.zoomOut{-webkit-transition-timing-function:linear;transition-timing-function:linear}.animate.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}.animate.reveal{animation-duration:.5s;-webkit-animation-name:reveal;animation-name:reveal;-webkit-transition-timing-function:linear;transition-timing-function:linear}.animate.shake{-webkit-animation-name:shake;animation-name:shake}.animate.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}.animate.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}.animate.fadeZoomIn{-webkit-animation-name:fadeZoomIn;animation-name:fadeZoomIn}.aniamte.persist{animation-fill-mode:forwards}@media (prefers-reduced-motion:no-preference){:has(:target){scroll-behavior:smooth;scroll-padding-top:var(--topBarHeight)}}.js-tilt-glare{border-radius:18px;overflow:hidden}header{align-items:center;background:#000;background:rgba(0,0,0,.2);height:3em;justify-content:space-between;left:0;position:fixed;top:0;transition:all .3s;width:100%;z-index:1000}.navBar a{border-radius:8px;color:#f4e8c1;font-size:5mm;height:100%;margin-left:5mm;margin-right:5mm;padding-bottom:3mm;padding-top:3mm;position:relative;text-align:center;text-decoration:none;text-transform:capitalize}.navBar .hleft a{float:left}.navBar .hright a{float:right}.navBar a:after{background:grey;background:hsla(0,0%,50%,.2);border-radius:1mm;bottom:0;content:"";height:1mm;left:0;position:absolute;transform:scaleX(0);-webkit-transition:all .3s;transition:all .3s;width:100%}.navBar a:hover:after{transform:scaleX(1.1)}.navBar a:hover{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-transition:all 1s;transition:all 1s}.navBar a.active:after{background:grey;background:hsla(0,0%,50%,.9);border-radius:1mm;bottom:0;content:"";height:1mm;left:0;position:absolute;transform:scaleX(1);width:100%}#navBarHeader:active,#navBarHeader:hover,.navBar:active,.navBar:hover,header:active,header:hover{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transform:scale(1.005);transition:all .5s}#navBarHeader,.navBar,header{-webkit-backdrop-filter:blur(2.5px);backdrop-filter:blur(2.5px);transition:all .5s}.contents{height:100%;margin:0;padding:0;width:100%}section{position:relative}.wrapper{height:100vh;overflow-x:hidden;overflow-y:auto;perspective:10px}a:hover{cursor:pointer;font-size:5mm;font-weight:700;height:100%;margin-left:5mm;margin-right:5mm;padding-bottom:3mm;padding-top:3mm;position:relative;text-align:center;text-decoration:underline;-webkit-text-decoration-line:underline;text-decoration-line:underline;text-decoration-thickness:3px;text-transform:capitalize;text-underline-offset:1px;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);-webkit-transition:all .5s;transition:all .5s}a:active{transform:scale(.9)}.sep{height:5vh;width:5vh}.blob{animation-fill-mode:forwards;background-color:#fff;background:-webkit-gradient(linear,left top,right top,from(#0ff),to(#9370db));background:linear-gradient(90deg,#0ff,#9370db);filter:blur(7vmax);-webkit-filter:blur(7vmax);min-height:75%;min-width:75%;z-index:0}.blob,.sblob{border-radius:50%;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";height:15vmax;left:50%;opacity:.8;position:absolute;top:50%;translate:-50% -50%;width:20vmax}.sblob{animation:rotate 20s infinite;aspect-ratio:1;background-color:#fff;background:linear-gradient(90deg,#0ff,#9370db);filter:blur(7vmax);-webkit-filter:blur(7vmax);z-index:-1}
\ No newline at end of file
+html{--topBarHeight:5em;--neon-bg-color:#05010d;color-scheme:dark}@font-face{font-family:hacked;src:url(/fonts/Hacked-KerX.ttf)}@font-face{font-family:smooth;src:url(/fonts/SmoothElegantRegular-ZLv3.ttf)}@font-face{font-family:liga;src:url(/fonts/LigaJetBrainsMonoNerdFont-Regular.ttf)}@font-face{font-family:big;src:url(/fonts/Big500-8MLOM.ttf)}@font-face{font-family:monoton;src:url(/fonts/Monoton.ttf)}@font-face{font-family:rocksalt;src:url(/fonts/RockSalt-Regular.ttf)}@font-face{font-family:audiowide;src:url(/fonts/audiowide.ttf)}*{box-sizing:border-box;font-family:liga;margin:0;padding:0;text-shadow:0 0 1px #000;-webkit-font-smoothing:antialiased;font-smooth:antialiased}@media (pointer:coarse),(pointer:none){*{transition:all .3s}}body{left:0;top:0;transition:background 1s ease-in-out}body::-webkit-scrollbar{display:none}@keyframes slideInTop{0%{transform:translateY(-300px)}to{transform:translateY(0)}}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(30px)}80%{transform:translateY(-15px)}}@keyframes zoomIn{0%{scale:.01}65%{scale:1.05}to{position:relative;scale:1}}@keyframes zoomOut{0%{transform:scale(1)}to{transform:scale(.01)}}@keyframes fadeZoomIn{0%{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=35)";opacity:.35;scale:1.15}to{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";opacity:1;scale:1}}@keyframes reveal{0%{-webkit-backdrop-filter:blur(32px);backdrop-filter:blur(32px);-webkit-filter:blur(32px);-moz-filter:blur(32px);-o-filter:blur(32px);-ms-filter:blur(32px);filter:blur(32px);transform:scale(2)}}@keyframes shake{0%{transform:rotate(0deg)}25%{transform:rotate(.5deg)}50%{transform:rotate(0eg)}75%{transform:rotate(-.5deg)}to{transform:rotate(0deg)}}@keyframes background-pan{0%{background-position:0}to{background-position:-200%}}@keyframes fadeIn{0%{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";opacity:0;scale:.8}to{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";opacity:1;scale:1}}@keyframes fadeOut{to{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";opacity:0;scale:.8}}@keyframes scroll{0%{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";opacity:.8;scale:.75}to{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";opacity:1;scale:1}}@keyframes rotate{0%{rotate:0deg}50%{scale:1 1.25}to{rotate:1turn}}.animate{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animate.animate--infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animate.animation--delay-1s{-webkit-animation-delay:1s;animation-delay:1s}.animate.animation--delay-p5s{animation-delay:.5s;-webkit-animation-duration:.5s;animation-duration:.5s}.animate.animation--delay-p3s{animation-delay:.3s}.animate.animation--delay-p3s,.animate.animation--fast{-webkit-animation-duration:.3s;animation-duration:.3s}.animate.animation--slow{-webkit-animation-duration:1s;animation-duration:1s}.animate.slideInTop{animation-name:slideInTop;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}.animate.bounce{-webkit-animation-name:bounce;animation-name:bounce}.animate.zoomIn{-webkit-animation-name:reveal;animation-name:zoomIn}.animate.zoomIn,.animate.zoomOut{-webkit-transition-timing-function:linear;transition-timing-function:linear}.animate.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}.animate.reveal{animation-duration:.5s;-webkit-animation-name:reveal;animation-name:reveal;-webkit-transition-timing-function:linear;transition-timing-function:linear}.animate.shake{-webkit-animation-name:shake;animation-name:shake}.animate.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}.animate.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}.animate.fadeZoomIn{-webkit-animation-name:fadeZoomIn;animation-name:fadeZoomIn}.aniamte.persist{animation-fill-mode:forwards}@media (prefers-reduced-motion:no-preference){:has(:target){scroll-behavior:smooth;scroll-padding-top:var(--topBarHeight)}}.js-tilt-glare{border-radius:18px;overflow:hidden}header{align-items:center;background-color:#000;height:var(--topBarHeight);justify-content:space-between;left:0;margin-left:12.5%;position:fixed;top:32px;top:2rem;width:75%;z-index:1000}.navBar a,header{border-radius:32px;text-align:center;transition:all .3s}.navBar a{color:#f4e8c1;font-size:32px;font-size:2rem;height:100%;margin-left:10mm;margin-right:10mm;padding-top:5mm;position:relative;text-decoration:none;text-transform:capitalize}.navBar .hleft a{float:left}.navBar .hright a{float:right}.navBar a:after{background:grey;background:hsla(0,0%,50%,.2);border-radius:1mm;bottom:0;content:"";height:1mm;left:0;position:absolute;transform:scaleX(0);-webkit-transition:all .3s;transition:all .3s;width:100%}.navBar a:hover:after{transform:scaleX(1.1)}.navBar a:hover{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-transition:all 1s;transition:all 1s}.navBar a.active:after{background:grey;background:hsla(0,0%,50%,.9);border-radius:1mm;bottom:0;content:"";height:1mm;left:0;position:absolute;transform:scaleX(1);width:100%}#navBarHeader:active,#navBarHeader:hover,.navBar:active,.navBar:hover,header:active,header:hover{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transform:scale(1.005);transition:all .5s}#navBarHeader,.navBar,header{-webkit-backdrop-filter:blur(2.5px);backdrop-filter:blur(2.5px);transition:all .5s}.contents{height:100%;margin:0;padding:0;width:100%}section{position:relative}.wrapper{height:100vh;overflow-x:hidden;overflow-y:auto;perspective:10px}a:hover{cursor:pointer;font-weight:700;height:100%;margin-left:5mm;margin-right:5mm;padding-bottom:3mm;padding-top:3mm;position:relative;text-align:center;text-decoration:underline;-webkit-text-decoration-line:underline;text-decoration-line:underline;text-decoration-thickness:3px;text-transform:capitalize;text-underline-offset:1px;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);-webkit-transition:all .5s;transition:all .5s}a:active{transform:scale(.9)}.sep{height:5vh;width:5vh}.blob{animation-fill-mode:forwards;background-color:#fff;background:-webkit-gradient(linear,left top,right top,from(#0ff),to(#9370db));background:linear-gradient(90deg,#0ff,#9370db);filter:blur(7vmax);-webkit-filter:blur(7vmax);min-height:75%;min-width:75%;z-index:0}.blob,.sblob{border-radius:50%;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";height:15vmax;left:50%;opacity:.8;position:absolute;top:50%;translate:-50% -50%;width:20vmax}.sblob{animation:rotate 20s infinite;aspect-ratio:1;background-color:#fff;background:linear-gradient(90deg,#0ff,#9370db);filter:blur(7vmax);-webkit-filter:blur(7vmax);z-index:-1}
\ No newline at end of file
diff --git a/public/js/header.js b/public/js/header.js
index 3bc06a3a..7e7bbfe8 100644
--- a/public/js/header.js
+++ b/public/js/header.js
@@ -1,8 +1,8 @@
 "use strict";
 
 var header = document.querySelector('[header]');
-var newElement = document.createElement('div');
+var mainHeader = document.createElement('div');
 var page = header.getAttribute('page');
-newElement.innerHTML = "\n<!-- header -->\n<header id=\"navBarHeader\">\n\t<nav class=\"navBar\">\n\t\t<div class=\"hleft\">\n\t\t\t<a id=\"btnHome\" style=\"text-decoration: unset\" href=\"/\">Home<span></span></span></a>\n\t\t</div>\n\t\t<div class=\"hright\">\n\t\t\t<a href=\"/ghrepos\" id=\"btnGhRepo\" style=\"text-decoration: unset\">Github Repos</a>\n\t\t\t<a href=\"/about\" id=\"btnAbout\" style=\"text-decoration: unset\">About</a>\n\t\t</div>\n\t</nav> \n</header>\n";
-header.appendChild(newElement);
+mainHeader.innerHTML = "\n<!-- header -->\n<header id=\"navBarHeader\">\n\t<nav class=\"navBar\">\n\t\t<div class=\"hleft\">\n\t\t\t<a id=\"btnHome\" style=\"text-decoration: unset\" href=\"/\">Home<span></span></span></a>\n\t\t</div>\n\t\t<div class=\"hright\">\n\t\t\t<a href=\"/ghrepos\" id=\"btnGhRepo\" style=\"text-decoration: unset\">Github Repos</a>\n\t\t\t<a href=\"/about\" id=\"btnAbout\" style=\"text-decoration: unset\">About</a>\n\t\t</div>\n\t</nav> \n</header>\n";
+header.appendChild(mainHeader);
 document.getElementById("btn" + page).setAttribute('class', 'active');
\ No newline at end of file
diff --git a/src/css/index.css b/src/css/index.css
index 633ac01a..09dbb508 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -6,7 +6,8 @@
     width: 100%;
     top: 0;
     left: 0;
-    overflow-x: hidden;
+    overflow: hidden;
+    position: fixed;
     -ms-overflow-style: none;
     scrollbar-width: none;
     z-index: -6;
@@ -15,6 +16,7 @@
     display: none;
 }
 
+
 /* main info window ======================================= */
 .indexPage {
     overflow: hidden;
diff --git a/src/css/style.css b/src/css/style.css
index 3e6ab521..5d277551 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -1,5 +1,5 @@
 :root {
-    --topBarHeight: 3em;
+    --topBarHeight: 5em;
     --neon-bg-color: #05010d
 }
 
@@ -327,31 +327,37 @@ body::-webkit-scrollbar {
 
 header {
     position: fixed;
-    top: 0;
+    top: 2rem;
     left: 0;
-    width: 100%;
-    height: 3em;
+    width: 75%;
+    margin-left: 12.5%;
+    height: var(--topBarHeight);
     justify-content: space-between;
     align-items: center;
+    text-align: center;
     /* background: color(0, 0, 0, .1); */
     z-index: 1000;
-    background: rgba(0, 0, 0, 0.2);
+    /* background: rgba(0, 0, 0, 0.2); */
+    background-color: #000;
+    border-radius: 32px;
     transition: all 0.3s;
 }
 
 .navBar a {
     position: relative;
     height: 100%;
-    font-size: 5mm;
+    text-align: center;
+    font-size: 2rem;
     text-transform: capitalize;
     text-align: center;
     text-decoration: none;
-    margin-left: 5mm;
-    margin-right: 5mm;
-    padding-top: 3mm;
-    padding-bottom: 3mm;
-    border-radius: 8px;
+    margin-left: 10mm;
+    margin-right: 10mm;
+    padding-top: 5mm;
+    /* padding-bottom: 3mm; */
+    border-radius: 32px;
     color: #F4E8C1;
+    transition: all .3s
 }
 
 .navBar .hleft a {float: left;}
@@ -449,13 +455,16 @@ a:hover {
     text-underline-offset: 1px;
     position: relative;
     height: 100%;
-    font-size: 5mm;
+    /* font-size: 5mm; */
     text-transform: capitalize;
     text-align: center;
+    /* start */
     margin-left: 5mm;
     margin-right: 5mm;
     padding-top: 3mm;
     padding-bottom: 3mm;
+    /* end
+    these lines will make it more appearence and jigully when hovered */
     font-weight: bold;
     -webkit-transition: all .5s;
     transition: all .5s;
diff --git a/src/js/header.js b/src/js/header.js
index fe13c4ed..c04a0f6d 100644
--- a/src/js/header.js
+++ b/src/js/header.js
@@ -1,9 +1,8 @@
 let header = document.querySelector('[header]');
-let newElement = document.createElement('div');
+let mainHeader = document.createElement('div');
 let page = header.getAttribute('page');
 
-// console.log(page);
-newElement.innerHTML = `
+mainHeader.innerHTML = `
 <!-- header -->
 <header id="navBarHeader">
 	<nav class="navBar">
@@ -18,5 +17,5 @@ newElement.innerHTML = `
 </header>
 `;
 
-header.appendChild(newElement);
+header.appendChild(mainHeader);
 document.getElementById("btn"+page).setAttribute('class', 'active');