-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
88 lines (73 loc) · 1.81 KB
/
script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
window.onscroll = function () {
var scrolled = window.pageYOffset || document.documentElement.scrollTop;
document.querySelectorAll('.shadow').forEach(element => {
element.style.transform = `skewX(${scrolled / 10 - 40}deg)`;
});
document.querySelector('.sun')
.style.transform = `translateX(${scrolled * 0.13}vw)`;
document.querySelector('.blink')
.style.transform = `translateX(${-scrolled * 0.13 + 100}vw)`;
}
Highcharts.chart('container', {
chart: {
polar: true,
type: 'line',
backgroundColor: 'black'
},
title: {
text: 'Main skills',
style: {
color: 'white',
'font-size': '32px'
},
},
pane: {
size: '80%',
background: {
backgroundColor: 'black'
}
},
legend: {
enabled: false
},
xAxis: {
categories: ['JavaScript, TypeScript', 'HTML 5', 'Vue.JS', 'Angular',
'Jest, Karma, Protractor', 'Jenkins, Gulp, Webpack', 'CSS, SASS', 'NodeJS',
'GIT', 'Python3'],
tickmarkPlacement: 'on',
lineWidth: 0,
gridLineColor: 'black',
labels: {
style: {
color: 'white',
'font-size': '18px'
},
distance: 35
}
},
exporting: {
enabled: false
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0,
max: 100,
gridLineColor: 'black',
labels: {
style: {
color: 'black'
}
}
},
tooltip: {
shared: true
},
series: [{
name: 'Actual skill percentage',
data: [94, 90, 93, 73,
80, 79, 97, 71,
94, 67],
pointPlacement: 'on'
}]
});