[Optional] Title Fade

portfolio/src/Title.js

@@ -8,31 +8,36 @@ const TITLES = [
 ];
 
 class Title extends Component {
-  state = { titleIndex: 0 };
+  state = { titleIndex: 0, fadeIn: true };
 
   componentDidMount() {
+    this.timeout = setTimeout(() => this.setState({ fadeIn: false }), 2000);
+
     this.animateTitles();
   }
 
   componentWillUnmount() {
     clearInterval(this.titleInterval);
+    clearTimeout(this.timeout);
   }
 
   animateTitles = () => {
     this.titleInterval = setInterval(() => {
       const titleIndex = (this.state.titleIndex + 1) % TITLES.length;
 
-      this.setState({ titleIndex });
+      this.setState({ titleIndex, fadeIn: true });
+
+      this.timeout = setTimeout(() => this.setState({ fadeIn: false }), 2000);
     }, 4000);
   }
 
   render() {
-    const { titleIndex } = this.state;
+    const { fadeIn, titleIndex } = this.state;
 
     const title = TITLES[titleIndex];
 
     return (
-      <p>I am {title}</p>
+      <p className={fadeIn ? 'title-fade-in' : 'title-fade-out'}>I am {title}</p>
     )
   }
 }

portfolio/src/index.css

@@ -25,3 +25,25 @@ h1, h2, h3, h4, h5 {
   height: 200px;
   border-radius: 100px;
 }
+
+.title-fade-out {
+  opacity: 0;
+  animation-name: fade-out;
+  animation-duration: 2s;
+}
+
+.title-fade-in {
+  opacity: 100;
+  animation-name: fade-in;
+  animation-duration: 2s;
+}
+
+@keyframes fade-out {
+  from {opacity: 100}
+  to {opacity: 0}
+}
+
+@keyframes fade-in {
+  from {opacity: 0}
+  to {opacity: 100}
+}