Improved Intro Performance

src/components/Intro.js

@@ -47,11 +47,10 @@ class Intro extends React.Component {
 
         // Activate animation going to next topic
         this.setState({
-            prev: 'current',
+            prev: 'current top',
-            curr: 'next',
         });
 
-        // Wait 500 ms until the transition is finished
+        // Wait 900 ms until the transition is finished
         setTimeout(()=>{
             // Once timeout finishes, place topics in correct location without transition
             let prevloc = this.state.prevLoc-1;
@@ -59,51 +58,47 @@ class Intro extends React.Component {
             let nextloc = this.state.nextLoc-1;
             this.setState({
                 prev: 'previous notrans',
-                curr: 'current notrans',
-                prevLoc: prevloc, // Move correct topics into necessary divs
                 currLoc: currloc,
                 nextLoc: nextloc,
             });
 
-            // wait another 20 ms to 
+            // wait another 75 ms to 
             setTimeout(()=>{
-            this.setState({ // remove notrans from each div
+                this.setState({ // remove notrans from each div
-                prev: 'previous',
+                    prev: 'previous',
-                curr: 'current',
+                    prevLoc: prevloc,
-            });
+                });
 
-            }, 20);
+            }, 75);
 
-        }, 500);
+        }, 900);
     } else if (input === "down" && this.state.nextLoc < this.topics.length) {
         // Activate transition going to previous topic
         this.setState({
-            curr: 'previous',
+            //curr: 'previous',
             next: 'current'
         });
 
-        // wait 500 ms before placing all topics into correct divs
+        // wait 900 ms before placing all topics into correct divs
         setTimeout(()=>{
             // move all topics into correct divs
             let prevloc = this.state.prevLoc+1;
             let currloc = this.state.currLoc+1;
             let nextloc = this.state.nextLoc+1;
             this.setState({
-                curr: 'current notrans',
                 next: 'next notrans',
-                prevLoc: prevloc, // Move correct topics into necessary divs
+                prevLoc: prevloc,
                 currLoc: currloc,
-                nextLoc: nextloc,
             });
 
             // wait 20ms and remove notrans
             setTimeout(()=>{
-            this.setState({
+                this.setState({
-                curr: 'current',
+                    next: 'next',
-                next: 'next',
+                    nextLoc: nextloc,
-            });
+                });
-            }, 20);
+            }, 75);
-        }, 500);
+        }, 900);
         
     } else if (input === "down" && this.state.nextLoc >= this.topics.length) {
         // Set something to happen when you reach the end
@@ -137,8 +132,8 @@ class Intro extends React.Component {
           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 title="Explore the Website" background="/img/sunset.webp">
+      <Topic link="/articles" title="Articles" background="/img/sunset.webp">
-          Explore Cam's Projects
+          Read through some homemade articles that go over interesting topics and may teach you some skills in tech.
       </Topic>
     ];
   

src/components/css/Intro.css

@@ -14,13 +14,14 @@
 }
 
 .intro .previous {
-    opacity: 0;
+    z-index:11;
-    height:0;
+    opacity: 0.01;
+    height:100%;
     width:100vw;
     display: flex;
     position:fixed;
-    transition: opacity 500ms ease-out, height 500ms ease-out, top 500ms ease-out;
+    transition: opacity 750ms ease-out, top 750ms ease-out;
-    top:0;
+    top:-99%;
     left:0;
     justify-content: center;
     align-items: center;
@@ -33,7 +34,7 @@
     width:100vw;
     display: flex;
     position:fixed;
-    transition: opacity 500ms ease-in, height 500ms ease-in, top 500ms ease-in;
+    transition: opacity 750ms ease-out, top 750ms ease-out;
     top:0;
     left:0;
     justify-content: center;
@@ -41,18 +42,23 @@
 }
 
 .intro .next {
-    opacity: 0;
+    z-index: 11;
-    height:0;
+    opacity: 0.01;
+    height:100%;
     width:100vw;
     display: flex;
     position:fixed;
-    transition: opacity 500ms ease-out, height 500ms ease-out, top 500ms ease-out;
+    transition: opacity 750ms ease-out, top 750ms ease-out;
-    top:100%;
+    top:99%;
     left:0;
     justify-content: center;
     align-items: center;
 }
 
+.intro .top {
+    z-index: 11 !important;
+}
+
 .notrans {
     transition: none !important;
 }
@@ -76,7 +82,7 @@
 }
 
 .intro .navbutton {
-    z-index: 12;
+    z-index: 14;
     font-size: 48px;
     width: 100%;
     top:0;

src/components/subcomponents/Topic.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import '../css/Topic.css';
+import { Link } from 'react-router-dom';
 
 const Card = (props) => {
     /**
@@ -13,18 +14,17 @@ const Card = (props) => {
      */
 
     return (
-        <a
+        <div
-            href={props.link}
             className="topic"
             style={{backgroundImage: props.background ? `url(${props.background})`:''}}
             >
             <div className="content">
-                <h1 className="title">{props.title}</h1>
+                <Link to={props.link}><h1 className="title">{props.title}</h1></Link>
                 <div className="children">
                     {props.children}
                 </div>
             </div>
-        </a>
+        </div>
     );
 };