Finished most of typing logic in intro and started on bio

src/components/pages/home.js

@@ -1,14 +1,16 @@
 import React, {Component} from 'react';
 import Header from '../shared/header/header';
 import Footer from "../shared/footer/footer";
-import Content from '../shared/content/content';
+import Introduction from '../shared/introduction/introduction';
+import Bio from '../shared/bio/bio';
 
 class Home extends Component {
   render() {
     return (
       <div>
         <Header/>
-        <Content/>
+        <Introduction/>
+        <Bio/>
         <Footer/>
       </div>
     );

src/components/shared/bio/bio.js

@@ -0,0 +1,23 @@
+import React, {Component} from 'react';
+
+class Bio extends Component {
+  render() {
+    return (
+      <div className="container-fluid">
+        <div className="row p-5">
+          <div className="col">
+            <div className="mx-auto text-center w-75">
+              <h3>
+                My name is <strong>Giovani Rodriguez</strong> and I create tools, applications and websites as solutions for individuals or businesses that need them. 
+                I am problem solver, solution maker upper and answer deilverer. I'm always itching to learn something new and striving to deliver my best. When I'm not 
+                creating I am either reading, writing or spending time with the people that I care. 
+              </h3>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Bio;

src/components/shared/content/content.css

@@ -1,3 +0,0 @@
-.align-text-top {
-  line-height: 100%;
-}

src/components/shared/content/content.js

@@ -1,91 +0,0 @@
-import React, {Component} from 'react';
-import ProfilePicture from '../../../images/home/profilePicture.jpg';
-import "./content.css";
-
-const lineOneText = 'Hi, my name is Giovani.';
-const lineTwoText = 'I am a software developer.';
-
-class Content extends Component {
-  constructor(props) {
-    super(props);
-
-    let typingInterval = this.startTyping();
-    this.state = {
-      currentLineOne: '',
-      currentLineTwo: '',
-      currentCharLineOne: 0,
-      currentCharLineTwo: 0,
-      isCursorVisible: false,
-      typingInterval: typingInterval,
-      cursorBlinkingInterval: null
-    };
-  }
-
-  getLineOneText = () => {
-    return lineOneText;
-  }
-
-  getLineTwoText = () => {
-    return lineTwoText;
-  }
-
-  startTyping = () => {
-    let typingInterval = setInterval(this.type, 55);
-    return typingInterval;
-  }
-
-  startBlinking = () => {
-    let blinkingInterval = setInterval(this.blink, 100);
-  }
-
-  type = () => {
-    let { currentLineOne, 
-          currentCharLineOne,
-          interval } = this.state;
-
-    if (currentCharLineOne === 0 || currentCharLineOne !== this.getLineOneText().length) {
-      currentLineOne += this.getLineOneText()[currentCharLineOne];      
-    } else {
-      clearInterval(interval);
-      return;
-    }
-
-    currentCharLineOne++;
-    this.setState({ currentLineOne: currentLineOne, 
-                    currentCharLineOne: currentCharLineOne });
-  }
-
-  blink = () => {
-    
-  }
-
-  getCursorClasses = () => {
-    let isCursorVisible = this.state.isCursorVisible;
-    return `align-text-top ${isCursorVisible ? 'visible' : 'invisible'}`;
-  }
-
-  render() { 
-    return (
-      <div className="container-fluid" id="introduction">
-        <div className="row align-items-center pt-4 pb-4">
-          <div className="col">
-            <div className="text-center">
-              <img src={ProfilePicture} alt="Giovani's Face" className="rounded-circle img-fluid float-right" width="400" />
-            </div>
-          </div>
-          <div className="col">
-            <div className="pl-3"> 
-              <h1 className="text-left">{this.state.currentLineOne}<span className="align-text-top">|</span></h1>
-              <h2 className="text-left">{this.state.currentLineTwo}</h2>
-            </div>
-          </div>
-        </div>
-      </div>
-    ); 
-  }
-
-  // componentDidUpdate() {
-  // }
-}
-
-export default Content;

src/components/shared/header/header.js

@@ -7,10 +7,16 @@ class Header extends Component {
       <div className="container-fluid">
         <div className="row justify-content-end nav-background-color">
           <div className="col-1 nav-menu-item pt-2 pb-2">
-            <h3>Home</h3>
+            <h3>Intro</h3>
           </div>
           <div className="col-1 nav-menu-item pt-2 pb-2">
-            <h3>About Me</h3>
+            <h3>Bio</h3>
+          </div>
+          <div className="col-1 nav-menu-item pt-2 pb-2">
+            <h3>Portfolio</h3>
+          </div>
+          <div className="col-1 nav-menu-item pt-2 pb-2">
+            <h3>Skills</h3>
           </div>
           <div className="col-1 nav-menu-item pt-2 pb-2">
             <h3>Contact</h3>

src/components/shared/introduction/introduction.css

@@ -0,0 +1,13 @@
+#introduction {
+
+}
+
+.intro-background {
+  background-image: url("../../../images/home/introductionBackground2.jpg");
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.align-text-top { 
+  line-height: 100%;
+}

src/components/shared/introduction/introduction.js

@@ -0,0 +1,117 @@
+import React, {Component} from 'react';
+import ProfilePicture from '../../../images/home/profilePicture.jpg';
+import "./introduction.css";
+
+const lineOneText = 'Hi, my name is Giovani.';
+const lineTwoText = 'I am a software developer. ';
+
+class Introduction extends Component {
+  constructor(props) {
+    super(props);
+
+    let typingInterval = this.startTyping();
+    this.state = {
+      currentLineOne: '',
+      currentLineTwo: '',
+      currentCharLineOne: 0,
+      currentCharLineTwo: 0,
+      isCursorOneVisible: true,
+      isCursorTwoVisible: false,
+      typingInterval: typingInterval,
+      cursorBlinkingInterval: null
+    };
+  }
+
+  getLineOneText = () => {
+    return lineOneText;
+  }
+
+  getLineTwoText = () => {
+    return lineTwoText;
+  }
+
+  startTyping = () => {
+    let typingInterval = setInterval(this.type, 55);
+    return typingInterval;
+  }
+
+  startBlinking = () => {
+    let blinkingInterval = setInterval(this.blink, 125);
+    return blinkingInterval;
+  }
+
+  type = () => {
+    let { currentLineOne, 
+          currentCharLineOne,
+          currentLineTwo,
+          currentCharLineTwo,
+          typingInterval,
+          blinkingInterval,
+          isCursorOneVisible,
+          isCursorTwoVisible } = this.state;
+
+    if (currentCharLineOne === 0 || currentCharLineOne !== this.getLineOneText().length) {
+      isCursorOneVisible = true;
+      isCursorTwoVisible = false;
+      currentLineOne += this.getLineOneText()[currentCharLineOne];
+      currentCharLineOne++;
+    } else if (currentCharLineTwo === 0 || currentCharLineTwo !== this.getLineTwoText().length) { 
+      isCursorOneVisible = false;
+      isCursorTwoVisible = true;
+      currentLineTwo += this.getLineTwoText()[currentCharLineTwo];
+      currentCharLineTwo++;
+    } else {
+      clearInterval(typingInterval);
+      blinkingInterval = setInterval(this.blink, 500, 2);
+    }
+
+    this.setState({ currentLineOne: currentLineOne, 
+                    currentCharLineOne: currentCharLineOne,
+                    currentLineTwo: currentLineTwo, 
+                    currentCharLineTwo: currentCharLineTwo,
+                    blinkingInterval: blinkingInterval,
+                    isCursorOneVisible: isCursorOneVisible,
+                    isCursorTwoVisible: isCursorTwoVisible });
+  }
+
+  blink = (cursorNumber) => {
+    if (cursorNumber === 1) {
+      this.setState({ isCursorOneVisible: !this.state.isCursorOneVisible });
+    } else {
+      this.setState({ isCursorTwoVisible: !this.state.isCursorTwoVisible });
+    }
+  }
+
+  getCursorClasses = (cursorNumber) => {
+    let isCursorVisible = cursorNumber === 1 ? this.state.isCursorOneVisible : this.state.isCursorTwoVisible;
+    return `align-text-top ${isCursorVisible ? 'visible' : 'invisible'}`;
+  }
+
+  render() { 
+    return (
+      <div className="container-fluid" id="introduction">
+        <div className="row align-items-center pt-5 pb-5">
+          <div className="col">
+            <div className="text-center">
+              <img src={ProfilePicture} alt="Giovani's Face" className="rounded-circle img-fluid img-thumbnail float-right" width="500" />
+            </div>
+          </div>
+          <div className="col">
+            <div className="pl-3"> 
+              <h1 className="text-left">{this.state.currentLineOne}<span className={this.getCursorClasses(1)}>|</span></h1>
+              <h2 className="text-left">{this.state.currentLineTwo}<span className={this.getCursorClasses(2)}>|</span></h2>
+            </div>
+            <div className="mt-5 pl-3"> 
+              <button type="button" class="btn btn-outline-primary btn-lg float-left">Get To Know Me</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    ); 
+  }
+
+  // componentDidUpdate() {
+  // }
+}
+
+export default Introduction;

src/components/shared/portfolio/portfolio.js

@@ -0,0 +1,23 @@
+import React, {Component} from 'react';
+
+class Portfolio extends Component {
+  render() {
+    return (
+      <div className="container-fluid">
+        <div className="row p-5">
+          <div className="col">
+            <div className="mx-auto text-center w-75">
+              <h3>
+                My name is <strong>Giovani Rodriguez</strong> and I create tools, applications and websites as solutions for individuals or businesses that need them. 
+                I am problem solver, solution maker upper and answer deilverer. I'm always itching to learn something new and striving to deliver my best. When I'm not 
+                creating I am either reading, writing or spending time with the people that I care. 
+              </h3>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Portfolio;

src/images/home/desktop.ini

@@ -0,0 +1,2 @@
+[LocalizedFileNames]
+introductionBackground.jpg=@introductionBackground.jpg,0