Initial commit

.babelrc

@@ -0,0 +1,14 @@
+/*
+	./babelrc
+*/
+{
+  "presets": [
+    ["es2015", {
+      "modules": false
+    }],
+    "react"
+  ],
+  "plugins": [
+    "react-hot-loader/babel"
+  ]
+}

.eslintrc.json

@@ -0,0 +1,30 @@
+{
+    "parser": "babel-eslint",
+    "plugins": [
+        "react"
+    ],
+    "parserOptions": {
+        "ecmaVersion": 6,
+        "sourceType": "module",
+        "ecmaFeatures": {
+            "jsx": true
+        }
+    },
+    "rules": {
+        "semi": 2,
+        "linebreak-style": [
+            "error",
+            "windows"
+        ]
+    },
+    "env": {
+        "browser": true,
+        "node": true,
+        "jasmine": true
+    },
+    "extends": [
+        "airbnb-base",
+        "eslint:recommended",
+        "plugin:react/recommended"
+    ]
+}

.gitignore

@@ -0,0 +1,4 @@
+node_modules
+.vscode
+yarn-error.log
+dist/

package.json

@@ -0,0 +1,50 @@
+{
+  "name": "chris-mcnally",
+  "version": "1.0.0",
+  "description": "Github pages site",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "webpack",
+    "start": "webpack-dev-server"
+  },
+  "author": "Chris McNally",
+  "license": "ISC",
+  "dependencies": {
+    "axios": "^0.16.1",
+    "featherlight": "^1.7.5",
+    "prop-types": "^15.5.10",
+    "react": "^15.5.4",
+    "react-dom": "^15.5.4",
+    "react-hot-loader": "next",
+    "react-image-lightbox": "^3.4.3",
+    "react-load-script": "^0.0.3"
+  },
+  "devDependencies": {
+    "babel-core": "^6.24.1",
+    "babel-eslint": "^7.2.3",
+    "babel-loader": "^7.0.0",
+    "babel-preset-env": "^1.4.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-es2015-webpack": "^6.4.3",
+    "babel-preset-react": "^6.24.1",
+    "css-loader": "^0.28.0",
+    "eslint": "^4.0.0",
+    "eslint-config-airbnb": "^15.0.1",
+    "eslint-loader": "^1.8.0",
+    "eslint-plugin-import": "^2.3.0",
+    "eslint-plugin-jsx-a11y": "^5.0.3",
+    "eslint-plugin-react": "^7.1.0",
+    "extract-text-webpack-plugin": "^2.1.0",
+    "file-loader": "^0.11.1",
+    "happypack": "^3.0.3",
+    "html-webpack-plugin": "^2.28.0",
+    "jshint-loader": "^0.8.4",
+    "node-sass": "^4.5.2",
+    "sass-loader": "^6.0.3",
+    "style-loader": "^0.16.1",
+    "url-loader": "^0.5.8",
+    "webpack": "^2.4.1",
+    "webpack-dev-server": "^2.4.5"
+  }
+}

src/components/App.jsx

@@ -0,0 +1,60 @@
+import React from "react";
+import axios from "axios";
+import Header from "./Header.jsx";
+import Quote from "./Quote.jsx";
+import WorkHistoryContainer from "./WorkHistory.jsx";
+import ProjectsContainer from "./ProjectsContainer.jsx";
+import data from "../data/data";
+// import Playground from './Playground.jsx';
+import "../styles/main.scss";
+
+export default class App extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      pens: [],
+      projects: []
+    };
+  }
+
+  getData() {}
+
+  componentDidMount() {
+    const appUrl = "https://chrismcnally.co.uk";
+    const projectEndpoint = `${appUrl}/wp-json/wp/v2/projects`;
+    //const penEndpoint = `${appUrl}/wp-json/wp/v2/pens`;
+    this.api(projectEndpoint).then(response => {
+      this.setState({ projects: response });
+    });
+
+    // this.api(penEndpoint).then((response)=>{      this.setState({pens:response});
+
+    // });
+  }
+
+  api(endPoint) {
+    return new Promise((resolve, reject) => {
+      axios
+        .get(endPoint)
+        .then(response => {
+          resolve(response.data);
+        })
+        .catch(error => {
+          reject(error);
+        });
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <Header />
+        <Quote text={data.bio} />
+        <WorkHistoryContainer work={data.work_history} />
+        <ProjectsContainer projects={this.state.projects} />
+        {" "}
+        {/*<Playground />*/}
+      </div>
+    );
+  }
+}

src/components/Codepen.jsx

@@ -0,0 +1,57 @@
+import React from "react";
+import Script from "react-load-script";
+import PropTypes from "prop-types";
+
+export default class Codepen extends React.Component {
+  static get defaultProps() {
+    return {
+      user: "chrismcnally",
+      height: "450px",
+      width: "100%",
+      tab: "result",
+      theme: "light",
+      version: "1",
+      hash: "",
+      preview: false
+    };
+  }
+
+  render() {
+    const user = `http://codepen.io/${this.props.user}`;
+    // const pen = `${user}/pen/${this.props.hash}/`;
+    return (
+      <div className="row">
+        <div className="col-md-8">
+          <p
+            data-height="100%"
+            data-theme-id={this.props.theme}
+            data-slug-hash={this.props.hash}
+            data-default-tab={this.props.tab}
+            data-user={this.props.user}
+            data-embed-version={this.props.version}
+            data-pen-title={this.props.title}
+            className="codepen"
+          />
+        </div>
+        <div className="col-md-4" />
+        <hr />
+        <Script
+          onLoad={function() {}}
+          onError={function() {}}
+          url="https://production-assets.codepen.io/assets/embed/ei.js"
+        />
+      </div>
+    );
+  }
+}
+
+Codepen.PropTypes = {
+  user: PropTypes.string.isRequired,
+  height: PropTypes.number,
+  width: PropTypes.number,
+  tab: PropTypes.string,
+  theme: PropTypes.string,
+  version: PropTypes.number,
+  hash: PropTypes.string,
+  preview: PropTypes.bool
+};

src/components/Header.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+export default class Header extends React.Component {
+
+  render() {
+    return (
+      <header>
+        <div className="container">
+          <div className="row">
+            <div className="col-md-6">
+              <div className="header-left">
+                <h1 className="display-4">Chris McNally</h1>
+                <h2>Design / Development / Consulting</h2>
+              </div>
+            </div>
+            <div className="col-md-6">
+              <div className="float-md-right">
+                <a href="https://chrismcnally.co.uk">chrismcnally.co.uk</a>&nbsp;/&nbsp;
+                <a href="http://codepen.io/chrismcnally">codepen.io</a>&nbsp;/&nbsp;
+                <a href="https://uk.linkedin.com/in/chrismcnally1">linkedin.com</a>&nbsp;/&nbsp;
+                <a href="https://twitter.com/ChrisMcNallyWeb">twitter.com</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+    );
+  }
+}

src/components/Lightbox.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import {ProjectColors} from './Projects.jsx';
+
+export default class Lightbox extends React.Component {
+  render() {
+    let cssClasses = ['lightbox'];
+    let img = this.props.project.images[2];
+    if (this.props.isOpen) {
+      cssClasses.push('lightbox-open')
+    }
+    return (
+      <div onClick={() => this.props.handleClick(0, false)} className={cssClasses.join(' ')}>
+        <div className='lightbox-bg'>
+          <ProjectColors colors={this.props.project.colors}/>
+        </div>
+        <div className='lightbox-inner'>
+          <div>
+            <div className='inner-top'></div>
+            <div className='inner-content'>
+              <div className='image-gallery'>
+              <img className={'image-type-' + this.props.project.image_type} src={this.props.project.images[this.props.img]} />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

src/components/Playground.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import Codepen from './Codepen.jsx';
+import axios from 'axios';
+
+export default class Playground extends React.Component {
+    constructor() {
+        super();
+        this.state = {
+            pens: []
+        }
+    }
+
+    componentDidMount() {
+        let _this = this;
+        let url = 'http://cpv2api.com/pens/popular/chrismcnally';
+        this.serverRequest = axios
+            .get(url)
+            .then(function (result) {
+                _this.setState({pens: result.data.data});
+            })
+    }
+
+    render() {
+        return (
+            <div>
+                <div className='content-wrap'>
+                    <div className='container'>
+                        <h2>Playground</h2>
+                        {/*{this
+                            .state
+                            .pens
+                            .map((pen, index) => {
+                                return (<Codepen key={index} hash={pen.id} title={pen.title} details={pen.details}/>)
+                            })}*/}
+                    </div>
+                </div>
+            </div>
+        )
+    }
+}

src/components/ProjectsContainer.jsx

@@ -0,0 +1,40 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Project from "./projects/Project.jsx";
+
+export default class ProjectsContainer extends React.Component {
+  render() {
+    return (
+      <div>
+        <div className="content-wrap">
+          <div className="container">
+            <h1>Recent Projects</h1>
+            <hr /> {this.props.projects.map((project, index) => {
+              const colors = project.fields.colors.map(function(a) {
+                return a.color;
+              });
+              return (
+                <div key={index}>
+                  <Project
+                    key={index}
+                    index={index}
+                    title={project.title.rendered}
+                    description={project.excerpt.rendered}
+                    tags={project.fields.tags}
+                    colors={colors}
+                    project={project}
+                  />
+                  <hr />
+                </div>
+              );
+            }, this)}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+ProjectsContainer.propTypes = {
+  projects: PropTypes.array.isRequired
+};

src/components/Quote.jsx

@@ -0,0 +1,26 @@
+import React from "react";
+import propTypes from "prop-types";
+
+class Quote extends React.Component {
+  render() {
+    return (
+      <div className="content-wrap">
+        <div className="container">
+          <div className="row">
+            <div className="col-sm-12">
+              <blockquote className="blockquote">
+                <p className="mb-0">{this.props.text}</p>
+              </blockquote>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+Quote.propTypes = {
+  text: propTypes.string.isRequired
+};
+
+export default Quote;