minor changes in webpack and add pro page

Rohanhacker · Mar 10, 2017 · db0f108 · db0f108
1 parent b1f719f
commit db0f108
Show file tree

Hide file tree

Showing 31 changed files with 480 additions and 39 deletions.
diff --git a/dist/256f11be8d2426e0b0289fbaebff6c43.jpg b/dist/256f11be8d2426e0b0289fbaebff6c43.jpg
diff --git a/dist/2ba568caba66712feabeed287b625110.jpg b/dist/2ba568caba66712feabeed287b625110.jpg
diff --git a/dist/9f70df6051e98ca0e582b000de4babf6.jpg b/dist/9f70df6051e98ca0e582b000de4babf6.jpg
diff --git a/dist/bee4727ea7d8218697b3e62fd1d4739d.jpg b/dist/bee4727ea7d8218697b3e62fd1d4739d.jpg
diff --git a/dist/index.html b/dist/index.html
@@ -0,0 +1,15 @@
+
+<!doctype html>
+<html>
+  <head>
+    <title>Rohan Malhotra</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+    <link rel="stylesheet" href="./static/css/bootstrap.min.css">
+    <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/dist/static/bundle.js b/dist/static/bundle.js
diff --git a/dist/static/bundle.js.gz b/dist/static/bundle.js.gz
diff --git a/dist/static/bundle.js.map b/dist/static/bundle.js.map
diff --git a/dist/static/css/bootstrap.min.css b/dist/static/css/bootstrap.min.css
diff --git a/dist/static/css/index.css b/dist/static/css/index.css
@@ -0,0 +1,16 @@
+.form-horizontal {
+    margin: 20% 5% 5%;
+    color: white;
+}
+
+.form-horizontal textarea {
+    height: 200px;
+}
+
+.btn-primary {
+    background-color: darkturquoise;
+}
+
+.panel {
+    overflow: hidden;
+}
diff --git a/dist/static/img/bg.jpg b/dist/static/img/bg.jpg
diff --git a/dist/static/img/bgabout.jpg b/dist/static/img/bgabout.jpg
diff --git a/dist/static/img/bgcontact.jpg b/dist/static/img/bgcontact.jpg
diff --git a/dist/static/img/bgprojects.jpg b/dist/static/img/bgprojects.jpg
diff --git a/dist/static/img/celebal.png b/dist/static/img/celebal.png
diff --git a/dist/static/img/youstart.png b/dist/static/img/youstart.png
diff --git a/package.json b/package.json
@@ -9,30 +9,35 @@
   "scripts": {
     "start": "webpack-dev-server",
     "lint": "eslint src",
-    "build": "NODE_ENV=production webpack -p --config webpack.config.production.js"
+    "prebuild": "rimraf dist",
+    "build": "NODE_ENV=production webpack -p --config webpack.config.production.js",
+    "postbuild": "copyfiles index.html dist"
   },
   "dependencies": {
-    "babel-eslint": "^7.1.1",
     "classnames": "^2.2.5",
-    "eslint": "^3.17.0",
-    "eslint-plugin-react": "^6.10.0",
+    "copyfiles": "^1.2.0",
     "gsap": "^1.19.1",
     "normalize-css": "^2.3.1",
     "react": "^15.4.2",
     "react-bootstrap": "^0.30.8",
     "react-dom": "^15.4.2",
     "react-router-dom": "next",
+    "rimraf": "^2.6.1",
     "superb": "^1.3.0"
   },
   "devDependencies": {
     "autoprefixer": "^6.7.6",
     "babel-core": "6.13.2",
+    "babel-eslint": "^7.1.1",
     "babel-loader": "6.2.4",
     "babel-plugin-transform-function-bind": "^6.22.0",
     "babel-preset-es2015": "6.13.2",
     "babel-preset-react": "6.11.1",
     "babel-preset-stage-2": "6.13.0",
+    "compression-webpack-plugin": "^0.3.2",
     "css-loader": "0.23.1",
+    "eslint": "^3.17.1",
+    "eslint-plugin-react": "^6.10.0",
     "image-webpack-loader": "^3.2.0",
     "json-loader": "^0.5.4",
     "postcss-loader": "0.9.1",

diff --git a/src/containers/About/index.js b/src/containers/About/index.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import Navigation from '../Navigation/'
+import Footer from '../../utils/footer'
 import className from 'classnames'
 import styles from './about.css'
 
@@ -70,6 +71,7 @@ class About extends Component {
                 HTML, CSS, JAVASCRIPT (and friends), C/C++, Java, Python, MongoDB, SQL
             </span>
           </div>
+          <Footer />
         </div>
       </div>
     )

diff --git a/src/containers/Contact/index.js b/src/containers/Contact/index.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import Navigation from '../Navigation/'
 import className from 'classnames'
 import styles from './contact.css'
+import Footer from '../../utils/footer'
 import { Form, FormControl, FormGroup, Col, ControlLabel, Checkbox, Button } from 'react-bootstrap'
 
 class Contact extends Component {
@@ -82,6 +83,7 @@ class Contact extends Component {
             </span>
             { FormInstance }
           </div>
+          <Footer />
         </div>
       </div>
     )

diff --git a/src/containers/Landing/index.js b/src/containers/Landing/index.js
@@ -4,6 +4,7 @@ import Subhead from '../../utils/subtitle'
 import superb from 'superb'
 import transformText from '../../utils/textEffect'
 import Navigation from '../Navigation/'
+import Footer from '../../utils/footer'
 import className from 'classnames';
 
 class App extends Component {
@@ -108,6 +109,7 @@ class App extends Component {
               {` ${this.day}`}
             </span>
           </div>
+          <Footer />
         </div>
       </div>
     )

diff --git a/src/containers/Navigation/index.js b/src/containers/Navigation/index.js
@@ -41,7 +41,7 @@ class Navigation extends Component {
                 <ul className={className(styles.mainNav, this.state.on ? styles.shownav : undefined)} ref='mainNav'>
                 <li><Link to='/' onMouseOver={::this.handleover} >Home</Link></li>
                 <li><Link to='/about' onMouseOver={::this.handleover} > About </Link></li>
-                <li><Link to='/' onMouseOver={::this.handleover} > Projects </Link></li>
+                <li><Link to='/projects' onMouseOver={::this.handleover} > Projects </Link></li>
                 <li><Link to='/contact' onMouseOver={::this.handleover} > Contact </Link></li>
                 </ul>
             </div>

diff --git a/src/containers/Projects/index.js b/src/containers/Projects/index.js
@@ -0,0 +1,114 @@
+import React, { Component } from 'react'
+import Navigation from '../Navigation/'
+import Footer from '../../utils/footer'
+import { Accordion, Panel } from 'react-bootstrap'
+import { rollText } from '../../utils/textEffect'
+import className from 'classnames'
+import styles from './projects.css'
+
+class Projects extends Component {
+  constructor(props) {
+    super(props)
+    this.handleScroll = this.handleScroll.bind(this)
+  }
+  componentDidMount() {
+    this.refs.content.addEventListener('scroll',this.handleScroll)
+  }
+  componentWillUnmount() {
+    this.refs.content.removeEventListener('scroll', this.handleScroll)
+  }
+  handleScroll(event) {
+    let height = this.refs.heading.getBoundingClientRect().top
+    if(height < 50) {
+      this.refs.background.style.filter = 'blur(0px) brightness(30%)'
+    } else {
+      this.refs.background.style.filter = 'blur(0px)'
+    }
+  }
+  handleClick(e) {
+    if(!this.state.on) {
+      this.setState({
+        on: true
+      })
+    } else {
+      this.setState({
+        on: false
+      })
+    }
+  }
+  handleOver(e) {
+      rollText(e.target)
+  }
+  render() {
+    return (
+      <div>
+        <div className={styles.background} ref='background'></div>
+        <div className={styles.container} ref='content'>
+          <Navigation />
+          <div className={styles.content}>
+            <span className={styles.heading} ref='heading'>
+              Projects
+            </span>
+          </div>
+          <div className={styles.about}>
+              <div>
+                  <span className={styles.title}><h3>CrossPlatfrom Quiz Desktop App</h3></span>
+                  <div className={styles.desc}>A cross platform quiz app build using electron with voice recognition built with electron with google sheets as database more info & screenshots @ <a href="https://github.com/Rohanhacker/Desktop-Quiz-App">
+                    Github
+                      </a> </div>
+              </div>
+              <div>
+                  <span className={styles.title}><h3>Community Library Management System</h3></span>
+                  <div className={styles.desc}>A library management system with react frontend and grails backend more info & screenshots @ <a href="https://github.com/Rohanhacker/librarysystem">
+                    Frontend
+                      </a> <br/>
+                      @ <a href="https://github.com/Rohanhacker/librarysystem">
+                    Backend
+                      </a>
+                       </div>
+              </div>
+              <div>
+                  <span className={styles.title}><h3>Weather Progressive Web App</h3></span>
+                  <div className={styles.desc}>A progressive web app for weather info more info & screenshots @ <a href="https://github.com/Rohanhacker/weatherPwa">
+                    Github
+                      </a> </div>
+              </div>
+              <div>
+                  <span className={styles.title}><h3>Pitch Perfect Ios App</h3></span>
+                  <div className={styles.desc}>An Ios App for change voice using swift info more info & screenshots @ <a href="https://github.com/Rohanhacker/pitchperfect">
+                    Github
+                      </a> </div>
+              </div>
+              <div>
+                  <span className={styles.title}><h3>Remote Keylogger</h3></span>
+                  <div className={styles.desc}>A remote keylogger which record keylogs and screenshot and send them remotely more info & screenshots @ <a href="https://github.com/Rohanhacker/rohankey">
+                    Github
+                      </a> </div>
+              </div>
+                            <div>
+                  <span className={styles.title}><h3>Canvas Paint</h3></span>
+                  <div className={styles.desc}>A paint app in html 5 canvas info more info & screenshots @ <a href="https://github.com/Rohanhacker/paint-App">
+                    Github
+                      </a> </div>
+              </div>
+              <div>
+                  <span className={styles.title}><h3>Single Page html theme</h3></span>
+                  <div className={styles.desc}>A single page parallax theme/template info more info & screenshots @ <a href="https://github.com/Rohanhacker/parallax-SinglePage">
+                    Github
+                      </a> </div>
+              </div>
+              <div>
+                  <span className={styles.title}><h3>Salesforce to DocumentDb </h3></span>
+                  <div className={styles.desc}>A utility to transfer data from salesforce to document Db  @ <a href="https://github.com/Rohanhacker/Salesforce-To-DocumentDB">
+                    Github
+                      </a> </div>
+              </div>
+          </div>
+          <Footer />
+        </div>
+      </div>
+    )
+  }
+}
+
+export default Projects;
diff --git a/src/containers/Projects/projects.css b/src/containers/Projects/projects.css
@@ -0,0 +1,111 @@
+@import url('https://fonts.googleapis.com/css?family=Signika');
+
+
+* {
+    box-sizing: border-box;
+}
+
+.background {
+    background: linear-gradient(40deg,#1F1C2C,transparent 100%),
+                linear-gradient(230deg, #928DAB, transparent),
+                #ffa949 url('../../../static/img/bgprojects.jpg') center;
+    background-size: cover; 
+    height: calc(100vh - 10px);
+    width: calc(100vw - 10px);
+    border: 10px solid white;
+    transition: filter 1s ease;
+}
+
+.container {
+    overflow-y: auto;
+    padding: 20px;
+    height: calc(100% - 30px);
+    width: calc(100% - 20px);
+    position: fixed;
+    top: 10px;
+    left: 20px;
+}
+
+
+.content {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+
+.heading {
+    overflow: hidden;
+    color: mediumturquoise;
+    font-family: 'Signika', sans-serif;
+    font-weight: bold;
+    font-size: 85px;
+    margin: auto;
+    animation-name: heading;
+    animation-duration: 0.4s;
+    animation-timing-function: ease;
+    animation-fill-mode: forwards;
+}
+
+.about {
+    margin-top: 25%;
+    overflow: hidden;
+    margin-left: 50px; 
+    color: white;
+    font-family: 'Signika', sans-serif;
+    font-weight: 300;
+    width: 80%;
+    font-size: 20px;
+}
+
+.title {
+    color: darkturquoise;
+}
+
+.title h3 {
+    margin: 0;
+}
+.desc {
+    margin: 10px;
+    font-size: 18px;
+}
+
+
+@keyframes heading {
+    from {
+        margin-top: 8%;
+        opacity: 0;
+    }
+    to {
+        margin-top: 14%;
+        opacity: 1;
+    }
+}
+
+
+.container::-webkit-scrollbar-track
+{
+	box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+	background-color: #F5F5F5;
+	border-radius: 10px;
+}
+
+.container::-webkit-scrollbar
+{
+	width: 10px;
+	background-color: #F5F5F5;
+}
+
+.container::-webkit-scrollbar-thumb
+{
+	border-radius: 10px;
+	background-image: -webkit-gradient(linear,
+									   left bottom,
+									   left top,
+									   color-stop(0.44, #908CA7),
+									   color-stop(0.72, #565462),
+									   color-stop(0.86, #747281));
+}
+
+
+
diff --git a/src/containers/index.js b/src/containers/index.js
@@ -6,6 +6,7 @@ import {
 import Landing from '../containers/Landing/'
 import About from '../containers/About/'
 import Contact from '../containers/Contact/'
+import Projects from '../containers/Projects/'
 
 class Main extends Component {
     render() {
@@ -14,7 +15,7 @@ class Main extends Component {
                 <div>
                     <Route exact path='/' component={Landing} ></Route>
                     <Route path='/about' component={About} ></Route>
-                    <Route path='/projects' component={Landing} ></Route>
+                    <Route path='/projects' component={Projects} ></Route>
                     <Route path='/contact' component={Contact} ></Route>
                 </div>
             </Router>

diff --git a/src/utils/footer.css b/src/utils/footer.css
@@ -0,0 +1,23 @@
+.nav {
+    display: flex;
+    justify-content: flex-end;
+    margin: 30px 10px 10px;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-size: 24px;
+    font-weight: 400;
+}
+
+
+.nav li {
+    list-style: none;
+    text-decoration: none;
+    margin: 10px;
+}
+
+.nav li a {
+    color: white;
+}
+
+.nav li a:hover {
+    color: darkturquoise;
+}