Made about page
This commit is contained in:
106
public/components/pages/AboutPage.jsx
Normal file
106
public/components/pages/AboutPage.jsx
Normal 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);
|
@ -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);
|
||||
|
Reference in New Issue
Block a user