diff --git a/.babelrc b/.babelrc
new file mode 100644
index 0000000..02402a7
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,6 @@
+{
+ "presets": [
+ "es2015",
+ "react"
+ ]
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..77ac4db
--- /dev/null
+++ b/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"
+ }
+}
diff --git a/src/components/About.js b/src/components/About.js
new file mode 100644
index 0000000..1245181
--- /dev/null
+++ b/src/components/About.js
@@ -0,0 +1,15 @@
+import React, {Component} from 'react';
+
+export default class About extends Component{
+ constructor() {
+ super();
+ }
+
+ render() {
+ return (
+
+
About
+
+ );
+ }
+}
diff --git a/src/components/Blog.js b/src/components/Blog.js
new file mode 100644
index 0000000..60d6dae
--- /dev/null
+++ b/src/components/Blog.js
@@ -0,0 +1,15 @@
+import React, {Component} from 'react';
+
+export default class Blog extends Component {
+ constructor() {
+ super();
+ }
+
+ render () {
+ return (
+
+
Hello
+
+ )
+ }
+}
diff --git a/src/components/Home.js b/src/components/Home.js
new file mode 100644
index 0000000..0a64d92
--- /dev/null
+++ b/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(
+
+
+
+ );
+ key++;
+ };
+ socialLinks.push(
+
+ )
+
+ return (
+
+
+
+
{ config.name }
+
+
+ {socialLinks}
+
+
+
+ - About
+ - Blog
+ - Portfolio
+ - Resume
+
+
+
+
+
Portfolio
+
+ );
+ }
+}
diff --git a/src/components/Resume.js b/src/components/Resume.js
new file mode 100644
index 0000000..8ff9951
--- /dev/null
+++ b/src/components/Resume.js
@@ -0,0 +1,15 @@
+import React, {Component} from 'react';
+
+export default class Resume extends Component{
+ constructor() {
+ super();
+ }
+
+ render() {
+ return (
+
+
Resume
+
+ );
+ }
+}
diff --git a/src/components/index.js b/src/components/index.js
new file mode 100644
index 0000000..945fd8e
--- /dev/null
+++ b/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';
diff --git a/src/config/config.json b/src/config/config.json
new file mode 100644
index 0000000..79a5c0d
--- /dev/null
+++ b/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"
+ }
+}
diff --git a/src/index.html b/src/index.html
new file mode 100644
index 0000000..92a386e
--- /dev/null
+++ b/src/index.html
@@ -0,0 +1,16 @@
+
+
+
+
+
+ Portfolio
+
+
+
+
+
+
+
+
+
+
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 0000000..b73796b
--- /dev/null
+++ b/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(
+
+
+
+
+
+
+
+
+ ,
+ document.getElementById('app')
+);
diff --git a/src/static/images/background-cover.jpg b/src/static/images/background-cover.jpg
new file mode 100644
index 0000000..c38ec87
Binary files /dev/null and b/src/static/images/background-cover.jpg differ
diff --git a/src/static/index.html b/src/static/index.html
new file mode 100644
index 0000000..fdd986d
--- /dev/null
+++ b/src/static/index.html
@@ -0,0 +1,18 @@
+
+
+
+
+ Portfolio
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/static/stylesheets/main.scss b/src/static/stylesheets/main.scss
new file mode 100644
index 0000000..62fd14f
--- /dev/null
+++ b/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;
+
+ }
+}
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 0000000..ad18839
--- /dev/null
+++ b/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]
+}