Added Introduction page and moved to be the homepage

src/components/App.js

@@ -13,10 +13,9 @@ const App = (props) => {
       <div className="App">
         <Navigation />
         <Switch>
-          <Route path="/" exact component={Home} />
+          <Route path="/" exact component={Intro} />
           <Route path="/github" render={(props) => <Github {...props} />} />
           <Route path="/about" component={About} />
-          <Route path="/intro" component={Intro} />
         </Switch>
       </div>
     </BrowserRouter>

src/components/Intro.js

@@ -108,7 +108,8 @@ class Intro extends React.Component {
         
     } else if (input === "down" && this.state.nextLoc >= this.topics.length) {
         // Set something to happen when you reach the end
-
+        this.props.showNavigation();
+        localStorage.setItem('intro', true);
     }
     
   };
@@ -120,10 +121,12 @@ class Intro extends React.Component {
         });
     }, 100);
 
-    document.title = "Introduction"; // Set document title
+    document.title = "HomePage"; // Set document title
 
     // Hide the navigation
+    if (!localStorage.getItem('intro')) {
         this.props.hideNavigation();
+    }
 
   }
 
@@ -139,9 +142,11 @@ class Intro extends React.Component {
         </div>
       </Topic>,
       <Topic title="Studied at Marist College" background="img/marist.webp">
-          <a href="https://www.marist.edu/">Marist.edu</a>
+          Field of Study: Computer Science
+          ...
+          College: <a href="https://www.marist.edu/">Marist.edu</a>
       </Topic>,
-      <Topic link="/github" title="You can view my github repositories" background="img/space.webp">
+      <Topic link="/github" title="Github" background="img/space.webp">
           View a list of projects I've done right on this website. You can easily direct to github
           where you can see the project code itself.
       </Topic>,

src/components/Navigation.js

@@ -22,10 +22,6 @@ const Navigation = (props) => {
           About
           <FileEarmarkPerson />
         </Link>
-        <Link to="/intro">
-          View the Intro
-          <Flag />
-        </Link>
         <button className="end" onClick={()=>props.toggleContactModal()}>
           Contact Me
           <Envelope />

src/components/css/Navigation.css

@@ -1,5 +1,5 @@
 .Navigation {
-    z-index:9;
+    z-index:18;
     position: relative;
     height: 4rem;
     display: flex;

src/components/css/Topic.css

@@ -16,4 +16,13 @@
     height:fit-content;
 }
 
-.topic {}
+.topic .title {
+    margin-top:10px;
+    margin-bottom:10px;
+    padding:0;
+}
+
+.topic .children {
+    margin-top:10px;
+    margin-bottom: 10px;
+}

src/components/subcomponents/Topic.js

@@ -17,7 +17,7 @@ const Card = (props) => {
             style={{backgroundImage: props.background ? `url(${props.background})`:''}}
             >
             <div className="content">
-                <div className="title">{props.title}</div>
+                <h1 className="title">{props.title}</h1>
                 <div className="children">
                     {props.children}
                 </div>