YourWishes/domsPlace
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Made about page

Browse Source
This commit is contained in:
Dominic Masters
2018-03-12 12:27:00 +11:00
parent eab2cb622c
commit d83894e283
17 changed files with 470 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
public/components/navigation/Navbar.jsx
View File

@ -38,6 +38,7 @@ class Navbar extends React.Component {
<div className="c-navbar__links">
<NavbarLink exact to="/">Home</NavbarLink>
<NavbarLink to="/about">About</NavbarLink>
<NavbarLink to="/contact">Contact</NavbarLink>
</div>
</nav>

106
public/components/pages/AboutPage.jsx Normal file
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);

31
public/components/pages/IndexPage.jsx
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);

4
public/components/sections/BodySection.jsx
View File

@ -20,7 +20,9 @@ class BodySection extends React.Component {
render() {
return (
<Section section="body">
{this.props.children}
<div className="c-section--style-body__inner">
{this.props.children}
</div>
</Section>
)
}

46
public/components/sections/SplitSection.jsx Normal file
View File

@ -0,0 +1,46 @@
/*
* Poly
* Poly styled section.
*
* Dependencies:
* styles/components/_section--style-split.scss
*
* Version:
* 1.0.0 - 2018/03/11
*/
import React from 'react';
import Section from './../Section';
const SplitSectionSection = function(props) {
let clazz = "c-section--style-split__split-part";
if(typeof props.className !== typeof undefined) clazz += " " + props.className;
return (
<div className={clazz}>
{props.children}
</div>
);
}
class SplitSection extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Section section="split">
<SplitSectionSection className={this.props.leftClass}>
{this.props.left}
</SplitSectionSection>
<SplitSectionSection className={this.props.rightClass}>
{this.props.right}
</SplitSectionSection>
</Section>
);
}
}
export default SplitSection;