Started to work on skills and abilities component

src/components/pages/home.js

@@ -3,6 +3,7 @@ import Header from '../shared/header/header';
 import Footer from "../shared/footer/footer";
 import Introduction from '../shared/introduction/introduction';
 import Bio from '../shared/bio/bio';
+import Skills from '../shared/skills/skills'
 
 class Home extends Component {
   render() {
@@ -11,6 +12,7 @@ class Home extends Component {
         <Header/>
         <Introduction/>
         <Bio/>
+        <Skills/>
         <Footer/>
       </div>
     );

src/components/shared/header/header.js

@@ -4,7 +4,7 @@ import './header.css';
 class Header extends Component {
   render() {
     return (
-      <div className="container-fluid">
+      <div className="container-fluid fixed-top">
         <div className="row justify-content-end nav-background-color">
           <div className="col-1 nav-menu-item pt-2 pb-2">
             <h3>Intro</h3>

src/components/shared/introduction/introduction.js

@@ -89,7 +89,7 @@ class Introduction extends Component {
 
   render() { 
     return (
-      <div className="container-fluid" id="introduction">
+      <div className="container-fluid mt-5" id="introduction">
         <div className="row align-items-center pt-5 pb-5">
           <div className="col">
             <div className="text-center">
@@ -102,7 +102,7 @@ class Introduction extends Component {
               <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>
+              <button type="button" className="btn btn-outline-primary btn-lg float-left">Get To Know Me</button>
             </div>
           </div>
         </div>

src/components/shared/portfolio/portfolio.js

@@ -4,16 +4,8 @@ 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 className="row pl-5 pr-5">
+          
         </div>
       </div>
     );

src/components/shared/skills/skills.css

@@ -0,0 +1,8 @@
+.progress-bar-height {
+  height: 12px;
+}
+
+.progress-bar-ani {
+  -webkit-transition: width 1s ease-in-out;
+  transition: width 1s ease-in-out;
+}

src/components/shared/skills/skills.js

@@ -0,0 +1,70 @@
+import React, {Component} from 'react';
+import './skills.css';
+import { ReactComponent } from '*.svg';
+
+class Skills extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isProgressBarOneInView: false
+    };
+  }
+
+  progressBarOneRef = React.createRef();
+
+  isElementInView = (offset, elementRef) => {
+    if (!elementRef) return false;
+    const top = elementRef.getBoundingClientRect().top;
+    return (top + offset) >= 0 && (top - offset) <= window.innerHeight;
+  }
+
+  checkProgressBarsInView = () {
+
+  }
+
+  render() {
+    let isProgressBarOneInView = this.state.isProgressBarOneInView;
+
+    return (
+      <div className="container">
+        <div className="row pl-5 pr-5">
+          <div className="col">
+            <h2><strong>Skills and Abilities</strong></h2>
+            <div className="mt-5 mb-4">
+              <h4 className="text-left">C#/.NET</h4>
+              <div className="progress progress-bar-height" id="progress-bar-one">
+                <div className="progress-bar progress-bar-ani" ref={(el) => this.progressBarOneRef = el}
+                     role="progressbar" style={{width: isProgressBarOneInView ? 88+'%' : 0}} aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
+                </div>
+              </div>
+            </div>
+            <div className="mt-5 mb-4">
+              <h4 className="text-left">Javascript</h4>
+              <div className="progress progress-bar-height">
+                <div className="progress-bar progress-bar-ani" role="progressbar" style={{width: 75+'%'}} aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+              </div>
+            </div>
+            <div className="mt-5 mb-4">
+              <h4 className="text-left">Software Design</h4>
+              <div className="progress progress-bar-height">
+                <div className="progress-bar" role="progressbar" style={{width: 70+'%'}} aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+              </div>
+            </div>
+            <div className="mt-5 mb-4">
+              <h4 className="text-left">MSSQL</h4>
+              <div className="progress progress-bar-height">
+                <div className="progress-bar" role="progressbar" style={{width: 62+'%'}} aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  componentDidMount() {
+    window.addEventListener('scroll', this.checkProgressBarsInView);
+  }
+}
+
+export default Skills;