add static gallery

frontend/component/About/About.js

@@ -41,7 +41,7 @@ class About extends Component {
                   </Tooltip>
                 </Button>
                 <Button aria-label="github">
-                  <Tooltip title="github" placement="right">
+                  <Tooltip title="Github" placement="right">
                     <a href="https://github.com/naseeihity/">
                       <GithubCircle />
                     </a>

frontend/component/Gallery/Gallery.js

@@ -0,0 +1,43 @@
+import React, { Component } from 'react';
+import Paper from 'material-ui/Paper';
+import GridList from '@material-ui/core/GridList';
+import GridListTile from '@material-ui/core/GridListTile';
+import Ribbon from '../Ribbon';
+import tileData from './mock';
+import LazyImg from '../utils/lazyImg/LazyImg';
+
+import styles from '../Wapper/container.css';
+
+class Gallery extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {};
+  }
+
+  render() {
+    return (
+      <div>
+        <Ribbon hasSub={false} />
+        <div className={styles.container_main}>
+          <div className={styles.container_box}>
+            <Paper className={styles.container_context} elevation={5}>
+              <div className={styles.img_box}>
+                {tileData.map(tile => (
+                  <LazyImg
+                    src={tile.src}
+                    alt={tile.alt}
+                    img={tile}
+                    key={tile.src}
+                  />
+                ))}
+              </div>
+            </Paper>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Gallery;

frontend/component/Gallery/mock.js

@@ -0,0 +1,59 @@
+const IMG_DETAIL = [
+  {
+    src: 'http://7xr09v.com1.z0.glb.clouddn.com/shadow.jpg',
+    alt: 'shadow',
+    width: 1920,
+    height: 1280
+  },
+  {
+    src: 'http://7xr09v.com1.z0.glb.clouddn.com/mountain.jpg',
+    alt: 'mountain',
+    width: 1920,
+    height: 1280
+  },
+  {
+    src: 'http://7xr09v.com1.z0.glb.clouddn.com/road-street-forest-evening.jpg',
+    alt: 'road',
+    width: 1920,
+    height: 2559
+  },
+  {
+    src:
+      'http://7xr09v.com1.z0.glb.clouddn.com/QQ%E5%9B%BE%E7%89%8720160716150445.jpg',
+    alt: 'screen',
+    width: 3870,
+    height: 3096
+  },
+  {
+    src: 'http://7xr09v.com1.z0.glb.clouddn.com/carol.jpg',
+    alt: 'carol',
+    width: 1280,
+    height: 688
+  },
+  {
+    src: 'http://7xr09v.com1.z0.glb.clouddn.com/hallstatt.jpg',
+    alt: 'hall',
+    width: 3264,
+    height: 4896
+  },
+  {
+    src: 'http://7xr09v.com1.z0.glb.clouddn.com/girl.jpeg',
+    alt: 'girl',
+    width: 1920,
+    height: 1280
+  },
+  {
+    src: 'http://7xr09v.com1.z0.glb.clouddn.com/p2366714129.jpg',
+    alt: 'kaili',
+    width: 1686,
+    height: 1054
+  },
+  {
+    src: 'http://7xr09v.com1.z0.glb.clouddn.com/lion-wild-africa-african.jpg',
+    alt: 'lion',
+    width: 1920,
+    height: 1280
+  }
+];
+
+export default IMG_DETAIL;

frontend/component/Wapper/Wapper.js

@@ -4,6 +4,7 @@ import Container from './Container';
 import Nav from '../Header/Nav';
 import FootInfo from '../Footer/Footer';
 import About from '../About/About';
+import Gallery from '../Gallery/Gallery';
 import BackToTop from '../utils/backToTop/BackToTop';
 import styles from './container.css';
 
@@ -32,6 +33,7 @@ class Wapper extends Component {
         <div className={leftMargin}>
           <Switch>
             <Route path="/about" component={About} />
+            <Route path="/gallery" component={Gallery} />
             <Route component={Container} />
           </Switch>
         </div>

frontend/component/Wapper/container.css

@@ -88,3 +88,14 @@
   border: none;
   overflow: auto;
 }
+
+.img_box {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.img_box::after {
+  content: '';
+  flex-grow: 1e4;
+  min-width: 20%;
+}

frontend/component/utils/lazyImg/LazyImg.js

@@ -0,0 +1,108 @@
+import React, { Component } from 'react';
+import styles from './lazyImg.css';
+
+const IMG_S = '?imageView2/2/w/30/h/20/interlace/0/q/100';
+
+class LazyImg extends Component {
+  constructor(props) {
+    super(props);
+
+    this.bigImg = React.createRef();
+    this.imgContainer = React.createRef();
+
+    this.state = {
+      loadSmall: false,
+      loadLarge: false,
+      bigSrc: '',
+      divStyle: {},
+      iStyle: {},
+      lineHeight: 300 || props.lineHeight
+    };
+    this.loadSmallImg = this.loadSmallImg.bind(this);
+    this.loadBigImg = this.loadBigImg.bind(this);
+    this.lazyObserver = this.lazyObserver.bind(this);
+  }
+
+  componentDidMount() {
+    const { lineHeight } = this.state;
+    const { img } = this.props;
+    const { width, height } = img;
+
+    this.setState({
+      divStyle: {
+        width: `${width * lineHeight / height}px`,
+        flexGrow: width * lineHeight / height
+      },
+      iStyle: {
+        paddingBottom: `${height / width * 100}%`
+      }
+    });
+
+    this.lazyObserver();
+  }
+
+  loadSmallImg() {
+    this.setState({ loadSmall: true });
+  }
+
+  lazyObserver() {
+    const { src } = this.props;
+    const placeholder = this.imgContainer.current;
+    const bigImg = this.bigImg.current;
+
+    const observer = new IntersectionObserver(
+      () => {
+        this.setState({ bigSrc: src });
+      },
+      {
+        root: null,
+        rootMargin: '200px'
+      }
+    );
+    observer.observe(placeholder);
+
+    bigImg.addEventListener('load', () => {
+      this.loadBigImg(observer);
+    });
+  }
+
+  loadBigImg(observer) {
+    const placeholder = this.imgContainer.current;
+    this.setState({ loadBigImg: true });
+    observer.unobserve(placeholder);
+  }
+
+  componentWillUnmount() {
+    const bigImg = this.bigImg.current;
+    bigImg.removeEventListener('load', this.loadBigImg);
+  }
+
+  render() {
+    const { src } = this.props;
+    const { alt } = this.props || 'Coaco';
+    const { bigSrc } = this.state;
+    const smallClass = this.state.loadSmall ? styles.loaded : '';
+    const largeClass = this.state.loadBigImg
+      ? `${styles.img_large} ${styles.loaded}`
+      : '';
+    return (
+      <picture
+        ref={this.imgContainer}
+        className={styles.placeholder}
+        style={this.state.divStyle}
+      >
+        <i style={this.state.iStyle} />
+        <img
+          src={src + IMG_S}
+          alt={alt}
+          onLoad={this.loadSmallImg}
+          className={`${styles.img_small} ${smallClass}`}
+        />
+        <img src={bigSrc} alt={alt} ref={this.bigImg} className={largeClass} />
+        <span>{alt}</span>
+      </picture>
+    );
+  }
+}
+
+export default LazyImg;

frontend/component/utils/lazyImg/lazyImg.css

@@ -0,0 +1,73 @@
+.placeholder {
+  margin: 2px;
+  overflow: hidden;
+  background-color: #ddd;
+  position: relative;
+  cursor: pointer;
+}
+
+.placeholder img {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  vertical-align: bottom;
+  opacity: 0;
+}
+
+.placeholder img.loaded {
+  opacity: 1;
+}
+
+.img_small {
+  -webkit-filter: blur(50px);
+  -moz-filter: blur(50px);
+  filter: blur(50px);
+  transform: scale(1);
+}
+
+i {
+  display: block;
+}
+
+.placeholder:hover .img_large {
+  transform: scale(1.2);
+}
+.img_large,
+.img_small,
+.placeholder:before,
+span {
+  -webkit-transition: all 0.5s;
+  -moz-transition: all 0.5s;
+  -o-transition: all 0.5s;
+  transition: all 0.5s;
+}
+.placeholder:before {
+  content: '';
+  display: block;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  background-color: rgba(52, 73, 94, 0.45);
+  z-index: 100;
+}
+.placeholder:hover:before {
+  opacity: 1;
+}
+.placeholder span {
+  color: #eee;
+  font-size: 4rem;
+  text-transform: capitalize;
+  display: none;
+  font-family: menlo;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1000;
+}
+.placeholder:hover span {
+  display: block;
+}