Intro - Bugfixes and Feature

Added scroll wheel support for intro
Hides visible arrow keys when at first or last item
fixed css bug where next is slightly visible

src/components/Intro.js

@@ -22,6 +22,26 @@ class Intro extends React.Component {
         };
     }
 
+    // Topics to display in intro
+    // DISCLAIMER: Please add content to the topic or bugs may occur...
+    topics = [
+        <Topic link="/about" title="Welcome to My Portfolio" background="/img/background.webp">
+            <div>
+                This website helps you access the projects that I've worked on. You can navigate
+                at the top to different locations in the site. Within you can find information about me,
+                my github repositories, and articles I've posted. This website is coded with
+                React/Redux and hosted over Vercel. You can email me at <a href="mailto:cam@camscode.com">cam@camscode.com</a>.
+            </div>
+        </Topic>,
+        <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>,
+        <Topic link="/articles" title="Articles" background="/img/sunset.webp">
+            Read through some homemade articles that go over interesting topics and may teach you some skills in tech.
+        </Topic>
+    ];
+
     handleKey = (e) => {
         /**
          * handleKey - Handle key events and hand off to handleInput
@@ -111,6 +131,19 @@ class Intro extends React.Component {
 
     };
 
+    onWheel(event) {
+        /**
+         * onScroll: Handle wheel event and moves intro up or down based on wheel scroll direction
+         */
+        if (event.deltaY < 0) {
+            this.handleInput('up');
+        }
+
+        if (event.deltaY > 0) {
+            this.handleInput('down');
+        }
+    }
+
     componentDidMount() {
         setTimeout(() => { // At the start, wait 100ms and enable intro
             this.setState({
@@ -122,34 +155,14 @@ class Intro extends React.Component {
 
     }
 
-  // Topics to display in intro
-  // DISCLAIMER: Please add content to the topic or bugs may occur...
-  topics = [
-      <Topic link="/about" title="Welcome to My Portfolio" background="/img/background.webp">
-        <div>
-            This website helps you access the projects that I've worked on. You can navigate
-            at the top to different locations in the site. Within you can find information about me,
-            my github repositories, and articles I've posted. This website is coded with
-            React/Redux and hosted over Vercel. You can email me at <a href="mailto:cam@camscode.com">cam@camscode.com</a>.
-        </div>
-      </Topic>,
-      <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>,
-      <Topic link="/articles" title="Articles" background="/img/sunset.webp">
-          Read through some homemade articles that go over interesting topics and may teach you some skills in tech.
-      </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 onKeyDown={this.handleKey} tabIndex="0" className={this.state.start ? 'intro start' : 'intro'} onWheel={(event) => { this.onWheel(event) }}>
-            <div className='navbutton top' onClick={()=>{this.handleInput('up')}}><ChevronDoubleUp/></div>
+                <div className={'navbutton top' + (this.state.currLoc > 0 ? "" : " hidden")} onClick={() => { this.handleInput('up') }}><ChevronDoubleUp /></div>
                 <div id="previous" className={this.state.prev}>
                     {this.topics[this.state.prevLoc]}
                 </div>
@@ -159,7 +172,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 className={'navbutton bottom' + (this.state.currLoc < this.topics.length - 1 ? "" : " hidden")} onClick={() => { this.handleInput('down') }}><ChevronDoubleDown /></div>
             </div>
         );
     }

src/components/css/Intro.css

@@ -21,7 +21,7 @@
     display: flex;
     position:fixed;
     transition: opacity 750ms ease-out, top 750ms ease-out;
-    top:-99%;
+    top:-100%;
     left:0;
     justify-content: center;
     align-items: center;
@@ -49,7 +49,7 @@
     display: flex;
     position:fixed;
     transition: opacity 750ms ease-out, top 750ms ease-out;
-    top:99%;
+    top:100%;
     left:0;
     justify-content: center;
     align-items: center;
@@ -81,6 +81,19 @@
     color: #C4C4C4
 }
 
+.intro .navbutton.hidden {
+    opacity: 0;
+    
+}
+
+.intro .navbutton.bottom {
+    margin-top: auto;
+}
+
+.intro .navbutton.top {
+    z-index: 14;
+}
+
 .intro .navbutton {
     z-index: 14;
     font-size: 48px;
@@ -92,12 +105,7 @@
     align-items: center;
     justify-content: center;
 
-}
+    opacity: 1;
-
+    animation:none !important;
-.intro .navbutton.bottom {
+    transition: opacity ease 0.25s;
-    margin-top: auto;
-}
-
-.intro .navbutton.top {
-    z-index: 14;
 }