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

@@ -5,32 +5,39 @@ $transitionDuration: .4s;
   width: 300px;
   padding-right: 1em;
   padding-left: 1em;
-  
+
   img{
       width: 100%;
       height: auto;
+      border-radius: 0.5em;
   }
-  
+
+  h2{
+    text-align: center;
+    margin-bottom: 0.5em;
+  }
+
   a.toggler{
     display: none;
   }
-  
+
   @media (max-width: 768px) {
     position: absolute;
     top: 0;
     right: 0;
     min-height: 100%;
-    
+    padding-top: 1em;
+
     transform: translateX(300px);
     -webkit-transform: translateX(300px);
     transition: transform $transitionDuration ease-out;
     -webkit-transition: transform $transitionDuration ease-out;
-    
+
     &.open {
       transform: translateX(0px);
       -webkit-transform: translateX(0px);
       border-left: 1px solid #EAEAEA;
-      
+
         &:before {
             content:    " ";
             display:    block;
@@ -41,12 +48,12 @@ $transitionDuration: .4s;
             top:        0;
             right:      100%;
         }
-        
+
         a.toggler{
             transform: rotate(450deg);
         }
     }
-    
+
     a.toggler{
         display: block;
         width: 2em;
@@ -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 {
@@ -17,7 +30,7 @@ a{
   background-color: transparent;
   color: #3598db;
   text-decoration: none;
- 
+
  &:hover{
    color: #3598db;
  }
@@ -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; }
   }
 }
@@ -49,22 +62,8 @@ a{
   border-bottom: solid;
   border-width: 1px;
   border-color: #DADADA;
-  
+
   h1{
     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,36 +1,39 @@
 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>
                         );
         }
-        
+
         return elements;
     }
-    
+
     decodeHtml(html) {
       var txt = document.createElement("textarea");
       txt.innerHTML = html;
       return {__html : txt.value};
     }
-  
+
     render(){
         const posts = this.props.posts;
-        
+
         return (
-            <div class="Previews">
+            <div class="Preview">
                 {posts.length > 0 ? this.insertPosts(posts): ""}
             </div>
         );
     }
-}
+}

client/js/components/Sidebar.js

@@ -5,39 +5,40 @@ import me from '../../assets/images/me.jpg';
 import '../../assets/scss/Sidebar.scss';
 
 export default class Sidebar extends React.Component{
-    
+
     constructor(){
         super();
-        
+
         this.state = {
             toggler: ""
         };
-        
+
         this.onToggle = this.onToggle.bind(this);
     }
-    
+
     onToggle(){
         let temp = this.state.toggler;
-        temp = temp === "open" ? "" : "open";  
+        temp = temp === "open" ? "" : "open";
-        
+
         this.setState({
             toggler: temp
         });
     }
-    
+
     render(){
         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>
@@ -18,4 +18,4 @@
 <!--it's happening!!!-->
 <div id="app"></div>
 </body>
-</html>
+</html>

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",