From 08f74bac473b9060459b9f514f566c7b25db5b42 Mon Sep 17 00:00:00 2001
From: Gwen Friedman <gwenfriedman@Gwens-Air.hsd1.ma.comcast.net>
Date: Wed, 19 Feb 2020 20:41:03 -0500
Subject: [PATCH] added anchors

---
 package-lock.json      |  13 +++++
 package.json           |   2 +
 src/App.js             |   6 +-
 src/Components/Home.js | 127 ++++++++++++++++++++++-------------------
 src/Components/Nav.js  |  21 +++----
 5 files changed, 99 insertions(+), 70 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5265705..6c71e46 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10341,6 +10341,11 @@
         "prop-types": "^15.6.2"
       }
     },
+    "react-anchor-link-smooth-scroll": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/react-anchor-link-smooth-scroll/-/react-anchor-link-smooth-scroll-1.0.12.tgz",
+      "integrity": "sha512-aaY+9X0yh8YnC0jBfoTKpsiCLdO/Y6pCltww+VB+NnTBPDOvnIdnp1AlazajsDitc1j+cVSQ+yNtaVeTIMQbxw=="
+    },
     "react-app-polyfill": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/react-app-polyfill/-/react-app-polyfill-1.0.6.tgz",
@@ -10618,6 +10623,14 @@
         "tiny-warning": "^1.0.0"
       }
     },
+    "react-router-hash-link": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/react-router-hash-link/-/react-router-hash-link-1.2.2.tgz",
+      "integrity": "sha512-LBthLVHdqPeKDVt3+cFRhy15Z7veikOvdKRZRfyBR2vjqIE7rxn+tKLjb6DOmLm6JpoQVemVDnxQ35RVnEHdQA==",
+      "requires": {
+        "prop-types": "^15.6.0"
+      }
+    },
     "react-scripts": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.3.1.tgz",
diff --git a/package.json b/package.json
index 09587fc..33039bf 100644
--- a/package.json
+++ b/package.json
@@ -8,9 +8,11 @@
     "@testing-library/user-event": "^7.2.1",
     "bootstrap": "^4.4.1",
     "react": "^16.12.0",
+    "react-anchor-link-smooth-scroll": "^1.0.12",
     "react-bootstrap": "^1.0.0-beta.16",
     "react-dom": "^16.12.0",
     "react-router-dom": "^5.1.2",
+    "react-router-hash-link": "^1.2.2",
     "react-scripts": "3.3.1"
   },
   "scripts": {
diff --git a/src/App.js b/src/App.js
index 714229d..44dd66a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -10,12 +10,16 @@ import {BrowserRouter as Router, Route} from "react-router-dom";
 function App() {
     return (
         <div>
-            <Nav/>
             <Router>
+                <Nav/>
                 <div>
                     <Route exact path='/'
                            component={Home}/>
                 </div>
+                <div>
+                    <Route exact path='/home'
+                           component={Home}/>
+                </div>
                 <div>
                     <Route exact path='/hashbrowwn'
                            component={Hashbrowwn}/>
diff --git a/src/Components/Home.js b/src/Components/Home.js
index e910f10..756e643 100644
--- a/src/Components/Home.js
+++ b/src/Components/Home.js
@@ -12,9 +12,8 @@ import {Link} from "react-router-dom";
 function Home() {
     return (
         <div className="Home">
-
             {/*Most Recent Project*/}
-            <Link to={`/hashbrowwn`} style={{ textDecoration: 'none'}}>
+            <Link to={`/hashbrowwn`} style={{textDecoration: 'none'}}>
                 <div className={'row mt-5 justify-content-center'}>
                     {/*replace image here*/}
                     <img className={'rounded my-auto'} src={balloon} alt="Hashbrowwn balloon"/>
@@ -28,12 +27,13 @@ function Home() {
                             <h3 className={'orange-header'}>HASHBROWWN Balloon</h3>
 
                             {/*Replace Description here*/}
-                            <p className={'description'}> High-Altitude Solar-Heated Balloon Research Observatory With Wind Navigation </p>
+                            <p className={'description'}> High-Altitude Solar-Heated Balloon Research Observatory With
+                                Wind Navigation </p>
                         </div>
                     </div>
                 </div>
             </Link>
-            <p className={'text-center mt-5'}> <i className="down"></i></p>
+            <p className={'text-center mt-5'}><i className="down"></i></p>
 
 
             {/*PROJECTS SECTION*/}
@@ -44,44 +44,45 @@ function Home() {
                 </svg>
             </div>
 
-            {/*replace header name here*/}
-            <p className={'section-title'}> Mechanical Projects </p>
+            <section id={'mechanical'}>
+                {/*replace header name here*/}
+                <p className={'section-title'}> Mechanical Projects </p>
 
 
-            {/*copy and paste this to add a new section, update image, text, and link*/}
-            <div className={'row mt-5 justify-content-center'}>
-                <img className={'rounded my-auto project-pic'} src={emissions} alt="Emissions simulation"/>
-                <div className={'project-rect rounded'}>
-                    <div className={'project-text-field'}>
-                        {/*Replace Name here*/}
-                        <h3 className={'orange-project-header'}>Emissions Simulation</h3>
+                {/*copy and paste this to add a new section, update image, text, and link*/}
+                <div className={'row mt-5 justify-content-center'}>
+                    <img className={'rounded my-auto project-pic'} src={emissions} alt="Emissions simulation"/>
+                    <div className={'project-rect rounded'}>
+                        <div className={'project-text-field'}>
+                            {/*Replace Name here*/}
+                            <h3 className={'orange-project-header'}>Emissions Simulation</h3>
 
-                        {/*Replace Description here*/}
-                        <p className={'project-description'}>
-                            A simulation that takes physical input of users driving toy cars
-                            along a model roadway and changes the imagery displayed on the
-                            roadway’s backdrop in real time.
-                        </p>
+                            {/*Replace Description here*/}
+                            <p className={'project-description'}>
+                                A simulation that takes physical input of users driving toy cars
+                                along a model roadway and changes the imagery displayed on the
+                                roadway’s backdrop in real time.
+                            </p>
+                        </div>
                     </div>
                 </div>
-            </div>
 
-            <div className={'row mt-5 justify-content-center'}>
-                <img className={'rounded my-auto project-pic'} src={ballista} alt="Ballista"/>
-                <div className={'project-rect rounded'}>
-                    <div className={'project-text-field'}>
-                        {/*Replace Name here*/}
-                        <h3 className={'orange-project-header'}>Ballista</h3>
-
-                        {/*Replace Description here*/}
-                        <p className={'project-description'}>
-                            A physics final project with the objective of transferring torsional
-                            energy into ballistic kinetic energy.
-                        </p>
+                <div className={'row mt-5 justify-content-center'}>
+                    <img className={'rounded my-auto project-pic'} src={ballista} alt="Ballista"/>
+                    <div className={'project-rect rounded'}>
+                        <div className={'project-text-field'}>
+                            {/*Replace Name here*/}
+                            <h3 className={'orange-project-header'}>Ballista</h3>
+
+                            {/*Replace Description here*/}
+                            <p className={'project-description'}>
+                                A physics final project with the objective of transferring torsional
+                                energy into ballistic kinetic energy.
+                            </p>
+                        </div>
                     </div>
                 </div>
-            </div>
-
+            </section>
 
 
             <div className={'text-center'}>
@@ -89,23 +90,27 @@ function Home() {
                     <line x1="0" y1="0" x2="1040" y2="2"/>
                 </svg>
             </div>
-            {/*replace header name here*/}
-            <p className={'section-title'}> Electrical Projects </p>
+            <section id={'electrical'}>
+                {/*replace header name here*/}
+                <p className={'section-title'}> Electrical Projects </p>
 
 
-            {/*copy and paste this to add a new section, update image, text, and link*/}
-            <div className={'row mt-5 justify-content-center'}>
-                <img className={'rounded my-auto project-pic'} src={balloon} alt="Hashbrowwn balloon"/>
-                <div className={'project-rect rounded'}>
-                    <div className={'project-text-field'}>
-                        {/*Replace Name here*/}
-                        <h3 className={'orange-project-header'}>HASHBROWWN BALLOON</h3>
+                {/*copy and paste this to add a new section, update image, text, and link*/}
+                <div className={'row mt-5 justify-content-center'}>
+                    <img className={'rounded my-auto project-pic'} src={balloon} alt="Hashbrowwn balloon"/>
+                    <div className={'project-rect rounded'}>
+                        <div className={'project-text-field'}>
+                            {/*Replace Name here*/}
+                            <h3 className={'orange-project-header'}>HASHBROWWN BALLOON</h3>
 
-                        {/*Replace Description here*/}
-                        <p className={'project-description'}> High-Altitude Solar-Heated Balloon Research Observatory With Wind Navigation </p>
+                            {/*Replace Description here*/}
+                            <p className={'project-description'}> High-Altitude Solar-Heated Balloon Research
+                                Observatory
+                                With Wind Navigation </p>
+                        </div>
                     </div>
                 </div>
-            </div>
+            </section>
 
 
             <div className={'text-center'}>
@@ -113,25 +118,29 @@ function Home() {
                     <line x1="0" y1="0" x2="1040" y2="2"/>
                 </svg>
             </div>
-            {/*replace header name here*/}
-            <p className={'section-title'}> Materials Projects </p>
+            <section id={'materials'}>
+                {/*replace header name here*/}
+                <p className={'section-title'}> Materials Projects </p>
 
 
-            {/*copy and paste this to add a new section, update image, text, and link*/}
-            <div className={'row mt-5 justify-content-center'}>
-                <img className={'rounded my-auto project-pic'} src={balloon} alt="Hashbrowwn balloon"/>
-                <div className={'project-rect rounded'}>
-                    <div className={'project-text-field'}>
-                        {/*Replace Name here*/}
-                        <h3 className={'orange-project-header'}>HASHBROWWN BALLOON</h3>
+                {/*copy and paste this to add a new section, update image, text, and link*/}
+                <div className={'row mt-5 justify-content-center'}>
+                    <img className={'rounded my-auto project-pic'} src={balloon} alt="Hashbrowwn balloon"/>
+                    <div className={'project-rect rounded'}>
+                        <div className={'project-text-field'}>
+                            {/*Replace Name here*/}
+                            <h3 className={'orange-project-header'}>HASHBROWWN BALLOON</h3>
 
-                        {/*Replace Description here*/}
-                        <p className={'project-description'}> High-Altitude Solar-Heated Balloon Research Observatory With Wind Navigation </p>
+                            {/*Replace Description here*/}
+                            <p className={'project-description'}> High-Altitude Solar-Heated Balloon Research
+                                Observatory
+                                With Wind Navigation </p>
+                        </div>
                     </div>
                 </div>
-            </div>
-
+            </section>
         </div>
+
     );
 }
 
diff --git a/src/Components/Nav.js b/src/Components/Nav.js
index ff451ba..0e87eba 100644
--- a/src/Components/Nav.js
+++ b/src/Components/Nav.js
@@ -1,16 +1,14 @@
 import React from 'react';
 import './Nav.css';
-import {Link} from "react-router-dom";
+import { HashLink as Link } from 'react-router-hash-link';
 
 
 function Nav() {
     return (
         <nav className="navbar navbar-expand-lg navbar-light sticky-top bg-white">
-            {/*<Link to={`/`}>*/}
-            <a className="navbar-brand">
+            <a href={"/"} className={"navbar-brand"}>
                 <p className={'nav-header'}> Noah Taylor </p>
             </a>
-            {/*</Link>*/}
             <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
                     aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                 <span className="navbar-toggler-icon"></span>
@@ -18,19 +16,22 @@ function Nav() {
             <div className="collapse navbar-collapse" id="navbarNav">
                 <ul className="navbar-nav ml-auto mr-5">
                     <li className="nav-item mr-4">
-                        <a className="nav-link" href="/">
+                        <Link smooth to="/#mechanical"
+                              activeClassName="selected" className="nav-link">
                             <p className={'link'}>Mechanical</p>
-                        </a>
+                        </Link>
                     </li>
                     <li className="nav-item mr-4">
-                        <a className="nav-link" href="/">
+                        <Link to="/#electrical"
+                              activeClassName="selected" className="nav-link">
                             <p className={'link'}>Electrical</p>
-                            </a>
+                        </Link>
                     </li>
                     <li className="nav-item mr-3">
-                        <a className="nav-link" href="/">
+                        <Link to="/#materials"
+                              activeClassName="selected" className="nav-link">
                             <p className={'link'}>Materials</p>
-                        </a>
+                        </Link>
                     </li>
                     <svg className={'mr-3'} height="45" width="2">
                         <line x1="0" y1="0" x2="0" y2="45"/>