complete app theme changed

shumai9 · Mar 22, 2019 · 6a5325d · 6a5325d
1 parent d76de78
commit 6a5325d
Show file tree

Hide file tree

Showing 15 changed files with 154 additions and 136 deletions.
diff --git a/dump.rdb b/dump.rdb
@@ -0,0 +1 @@
+REDIS0006�ܳC�Z��V
diff --git a/public/assets/nef2.jpg b/public/assets/nef2.jpg
diff --git a/public/assets/shumai.png b/public/assets/shumai.png
diff --git a/public/assets/shumx.jpg b/public/assets/shumx.jpg
diff --git a/public/index.html b/public/index.html
@@ -15,6 +15,14 @@
   rel="stylesheet">
   <!-- Global site tag (gtag.js) - Google Analytics -->
   <script async src="https://www.googletagmanager.com/gtag/js?id=UA-134513684-1"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag() {
+      dataLayer.push(arguments);
+    }
+    gtag('js', new Date());
+    gtag('config', 'UA-134513684-1');
+  </script>
   <title>Shumai</title>
 </head>
 <body>

diff --git a/src/App.jsx b/src/App.jsx
@@ -8,21 +8,20 @@ import Contact from './components/contact.jsx';
 import Nav from './components/nav.jsx';
 import Footer from './components/footer.jsx';
 import Option from './components/option.jsx';
+// import Canvas from './components/canvas.jsx';
 import json from './data/data.json';
 import './style/App.css';
 import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
 import anime from 'animejs/lib/anime.es.js';
 
-const googleAna_TrackingId = `${process.env.GOOGLE_ANALITICS_ID}`;
-
 class App extends Component {
   constructor(props) {
     super(props);
     this.state = {
       currentWidth: window.innerWidth,
       menuIsOpen: false
     };
-    this.handleDevice = () => {
+    this.handleDeviceWidth = () => {
       this.setState({ currentWidth: window.innerWidth });
     };
     this.toggleOptionsMenu = () => {
@@ -63,28 +62,25 @@ class App extends Component {
     }
   };
   componentDidMount() {
-    window.addEventListener('resize', this.handleDevice);
-    window.dataLayer = window.dataLayer || [];
-    function gtag() {
-      window.dataLayer.push(arguments);
-    }
-    gtag('js', new Date());
-    gtag('config', googleAna_TrackingId);
+    window.addEventListener('resize', this.handleDeviceWidth);
   }
   componentDidCatch(error) {
     console.log('logged error', error.message);
   }
-  //animation experment
 
   render() {
     return (
       <MuiThemeProvider>
         <Router>
           <div className="App">
-            <header className="App-header">
+            <header id="landing" className="App-header">
+              {/* <Canvas/> */}
               <h1 className="App-title">
-                Hey, I'm <br /> Shumai
+                Hey, I'm Shumai, <br />
+                Full-Stack Software Developer.
               </h1>
+              <img className="shm" src="/assets/shumai.png" alt="" />
+              {/* <button type="submit">   CTA   </button> */}
               {this.state.currentWidth >= 960 ? (
                 <Nav />
               ) : (
@@ -130,10 +126,9 @@ class App extends Component {
                 alt=""
                 onClick={this.badgeHandler}
               />
-              <Route exact path="/" render={null} />
               <Route
                 exact
-                path="/home"
+                path="/"
                 render={props => (
                   <Home {...props} data={json.home} onScroll={this.setTitle} />
                 )}

diff --git a/src/components/canvas.jsx b/src/components/canvas.jsx
@@ -0,0 +1,88 @@
+// import React, { Component } from 'react';
+
+// class Canvas extends Component {
+//   style = {
+//     width: 100+ '%',
+//     height: 100+'vh'
+//   }
+//   componentDidMount() {
+//     const canvas = this.refs.canvas;
+//     const ctx = canvas.getContext('2d');
+//     var particles = {},
+//         particleIndex = 0,
+//         particlesNum = 5;
+
+//     function Particle (){
+//       this.x = canvas.width / 2;
+//       this.y = canvas.height / 2;
+//       this.radius = 4; // Arc radius
+//       this.startAngle = 1; // Starting point on circle
+//       this.endAngle = Math.PI + (Math.PI * particleIndex) / 2; // End point on circle
+//       this.anticlockwise = true; // clockwise or anticlockwise
+
+//       this.vx = Math.random()*10 -3;
+//       this.vy = Math.random()*10 +5;
+//       particleIndex++;
+//       particles[particleIndex] = this;
+//       this.id = particleIndex;
+//       this.life = 0;
+//       this.maxLife = Math.random()*100+ 150;
+//       this.gravity = 0.3;
+//       this.color = "hsla(" + parseInt(Math.random()*360, 10) + ",100%, 50%, 0.9)";
+//     }
+//     Particle.prototype.draw = function(){
+//       this.x += this.vx;
+//       this.y += this.vy;
+//       this.vy += this.gravity;
+//       this.life++;
+
+//       if (Math.random() < 0.1){
+//         this.vy += Math.random()*10 -5;
+//         this.vx += Math.random()*10 -5;
+//       }
+
+//       if(this.life >= this.maxLife){
+//         delete particles[this.id]
+//       };
+
+//       if (this.y > 500 ){
+//         this.vy *= -0.3;
+//         this.vx*= 0.3;
+//         this.y = 200;
+//         }
+
+//     //   ctx.fillRect(this.x, this.y, 2, 2);
+//     ctx.fillStyle = this.color;
+//     ctx.strokeStyle = this.color;
+//     ctx.beginPath();
+//     ctx.arc(this.x, this.y, this.radius,this.startAngle, this.endAngle,this.anticlockwise);
+//     ctx.fill();
+//     ctx.beginPath();
+
+//     }
+//     setInterval(function(){
+//       //to create an overlap of colors effect
+//       ctx.globalCompositeOperation = "source-over";
+//       ctx.fillStyle = "rgba(5,5,5,0.7)";
+//       ctx.fillRect(0,0, canvas.width, canvas.height);
+
+//       for( var i=0; i < particlesNum; i++){
+//         new Particle();
+//       }
+
+//       ctx.globalCompositeOperation = "lighter";
+//       for( var k in particles) {
+//         particles[k].draw();
+//       }
+//     }, 60);
+//   }
+
+//   render(){
+//     return(
+//       <section className="canvas">
+//         <canvas ref="canvas" style={this.style} />
+//       </section>
+//     );
+//   }
+// }
+// export default Canvas;
diff --git a/src/components/nav.jsx b/src/components/nav.jsx
@@ -51,10 +51,10 @@ class Nav extends React.Component {
         }`}
       >
         <div className="list" onClick={this.srollToView}>
-          <NavLink exact to="/">
+          <NavLink exact to="#landing">
             <img src="/assets/logo.svg" className="App-logo" alt="logo" />
           </NavLink>
-          <NavLink exact to={'/home'}>
+          <NavLink exact to={'/'}>
             HOME
           </NavLink>
           <NavLink exact to={'/about'}>

diff --git a/src/index.css b/src/index.css
@@ -5,9 +5,6 @@
   line-height: 150%;
 }
 
-div.LI-profile-badge {
-  /*z-index: -1;*/
-}
 div.LI-profile-badge .LI-badge-container.vertical.light {
   position: sticky;
   -webkit-box-shadow: var(--app-shadow);

diff --git a/src/oauth-var.js b/src/oauth-var.js
diff --git a/src/oauth.js b/src/oauth.js