aboutme section

Author: n7best

package.json

@@ -5,7 +5,8 @@
   "scripts": {
     "test": "gulp",
     "start": "node index.js",
-    "watch": "nodemon index.js"
+    "watch": "nodemon index.js",
+    "deploy": "gh-pages -d public"
   },
   "author": "Charlie Lin <n7best>",
   "license": "MIT",
@@ -20,6 +21,7 @@
   "dependencies": {},
   "devDependencies": {
     "autoprefixer": "^7.1.4",
+    "gh-pages": "^1.0.0",
     "gulp": "3.9.1",
     "gulp-buffer": "0.0.2",
     "gulp-clean-css": "2.0.12",

src/app.js

@@ -1,8 +1,8 @@
 import './app.sass';
 import { h, wait } from './utils/engine';
 import { logo, intro, intro_text } from './view/intro';
-import { about, about_name, about_title, down_indicator} from './view/about';
-
+import { about, about_name, about_title, down_indicator, about_detail} from './view/about';
+import { MoveOnScroll } from './hoc/moveOnScroll';
 
 const container = h('div', 'container', intro, about, down_indicator)
 document.body.appendChild(container)
@@ -30,7 +30,7 @@ wait(2000)
 })
 .then( ()=> {
   intro.className = 'intro active bg-blue'
-  
+  MoveOnScroll(intro)
   return wait(500)
 })
 .then( ()=> {
@@ -41,4 +41,5 @@ wait(2000)
 })
 .then( ()=> {
   down_indicator.style.opacity = 1;
+  container.appendChild(about_detail(container))
 })

src/app.sass

@@ -1,3 +1,4 @@
+
 body {
   font-size: 12px;
   color: #345274;
@@ -23,6 +24,7 @@ body {
     display: none;
     font-size: 2em;
     animation: fadeInTop 1.5s;
+    margin-bottom: 5em;
     i {
       left: 1em;
 
@@ -106,7 +108,48 @@ body {
     animation: fadeInTop .5s;
   }
 
-  
+  &-detail {
+    width: 100%;
+    padding: 10em 0;
+    min-height: 40em;
+    padding-bottom: 0;
+
+    &_intro {
+      max-width: 980px;
+      width: 60%;
+      margin: 3em auto;
+      font-size: 1.5em;
+      font-family: 'Arimo', sans-serif;
+      line-height: 1.5em;
+      color: #ccc;
+      transition: all .5s;
+    }
+
+    &_badges {
+      max-width: 980px;
+      width: 60%;
+      margin: 3em auto;
+      transition: all .5s;
+
+      &-badge {
+        padding: .5em;
+        height: 5em;
+        font-family: 'Quicksand', sans-serif;
+        font-size: 1.25em;
+        font-weight: 500;
+        display: inline-block;
+        img {
+          display: block;
+          margin: .75em auto;
+          height: 100%;
+        }
+      }
+    }
+
+    &_photo {
+      margin-top: 5em;
+    }
+  }
 }
 
 @keyframes fadeInTop {
@@ -129,6 +172,11 @@ body {
     0 3em 3em -0.25em rgba(100,100,100,0.2);
 }
 
+.bg-dark {
+  background: #161616;
+  color: #fff;
+}
+
 .bg-white {
   background-color: #fff; 
 }

src/components/header/index.js

@@ -0,0 +1,11 @@
+import {h} from '../../utils/engine';
+import './style.scss';
+
+export const header = (tip, title, tag) => {
+    
+    const tipel = h('span', 'tip', tip)
+    const titleel = h('h2', 'title', title)
+
+    const el = h('div', 'header-block', tipel, titleel)
+    return el;
+}

src/components/header/style.scss

@@ -0,0 +1,17 @@
+.header-block {
+    text-align: center;
+    font-family: 'Quicksand', sans-serif;
+    transition: all .5s;
+    margin-top: 40px;
+    span.tip {
+        display: block;
+        font-size: 2em;
+        
+    }
+
+    h2 {
+        display: block;
+        font-size: 3.5em;
+        margin: 0.5em auto;
+    }
+}

src/hoc/moveOnScroll.js

@@ -0,0 +1,61 @@
+export const MoveOnScroll = (component, opts = {}) => {
+    const options = Object.assign({},{
+        animation: {
+          enable: true,
+          max: 40,
+          min: 0,
+          transform: true,
+          type: '',
+          
+        },
+        trigger: (change, el) => el.style.transform = `translate(0px, ${change}px)`,
+        onVisible: ()=>null,
+        onInvisible: ()=>null,
+        container: component.parentElement
+    }, opts)
+
+    options.container.addEventListener('scroll', e=>updateItem(component, options.container))
+
+    function updateItem(el, holder) {
+          
+        
+        const { top:elemTop, bottom:elemBottom, height:elemHeight } = el.getBoundingClientRect()
+        const { top:holderTop, bottom:holderBottom } = holder.getBoundingClientRect()
+    
+        let isVisible;
+        let offset;
+        
+        if (elemTop <= holderTop) {
+           //scroll pass the element
+           offset = window.innerHeight 
+           isVisible = !(holderTop - elemTop > elemHeight);
+        } else {
+           //scroll before the element
+           offset = elemBottom - holderBottom - elemHeight
+           if(holder.scrollTop < elemTop) offset = holder.scrollTop;
+           isVisible = !(elemBottom - holderBottom > elemHeight);
+        }
+
+        if(isVisible){
+          
+          if(options.animation.enable){
+            let changeValue = 0
+            changeValue = Math.abs(offset) / window.innerHeight * options.animation.max + options.animation.min
+            options.trigger(changeValue, el)
+          }
+          
+        }
+    }
+
+    return component;
+      
+}
+
+export const moveOnScrollOpacity = (component, opt = {}, withold = 25) =>{
+    return MoveOnScroll(component, Object.assign({},{
+        trigger : (change, el) => {
+            el.style.transform = `translate(0px, ${change}px)`
+            el.style.opacity =  change / parseFloat(withold) 
+        }
+    }, opt))
+}

src/utils/avalanche.css

@@ -1,7 +1,44 @@
 import { h } from '../utils/engine'
 import { button } from '../components/button/index.js'
+import { header } from '../components/header/index.js'
+import { moveOnScrollOpacity } from '../hoc/moveOnScroll'
 
 export const about_name = h('p', 'about-name', 'Charlie Lin')
 export const about_title = h('p', 'about-title', 'WEB DESIGNER / WEB DEVELOPER')
 export const down_indicator = button('fa fa-long-arrow-down', '', 'btn-grey')
-export const about = h('div', 'about', about_name, about_title)
+export const about = h('div', 'about', about_name, about_title)
+
+
+
+export const about_detail = container =>
+{
+    const iconNYC = h('img', '')
+    iconNYC.src = 'assets/img/nyc.png'
+    const badgeNYC= h('div', 'about-detail_badges-badge 1/2 1/3--desk grid__cell', iconNYC, 'Proud New Yoker')
+
+    const iconChinese = h('img', '')
+    iconChinese.src = 'assets/img/chinese.png'
+    const badgeChinese= h('div', 'about-detail_badges-badge 1/2 1/3--desk grid__cell', iconChinese, 'Made in China')
+
+    const iconUSMC = h('img', '')
+    iconUSMC.src = 'assets/img/usmc.png'
+    const badgeUSMC= h('div', 'about-detail_badges-badge 1/2 1/3--desk grid__cell', iconUSMC, 'Veteran Marines')
+
+    const badgeArea = h('div', 'about-detail_badges', badgeNYC, badgeChinese, badgeUSMC)
+    
+    const photo = h('img', 'about-detail_photo')
+    photo.src = 'assets/img/charlie.jpg'
+
+    return h('div', 'about-detail bg-dark', 
+        moveOnScrollOpacity(header('Little About Me', 'Personal Information', ''), {
+            container
+        }),
+        moveOnScrollOpacity(h(
+            'p', 'about-detail_intro', 
+            'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem.'),
+            {container}, 15  
+        ),
+        moveOnScrollOpacity(badgeArea, {container}, 15),
+        photo
+    );
+}

src/view/about.js

@@ -5,7 +5,7 @@ const livereload  = require('gulp-livereload');
 
 module.exports = () => {
   gulp.task( 'css', function () {
-    return gulp.src( [ 'src/utils/normalize.css', 'src/css/**/*.css' ] )
+    return gulp.src( [ 'src/utils/normalize.css', 'src/utils/avalanche.css', 'src/css/**/*.css' ] )
       .pipe( concat('main.css') )
       .pipe( clean({ compatibility: 'ie8' }) )
       .pipe( gulp.dest('./public') )