Dabbled in some more boostrap, created introduction componented, changed nav bar

src/components/pages/home.js

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

src/components/shared/carousel.js

@@ -1,33 +0,0 @@
-import React, {Component} from 'react';
-import CarouselImageOne from '../../images/home/carouselImageOne.jpg'
-import CarouselImageTwo from '../../images/home/carouselImageTwo.jpg'
-
-class Carousel extends Component {
-  render() {
-    return (
-      <div id="carouselExampleControls" className="carousel slide" data-ride="carousel">
-        <div className="carousel-inner">
-          <div className="carousel-item active">
-            <img src={CarouselImageOne} className="d-block w-100" alt="..."/>
-          </div>
-          <div className="carousel-item">
-            <img src={CarouselImageOne} className="d-block w-100" alt="..."/>
-          </div>
-          <div className="carousel-item">
-            <img src={CarouselImageOne} className="d-block w-100" alt="..."/>
-          </div>
-        </div>
-        <a className="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
-          <span className="carousel-control-prev-icon" aria-hidden="true"></span>
-          <span className="sr-only">Previous</span>
-        </a>
-        <a className="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
-          <span className="carousel-control-next-icon" aria-hidden="true"></span>
-          <span className="sr-only">Next</span>
-        </a>
-      </div>
-    );
-  }
-}
-
-export default Carousel;

src/components/shared/content/content.js

@@ -0,0 +1,28 @@
+import React, {Component} from 'react';
+import ProfilePicture from '../../../images/home/profilePicture.jpg';
+
+class Content extends Component {
+  /* Create typing logic */
+
+  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 Profile Picture" className="rounded-circle img-fluid float-right" width="400" />
+            </div>
+          </div>
+          <div className="col">
+            <div className="pl-3"> 
+              <h1 className="text-left">Hi, my name is Giovani.</h1>
+              <h2 className="text-left">I am a software developer.|</h2>
+            </div>
+          </div>
+        </div>
+      </div>
+    ); 
+  }
+}
+
+export default Content;

src/components/shared/footer/footer.js

@@ -3,15 +3,15 @@ import React, {Component} from 'react';
 class Footer extends Component {
   render() {
     return (
-      <div className="container-fluid">
+      <div className="container-fluid mt-5">
         <div className="row">
-          <div class="col-sm">
+          <div className="col">
             One
           </div>
-          <div class="col-sm">
+          <div className="col">
             Two
           </div>
-          <div class="col-sm">
+          <div className="col">
             Three
           </div>
         </div>

src/components/shared/header.js

@@ -1,32 +0,0 @@
-import React, {Component} from 'react';
-
-class Header extends Component {
-  render() {
-    return (
-      <nav className="navbar navbar-expand-lg navbar-light bg-light">
-        <a className="navbar-brand" href="#">Navbar</a>
-        <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
-          <span className="navbar-toggler-icon"></span>
-        </button>
-        <div className="collapse navbar-collapse">
-          <ul className="navbar-nav">
-            <li className="nav-item active">
-              <a className="nav-link" href="#">Home <span className="sr-only">(current)</span></a>
-            </li>
-            <li className="nav-item">
-              <a className="nav-link" href="#">Features</a>
-            </li>
-            <li className="nav-item">
-              <a className="nav-link" href="#">Pricing</a>
-            </li>
-            <li className="nav-item">
-              <a className="nav-link" href="#" aria-disabled="true">Disabled</a>
-            </li>
-          </ul>
-        </div>
-      </nav>
-    );
-  }
-}
-
-export default Header;

src/components/shared/header/header.css

@@ -0,0 +1,7 @@
+.nav-background-color {
+  background-color: #eff1f4;
+}
+
+.nav-menu-item:hover {
+  background-color: #d8d8da;
+}

src/components/shared/header/header.js

@@ -0,0 +1,24 @@
+import React, {Component} from 'react';
+import './header.css';
+
+class Header extends Component {
+  render() {
+    return (
+      <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>
+          </div>
+          <div className="col-1 nav-menu-item pt-2 pb-2">
+            <h3>About Me</h3>
+          </div>
+          <div className="col-1 nav-menu-item pt-2 pb-2">
+            <h3>Contact</h3>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Header;

src/index.js

@@ -1,4 +1,5 @@
 import 'bootstrap/dist/css/bootstrap.min.css';
+import './css/bootstrap.cosmo.min.css';
 // eslint-disable-next-line
 import $ from 'jquery'; 
 // eslint-disable-next-line