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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/App.jsx
View File

@ -16,6 +16,7 @@ import Header from './components/Header';
import Footer from './components/Footer';
import IndexPage from './components/pages/IndexPage';
import AboutPage from './components/pages/AboutPage';
import ContactPage from './components/pages/ContactPage';
class App extends React.Component {
@ -31,7 +32,8 @@ class App extends React.Component {
<Switch>
<Route exact path="/" component={IndexPage} />
<Route path="/contact" component={ContactPage} />
<Route exact path="/about" component={AboutPage} />
<Route exact path="/contact" component={ContactPage} />
</Switch>
<Footer />

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;

BIN
public/images/profile.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

5
public/language/Language.jsx
View File

@ -19,7 +19,9 @@ class Language {
}
get(key) {
return this.getRecursive(key.split(".")) || "Missing \"" + key + "\"";
let j = this.getRecursive(key.split("."));
if(typeof j === typeof undefined || j == null) return "Missing \"" + key + "\"";
return j;
}
getRecursive(key_array, data_obj) {
@ -29,6 +31,7 @@ class Language {
let k = key_array[0];
let o = data_obj[k];
if(typeof o === typeof undefined) return null;
if(typeof o === 'function') o = o();
//Awesome
if(key_array.length > 1) {

152
public/language/en-AU.jsx
View File

@ -1,4 +1,156 @@
import React from 'react';
module.exports = {
"about": {
"titles": {
"me": "About Me",
"programming": "Programming",
"apis": "APIs, Libraries, Tools and Platforms"
},
"descriptions": {
"welcome": "Hello! My name is Dominic \"YourWishes\" Masters, and welcome to my little place on the web!",
"me": "I am a 23 year old programmer from Sydney, Australia. I have " +
"been programming , and generally working with computers and other " +
"technology for as long as I can remember.",
"programming": "Programming is my passion, and I continue to develop my " +
"skillset every day. I am fluent in many computing technologies and "+
"languages. Below are just some of the languages I'm fluent in."
},
"C#": {
"name": "C#",
"description": "I have been working with C# since late 2012, starting " +
"with libraries like XNA and .NET."
},
"Java": {
"name": "Java",
"description": "I have been using Java since late 2011 as an introduction " +
"into OOP and Desktop Software writing."
},
"Javascript": {
"name": "Javascript",
"description": "I have been using Javascript for various projects since " +
"around 2009."
},
"HTML": {
"name": "HTML/CSS",
"description": "I have been using and playing with HTML for websites since " +
"around 2006 as one of my first steps into programming."
},
"PHP": {
"name": "PHP",
"description": "I have been using PHP as a server language since 2011, " +
"although lately I tend to favour libraries such as node for this."
},
"VB": {
"name": "VB",
"description": "While an underappreciated language I have used VB for " +
"university projects and system scripting since 2010."
},
"SQL": {
"name": "SQL",
"description": "I have used SQL Servers for various projects since 2011 " +
"mostly with MySQL or PGSQL."
},
"Lua": {
"name": "Lua",
"description": "While rarely used anymore I have used Lua for scripting " +
"and game development since late 2009."
},
"ActionScript": {
"name": "ActionScript",
"description": "My first taste of programming, I have been using ActionScript " +
"in all it's flavours since early 2005, starting with some Flash Animations and " +
"developing into game programming."
},
"Ruby": {
"name": "Ruby",
"description": "Not one of my strongest languages, I have used Ruby for "+
"Shopify, an eCommerce platform since 2017."
},
"Python": {
"name": "Python",
"description": "Another language I'm not super fluent in, however I have "+
"used it for scripts and for personal projects since 2015."
},
"GL": {
"name": "GL",
"description": "I have been working with various Graphics Libaries, incuding "+
"OpenGL, LWJGL, JOGL, XNA, MonoGame, Unity C#, WebGL and Playstation " +
"Mobile SDK in various forms since early 2009."
},
"Node": {
"name": "Node",
"description": "I write software, servers and scripts in Node, it is " +
"becoming my most used platform to develop for. I have been using Node " +
" since early 2014."
},
"React": {
"name": "React & Redux",
"description": "Since 2015 I have been writing apps using the React, " +
"Redux and JSX frameworks."
},
"Shopify": {
"name": "Shopify",
"description": "I have been working with Shopify as part of my daily job " +
"since October of 2017. Utilizing Shopify's Liquid Markup, as well as " +
"the Shopify API's for app development."
},
"neto": {
"name": "neto",
"description": "I have worked with the neto eCommerce platform since mid "+
"2015, as well as their b@se templating language."
},
"jQuery": {
"name": "jQuery",
"description": "Many websites I have developed have utilized the jQuery " +
"library, since late 2009. Despite is fading popularity I still use it " +
"from time to time, however tend to drop it in favour of native JS."
},
"NodeCG": {
"name": "NodeCG",
"description": "Being an avid content creator for livestreams and videos, " +
"I have extensive experince with the NodeCG Stream Graphics Library."
},
"PhoneGap": {
"name": "PhoneGap/Cordova",
"description": "I have written ReactJS apps for mobile devices using Adobe's " +
"PhoneGap tools built ontop of Apache's Cordova software."
},
"Other": {
"name": "Other Tools",
"description": "SCSS, LESS, JOGL, Webpack, Express, Babel, Grunt, JSON, " +
"XML, YML, Typescript, ECMAScript, FFMPEG, Google API, Heroku, YouTube, " +
"Twitch.TV, OAUTH2, VirtueMart, Joomla, WordPress, Craft CMS, opus, " +
"SourceMod, Twitter Bootstrap, Bukkit, BTC Markets, ITCSS, BEM, " +
"ionic, PHPBB, Xenforo, WebSockets, Twitter, Facebook, Instagram, " +
"eBay, PayPal & more."
}
},
"contact": {
"form": {
"title": "Contact",

47
public/styles/components/_page--style-about.scss Normal file
View File

@ -0,0 +1,47 @@
/*
* About Page
* Styles for index page elements
*
* Dependencies:
* styles/settings/responsive.scss
* styles/tools/_flex.scss
* styles/tools/_responsive.scss
*
* Version:
* 1.0.0 - 2018/03/11
*/
.c-page--style-about__profile {
width: 100%;
max-width: 256px;
margin: 0 auto;
}
.c-page--style-about__blurb {
font-size: 1.25em;
max-width: 25em;
}
.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) {
.c-page--style-about__language {
width: 50%;
}
}

2
public/styles/components/_page--style-contact.scss
View File

@ -6,7 +6,7 @@
* styles/settings/responsive.scss
* styles/tools/_repsonsive.scss
* styles/tools/_flex.scss
* styles/components/_style.scss
* styles/components/_page.scss
*
* Version:
* 1.0.0 - 2018/03/10

12
public/styles/components/_page--style-index.scss Normal file
View File

@ -0,0 +1,12 @@
/*
* Index Page
* Styles for index page elements
*
* Dependencies:
* styles/settings/responsive.scss
* styles/tools/_repsonsive.scss
* styles/tools/_flex.scss
*
* Version:
* 1.0.0 - 2018/03/11
*/

8
public/styles/components/_section--style-body.scss
View File

@ -10,15 +10,17 @@
* Version:
* 1.0.0 - 2018/02/28
*/
.c-section--style-body {
.c-section--style-body__inner {
background: $s-color--background-default;
padding: 1em;
}
@include t-media-query($s-small-up) {
.c-section--style-body {
margin-left: 4%;
width: 96%;
padding-left: 4%;
}
.c-section--style-body__inner {
@include t-box-shadow(-10px, 10px, 0px, rgba(0, 0, 0, 0.5));
}
}

34
public/styles/components/_section--style-split.scss Normal file
View File

@ -0,0 +1,34 @@
/*
* Section Style Split
* Styles for split style section
*
* Dependencies:
* styles/settings/responsive.scss
* styles/tools/_repsonsive.scss
* styles/tools/_flex.scss
* styles/components/_section.scss
*
* Version:
* 1.0.0 - 2018/03/11
*/
.c-section--style-split {
@include t-flexbox();//Because we're winning a fight
@include t-flex-wrap(wrap);
}
.c-section--style-split__split-part {
width: 100%;
}
@include t-media-query($s-small-up) {
.c-section--style-split {
@include t-flex-wrap(nowrap);
@include t-justify-content(space-around);
@include t-align-items(center);
}
.c-section--style-split__split-part {
width: auto;
}
}

25
public/styles/elements/_dt.scss Normal file
View File

@ -0,0 +1,25 @@
/*
* DT, DL, DD
* Base Definition List Settings
*
* Dependencies:
*
* Version:
* 1.0.0 - 2018/03/11
*/
dt {
font-weight: bold;
}
dl {
}
dd {
margin-left: 2em;
}
dt ~ dt,
dl ~ dt {
margin-top: 1em;
}

11
public/styles/elements/_p.scss Normal file
View File

@ -0,0 +1,11 @@
/*
* P
* Base P/Paragraph Seettings
*
* Dependencies:
*
* Version:
* 1.0.0 - 2018/03/11
*/
p {
}

5
public/styles/index.scss
View File

@ -32,8 +32,10 @@
@import './elements/_a.scss';
@import './elements/_body.scss';
@import './elements/_button.scss';
@import './elements/_dt.scss';
@import './elements/_headings.scss';
@import './elements/_html.scss';
@import './elements/_p.scss';
@import './elements/_table.scss';
//Objects
@ -47,11 +49,14 @@
@import './components/_menu.scss';
@import './components/_navbar.scss';
@import './components/_page.scss';
@import './components/_page--style-about.scss';
@import './components/_page--style-contact.scss';
@import './components/_page--style-index.scss';
@import './components/_section.scss';
@import './components/_section--style-blank-promo.scss';
@import './components/_section--style-body.scss';
@import './components/_section--style-poly.scss';
@import './components/_section--style-split.scss';
@import './components/_section--style-three.scss';
//Utilities