added loading icon - next step: add sensor stuff and things

client/assets/images/loading.svg

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="#3598db">
+  <path transform="translate(2)" d="M0 12 V20 H4 V12z">
+    <animate attributeName="d" values="M0 12 V20 H4 V12z; M0 4 V28 H4 V4z; M0 12 V20 H4 V12z; M0 12 V20 H4 V12z" dur="1.2s" repeatCount="indefinite" begin="0" keytimes="0;.2;.5;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.8 0.4 0.8" calcMode="spline"  />
+  </path>
+  <path transform="translate(8)" d="M0 12 V20 H4 V12z">
+    <animate attributeName="d" values="M0 12 V20 H4 V12z; M0 4 V28 H4 V4z; M0 12 V20 H4 V12z; M0 12 V20 H4 V12z" dur="1.2s" repeatCount="indefinite" begin="0.2" keytimes="0;.2;.5;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.8 0.4 0.8" calcMode="spline"  />
+  </path>
+  <path transform="translate(14)" d="M0 12 V20 H4 V12z">
+    <animate attributeName="d" values="M0 12 V20 H4 V12z; M0 4 V28 H4 V4z; M0 12 V20 H4 V12z; M0 12 V20 H4 V12z" dur="1.2s" repeatCount="indefinite" begin="0.4" keytimes="0;.2;.5;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.8 0.4 0.8" calcMode="spline" />
+  </path>
+  <path transform="translate(20)" d="M0 12 V20 H4 V12z">
+    <animate attributeName="d" values="M0 12 V20 H4 V12z; M0 4 V28 H4 V4z; M0 12 V20 H4 V12z; M0 12 V20 H4 V12z" dur="1.2s" repeatCount="indefinite" begin="0.6" keytimes="0;.2;.5;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.8 0.4 0.8" calcMode="spline" />
+  </path>
+  <path transform="translate(26)" d="M0 12 V20 H4 V12z">
+    <animate attributeName="d" values="M0 12 V20 H4 V12z; M0 4 V28 H4 V4z; M0 12 V20 H4 V12z; M0 12 V20 H4 V12z" dur="1.2s" repeatCount="indefinite" begin="0.8" keytimes="0;.2;.5;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.8 0.4 0.8" calcMode="spline" />
+  </path>
+</svg>

client/assets/scss/Content.scss

@@ -13,7 +13,7 @@
           position: absolute;
           width: 7em;
           text-align: right;
-          margin-left: -9em;
+          margin-left: -8em;
         }
     }
     .intro {
@@ -21,8 +21,8 @@
     }
     img {
         max-width: 100%;
-        height: auto;
+        display: block;
-        margin: auto;
+        margin: 0 auto;
     }
     code,
     pre {

client/assets/scss/main.scss

@@ -1,4 +1,7 @@
 @import './utils.scss';
+
+$linkColor: #3598db;
+
 html {
     font-family: 'Roboto Slab', serif;
     max-width: 100%;
@@ -34,10 +37,10 @@ p {
 }
 a {
     background-color: transparent;
-    color: #3598db;
+    color: $linkColor;
     text-decoration: none;
     &:hover {
-        color: #3598db;
+        color: $linkColor;
     }
 }
 hr {
@@ -71,3 +74,8 @@ hr {
         text-align: center;
     }
 }
+.Loading{
+    display: flex;
+    flex: 1;
+    justify-content: center;
+}

client/js/components/Sidebar.js

@@ -33,17 +33,12 @@ export default class Sidebar extends React.Component{
             class="fa fa-2x fa-navicon"
             aria-hidden="true" />
         </a>
-        <h2>
+        <h2>About Me</h2>
-          About Me
-        </h2>
         <img src={me}/>
         <p>
           My name is Mitchell and I have a passion for software development. I am currently a software engineer and enjoy working on personal projects in my free time.
         </p>
 
-        <h3>
-          Contact Me
-        </h3>
         <p>
           <i class="fa fa-envelope" aria-hidden="true"></i>
           <a class="link" href="mailto:mgerb42@gmail.com"> eMail</a>
@@ -60,6 +55,12 @@ export default class Sidebar extends React.Component{
           <i class="fa fa-wpforms" aria-hidden="true"> </i>
           <a href="/resume" class="link"> Resume</a>
         </p>
+
+        <br/>
+
+        <h2>Sensors</h2>
+        <hr/>
+
       </div>
     );
   }

client/js/pages/Index.js

@@ -13,6 +13,9 @@ import '../../assets/scss/main.scss';
 import 'font-awesome/css/font-awesome.min.css';
 import '../../assets/css/dracula.css';
 
+//loading icon
+import loading from '../../assets/images/loading.svg';
+
 export default class Index extends React.Component {
     componentDidMount() {
         this.props.actions.fetchPreview();
@@ -42,7 +45,7 @@ export default class Index extends React.Component {
               <div class="Main">
                   {typeof this.page === 'undefined' && !fetching ? <Preview posts={this.props.redux.preview.posts} /> : null}
                   {this.page === 'post' && !fetching ? <Post content={this.props.redux.post}/> : null}
-                  {fetching ? <div class="Content">Fetching</div> : null}
+                  {fetching ? loadingElement : null}
                 <Sidebar />
               </div>
             <Footer />
@@ -50,3 +53,7 @@ export default class Index extends React.Component {
         );
     }
 }
+
+const loadingElement = <div class="Loading">
+                          <img src={loading} alt="loading..."/>
+                        </div>;