Fixed footer with social icons and made it responsive + misc

src/components/navigation/navigation.css

@@ -0,0 +1,30 @@
+.nav-background-color {
+  background-color: #eff1f4;
+}
+
+.nav-menu-item:hover {
+  background-color: #d8d8da !important;
+}
+
+.remove-link-styling {
+  color: inherit !important;
+  text-decoration: inherit !important;
+}
+
+.navbar-toggler-icon {
+  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(55, 58, 60, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !important;
+}
+
+.mobile-nav {
+  display: none;
+}
+
+@media (max-width: 575.98px) {  /* sm */
+  .desktop-nav {
+    display: none;
+  }
+
+  .mobile-nav {
+    display: block;
+  }
+}

src/components/navigation/navigation.js

@@ -0,0 +1,83 @@
+import React, {Component} from 'react';
+import './navigation.css';
+
+class NavigationBar extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+    };
+
+    this.navigationOptions = [
+      {
+        content: 'Intro',
+        href: '#intro'
+      },
+      {
+        content: 'Bio',
+        href: '#bio'
+      },
+      {
+        content: 'History',
+        href: '#history'
+      },
+      {
+        content: 'Skills',
+        href: '#skills'
+      },
+      {
+        content: 'Contact',
+        href: '#contact'
+      }
+    ];
+  }
+
+  navigationOptions = [];
+
+  render() {
+    return (
+      <div>
+        <div className="container-fluid desktop-nav fixed-top">
+          <div className="row justify-content-end nav-background-color">
+            {this.navigationOptions.map((navigationOption, i) => {
+              return ( 
+                <a className="col-1 nav-menu-item remove-link-styling" href={navigationOption.href} key={i}>
+                  <div className="text-center pt-2 pb-2">
+                    <h3>{navigationOption.content}</h3>
+                  </div>
+                </a>
+              );
+            })}
+          </div>
+        </div>
+        <div className="pos-f-t mobile-nav fixed-top nav-background-color">
+          <div className="collapse" id="navbarToggleExternalContent">
+            <div className="m-3">
+              {this.navigationOptions.map((navigationOption, i) => {
+                return ( 
+                  <div className="p-2" data-toggle="collapse" data-target="#navbarToggleExternalContent" key={i}>
+                    <a className="remove-link-styling" href={navigationOption.href} >
+                      <h4>{navigationOption.content}</h4>
+                    </a>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+          <nav className="navbar nav-background-color">
+            <button className="navbar-toggler" 
+                    type="button" 
+                    data-toggle="collapse" 
+                    data-target="#navbarToggleExternalContent" 
+                    aria-controls="navbarToggleExternalContent" 
+                    aria-expanded="true" 
+                    aria-label="Toggle navigation">
+              <span className="navbar-toggler-icon custom-toggler"></span>
+            </button>
+          </nav>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default NavigationBar;