Added buttons to intro

src/components/Intro.js

@@ -3,6 +3,7 @@ import { connect } from 'react-redux';
 import './css/Intro.css';
 import {hideNavigation, showNavigation} from '../actions';
 import Topic from './subcomponents/Topic';
+import { ChevronDoubleUp, ChevronDoubleDown } from 'react-bootstrap-icons';
 
 class Intro extends React.Component {
   constructor() {
@@ -127,6 +128,7 @@ class Intro extends React.Component {
   }
 
   // Topics to display in intro
+  // DISCLAIMER: Please add content to the topic or bugs may occur...
   topics = [
       <Topic title="Welcome to My Portfolio" background="/img/background.webp">
         <div>
@@ -140,17 +142,22 @@ class Intro extends React.Component {
           <a href="https://www.marist.edu/">Marist.edu</a>
       </Topic>,
       <Topic link="/github" title="You can view my github repositories" 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>,
-      <Topic link="/" title="Open the Website" background="/img/sunset.webp">
+      <Topic title="Open the Website" background="/img/sunset.webp">
           <a href="/" className="btn">Explore Cam's Projects</a>
       </Topic>
     ];
   
   render() {
 
+    // TODO: Fix bug where scrolling too fast will allow one to exit expected topic range
+
     // Render page
     return (
         <div onKeyDown={this.handleKey} tabIndex="0" className={this.state.start ? 'intro start':'intro'}>
+            <div className='navbutton top' onClick={()=>{this.handleInput('up')}}><ChevronDoubleUp/></div>
             <div id="previous" className={this.state.prev}>
                 {this.topics[this.state.prevLoc]}
             </div>
@@ -160,6 +167,7 @@ class Intro extends React.Component {
             <div id="next" className={this.state.next}>
                 {this.topics[this.state.nextLoc]}
             </div>
+            <div className='navbutton bottom' onClick={()=>{this.handleInput('down')}}><ChevronDoubleDown/></div>
         </div>
     );
   }

src/components/css/Intro.css

@@ -4,6 +4,7 @@
     width:100vw;
     height:100vh;
     display:flex;
+    flex-direction: column;
 }
 
 .intro.start {
@@ -72,4 +73,21 @@
 
 .intro .children a {
     color: #C4C4C4
+}
+
+.intro .navbutton {
+    z-index: 12;
+    font-size: 48px;
+    width: 100%;
+    top:0;
+    left: 50%;
+    background-color: rgba(45, 45, 45, 0.40);
+    display:flex;
+    align-items: center;
+    justify-content: center;
+
+}
+
+.intro .navbutton.bottom {
+    margin-top: auto;
 }

src/components/subcomponents/Topic.js

@@ -16,12 +16,12 @@ const Card = (props) => {
             className="topic"
             style={{backgroundImage: props.background ? `url(${props.background})`:''}}
             >
-            <a href={props.link} className="content">
+            <div className="content">
                 <div className="title">{props.title}</div>
                 <div className="children">
                     {props.children}
                 </div>
-            </a>
+            </div>
         </div>
     );
 };