make navBar(header) presist active depending on which page user's on

10 files changed, 139 insertions, 62 deletions

diff --git a/index.html b/index.html
index b823e481..b33d20e1 100644
--- a/index.html
+++ b/index.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html5>
 <html lang="en">
-<script src="/src/js/includehtml.js"></script>
+<script src="/src/js/includeheader.js"></script>
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -10,23 +10,25 @@
     </head>
     <body>
         <!-- headers -->
-        <div include-html="/src/html/headers.html"></div>
-        <script>includeHTML();</script>
+        <div include-header="/src/html/headers.html"></div>
+        <script>includeHeader();</script>
 
         <!-- index page -->
-        <section class="indexPage">
-            <div class="window">
-                <div class="placeholder" id="infos">
-                    <div class="text">
-                        <h2>Hello! This is</h2>
-                        <object class="br"></object>
-                        <h1 class="title">littleblack111</h1>
-                        <object class="br"></object>
-                        <h2>welcome to my <br> website!</h2>
-                    </div>
-                </div>
-            </div>
-        </section>
+        <div class="wrapper">
+          <section class="indexPage">
+              <div class="window slowScroll">
+                  <div class="placeholder" id="infos">
+                      <div class="text fastScroll">
+                          <h2>Hello! This is</h2>
+                          <object class="br"></object>
+                          <h1 class="title">littleblack111</h1>
+                          <object class="br"></object>
+                          <h2>welcome to my <br> website!</h2>
+                      </div>
+                  </div>
+              </div>
+          </section>
+        </div>
 
         <script src="/src/js/index.js"></script>
     </body>
diff --git a/pages/info/about.html b/pages/info/about.html
new file mode 100644
index 00000000..89d0c75b
--- /dev/null
+++ b/pages/info/about.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<script src="/src/js/includeheader.js"></script>
+  <head>
+    <title>About Me</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href="/src/css/style.css" rel="stylesheet">
+    <link href="/src/css/about.css" rel="stylesheet">
+  </head>
+  <body>
+      <!-- headers -->
+      <div include-header="/src/html/headers.html"></div>
+      <script>includeHeader();</script>
+      <!-- main page -->
+      <section class="aboutPage">
+        <div class="pp">
+          <img src="/images/self.jpg" alt="Me">
+        </div>
+        <div class="name">
+          <strong>littleblack111</strong>
+        </div>
+        <div class="intro">
+          <strong>Who am I</strong>
+          <p>I'm a senior programmer</p>
+        </div>
+        <div class="info" />
+          <ul>What programming language do I do?
+          <li>Python(3)</li>
+          </ul>
+      </section>
+      <script src="/src/js/about.js"></script>
+    </body>
+</html>
diff --git a/pages/repo/github/repos.html b/pages/repo/github/repos.html
index 0b0f6aed..437204bf 100644
--- a/pages/repo/github/repos.html
+++ b/pages/repo/github/repos.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
-<script src="/src/js/includehtml.js"></script>
+<script src="/src/js/includeheader.js"></script>
 
 <head>
     <meta charset="UTF-8" />
@@ -15,8 +15,11 @@
 </head>
 
 <body>
-    <div include-html="/src/html/headers.html"></div>
-    <script>includeHTML();</script>
+    <!-- headers -->
+    <div include-header="/src/html/headers.html"></div>
+    <script>includeHeader();</script>
+
+    <!-- main Github Functions -->
     <main class="container">
         <h1>All Of My Projects</h1>
         <section class="intro">
diff --git a/src/css/ghrepo.css b/src/css/ghrepo.css
index 2c8d6d7a..79100ffd 100644
--- a/src/css/ghrepo.css
+++ b/src/css/ghrepo.css
@@ -22,8 +22,11 @@
     box-sizing: border-box;
     /* background-image: url(/images/backgroundNightCity.jpg); */
     background: transparent;
+
 }
 
+
+
 body {
     display: flex;
     align-items: center;
@@ -50,7 +53,7 @@ main {
     align-items: center;
     width: 90%;
     max-width: 1280px;
-    background: transparent;
+    /* background: transparent; */
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
diff --git a/src/css/index.css b/src/css/index.css
index 29262abf..4666c95b 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -46,6 +46,7 @@
     position: relative;
     width: 100%;
     text-align: center;
+    text-shadow: 10px 10px 10px black;
 }
 
 .window .placeholder .text .title {
@@ -53,6 +54,10 @@
     font-size: 12.5vw;
 }
 
+.title {
+  text-shadow: 15px 15px 15px black;
+}
+
 .window .placeholder .text .br {
     display: block;
     height: 0;
diff --git a/src/css/style.css b/src/css/style.css
index 410e9646..a313b77e 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -26,6 +26,7 @@
     padding: 0;
     margin: 0;
     font-family: liga;
+    text-shadow: 0px 0px 1px black;
 }
 
 body {
@@ -110,3 +111,27 @@ header {
 section {
     position: relative;
 }
+
+.wrapper {
+  height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  perspective: 10px;
+}
+
+.slowScroll
+  transform: translateZ(-10px) scale(2);
+}
+
+.fastScroll {
+  transform: translateZ(-5px) scale(1.5);
+}
+
+.slowScroll,
+.fastScroll {
+  position: absolute;
+  /* height: 100%; */
+  /* width: 100%; */
+  object-fit: cover;
+  z-index: -1;
+}
diff --git a/src/js/includeheader.js b/src/js/includeheader.js
new file mode 100644
index 00000000..5ac7d067
--- /dev/null
+++ b/src/js/includeheader.js
@@ -0,0 +1,47 @@
+function includeHeader() {
+  var z, i, elmnt, file, xhttp;
+  // loop through a collection of all HTML elements
+  z = document.getElementsByTagName("*");
+  for (i = 0; i < z.length; i++) {
+    elmnt = z[i];
+    // search for elements with a certain attribute
+    file = elmnt.getAttribute("include-header");
+    if (file) {
+      // make an HTTP request using the attribute value as the file name
+      xhttp = new XMLHttpRequest();
+      xhttp.onreadystatechange = function() {
+        if (this.readyState == 4) {
+          if (this.status == 200) {
+            elmnt.innerHTML = this.responseText;
+            setActiveLink(); // Set the active link after including the HTML
+          }
+          if (this.status == 404) {
+            elmnt.innerHTML = "Page not found.";
+          }
+          // remove the attribute and call this function once more
+          elmnt.removeAttribute("include-header");
+          includeHeader();
+        }
+      };
+      xhttp.open("GET", file, true);
+      xhttp.send();
+      // exit the function
+      return;
+    }
+  }
+}
+
+// Set the active link based on the current page
+function setActiveLink() {
+  var currentPath = window.location.pathname;
+  var navLinks = document.getElementsByClassName("navBar")[0].getElementsByTagName("a");
+  for (var i = 0; i < navLinks.length; i++) {
+    var link = navLinks[i];
+    var href = link.getAttribute("href");
+    if (href === currentPath) {
+      link.classList.add("active");
+    } else {
+      link.classList.remove("active");
+    }
+  }
+}
diff --git a/src/js/includehtml.js b/src/js/includehtml.js
deleted file mode 100644
index 7b00285f..00000000
--- a/src/js/includehtml.js
+++ /dev/null
@@ -1,28 +0,0 @@
-function includeHTML() {
-  var z, i, elmnt, file, xhttp;
-  /*loop through a collection of all HTML elements:*/
-  z = document.getElementsByTagName("*");
-  for (i = 0; i < z.length; i++) {
-    elmnt = z[i];
-    /*search for elements with a certain atrribute:*/
-    file = elmnt.getAttribute("include-html");
-    if (file) {
-      /*make an HTTP request using the attribute value as the file name:*/
-      xhttp = new XMLHttpRequest();
-      xhttp.onreadystatechange = function() {
-        if (this.readyState == 4) {
-          if (this.status == 200) {elmnt.innerHTML = this.responseText;}
-          if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
-          /*remove the attribute, and call this function once more:*/
-          elmnt.removeAttribute("include-html");
-          includeHTML();
-        }
-      }      
-      xhttp.open("GET", file, true);
-      xhttp.send();
-      /*exit the function:*/
-      return;
-    }
-  }
-};
-
diff --git a/src/js/login.js b/src/js/login.js
deleted file mode 100644
index ce4c0803..00000000
--- a/src/js/login.js
+++ /dev/null
@@ -1,4 +0,0 @@
-function test() {
-    console.log(document.getElementById("username").value);
-    console.log(document.getElementById("password").value);
-}
\ No newline at end of file
diff --git a/src/js/register.js b/src/js/register.js
deleted file mode 100644
index 11f85852..00000000
--- a/src/js/register.js
+++ /dev/null
@@ -1,10 +0,0 @@
-function createAccount() {
-    if (document.getElementById("password").value == document.getElementById("verify-password").value) {
-        let username = document.getElementById("username").value;
-        let password = document.getElementById("password").value;
-        console.log(username);
-        console.log(password);
-    } else {
-        console.log("password does not match");
-    }
-}