experiences finish

Author: n7best

png/experiencebackground.psd

@@ -4,6 +4,7 @@ import { h, wait } from './utils/engine';
 import { logo, intro, intro_text } from './view/intro';
 import { about, about_name, about_title, down_indicator, about_detail} from './view/about';
 import { skills } from './view/skill';
+import { portfolio } from './view/portfolio'
 import { experiences } from './view/experience';
 import { MoveOnScroll } from './hoc/moveOnScroll';
 
@@ -50,4 +51,5 @@ wait(2000)
   container.appendChild(about_detail(container))
   container.appendChild(skills(container))
   container.appendChild(experiences(container))
+  container.appendChild(portfolio(container))
 })

src/app.js

@@ -226,6 +226,7 @@ p {
   padding: 8em 0;
   color: #111;
   position: relative;
+  padding-bottom: 0;
 
   &_intro {
     max-width: 980px;
@@ -267,6 +268,47 @@ p {
       }
     }
   }
+
+  &_bg {
+    position: relative;
+    transition: all .5s;
+
+    * {
+      transition: all .75s;
+    }
+
+    .table {
+      width: 100%;
+      margin-top:2em;
+    }
+
+    .lamp {
+      position: absolute;
+      left: 15%;
+      top: -11em;
+      width: 15em;
+    }
+
+    .book {
+        position: absolute;
+        left: 42%;
+        top: 0em;
+        width: 15em;
+    }
+
+    .tabledeco {
+      position: absolute;
+        right: 15%;
+        top: 0em;
+        width: 15em;
+    }
+  }
+}
+
+.portfolio {
+  min-height: 60em;
+ 
+  box-shadow: 0px 0px 5em rgba(17, 17, 17, .33);
 }
 
 .icon-list {

src/app.sass

@@ -29,7 +29,7 @@ const data = [
         },
         to: {
             year: '2017',
-            month: 'apr'
+            month: 'Apr'
         },
         title: 'Communication Technician',
         company: 'United States Marine Corps',
@@ -59,6 +59,18 @@ export const experiences = container => {
         )
     })
 
+    const bgImg = h('img', 'table')
+    bgImg.src = 'assets/img/table.png'
+
+    const lamp = h('img', 'lamp')
+    lamp.src = 'assets/img/lamp.png'
+
+    const book = h('img', 'book')
+    book.src = 'assets/img/book.png'
+
+    const tabledeco = h('img', 'tabledeco')
+    tabledeco.src = 'assets/img/tabledeco.png'
+
     const el = h('div', 'experiences',
         moveOnScrollOpacity(header('Where I came from', 'Work Experiences', ''), {
             container
@@ -70,6 +82,12 @@ export const experiences = container => {
         ),
         h('div', 'experiences_content text-left w-60p', 
         timeline
+        ),
+        h('div', 'experiences_bg', 
+            MoveOnScroll(bgImg,{container}),
+            moveOnScrollOpacity(lamp,{container}),
+            moveOnScrollOpacity(book,{container}),
+            moveOnScrollOpacity(tabledeco, {container})
         )
     )
 

src/view/experience.js

@@ -0,0 +1,12 @@
+import { h } from '../utils/engine'
+import { header } from '../components/header/index.js'
+import { moveOnScrollOpacity } from '../hoc/moveOnScroll'
+
+export const portfolio = container => {
+
+    return h('div', 'portfolio bg-dark',
+        moveOnScrollOpacity(header('My latest crafts', 'Portfolio', ''), {
+            container
+        })
+    );
+}