mitchell/mywebsite
1
0
Fork 0
mirror of https://github.com/mgerb/mywebsite synced 2026-01-10 18:02:51 +00:00
Code Issues Releases Wiki Activity

more styling - added content to sidebar

Browse Source
This commit is contained in:
Mitchell
2016-08-21 18:37:37 -05:00
parent 3e6ffc206a
commit 6dac5aeb06
9 changed files with 108 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
client/assets/scss/Footer.scss Normal file
View File

@@ -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;
}

22
client/assets/scss/Preview.scss Normal file
View File

@@ -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;
}
}

11
client/assets/scss/Sidebar.scss
View File

@@ -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;
}
}
}
}

31
client/assets/scss/main.scss
View File

@@ -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: 1em calc(50% - 997px / 2);
padding-right: 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;
}

4
client/js/components/Footer.js
View File

@@ -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>
);
}
}

13
client/js/components/Preview.js
View File

@@ -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}>
<p>{posts[i].date}</p>
<h1 dangerouslySetInnerHTML={this.decodeHtml(posts[i].title.toString())}></h1>
<p dangerouslySetInnerHTML={this.decodeHtml(posts[i].intro.toString())}></p>
<div class="post" key={i}>
<div class="date">{posts[i].date}</div>
<div class="intro" dangerouslySetInnerHTML={this.decodeHtml(posts[i].title.toString())}></div>
<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>
);

17
client/js/components/Sidebar.js
View File

@@ -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>
<p>Test 123</p>
<p>Test 123</p>
<p>Test 123</p>
<p>Test 123</p>
<p>Test 123</p>
<p>Test 123</p>
<p>Test 123</p>
<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></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><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>
);
}

2
index.html
View File

@@ -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>

1
package.json
View File

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