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

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

Browse Source
This commit is contained in:
Mitchell
2016-08-28 01:59:36 -05:00
parent d173b06129
commit 1c224f95ab
5 changed files with 46 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
client/assets/images/loading.svg Normal file
View File

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

After

Width:  |  Height:  |  Size: 1.7 KiB

6
client/assets/scss/Content.scss
View File

@@ -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;
margin: auto;
display: block;
margin: 0 auto;
}
code,
pre {

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

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

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

@@ -33,17 +33,12 @@ export default class Sidebar extends React.Component{
class="fa fa-2x fa-navicon"
aria-hidden="true" />
</a>
<h2>
About Me
</h2>
<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>
);
}

11
client/js/pages/Index.js
View File

@@ -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();
@@ -35,14 +38,14 @@ export default class Index extends React.Component {
render() {
const fetched = this.props.redux.fetched;
const fetching = this.props.redux.fetching;
return (
<div>
<Header />
<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>;