Worked on making intro and bio more responsive

src/components/App.css

@@ -2,3 +2,13 @@
 html {
   scroll-behavior: smooth; 
 }
+
+.section-height {
+  height: 5rem;
+}
+
+@media (max-width: 575.98px) { 
+  .section-height {
+    height: 3rem;
+  }
+}

src/components/shared/bio/bio.css

@@ -1,7 +1,14 @@
-.row-height-25 {
-  height: 25rem;
+
+.content-width {
+  width: 75%;
 }
 
-.row-background-color {
-  background-color: #eff1f4;
+@media (max-width: 575.98px) {  /* sm */
+  .content-width {
+    width: 85%;
+  }
+
+  .content-type-size {
+    font-size: 1.75rem;
+  }
 }

src/components/shared/bio/bio.js

@@ -5,10 +5,11 @@ class Bio extends Component {
   render() {
     return (
       <div className="container-fluid" id="bio">
-        <div className="row row-height-25 p-5">
+        <div className="section-height"></div>
+        <div className="row">
           <div className="col"> 
-            <div className="mx-auto text-center border-top border-bottom d-flex h-100 w-75">
-              <h2 className="align-self-center">
+            <div className="mx-auto text-center border-top border-bottom pl-1 pl-lg-5 pr-1 pr-lg-5 pt-5 pb-5 d-flex h-100 content-width">
+              <h2 className="content-type-size">
                 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 a problem solver, solution maker upper and answer deilverer. I always itch to learn something new and strive to deliver my best. When I'm not 
                 creating I am either reading, writing or playing games. 

src/components/shared/history/history.css

@@ -1,7 +1,3 @@
-.row-height-5 {
-  height: 5rem;
-}
-
 * {
   box-sizing: border-box !important;
 }

src/components/shared/history/history.js

@@ -92,7 +92,7 @@ class History extends Component {
     return (
       <div className="container-fluid" id="history">
         <div className="pb-5">
-          <div className="row-height-5"></div>
+          <div className="section-height"></div>
           <div className="timeline">
             {this.timelineContainers.map((timelineContainer, i) => {
               return (

src/components/shared/introduction/introduction.css

@@ -2,3 +2,20 @@
   line-height: 100%;
 }
 
+.profile-image {
+  width: 500px;
+}
+
+@media (max-width: 575.98px) {  /* sm */
+  .line-one-type-size {
+    font-size: 2rem;
+  }
+
+  .line-two-type-size {
+    font-size: 1.5rem;
+  }
+
+  .profile-image {
+    width: 350px;
+  }
+}

src/components/shared/introduction/introduction.js

@@ -90,20 +90,20 @@ class Introduction extends Component {
   render() { 
     return (
       <div className="container-fluid pt-5" id="intro">
-        <div className="row align-items-center pt-5 pb-5">
-          <div className="col-lg-6 col-sm-12">
-            <div className="text-center">
-              <img src={ProfilePicture} alt="Giovani's Face" className="rounded-circle img-fluid img-thumbnail float-right" width="500" />
+        <div className="row align-items-center pt-4 pt-lg-5 pb-1 pb-lg-3">
+          <div className="col-12 col-lg-6">
+            <div className="text-center text-lg-right">
+              <img src={ProfilePicture} alt="Giovani's Face" className="profile-image rounded-circle img-fluid img-thumbnail" width="500" />
             </div>
           </div>
-          <div className="col-lg-6 col-sm-12">
+          <div className="col-12 col-lg-6 mt-3 mt-lg-1">
             <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>
+              <h1 className="text-center text-lg-left line-one-type-size">{this.state.currentLineOne}<span className={this.getCursorClasses(1)}>|</span></h1>
+              <h2 className="text-center text-lg-left line-two-type-size">{this.state.currentLineTwo}<span className={this.getCursorClasses(2)}>|</span></h2>
             </div>
             <a href="#bio">
-              <div className="mt-5 pl-3"> 
-                <button type="button" className="btn btn-outline-primary btn-lg float-left">Get To Know Me</button>
+              <div className="text-center text-lg-left pt-4 pt-lg-5 pl-3"> 
+                <button type="button" className="btn btn-outline-primary btn-lg">Get To Know Me</button>
               </div>
             </a>
           </div>

src/index.js

@@ -1,10 +1,8 @@
-import 'bootstrap/dist/css/bootstrap.min.css';
 import './css/bootstrap.cosmo.min.css';
 // eslint-disable-next-line
 import $ from 'jquery'; 
 // eslint-disable-next-line
 import Popper from 'popper.js'; 
-import 'bootstrap/dist/js/bootstrap.bundle.min';
 import 'animate.css/animate.min.css'
 import 'octicons/build/build.css';
 import React from 'react';