Made about page

This commit is contained in:
2018-03-12 12:27:00 +11:00
parent eab2cb622c
commit d83894e283
17 changed files with 470 additions and 23 deletions

View File

@ -0,0 +1,106 @@
/*
* About Page
* About that one lad.
*
* Dependencies:
* styles/components/_page--style-about.scss
*
* Version:
* 1.0.0 - 2018/03/11
*/
import React from 'react';
import Page from './../Page';
import Poly from './../sections/Poly';
import BodySection from './../sections/BodySection';
import SplitSection from './../sections/SplitSection';
import { connect } from 'react-redux';
import Language from './../../language/Language';
import domsHead from './../../images/profile.png';
const ProgrammingBox = function(props) {
return (
<div className="c-page--style-about__language">
<h2 className="c-page--style-about__language-heading">
{Language.get("about."+props.language+".name")}
</h2>
<p className="c-page--style-about__language-description">
{Language.get("about."+props.language+".description")}
</p>
</div>
)
}
class AboutPage extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Page>
<Poly />
<SplitSection
left={ <img src={domsHead} className="c-page--style-about__profile" /> }
right={ <p>{Language.get("about.descriptions.welcome")}</p> }
rightClass="c-page--style-about__blurb"
/>
<BodySection>
<h1>{Language.get("about.titles.me")}</h1>
<p>
{ Language.get("about.descriptions.me") }
</p>
<h2 className="c-page--style-about__subheading">
{ Language.get("about.titles.programming")}
</h2>
<p>{ Language.get("about.descriptions.programming")}</p>
<div className="c-page--style-about__language-container">
<ProgrammingBox language="C#" />
<ProgrammingBox language="Java" />
<ProgrammingBox language="Javascript" />
<ProgrammingBox language="HTML" />
<ProgrammingBox language="PHP" />
<ProgrammingBox language="VB" />
<ProgrammingBox language="SQL" />
<ProgrammingBox language="Lua" />
<ProgrammingBox language="ActionScript" />
<ProgrammingBox language="Ruby" />
<ProgrammingBox language="Python" />
</div>
<h2 className="c-page--style-about__subheading">
{ Language.get("about.titles.apis")}
</h2>
<div className="c-page--style-about__language-container">
<ProgrammingBox language="GL" />
<ProgrammingBox language="Node" />
<ProgrammingBox language="React" />
<ProgrammingBox language="Shopify" />
<ProgrammingBox language="neto" />
<ProgrammingBox language="jQuery" />
<ProgrammingBox language="NodeCG" />
<ProgrammingBox language="PhoneGap" />
<ProgrammingBox language="Other" />
</div>
</BodySection>
</Page>
)
}
}
const mapStateToProps = function(state) {
return {
code: state.language.code
}
}
export default connect(mapStateToProps)(AboutPage);

View File

@ -2,6 +2,9 @@
* Index Page
* Homepage.
*
* Dependencies:
* styles/components/_page--style-index.scss
*
* Version:
* 1.0.1 - 2018/03/01
*/
@ -11,6 +14,9 @@ import React from 'react';
import Page from './../Page';
import Poly from './../sections/Poly';
import BodySection from './../sections/BodySection';
import SplitSection from './../sections/SplitSection';
import { connect } from 'react-redux';
import Language from './../../language/Language';
class IndexPage extends React.Component {
constructor(props) {
@ -21,26 +27,19 @@ class IndexPage extends React.Component {
return (
<Page>
<Poly />
<BodySection>
<p>Lorem</p>
<p>Lorem</p>
<p>Lorem</p>
<p>Lorem</p>
<p>Lorem</p>
<p>Lorem</p>
<p>Lorem</p>
<p>Lorem</p>
<p>Lorem</p>
<p>Lorem</p>
<p>Lorem</p>
<p>Lorem</p>
<p>Lorem</p>
<p>Lorem</p>
<p>Lorem</p>
<p>test</p>
</BodySection>
</Page>
)
}
}
export default IndexPage;
const mapStateToProps = function(state) {
return {
code: state.language.code
}
}
export default connect(mapStateToProps)(IndexPage);