From 692892a0ada3f8940fa560de4823039aecb8981b Mon Sep 17 00:00:00 2001
From: Camerin Figueroa <cam@camcodes.com>
Date: Wed, 20 Oct 2021 22:08:56 -0400
Subject: [PATCH] Added Introduction page and moved to be the homepage

---
 src/components/App.js                 |  3 +--
 src/components/Intro.js               | 15 ++++++++++-----
 src/components/Navigation.js          |  4 ----
 src/components/css/Navigation.css     |  2 +-
 src/components/css/Topic.css          | 11 ++++++++++-
 src/components/subcomponents/Topic.js |  2 +-
 6 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/src/components/App.js b/src/components/App.js
index d82e8da..f45730a 100644
--- a/src/components/App.js
+++ b/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>
diff --git a/src/components/Intro.js b/src/components/Intro.js
index 786a2d6..8a37abb 100644
--- a/src/components/Intro.js
+++ b/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
-    this.props.hideNavigation();
+    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>,
diff --git a/src/components/Navigation.js b/src/components/Navigation.js
index 7b49567..42b091a 100644
--- a/src/components/Navigation.js
+++ b/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 />
diff --git a/src/components/css/Navigation.css b/src/components/css/Navigation.css
index c3f7588..9b93651 100644
--- a/src/components/css/Navigation.css
+++ b/src/components/css/Navigation.css
@@ -1,5 +1,5 @@
 .Navigation {
-    z-index:9;
+    z-index:18;
     position: relative;
     height: 4rem;
     display: flex;
diff --git a/src/components/css/Topic.css b/src/components/css/Topic.css
index c9e9033..1c84bc8 100644
--- a/src/components/css/Topic.css
+++ b/src/components/css/Topic.css
@@ -16,4 +16,13 @@
     height:fit-content;
 }
 
-.topic {}
\ No newline at end of file
+.topic .title {
+    margin-top:10px;
+    margin-bottom:10px;
+    padding:0;
+}
+
+.topic .children {
+    margin-top:10px;
+    margin-bottom: 10px;
+}
\ No newline at end of file
diff --git a/src/components/subcomponents/Topic.js b/src/components/subcomponents/Topic.js
index 39e8f2f..a72e0af 100644
--- a/src/components/subcomponents/Topic.js
+++ b/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>