Skip to content

Commit b32336e

Browse files
n7bestn7best
committed
skill init
1 parent 0e186d1 commit b32336e

File tree

8 files changed

+245
-11
lines changed

8 files changed

+245
-11
lines changed

‎src/app.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import './app.sass';
22
import { h, wait } from './utils/engine';
33
import { logo, intro, intro_text } from './view/intro';
44
import { about, about_name, about_title, down_indicator, about_detail} from './view/about';
5+
import { skills } from './view/skill';
56
import { MoveOnScroll } from './hoc/moveOnScroll';
67

78
const container = h('div', 'container', intro, about, down_indicator)
@@ -41,5 +42,8 @@ wait(2000)
4142
})
4243
.then( ()=> {
4344
down_indicator.style.opacity = 1;
45+
46+
//add main content
4447
container.appendChild(about_detail(container))
48+
container.appendChild(skills(container))
4549
})

‎src/app.sass‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -152,6 +152,25 @@ body {
152152
}
153153
}
154154

155+
156+
.skills {
157+
min-height: 60em;
158+
padding: 7em 0;
159+
color: #111;
160+
161+
&_intro {
162+
max-width: 980px;
163+
width: 60%;
164+
margin: 3em auto;
165+
font-size: 1.5em;
166+
font-family: 'Arimo', sans-serif;
167+
line-height: 1.5em;
168+
color: #4e4e4e;
169+
transition: all .5s;
170+
}
171+
}
172+
173+
155174
@keyframes fadeInTop {
156175
from {
157176
opacity: 0;
@@ -172,6 +191,14 @@ body {
172191
0 3em 3em -0.25em rgba(100,100,100,0.2);
173192
}
174193

194+
.bs-2 {
195+
box-shadow:
196+
0 0.3em 0.5em -0.2em rgba(100,100,100,1),
197+
0 1em 2em -0.75em rgba(100,100,100,0.75),
198+
0 1em 3em -0.5em rgba(100,100,100,0.5),
199+
0 3em 3em -0.25em rgba(100,100,100,0.2);
200+
}
201+
175202
.bg-dark {
176203
background: #161616;
177204
color: #fff;

‎src/components/codemock/index.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { h } from '../../utils/engine'
2+
import './style.sass'
3+
4+
export const codeMock = (code = []) => {
5+
const cursor = h('span', 'code-mock_editor-cursor', '_');
6+
7+
const content = code.map( str=> h('p', 'code-mock_editor-line', str , cursor.cloneNode(true)))
8+
9+
const menu = h('div', 'code-mock_menu bg-white bs',
10+
h('div', 'code-mock_menu-btn close'),
11+
h('div', 'code-mock_menu-btn minimize'),
12+
h('div', 'code-mock_menu-btn zoom')
13+
)
14+
const editor = h('div', 'code-mock_editor bs-2', content)
15+
16+
const el = h('div', 'code-mock monoki', menu, editor)
17+
18+
return el;
19+
}

‎src/components/codemock/style.sass‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
.code-mock {
2+
width: 50em;
3+
margin: 10em auto;
4+
text-align: left;
5+
6+
&_menu {
7+
width: 100%;
8+
box-sizing: border-box;
9+
height: 3em;
10+
margin: 0 auto;
11+
border-top-right-radius: 1em;
12+
border-top-left-radius: 1em;
13+
14+
&-btn {
15+
height: 1em;
16+
width: 1em;
17+
border-radius: 50%;
18+
border: 1px solid #000;
19+
position: relative;
20+
top: 1em;
21+
left: 1em;
22+
display: inline-block;
23+
margin: auto .25em;
24+
}
25+
26+
&-btn.close {
27+
background-color: #ff3b47;
28+
border-color: #9d252b;
29+
}
30+
31+
&-btn.minimize {
32+
background-color: #ffc100;
33+
border-color: #9d802c;
34+
}
35+
36+
&-btn.zoom {
37+
background-color: #00d742;
38+
border-color: #049931;
39+
}
40+
}
41+
42+
&_editor {
43+
width: 100%;
44+
height: 20em;
45+
box-sizing: border-box;
46+
padding: 2em;
47+
border-bottom-left-radius: 1em;
48+
border-bottom-right-radius: 1em;
49+
50+
&-line {
51+
font-size: 1.5em;
52+
white-space: pre;
53+
overflow: hidden;
54+
position: relative;
55+
width: 0;
56+
57+
$elements: 10;
58+
$pstart: 1;
59+
$cstart: 2;
60+
61+
@for $i from 1 to $elements {
62+
$j: $i - 1;
63+
&:nth-child(#{$i}) {
64+
animation: type .5s $pstart+$j*2s steps(20, end) forwards;
65+
.code-mock_editor-cursor {
66+
animation: blink 1s $cstart+$j*2s 1 forwards;
67+
}
68+
}
69+
}
70+
}
71+
}
72+
}
73+
74+
.monoki {
75+
font-family: 'Arimo', sans-serif;
76+
77+
.code-mock_menu {
78+
background-color: #171717;
79+
}
80+
81+
.code-mock_editor {
82+
background-color: #272822;
83+
color: #F8F8F2;
84+
85+
&-line {
86+
&:nth-child(1){
87+
88+
margin-top: 0;
89+
}
90+
&:nth-child(2){
91+
color: #A6E22E;
92+
}
93+
&:nth-child(3){
94+
color: #66D9EF;
95+
}
96+
&:nth-child(4){
97+
color: #F92672;
98+
}
99+
}
100+
101+
&-cursor {
102+
color: #F8F8F2;
103+
margin-left: .5em;
104+
}
105+
}
106+
}
107+
108+
@keyframes blink {
109+
0% {
110+
opacity: 0;
111+
}
112+
40% {
113+
opacity: 0;
114+
}
115+
50% {
116+
opacity: 1;
117+
}
118+
90% {
119+
opacity: 1;
120+
}
121+
100% {
122+
opacity: 0;
123+
}
124+
}
125+
126+
@keyframes type {
127+
to {
128+
width: 17em;
129+
}
130+
}

‎src/hoc/moveOnScroll.js‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,17 @@ export const MoveOnScroll = (component, opts = {}) => {
99

1010
},
1111
trigger: (change, el) => el.style.transform = `translate(0px, ${change}px)`,
12-
onVisible: ()=>null,
13-
onInvisible: ()=>null,
12+
onVisible: null,
13+
onInvisible: null,
1414
container: component.parentElement
1515
}, opts)
1616

17+
if(typeof component['__mos'] === 'undefined'){
18+
component.__mos = {
19+
isVisible: false
20+
}
21+
}
22+
1723
options.container.addEventListener('scroll', e=>updateItem(component, options.container))
1824

1925
function updateItem(el, holder) {
@@ -38,12 +44,23 @@ export const MoveOnScroll = (component, opts = {}) => {
3844

3945
if(isVisible){
4046

47+
if(!el.__mos.isVisible){
48+
//visible first time
49+
el.__mos.isVisible = true
50+
if(options.onVisible) options.onVisible(el);
51+
}
52+
4153
if(options.animation.enable){
4254
let changeValue = 0
4355
changeValue = Math.abs(offset) / window.innerHeight * options.animation.max + options.animation.min
4456
options.trigger(changeValue, el)
4557
}
4658

59+
}else{
60+
if(el.__mos.isVisible){
61+
el.__mos.isVisible = false
62+
if(options.onInvisible) options.onInvisible(el);
63+
}
4764
}
4865
}
4966

‎src/utils/engine.js‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,23 @@
1+
const m = (el, children) => {
2+
children.forEach( $el => {
3+
if(Array.isArray($el)){
4+
m(el, $el)
5+
}else if(typeof $el === 'string'){
6+
el.appendChild(document.createTextNode($el))
7+
}else{
8+
el.appendChild($el)
9+
}
10+
})
11+
}
12+
113
export const h = (tag, className, ...children) => {
214
const el = document.createElement(tag)
315
el.className = className
416

5-
children.forEach( $el => {
6-
if(typeof $el === 'string'){
7-
el.appendChild(document.createTextNode($el))
8-
}else{
9-
el.appendChild($el)
10-
}
11-
})
17+
m(el, children)
1218

1319
console.log(el)
14-
return el
20+
return el
1521
}
1622

1723
export const wait = (time) => {

‎src/view/skill.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { h } from '../utils/engine'
2+
import { button } from '../components/button/index.js'
3+
import { header } from '../components/header/index.js'
4+
import { codeMock } from '../components/codemock/index.js'
5+
import { moveOnScrollOpacity } from '../hoc/moveOnScroll'
6+
7+
const codes = [
8+
`[`,
9+
` "I'm a web developer", `,
10+
` "I'm a web designer", `,
11+
` "lets's work together!" `,
12+
`]`
13+
]
14+
15+
export const skills = container => {
16+
return h('div', 'skills',
17+
moveOnScrollOpacity(header('What I\'m good at', 'Professional Skills', ''), {
18+
container
19+
}),
20+
moveOnScrollOpacity(h(
21+
'p', 'skills_intro',
22+
'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.'),
23+
{container}, 15
24+
),
25+
moveOnScrollOpacity(codeMock(codes), {
26+
container,
27+
onVisible: el=>el.style.display = 'block',
28+
onInvisible: el=>el.style.display = 'none'
29+
}, 0)
30+
);
31+
}

‎tasks/watch.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ module.exports = () => {
77
gulp.task( 'watch', () => {
88
livereload.listen();
99
return gulp.watch(
10-
[ 'src/*.js', 'src/*.sass', 'src/index.hbs'],
10+
[ 'src/*.js', 'src/*.sass', 'src/index.hbs', 'src/**/*.js'],
1111
[ 'build', 'css', 'template']
1212
);
1313
});

0 commit comments

Comments
 (0)