more styling - added content to sidebar

client/assets/scss/Footer.scss

@@ -0,0 +1,10 @@
+.Footer{
+  height: 5em;
+  line-height: 5em;
+  background-color: #F1F1F1;
+  border-top: solid;
+  border-width: 1px;
+  border-color: #DADADA;
+  font-weight: 300;
+  margin-top: 1em;
+}

client/assets/scss/Preview.scss

@@ -0,0 +1,22 @@
+.Preview{
+  flex: 1;
+  -webkit-flex: 1;
+
+  .post + .post{
+    margin-top: 2em;
+  }
+
+  .date{
+    margin: 0;
+    opacity: 0.7;
+    font-weight: 300;
+  }
+
+  .intro{
+    margin-bottom: 0.5em;
+  }
+
+  p{
+    font-weight: 300;
+  }
+}

client/assets/scss/Sidebar.scss

@@ -9,6 +9,12 @@ $transitionDuration: .4s;
   img{
       width: 100%;
       height: auto;
+      border-radius: 0.5em;
+  }
+
+  h2{
+    text-align: center;
+    margin-bottom: 0.5em;
   }
 
   a.toggler{
@@ -20,6 +26,7 @@ $transitionDuration: .4s;
     top: 0;
     right: 0;
     min-height: 100%;
+    padding-top: 1em;
 
     transform: translateX(300px);
     -webkit-transform: translateX(300px);
@@ -59,6 +66,10 @@ $transitionDuration: .4s;
         transform: rotate(0deg);
         transition: transform $transitionDuration ease-out;
         -webkit-transition: transform $transitionDuration ease-out;
+
+        &:hover{
+          color: #3598db;
+        }
     }
   }
 }

client/assets/scss/main.scss

@@ -1,10 +1,23 @@
 @import './utils.scss';
 
+html{
+    font-family: 'Roboto Slab', serif;
+}
+
 body{
   position: relative;
   -webkit-font-smoothing: subpixel-antialiased;
 }
 
+h1, h2, h3, h4, h5, h6{
+  margin: 0;
+  font-weight: 500;
+}
+
+p{
+  font-weight: 300;
+}
+
 *,
 *:before,
 *:after {
@@ -30,8 +43,8 @@ a{
 
   .Header, .Main, .Footer {
     display:    flex;
-    box-sizing: padding-box;
+    padding-right:    calc(50% - 997px / 2);
-    padding:    1em calc(50% - 997px / 2);
+    padding-left:    calc(50% - 997px / 2);
     &:before, &:after { content: " "; width: 1em; }
   }
 }
@@ -54,17 +67,3 @@ a{
     text-align: center;
   }
 }
-
-.Footer{
-  height: 5em;
-  line-height: 5em;
-  background-color: #F1F1F1;
-  border-top: solid;
-  border-width: 1px;
-  border-color: #DADADA;
-}
-
-.Previews{
-  flex: 1;
-  -webkit-flex: 1;
-}

client/js/components/Footer.js

@@ -1,10 +1,12 @@
 import React from 'react';
 
+import '../../assets/scss/Footer.scss';
+
 export default class Footer extends React.Component{
 
     render(){
         return(
-            <div class="Footer">This is a footer</div>
+            <div class="Footer">Site created and maintained by Mitchell Gerber</div>
             );
     }
 }

client/js/components/Preview.js

@@ -1,16 +1,19 @@
 import React from 'react';
 import Link from 'react-router';
 
+import '../../assets/scss/Preview.scss';
+
 export default class Preview extends React.Component{
 
     insertPosts(posts){
         let elements = [];
         for (let i in posts){
             elements.push(
-                            <div key={i}>
+                            <div class="post" key={i}>
-                                <p>{posts[i].date}</p>
+                                <div class="date">{posts[i].date}</div>
-                                <h1 dangerouslySetInnerHTML={this.decodeHtml(posts[i].title.toString())}></h1>
+                                <div class="intro" dangerouslySetInnerHTML={this.decodeHtml(posts[i].title.toString())}></div>
-                                <p dangerouslySetInnerHTML={this.decodeHtml(posts[i].intro.toString())}></p>
+                                <div dangerouslySetInnerHTML={this.decodeHtml(posts[i].intro.toString())}></div>
+                                <p><a class="link" href="#">continue reading...</a></p>
                             </div>
                         );
         }
@@ -28,7 +31,7 @@ export default class Preview extends React.Component{
         const posts = this.props.posts;
 
         return (
-            <div class="Previews">
+            <div class="Preview">
                 {posts.length > 0 ? this.insertPosts(posts): ""}
             </div>
         );

client/js/components/Sidebar.js

@@ -29,14 +29,15 @@ export default class Sidebar extends React.Component{
         return(
             <div class={"Sidebar " + this.state.toggler}>
                 <a onClick={this.onToggle} class="toggler"><i class="fa fa-2x fa-navicon" aria-hidden="true" /></a>
-                <a href="#" class="link">Test 1234</a>
+                <h2>About Me</h2>
-                <p>Test 123</p>
+                <img src={me}/>
-                <p>Test 123</p>
+                <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>
-                <p>Test 123</p>
+
-                <p>Test 123</p>
+                <h3>Contact Me</h3>
-                <p>Test 123</p>
+                <p><i class="fa fa-envelope" aria-hidden="true"></i><a class="link" href="mailto:mgerb42@gmail.com"> eMail</a></p>
-                <p>Test 123</p>
+                <p><i class="fa fa-linkedin-square" aria-hidden="true"></i><a class="link" href="https://www.linkedin.com/in/mitchell-gerber-125391b3" target="_blank"> LinkedIn</a></p>
-                <p>Test 123</p>
+                <p><i class="fa fa-github" aria-hidden="true"></i><a class="link" href="https://github.com/mgerb" target="_blank"> GitHub</a></p>
+                <p><i class="fa fa-wpforms" aria-hidden="true"></i><a href="/resume" class="link"> Resume</a></p>
             </div>
             );
     }

index.html

@@ -5,7 +5,7 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="author" content="Mitchell Gerber">
-  <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
+  <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:300,400" rel="stylesheet">
   <title>mitchel.io</title>
 </head>
 <body>

package.json

@@ -40,6 +40,7 @@
     "highlight.js": "^9.6.0",
     "html-webpack-plugin": "^2.22.0",
     "marked": "^0.3.6",
+    "ncp": "^2.0.0",
     "node-sass": "^3.8.0",
     "react": "^15.3.0",
     "react-dom": "^15.3.0",