refactor!: redo project structure

jsconfig.json

@@ -0,0 +1,6 @@
+{
+    "compilerOptions": {
+      "baseUrl": "src"
+    },
+    "include": ["src"]
+}

src/components/App.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
-import Home from './home/home'
+import Home from 'components/Home'
-import './App.css';
+import 'styles/App.css';
 
 class App extends Component {
   render() {

src/components/Bio.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import 'styles/Bio.css';
+
+function Bio() {
+  return (
+    <div className="container-fluid" id="bio">
+      <div className="section-height"></div>
+      <div className="row">
+        <div className="col"> 
+          <div className="mx-auto text-center border-top border-bottom pl-1 pl-lg-5 pr-1 pr-lg-5 pt-5 pb-5">
+            <h1 className="w-100">
+              A Little About Myself
+            </h1>
+            <h2 className="mx-auto content-text-size content-width mt-4">
+              My name is <strong>Giovani Rodriguez</strong> and I create tools, apps and websites. 
+              I am a problem solver, solution maker upper and answer deilverer. I'm always itching to learn something new and striving to deliver my best. I like to read, listen to music and ride my bike.
+            </h2>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Bio;

src/components/Contact.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import 'styles/Contact.css';
+
+function Contact() {
+  return (
+    <div className="container-fluid" id="contact">
+    <div className="section-height"></div>
+      <div className="row mb-3">
+        <div className="col"> 
+          <div className="text-center">
+            <h1 className="w-100">
+              Wanna Work Together?
+            </h1>
+            <h2 className="mx-auto content-text-size content-width mt-4">
+              You can get a hold of me by emailing me at <strong>me@grodriguez.dev</strong>.
+              You can also see what I am up to by clicking the social media icons below.
+            </h2>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Contact;

src/components/Footer.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import 'styles/Footer.css';
+import GithubIcon from 'images/github-logo.svg';
+import LinkedInIcon from 'images/linkedin-logo.svg';
+import TwitterIcon from 'images/twitter-logo.svg';
+
+function Footer() {
+  return (
+    <div className="container-fluid">
+    <div className="section-height"></div>
+      <div className="row justify-content-center footer-background-color">
+        <div className="col-3 p-3 text-center">
+          <a href="https://github.com/gio101046" className="d-block" target="_blank" rel="noopener noreferrer">
+            <img alt="Github Icon" src={GithubIcon} width="32" height="32" />
+          </a>
+        </div>
+        <div className="col-3 p-3 text-center">
+          <a href="https://www.linkedin.com/in/giovaniluisrodriguez/" className="d-block" target="_blank" rel="noopener noreferrer">
+            <img alt="LinkedIn Icon" src={LinkedInIcon} width="32" height="32" />
+          </a>
+        </div>
+        <div className="col-3 p-3 text-center">
+          <a href="https://twitter.com/gcode0727" className="d-block" target="_blank" rel="noopener noreferrer">
+            <img alt="Twitter Icon" src={TwitterIcon} width="32" height="32" />
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Footer;

src/components/History.js

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import './history.css';
+import 'styles/History.css';
 
 class History extends Component {
   constructor(props) {
@@ -119,7 +119,6 @@ class History extends Component {
           })}
         </div>
       </div>
-
     );
   }
 

src/components/Home.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import Navigation from 'components/Navigation';
+import Footer from "components/Footer";
+import Introduction from 'components/Introduction'; 
+import Bio from 'components/Bio';
+import History from 'components/History';
+import Technologies from 'components/Technologies';
+import Contact from 'components/Contact';
+import 'styles/Home.css';
+
+function Home() {
+  return (
+    <div>
+      <Navigation/>
+      <Introduction/>
+      <Bio/>
+      <History/>
+      <Technologies/>
+      <Contact/>
+      <Footer/>
+    </div>
+  );
+}
+
+export default Home;

src/components/Introduction.js

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
-import ProfilePicture from '../../images/home/profilePictureTwo.jpg';
+import ProfilePicture from 'images/home/profilePictureTwo.jpg';
-import "./introduction.css";
+import "styles/Introduction.css";
 
 const lineOneText = 'Hi, my name is Giovani.';
 const lineTwoText = 'I am a software engineer. ';
@@ -118,9 +118,6 @@ class Introduction extends Component {
       </div>
     ); 
   }
-
-  // componentDidUpdate() {
-  // }
 }
 
 export default Introduction;

src/components/Navigation.js

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import './navigation.css';
+import 'styles/Navigation.css';
 
 class NavigationBar extends Component {
   constructor(props) {
@@ -21,8 +21,8 @@ class NavigationBar extends Component {
         href: '#history'
       },
       {
-        content: 'Skills',
+        content: 'Tech',
-        href: '#skills'
+        href: '#technologies'
       },
       {
         content: 'Contact',

src/components/Technologies.js

@@ -1,46 +1,37 @@
 import React, {Component} from 'react';
-import './skills.css';
+import 'styles/Technologies.css';
-import CSharpIcon from '../../images/technologies/csharp.png';
+import CSharpIcon from 'images/csharp.png';
-import PythonIcon from '../../images/technologies/python.png';
+import PythonIcon from 'images/python.png';
-import JavaScriptIcon from '../../images/technologies/javascript.svg';
+import JavaScriptIcon from 'images/javascript.svg';
-import SqlIcon from '../../images/technologies/sql.png';
+import SqlIcon from 'images/sql.png';
 
-
+class Technologies extends Component {
-class Skills extends Component {
   constructor(props) {
     super(props);
 
-    /* Create static content information */
     this.technologies = [
       {
-        ref: React.createRef(),
         image: CSharpIcon,
         name: "C#"
       },
       {
-        ref: React.createRef(),
         image: JavaScriptIcon,
         name: "Javascript"
       },
       {
-        ref: React.createRef(),
         image: PythonIcon,
         name: "Python"
       },
       {
-        ref: React.createRef(),
         image: SqlIcon,
         name: "SQL"
       }
     ];
   }
 
-  /* Class field to store static content */
-  progressBars = [];
-
   render() {
     return (
-      <div className="container" id="skills">
+      <div className="container" id="technologies">
         <div className="row">
           <div className="col">
             <div className="text-center border-top border-bottom ml-2 mr-2 pb-5 pt-5">
@@ -59,10 +50,6 @@ class Skills extends Component {
       </div>
     );
   }
-
-  /* When component is initially mounted add scroll event listener */
-  componentDidMount() {
-  }
 }
 
-export default Skills;
+export default Technologies;

src/components/bio/bio.js

@@ -1,27 +0,0 @@
-import React, {Component} from 'react';
-import './bio.css';
-
-class Bio extends Component {
-  render() {
-    return (
-      <div className="container-fluid" id="bio">
-        <div className="section-height"></div>
-        <div className="row">
-          <div className="col"> 
-            <div className="mx-auto text-center border-top border-bottom pl-1 pl-lg-5 pr-1 pr-lg-5 pt-5 pb-5">
-              <h1 className="w-100">
-                A Little About Myself
-              </h1>
-              <h2 className="mx-auto content-text-size content-width mt-4">
-                My name is <strong>Giovani Rodriguez</strong> and I create tools, apps and websites. 
-                I am a problem solver, solution maker upper and answer deilverer. I'm always itching to learn something new and striving to deliver my best. I like to read, listen to music and ride my bike.
-              </h2>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-export default Bio;

src/components/contact/contact.js

@@ -1,27 +0,0 @@
-import React, {Component} from 'react';
-import './contact.css';
-
-class Contact extends Component {
-  render() {
-    return (
-      <div className="container-fluid" id="contact">
-      <div className="section-height"></div>
-        <div className="row mb-3">
-          <div className="col"> 
-            <div className="text-center">
-              <h1 className="w-100">
-                Wanna Work Together?
-              </h1>
-              <h2 className="mx-auto content-text-size content-width mt-4">
-                You can get a hold of me by emailing me at <strong>me@grodriguez.dev</strong>.
-                You can also see what I am up to by clicking the social media icons below.
-              </h2>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-export default Contact;

src/components/footer/footer.js

@@ -1,34 +0,0 @@
-import React, {Component} from 'react';
-import './footer.css';
-import GithubIcon from '../../images/github-logo.svg';
-import LinkedInIcon from '../../images/linkedin-logo.svg';
-import TwitterIcon from '../../images/twitter-logo.svg';
-
-class Footer extends Component {
-  render() {
-    return (
-      <div className="container-fluid">
-      <div className="section-height"></div>
-        <div className="row justify-content-center footer-background-color">
-          <div className="col-3 p-3 text-center">
-            <a href="https://github.com/gio101046" className="d-block" target="_blank" rel="noopener noreferrer">
-              <img alt="Github Icon" src={GithubIcon} width="32" height="32" />
-            </a>
-          </div>
-          <div className="col-3 p-3 text-center">
-            <a href="https://www.linkedin.com/in/giovaniluisrodriguez/" className="d-block" target="_blank" rel="noopener noreferrer">
-              <img alt="LinkedIn Icon" src={LinkedInIcon} width="32" height="32" />
-            </a>
-          </div>
-          <div className="col-3 p-3 text-center">
-            <a href="https://twitter.com/gcode0727" className="d-block" target="_blank" rel="noopener noreferrer">
-              <img alt="Twitter Icon" src={TwitterIcon} width="32" height="32" />
-            </a>
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-export default Footer;

src/components/home/home.js

@@ -1,27 +0,0 @@
-import React, {Component} from 'react';
-import Navigation from '../navigation/navigation';
-import Footer from "../footer/footer";
-import Introduction from '../introduction/introduction'; 
-import Bio from '../bio/bio';
-import History from '../history/history';
-import Skills from '../skills/skills';
-import Contact from '../contact/contact';
-import './home.css';
-
-class Home extends Component {
-  render() {
-    return (
-      <div>
-        <Navigation/>
-        <Introduction/>
-        <Bio/>
-        <History/>
-        <Skills/>
-        <Contact/>
-        <Footer/>
-      </div>
-    );
-  }
-}
-
-export default Home;

src/index.js

@@ -1,4 +1,4 @@
-import './css/bootstrap.cosmo.min.css';
+import 'styles/bootstrap.cosmo.min.css';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './components/App';