add scroll spy

index.html

@@ -21,28 +21,29 @@
 
     <div class="container">
         <!-- code for the navigation bar -->
-        <div class="navigation">
+        <nav class="navigation">
             <span class="name">
                 <b>superstar dev</b>
             </span>
-            <ul class="nav-list">
-                <li class="active">Home</li>
-                <li>About Us</li>
-                <li>Resume</li>
-                <li>Services</li>
-                <li>Skills</li>
-                <li>Projects</li>
-                <li>My blog</li>
-                <li>Contact Us</li>
+            <ul class="nav-list" id="navbar">
+                <li id="#home" class="active">Home</li>
+                <li id="about_us">About Us</li>
+                <li id="resume">Resume</li>
+                <li id="services">Services</li>
+                <li id="skills">Skills</li>
+                <li id="projects">Projects</li>
+                <li id="blog">My blog</li>
+                <li id="contact-us">Contact Us</li>
             </ul>
+
 
             <div style="clear: both;"></div>
-        </div>
+            </nav>
 
         <!-- Code for the slider -->
         <div class="slider" style="width: 100%; height: 800px">
 
-            <div class="content">
+            <div class="content" id="home">
                 <h3 class="slide-content-hello">Hello!</h3>
                 <h1 class="slide-content-about">
 
@@ -67,7 +68,7 @@ <h1 class="slide-content-about">TOBECHUKWU</h1>
 
 
         <!-- start about container -->
-        <div class="about_container">
+        <div class="about_container" id="about_us">
 
             <div class="img2">
                 <img src="http://pluspng.com/img-png/png-men-men-png-495.png" alt="">
@@ -113,7 +114,7 @@ <h4 style="color: white; font-size: 30px;">
 
 
         <!-- start resume container -->
-        <div class="resume">
+        <div class="resume" id="resume">
             <h1 class="resume1">
                 <strong>Resume</strong>
             </h1>
@@ -161,7 +162,7 @@ <h1 class="resume1">
 
     </div>
 
-    <div class="myskills">
+    <div class="myskills" id="skills">
         <h1 class="skills">My Skills</h1>
         <p class="shit">Far far away, behind the word mountains, far from the countries Nigeria and Dubai</p>
         <div class="container10">
@@ -192,7 +193,7 @@ <h1 class="skills">My Skills</h1>
     <h1></h1>
 
 
-    <div class="custard" style=" width: 100%; height: 1000px; margin-left: 20px; margin-top: 450px">
+    <div class="custard" id="projects" style=" width: 100%; height: 1000px; margin-left: 20px; margin-top: 450px">
 
 
 
@@ -234,7 +235,7 @@ <h1 class="Projects">Our Projects</h1>
     <br>
     <br>
     <br>
-    <section class="blog">
+    <section class="blog" id="blog">
         <div class="blog">
             <h2 class="blog">Our Blog </h2>
             <p> A small river named Duden flos by their place and suppies it with the necessary regelialia. </p>
@@ -338,6 +339,12 @@ <h5 style="font-size: 12px;">WEBSITE</h5>
 
 
     <script src="./scripts/index.js"></script>
+    <script src="./vanillajs-scrollspy-master/dist/vanillajs-scrollspy.min.js"></script>
+    <script >
+        const navbar = document.querySelector('#navbar');
+    const scrollspy = new VanillaScrollspy(navbar, 1000, 'easeInOutQuint');
+scrollspy.init();
+    </script>
     <!-- project file -->
 </body>
 

scripts/index.js

@@ -1,4 +1,5 @@
 window.addEventListener('load',function(e){
     let preloader = document.getElementById('p_loader');
     preloader.style.display = 'none';
-})
+})
+

styles/index.css

@@ -97,8 +97,8 @@
       display: inline-block;
       text-align: right;
     }
-  div.navigation{
-    opacity: 0.5;
+  nav.navigation{
+    opacity: 0.8;
     background-color: #000;
     position: fixed;
     top:0;
@@ -776,3 +776,11 @@ margin-left: 50px
   left:850px;
   margin-top: 50px;
 }
+
+.nav-list li:active {
+  border-bottom: 2px solid #ffbd39;
+}
+
+ul.nav-list li{
+  transition: border-bottom .26s;
+}

t.html

@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>VanillaJS ScrollSpy</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
+    <style>
+      html, body {
+        height: 100%;
+      }
+      .navbar-brand > .navbar-item {
+        font-size: 20px;
+        font-weight: bold;
+      }
+      .navbar-menu .navbar-item {
+        font-size: 14px;
+        transition: background-color .26s, color .26s;
+      }
+      .navbar-menu .navbar-item.active {
+        background-color: #222;
+        color: red;
+      }
+      .page {
+        height: 100%;
+        padding: 80px 0;
+        width: 100%;
+      }
+      .page:nth-child(odd) { background-color: #ddd; }
+      .page:nth-child(even) { background-color: #fff; }
+    </style>
+  </head>
+
+  <body>
+    <nav class="navbar is-dark is-fixed-top" role="navigation" aria-label="main navigation">
+      <div class="container">
+        <div class="navbar-brand">
+          <a title="VanillaJS ScrollSpy" class="navbar-item">VanillaJS ScrollSpy</a>
+
+          <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
+            <span aria-hidden="true"></span>
+            <span aria-hidden="true"></span>
+            <span aria-hidden="true"></span>
+          </a>
+        </div>
+
+        <div id="navbar" class="navbar-menu navbar-scroll">
+          <div class="navbar-start">
+            <a href="#home" title="Home" class="navbar-item active">Home</a>
+            <a href="#portfolio" title="Portfolio" class="navbar-item">Portfolio</a>
+            <a href="#about" title="About" class="navbar-item">About</a>
+            <a href="#contact" title="Contact" class="navbar-item">Contact</a>
+          </div>
+        </div>
+      </div>
+    </nav>
+
+    <section id="home" class="page">
+      <div class="container">
+        <h2 class="title">Home</h2>
+      </div>
+    </section>
+
+    <section id="portfolio" class="page">
+      <div class="container">
+        <h2 class="title">Portfolio</h2>
+      </div>
+    </section>
+
+    <section id="about" class="page">
+      <div class="container">
+        <h2 class="title">About</h2>
+      </div>
+    </section>
+
+    <section id="contact" class="page">
+      <div class="container">
+        <h2 class="title">Contact</h2>
+      </div>
+    </section>
+
+    <script src="./vanillajs-scrollspy-master/dist/vanillajs-scrollspy.min.js"></script>
+    <script>
+      const navbar = document.querySelector('#navbar');
+      const scrollspy = new VanillaScrollspy(navbar);
+      scrollspy.init();
+    </script>
+  </body>
+</html>

vanillajs-scrollspy-master/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ['env'],
+}

vanillajs-scrollspy-master/.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

vanillajs-scrollspy-master/.eslintrc.json

@@ -0,0 +1,13 @@
+{
+  "extends": "airbnb-base",
+  "plugins": [
+  	"import"
+  ],
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "globals": {
+    "document": false
+  }
+}

vanillajs-scrollspy-master/.gitignore

@@ -0,0 +1,62 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+.DS_Store
+package-lock.json
+.vscode/

vanillajs-scrollspy-master/.travis.yml

@@ -0,0 +1,14 @@
+language: node_js
+
+node_js:
+  - "7"
+
+cache:
+  diretories:
+    "node_modules"
+
+before_script:
+  - npm run build:all
+
+after_success:
+  - npm run coveralls

vanillajs-scrollspy-master/CONTRIBUTING.md

@@ -0,0 +1,12 @@
+# Contributing
+
+1. Fork it!
+2. Create your feature branch: `git checkout -b my-new-feature`
+3. Commit your changes: `git commit -m 'Add some feature'`
+4. Push to the branch: `git push origin my-new-feature`
+
+*All commands to build and test are available on [package.json](package.json).*
+
+*Remember that we have a pre-push hook with steps that analyzes and prevents mistakes.*
+
+**After your pull request is merged**, you can safely delete your branch.

vanillajs-scrollspy-master/LICENSE.md

@@ -0,0 +1,7 @@
+Copyright 2018 - Eder Sampaio
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.