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

Adjusted AboutPage

Browse Source
This commit is contained in:
Dominic Masters
2018-03-18 14:15:38 +11:00
parent 048a697037
commit 62b761f24d
2 changed files with 58 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
public/components/pages/AboutPage.jsx
View File

@ -6,34 +6,26 @@
* styles/components/_page--style-about.scss * styles/components/_page--style-about.scss
* *
* Version: * Version:
* 1.0.0 - 2018/03/11 * 1.0.0 - 2018/03/18
*/ */
import React from 'react'; import React from 'react';
import { connect } from 'react-redux';
import Language from './../../language/Language';
import Page from './../Page'; import Page from './../Page';
import BlankPromo from './../sections/BlankPromo'; import BlankPromo from './../sections/BlankPromo';
import BodySection from './../sections/BodySection'; import BodySection from './../sections/BodySection';
import SplitSection from './../sections/SplitSection'; import SplitSection from './../sections/SplitSection';
import { connect } from 'react-redux'; import VideoTitle from './../title/VideoTitle';
import Language from './../../language/Language';
import Window95 from './../w95/Window95'; import Window95 from './../w95/Window95';
import domsHead from './../../images/profile.png'; import domsHead from './../../images/profile.png';
import aboutMP4 from './../../videos/about/about.mp4';
const ProgrammingBox = function(props) { import programmingMP4 from './../../videos/about/programming.mp4';
return ( import apiMP4 from './../../videos/about/api.mp4';
<div className="c-page--style-about__language"> import otherMP4 from './../../videos/about/other.mp4';
<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 { class AboutPage extends React.Component {
constructor(props) { constructor(props) {
@ -45,89 +37,43 @@ class AboutPage extends React.Component {
<Page className="c-page--style-about"> <Page className="c-page--style-about">
<BlankPromo /> <BlankPromo />
{/* Bio */}
<SplitSection <SplitSection
className="c-page--style-about__bio-section"
leftClass="c-page--style-about__profile-container" leftClass="c-page--style-about__profile-container"
left={ <img src={domsHead} className="c-page--style-about__profile" /> } left={ <img src={domsHead} className="c-page--style-about__profile" /> }
right={ <p>{Language.get("about.descriptions.welcome")}</p> } right={
rightClass="c-page--style-about__blurb" <Window95 title="Bio" className="c-window--style-about">
full <div className="c-text-field">
/> <p>{ Language.get("about.descriptions.welcome") }</p>
<SplitSection
leftClass="c-page--style-about__window-container"
left={
<Window95 menu={[]} title={Language.get("about.titles.me")} className="c-page--style-about__window">
<div className="c-text-field c-page--style-about__window-text">
{ Language.get("about.descriptions.me") }
</div> </div>
</Window95> </Window95>
} }
rightClass="c-page--style-about__blurb"
rightClass="c-page--style-about__window-container"
right={ <div></div> }
full
/> />
{/* About Me */}
<BodySection> <BodySection
<h1>{Language.get("about.titles.me")}</h1> className="c-about-page__body-section"
<p> title={
{ Language.get("about.descriptions.me") } <VideoTitle
</p> title="about.titles.me" mp4={aboutMP4}
/>
<h2 className="c-page--style-about__subheading"> }
{ Language.get("about.titles.programming")} >
</h2> { Language.get("about.descriptions.me") }
<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>
<h2 className="c-page--style-about__subheading">
{ Language.get("about.titles.other")}
</h2>
<p>{ Language.get("about.descriptions.other")}</p>
<div className="c-page--style-about__language-container">
<ProgrammingBox language="Video" />
<ProgrammingBox language="Animation" />
<ProgrammingBox language="Graphics" />
<ProgrammingBox language="Networking" />
<ProgrammingBox language="Software" />
</div>
</BodySection> </BodySection>
{/* Programming */}
<BodySection className="c-about-page__body-section" title={[
<VideoTitle title="about.titles.programming" mp4={programmingMP4} to="/about/programming" />,
<VideoTitle title="about.titles.apis" mp4={apiMP4} />,
<VideoTitle title="about.titles.other" mp4={otherMP4} />
]}></BodySection>
</Page> </Page>
) );
} }
} }

54
public/styles/components/_page--style-about.scss
View File

@ -10,13 +10,28 @@
* Version: * Version:
* 1.0.0 - 2018/03/11 * 1.0.0 - 2018/03/11
*/ */
//Body Section Margin
.c-about-page__body-section {
margin-bottom: 3em;
}
//About Section
.c-page--style-about__bio-section {
margin-bottom: 5em;
}
.c-page--style-about { .c-page--style-about {
background: url('./../images/dotted_bg_yellow.png');
background-size: 16px 16px;
} }
.c-page--style-about__profile-container { .c-page--style-about__profile-container {
margin-bottom: 5em; }
.c-window--style-about {
max-width: 25em;
margin: 0 auto;
display: block;
width: 90%;
} }
.c-page--style-about__profile { .c-page--style-about__profile {
@ -27,15 +42,13 @@
.c-page--style-about__blurb { .c-page--style-about__blurb {
font-size: 1.25em; font-size: 1.25em;
max-width: 25em;
} }
.c-page--style-about__blurb,
.c-page--style-about__profile-container { .c-page--style-about__profile-container {
text-align: center; text-align: center;
} }
//Window adjustments for about section
.c-page--style-about__window { .c-page--style-about__window {
display: block; display: block;
width: 90%; width: 90%;
@ -46,36 +59,15 @@
resize: none; resize: none;
} }
//Media queries
/*
.c-page--style-about__language-container {
@extend %t-flexbox;
@include t-flex-wrap(wrap);
}
.c-page--style-about__language {
width: 100%;
padding: 1em;
}
.c-page--style-about__language-heading,
.c-page--style-about__language-description {
text-align: center;
}
.c-page--style-about__subheading {
margin-top: 4em;
}
*/
@include t-media-query($s-small-up) { @include t-media-query($s-small-up) {
.c-page--style-about__blurb {
}
.c-page--style-about__window-container { .c-page--style-about__window-container {
width: 50%; width: 50%;
} }
.c-page--style-about__window { .c-page--style-about__window {
width: 50%; width: 50%;
} }
/*.c-page--style-about__language {
width: 50%;
}*/
} }