initial react config and bg

Rohanhacker · Mar 4, 2017 · 8d2c1d7 · 8d2c1d7
1 parent a423f16
commit 8d2c1d7
Show file tree

Hide file tree

Showing 16 changed files with 5,829 additions and 0 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,10 @@
+{
+  "presets": [
+    ["es2015", {"modules": false}],
+    "stage-2",
+    "react"
+],
+  "plugins": [
+    "react-hot-loader/babel"
+  ]
+}
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,21 @@
+{
+  "ecmaFeatures": {
+    "jsx": true,
+    "modules": true
+  },
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "parser": "babel-eslint",
+  "rules": {
+    "quotes": [2, "single"],
+    "strict": [2, "never"],
+    "react/jsx-uses-react": 2,
+    "react/jsx-uses-vars": 2,
+    "react/react-in-jsx-scope": 2
+  },
+  "plugins": [
+    "react"
+  ]
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+npm-debug.log
diff --git a/dist/static/bundle.js b/dist/static/bundle.js
diff --git a/dist/static/bundle.js.map b/dist/static/bundle.js.map
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+
+<!doctype html>
+<html>
+  <head>
+    <title>Rohan Malhotra</title>
+    <link rel="stylesheet" href="./static/css/index.css">
+  </head>
+  <body>
+    <div id='root'>
+    </div>
+    <script src="/static/bundle.js"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "rohanm.me",
+  "version": "1.0.0",
+  "description": "my personal website",
+  "main": "./js/index.js",
+  "repository": "[email protected]:Rohanhacker/rohanm.me.git",
+  "author": "rohanhacker <[email protected]>",
+  "license": "MIT",
+  "scripts": {
+    "start": "webpack-dev-server",
+    "lint": "eslint src",
+    "build": "NODE_ENV=production webpack -p --config webpack.config.production.js"
+  },
+  "dependencies": {
+    "babel-eslint": "^7.1.1",
+    "eslint": "^3.17.0",
+    "eslint-plugin-react": "^6.10.0",
+    "normalize-css": "^2.3.1",
+    "react": "^15.4.2",
+    "react-dom": "^15.4.2",
+    "react-router-dom": "next"
+  },
+  "devDependencies": {
+    "babel-core": "6.13.2",
+    "babel-loader": "6.2.4",
+    "babel-preset-es2015": "6.13.2",
+    "babel-preset-react": "6.11.1",
+    "babel-preset-stage-2": "6.13.0",
+    "css-loader": "0.23.1",
+    "image-webpack-loader": "^3.2.0",
+    "postcss-loader": "0.9.1",
+    "react-hot-loader": "3.0.0-beta.6",
+    "style-loader": "0.13.1",
+    "webpack": "2.1.0-beta.25",
+    "webpack-dev-server": "2.1.0-beta.0"
+  }
+}
diff --git a/src/containers/App.css b/src/containers/App.css
@@ -0,0 +1,24 @@
+.background {
+    background: linear-gradient(40deg,#134E5E,transparent 100%),
+                linear-gradient(230deg, #71B280, transparent),
+                #ffa949 url('../../static/img/bg2.jpg') center;
+    background-size: cover;
+    height: 96.9vh;
+    width: 98vw;
+    margin: 10px;
+    overflow: hidden;
+}
+
+.container {
+    overflow: auto;
+    padding: 20px;
+    height: 100%;
+    position: fixed;
+    top: 10px;
+    left: 20px;
+    right: -15px;
+}
+
+.content {
+    min-height: 2000px;
+}
diff --git a/src/containers/App.js b/src/containers/App.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import styles from './App.css';
+
+const App = () => (
+  <div>
+    <div className={styles.background}>   </div>
+    <div className={styles.container} >
+      <div className={styles.content}>
+        s
+      </div>
+    </div>
+    </div>
+);
+
+export default App;
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import { AppContainer } from 'react-hot-loader';
+
+import App from './containers/App';
+
+const render = (Component) => {
+  ReactDOM.render(
+    <AppContainer>
+      <Component/>
+    </AppContainer>,
+    document.getElementById('root')
+  );
+};
+
+render(App);
+
+// Hot Module Replacement API
+if (module.hot) {
+  module.hot.accept('./containers/App', () => {
+    render(App)
+  });
+}
diff --git a/static/css/index.css b/static/css/index.css
@@ -0,0 +1,3 @@
+body {
+    margin: 0;
+}
diff --git a/static/img/bg1.jpg b/static/img/bg1.jpg
diff --git a/static/img/bg2.jpg b/static/img/bg2.jpg
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,58 @@
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = {
+  entry: [
+    'react-hot-loader/patch',
+    'webpack-dev-server/client?http://localhost:3000',
+    'webpack/hot/only-dev-server',
+    './src/index.js',
+  ],
+
+  output: {
+    filename: 'bundle.js',
+    path: path.resolve(__dirname, 'dist'),
+    publicPath: '/static/'
+  },
+
+  devtool: 'inline-source-map',
+
+  module: {
+    rules: [
+      {
+        test: /\.jsx?$/,
+        use: [
+          'babel-loader',
+        ],
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.css$/,
+        use: [
+            'style-loader',
+            'css-loader?modules',
+            'postcss-loader',
+        ],
+      },
+      {
+        test: /\.(jpe?g|png|gif|svg)$/i,
+        loaders: [
+            'file?hash=sha512&digest=hex&name=[hash].[ext]',
+            'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
+        ] 
+      },
+    ],
+  },
+
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NamedModulesPlugin()
+  ],
+
+  devServer: {
+    host: 'localhost',
+    port: 3000,
+    historyApiFallback: true,
+    hot: true,
+  },
+};
diff --git a/webpack.config.production.js b/webpack.config.production.js
@@ -0,0 +1,38 @@
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = {
+  entry: './src/index.js',
+  output: {
+    filename: 'static/bundle.js',
+    path: path.resolve(__dirname, 'dist'),
+    publicPath: '/'
+  },
+  devtool: 'source-map',
+  module: {
+    rules: [
+      {
+        test: /\.jsx?$/,
+        use: [
+          'babel-loader'
+        ],
+        exclude: /node_modules/
+      },
+      {
+        test: /\.css$/,
+        use: [
+            'style-loader',
+            'css-loader?modules',
+            'postcss-loader',
+        ],
+      },
+    ]
+  },
+
+  plugins: [
+    new webpack.optimize.UglifyJsPlugin({
+      sourceMap: true,
+      comments: false
+    })
+  ]
+};