initial commit on branch develop

.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "es2015",
+    "react"    
+  ]
+}

package.json

@@ -0,0 +1,38 @@
+{
+  "name": "portfolio",
+  "version": "1.0.0",
+  "description": "portfolio",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "production": "webpack -p",
+    "start": "webpack-dev-server"
+  },
+  "keywords": [
+    "porfolio",
+    "react"
+  ],
+  "author": "Matúš Námešný",
+  "license": "ISC",
+  "dependencies": {
+    "react": "^15.4.2",
+    "react-dom": "^15.4.2",
+    "react-router-dom": "^4.0.0"
+  },
+  "devDependencies": {
+    "babel-core": "^6.24.0",
+    "babel-loader": "^6.4.1",
+    "babel-preset-es2015": "^6.24.0",
+    "babel-preset-react": "^6.23.0",
+    "css-loader": "^0.28.0",
+    "file-loader": "^0.11.1",
+    "html-webpack-plugin": "^2.28.0",
+    "json-loader": "^0.5.4",
+    "node-sass": "^4.5.2",
+    "sass-loader": "^6.0.3",
+    "style-loader": "^0.16.1",
+    "url-loader": "^0.5.8",
+    "webpack": "^2.3.2",
+    "webpack-dev-server": "^2.4.2"
+  }
+}

src/components/About.js

@@ -0,0 +1,15 @@
+import React, {Component} from 'react';
+
+export default class About extends Component{
+  constructor() {
+    super();
+  }
+
+  render() {
+    return (
+      <div className="content">
+        <h1>About</h1>
+      </div>
+    );
+  }
+}

src/components/Blog.js

@@ -0,0 +1,15 @@
+import React, {Component} from 'react';
+
+export default class Blog extends Component {
+  constructor() {
+    super();
+  }
+
+  render () {
+    return (
+      <div className="content">
+        <h1>Hello</h1>
+      </div>
+    )
+  }
+}

src/components/Home.js

@@ -0,0 +1,46 @@
+import React, {Component, PropTypes} from 'react';
+import config from '../config/config.json';
+import {Link} from 'react-router-dom';
+
+export default class Home extends Component {
+  constructor() {
+    super();
+  }
+
+  render() {
+    var socialLinks = [];
+    var key = 0;
+    for (var i in config.social) {
+      socialLinks.push(
+          <a key={key} href={config.social[i]}>
+            <i className={"fa fa-" + i + " fa-3x"}></i>
+          </a>
+      );
+      key++;
+    };
+    socialLinks.push(
+      <a key={key} href={"mailto:" + config.email}><i className="fa fa-envelope-o fa-3x" aria-hidden="true"></i></a>
+    )
+
+    return (
+      <div id="cover-page" className={this.props.location.pathname == '/' ? "cover-page-full" : "cover-page-collapsed"}>
+        <div id="cover-page-content">
+          <div>
+            <h1 id="cover-page-name"><Link to='/'>{ config.name }</Link></h1>
+          </div>
+          <div className="social">
+              {socialLinks}
+          </div>
+          <div className="menu-links">
+            <ul>
+              <li><Link to='/about'>About</Link></li>
+              <li><Link to='/blog'>Blog</Link></li>
+              <li><Link to='/portfolio'>Portfolio</Link></li>
+              <li><Link to='/resume'>Resume</Link></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}

src/components/Portfolio.js

@@ -0,0 +1,15 @@
+import React, {Component} from 'react';
+
+export default class Portfolio extends Component{
+  constructor() {
+    super();
+  }
+
+  render() {
+    return (
+      <div className="content">
+        <h1>Portfolio</h1>
+      </div>
+    );
+  }
+}

src/components/Resume.js

@@ -0,0 +1,15 @@
+import React, {Component} from 'react';
+
+export default class Resume extends Component{
+  constructor() {
+    super();
+  }
+
+  render() {
+    return (
+      <div className="content">
+        <h1>Resume</h1>
+      </div>
+    );
+  }
+}

src/components/index.js

@@ -0,0 +1,5 @@
+export { default as Home } from './Home';
+export { default as About} from './About';
+export { default as Blog} from './Blog';
+export { default as Portfolio} from './Portfolio';
+export { default as Resume} from './Resume';

src/config/config.json

@@ -0,0 +1,13 @@
+{
+  "baseURL": "",
+  "title": "Matúš Námešný",
+  "coverimage": "",
+  "avatar": "https://pbs.twimg.com/profile_images/512708501840228352/MbawoT5E.jpeg",
+  "description": "Hello",
+  "name": "Matúš Námešný",
+  "email": "matus@namesny.com",
+  "social": {
+    "github": "https://github.com/LordMathis",
+    "twitter": "https://twitter.com/matus_n"
+  }
+}

src/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Portfolio</title>
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css?family=Inconsolata|Open+Sans|Roboto|Montserrat|Concert+One" rel="stylesheet">
+    <!-- Font Awesome -->
+    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
+  </head>
+  <body>
+    <div id="app">
+    </div>
+  </body>
+</html>

src/index.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import ReactDom from 'react-dom';
+import {HashRouter, Route, Switch} from 'react-router-dom';
+import {Home, About, Blog, Portfolio, Resume} from './components';
+import './static/stylesheets/main.scss';
+
+ReactDom.render(
+  <HashRouter>
+    <div className="container">
+      <Route component={Home}/>
+      <Route exact path='/about' component={About} />
+      <Route exact path='/blog' component={Blog} />
+      <Route exact path='/portfolio' component={Portfolio} />
+      <Route exact path='/resume' component={Resume} />
+    </div>
+  </HashRouter>,
+  document.getElementById('app')
+);

src/static/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Portfolio</title>
+    <!-- Bootstrap -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css?family=Inconsolata|Open+Sans|Roboto|Montserrat|Concert+One" rel="stylesheet">
+    <!-- Font Awesome -->
+    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
+
+  </head>
+  <body>
+    <div id="app">
+    </div>
+  </body>
+</html>

src/static/stylesheets/main.scss

@@ -0,0 +1,109 @@
+$font-header: 'Concert One', cursive;
+$font-paragraph: 'Open Sans', sans-serif;
+$white: #fdfdfd;
+$black: #2f2f2f;
+$break-medium: 768px;
+$break-large: 1200px;
+
+#cover-page {
+  background: linear-gradient(140deg,rgba(68, 68, 68, 0.6) 20%, rgba(0, 0, 0, 0.9)), url(../images/background-cover.jpg) no-repeat center center fixed;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  background-size: cover;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  color: $white;
+  transition-property: width;
+  transition-duration: 1s;
+  -webkit-transition-property: width;
+  -webkit-transition-duration: 1s;
+}
+
+#cover-page.cover-page-full{
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+}
+
+#cover-page.cover-page-collapsed {
+  float: left;
+  width: 320px;
+  height: 100%;
+  @media screen and (max-width: $break-medium) {
+    width: 100%;
+    float: none;
+  }
+  @media screen and (min-width: $break-large) {
+    width: 500px;
+    float: none;
+  }
+}
+
+body {
+  font-family: $font-paragraph;
+  color: $black;
+  margin: 0;
+}
+
+@for $i from 1 through 6 {
+  h#{$i} {
+    font-family: $font-header;
+  }
+}
+
+#cover-page-name {
+  font-size: 5em;
+}
+
+#cover-page-name a, #cover-page-name a:hover {
+    color: $white;
+    text-decoration: none;
+}
+
+.content {
+  margin-left: 320px;
+  @media screen and (max-width: $break-medium) {
+    width: 100%;
+    float: none;
+  }
+  @media screen and (min-width: $break-large) {
+    margin-left: 500px;
+  }
+}
+
+.social {
+  text-align: center;
+  a {
+    color: $white;
+    display: inline-block;
+    margin: 10px;
+  }
+}
+
+.menu-links ul{
+  list-style: none;
+  margin-left: 0;
+  padding: 10px;
+  li {
+    display: inline-block;
+  }
+  li a {
+    color: $white;
+    display: block;
+    text-decoration: none;
+    font-size: 1.4em;
+    border: 1px solid white;
+    border-radius: 20px;
+    padding: 2px;
+    margin: 2px;
+    width: initial;
+
+  }
+}

webpack.config.js

@@ -0,0 +1,33 @@
+var HtmlWebpackPlugin = require('html-webpack-plugin');
+var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
+  template: __dirname + '/src/index.html',
+  filename: 'index.html',
+  inject: 'body'
+})
+
+module.exports = {
+  entry: [
+    './src/index.js'
+  ],
+  output: {
+    path: __dirname + '/dist',
+    filename: "index_bundle.js"
+  },
+  module: {
+    loaders: [
+      {test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"},
+      {test: /\.json$/, exclude: /node_modules/, loader: 'json-loader' },
+      {test: /\.(png|jpg)$/, exclude: /node_modules/, loader: 'url-loader'},
+      {test: /\.scss$/,
+            use: [{
+                loader: "style-loader" // creates style nodes from JS strings
+            }, {
+                loader: "css-loader" // translates CSS into CommonJS
+            }, {
+                loader: "sass-loader" // compiles Sass to CSS
+            }]
+        }
+    ]
+  },
+  plugins: [HtmlWebpackPluginConfig]
+}