mitchell/mywebsite
1
0
Fork 0
mirror of https://github.com/mgerb/mywebsite synced 2026-01-12 10:52:47 +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

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

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

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

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

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