diff --git a/.babelrc b/.babelrc
new file mode 100644
index 0000000..38408f1
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,14 @@
+/*
+ ./babelrc
+*/
+{
+ "presets": [
+ ["es2015", {
+ "modules": false
+ }],
+ "react"
+ ],
+ "plugins": [
+ "react-hot-loader/babel"
+ ]
+}
diff --git a/.eslintrc.json b/.eslintrc.json
new file mode 100644
index 0000000..432eb33
--- /dev/null
+++ b/.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"
+ ]
+}
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..347d3f3
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,4 @@
+node_modules
+.vscode
+yarn-error.log
+dist/
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..db9f2e3
--- /dev/null
+++ b/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"
+ }
+}
diff --git a/src/components/App.jsx b/src/components/App.jsx
new file mode 100644
index 0000000..558156e
--- /dev/null
+++ b/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 (
+
+
+
+
+
+ {" "}
+ {/*
*/}
+
+
+
+
+
Chris McNally
+ Design / Development / Consulting
+
+
+
+
+
this.props.handleClick(0, false)} className={cssClasses.join(' ')}>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Playground
+ {/*{this
+ .state
+ .pens
+ .map((pen, index) => {
+ return ()
+ })}*/}
+
+
+
+
+
+
Recent Projects
+
{this.props.projects.map((project, index) => {
+ const colors = project.fields.colors.map(function(a) {
+ return a.color;
+ });
+ return (
+
+ );
+ }, this)}
+
+
+
+
+
+
+
+ {this.props.text}
+
+
+
+
+
+
+
+ {isOpen &&
+ this.setState({ isOpen: false })}
+ onMovePrevRequest={() => this.setState({
+ photoIndex: (photoIndex + images.length - 1) % images.length,
+ })}
+ onMoveNextRequest={() => this.setState({
+ photoIndex: (photoIndex + 1) % images.length,
+ })}
+ />
+ }
+
+ );
+ }
+}
\ No newline at end of file
diff --git a/src/components/WorkHistory.jsx b/src/components/WorkHistory.jsx
new file mode 100644
index 0000000..5e3b9d0
--- /dev/null
+++ b/src/components/WorkHistory.jsx
@@ -0,0 +1,52 @@
+import React from "react";
+import propTypes from "prop-types";
+
+export default class WorkHistoryContainer extends React.Component {
+ render() {
+ return (
+
+
+
Work History
+
{this.props.work.map((work, index) => {
+ return (
+
+ );
+ })}
+
+
+
{title}
+ /
+ {location}
+ /
+
{date}
+
{description}
+
+
+
+
+
+
+ {this.getTags()}
+
+
{this.getTitle()}
+
+
+
+
+
+
+ {isOpen && this._renderLightBox(images)}
+
+ {props.colors.map((color, index) => {
+ return ;
+ })}
+
+ );
+}
+
+ProjectColors.propTypes = {
+ colors: PropTypes.array.isRequired
+};
diff --git a/src/components/projects/ProjectImageContainer.jsx b/src/components/projects/ProjectImageContainer.jsx
new file mode 100644
index 0000000..72e4239
--- /dev/null
+++ b/src/components/projects/ProjectImageContainer.jsx
@@ -0,0 +1,57 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export default class ProjectImageContainer extends React.Component {
+ render() {
+ return (
+
+ {this.props.images.map((image, index) => {
+ return (
+
+ );
+ })}
+
+
+