-
Notifications
You must be signed in to change notification settings - Fork 0
/
index1.html
390 lines (319 loc) · 12.4 KB
/
index1.html
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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
---
layout: home
---
<section>
<svg height="390" width="550" id="mountains">
<polygon points="300,390 190,90 320,130 400,340" fill="#5d2042" />
<polygon points="0,340 108,190 194,100 201,120 301,390" fill="#320e40" />
<polygon points="14,348 117,174 194,102 172,377" fill="#3b1642" fill-opacity="0.8" />
<polygon points="120,174 194,102 233,206 144,275" fill="#3d1744" fill-opacity="0.9" />
<polygon points="233,206 288,177 324,214" fill="#421943" />
<polygon points="233,206 324,214 247,245" fill="#3e1743" />
<polygon points="247,245 324,214 360,360" fill="#411842" />
<polygon points="324,214 288,177 350,210" fill="#632242" />
<polygon points="324,214 350,210 360,360" fill="#652343" />
<g id="apex">
<polygon points="108,190 170,40 194,100" fill="#aeacb9" />
<polygon points="170,40 234,6 260,70 288,178 194,102" fill="#ceced8" />
<polygon points="234,6 290,80 320,132 288,178" fill="#ffffed" />
</g>
</svg>
<svg height="347" width="168" id="cloud1">
<g>
<polygon points="0,30 8,19 27,18 22,36 9,37" fill="#d5d6e2" />
<polygon points="0,30 9,37 3,50" fill="#c7c2d1" />
<polygon points="3,50 9,37 22,36 33,44 14,55" fill="#a8a9b7" />
<polygon points="14,55 33,44 36,52 23,58" fill="#7a7789" />
<polygon points="27,18 22,36 33,44" fill="#acabb9" />
<polygon points="31,11 51,4 66,1 83,13 83,23 78,23" fill="#fff6e7" />
<polygon points="27,18 31,11 54,6 56,32 33,40 29,36" fill="#d0d0dc" />
<polygon points="29,36 58,65 42,67 31,57" fill="#9694a3" />
<polygon points="33,40 56,32 75,37 58,65" fill="#a2a1b1" />
<polygon points="58,65 75,37 82,57" fill="#9897a7" />
<polygon points="56,32 54,6 80,14 82,57 75,37" fill="#d7d6e2" />
<polygon points="80,15 84,17 88,30 85,50 81,51" fill="#9d9da9" />
<polygon points="90,16 82,20 81,31 95,35" fill="#cdcdda" />
<polygon points="81,31 82,47 95,35" fill="#a2a2b0" />
<polygon points="82,47 95,35 105,45 91,53" fill="#878892" />
<polygon points="105,45 95,35 106,22" fill="#fbe5d5" />
<polygon points="106,22 95,35 90,16" fill="#dbd6dd" />
</g>
</svg>
<svg height="347" width="168" id="cloud2">
<g transform="scale(0.5)">
<polygon points="0,30 8,19 27,18 22,36 9,37" fill="#d5d6e2" />
<polygon points="0,30 9,37 3,50" fill="#c7c2d1" />
<polygon points="3,50 9,37 22,36 33,44 14,55" fill="#a8a9b7" />
<polygon points="14,55 33,44 36,52 23,58" fill="#7a7789" />
<polygon points="27,18 22,36 33,44" fill="#acabb9" />
<polygon points="31,11 51,4 66,1 83,13 83,23 78,23" fill="#fff6e7" />
<polygon points="27,18 31,11 54,6 56,32 33,40 29,36" fill="#d0d0dc" />
<polygon points="29,36 58,65 42,67 31,57" fill="#9694a3" />
<polygon points="33,40 56,32 75,37 58,65" fill="#a2a1b1" />
<polygon points="58,65 75,37 82,57" fill="#9897a7" />
<polygon points="56,32 54,6 80,14 82,57 75,37" fill="#d7d6e2" />
<polygon points="80,15 84,17 88,30 85,50 81,51" fill="#9d9da9" />
<polygon points="90,16 82,20 81,31 95,35" fill="#cdcdda" />
<polygon points="81,31 82,47 95,35" fill="#a2a2b0" />
<polygon points="82,47 95,35 105,45 91,53" fill="#878892" />
<polygon points="105,45 95,35 106,22" fill="#fbe5d5" />
<polygon points="106,22 95,35 90,16" fill="#dbd6dd" />
</g>
</svg>
<svg id="ground"></svg>
<svg id="hills" width="700" height="170">
<polygon points="480,70 530,100 560,90 516,40" fill="#9b9d57" />
<polygon points="480,70 530,100 412,84" fill="#7d8f57" />
<polygon points="530,100 412,84 360,138" fill="#748857" />
<polygon points="360,138 240,140 320,82" fill="#748857" />
<polygon points="412,84 360,140 320,82" fill="#88945a" />
<polygon points="320,82 240,140 210,64" fill="#597252" />
<polygon points="300,78 100,100 0,104 170,58" fill="#4f654f" />
<polygon points="172,58 145,40 122,48 66,79 0,104" fill="#536a50" />
</svg>
<svg class="trees">
<g class="tree" id="tree" transform="translate(400,30)">
<polygon points="25,75 27,44 21,34 25,33 30,41 38,33 40,34 31,46 29,75" fill="#3f2145" />
<polygon points="29,75 31,46 32,45 32,74" fill="#812743" />
<polygon points="2,21 11,33 20,32 27,29 32,23 24,35 11,34" fill="#282246" />
<polygon points="27,29 33,13 18,0 29,2 37,13 32,23" fill="#6a7749" />
<polygon points="33,23 35,32 45,37 55,27 44,35 37,31" fill="#210f3f" />
<polygon points="37,31 38,17 46,17 50,31" fill="#354346" />
<polygon points="37,31 50,31 45,37" fill="#292941" />
<polygon points="33,23 37,31 38,17" fill="#2b2d42" />
<polygon points="38,17 46,17 46,11" fill="#495e4b" />
<polygon points="46,17 46,11 54,18" fill="#5b7049" />
<polygon points="44,11 54,18 56,26 50,31" fill="#515d49" />
<polygon points="11,33 20,32 27,29 15,19" fill="#292e42" />
<polygon points="27,29 33,13 15,19" fill="#424f46" />
<polygon points="33,13 18,0 15,19" fill="#48604a" />
<polygon points="18,0 7,5 15,19" fill="#3a5449" />
<polygon points="7,5 0,18 15,19" fill="#344847" />
<polygon points="0,18 11,33 15,19" fill="#292c4b" />
<polygon points="175,4 121,10 53,12 12,16 5,20 47,22 122,12 180,4" fill="#648155" transform="translate(-148,70)" />
</g>
<use x="-215" y="-23" xlink:href="#tree" transform="scale(0.8)" />
<use x="-220" y="-20" xlink:href="#tree" />
<use x="540" y="-30" xlink:href="#tree" />
<use x="480" y="-20" xlink:href="#tree" />
<use x="440" y="-15" xlink:href="#tree" transform="scale(1.2)" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" id="plane" class="plane" viewBox="0 0 104 47" x="0" y="0" width="104" height="47" background-color="#ffffff00">
<g id="avion">
<path d="M20 36C25 38 69 43 80 40 92 38 106 33 104 21 103 13 95 13 90 9 85 5 79 2 76 1 70-1 65 0 60 2 57 3 25 14 23 13 21 12 12 2 9 3 5 4 1 5 1 6 2 7 15 34 20 36Z" fill="#0085b2"/>
<path d="M23 36C28 37 69 43 80 40 88 38 98 34 102 29 82 32 22 36 23 36Z" stroke="#ffffff00" stroke-width="1" fill="#14647f"/>
<path d="M42 39C48 40 60 40 67 40 71 32 72 26 72 26L44 29C44 29 44 35 42 39Z" stroke="#ffffff00" stroke-width="1" fill="#0c3b4d"/>
<path d="M7 16C7 16 9 20 10 22 13 27 16 13 16 13L7 16Z" stroke="#ffffff00" stroke-width="1" fill="#0c3b4d"/>
<path d="M40 29C40 29 41 34 34 42 27 51 48 46 58 39 74 28 72 25 72 25L40 29Z" stroke="#ffffff00" stroke-width="1" fill="#006e96"/>
<path d="M5 14C5 14 6 15 3 19 1 22 10 20 13 17 19 11 17 11 17 11L5 14Z" stroke="#ffffff00" stroke-width="1" fill="#006e96"/>
<path d="M90 10C88 8 83 4 80 3 78 3 68 7 68 8 70 12 80 8 90 10Z" stroke="#ffffff00" stroke-width="1" fill="#0c3b4d"/>
<path d="M89 9C87 7 82 3 79 2 77 2 67 6 67 7 69 11 79 7 89 9Z" stroke="#ffffff00" stroke-width="1" fill="#afe2ff"/>
</g>
</svg>
</section>
<section id="about">
<div class="container" id="t" >
<div class="avatar">
<img class="img-circle" src="../{{ site.baseurl }}static/img/{{ site.avatar }}" alt="Responsive image">
</div>
<h3 class="t1">I'm <strong>{{ site.author }}</strong>, a Full Stack Web Developer</h3>
<h3 class="t1"> ----- I ❤️ JavaScript ----- </h3>
<h3 class="t1">Please take a look at my working <a href="../{{ site.baseurl }}projects.html"> projects</a>.</h3>
<h3 class="t1"> For more check out my academic & professional <a href="../{{ site.baseurl }}resume.html">Resume</a>.</h3>
<h3 class="t1">Contact me at <a href="http://twitter.com/{{ site.twitter }}">@{{ site.twitter }}</a> or by <a href="mailto:{{ site.email }}">email</a>.</h3>
{% include social.html %}
</div>
</section>
<style>
.container#t{
box-shadow: 10px 10px 5px #0006;
}
.img-circle{
width: 16rem;
}
.t1{
font: 24px Tahoma, Helvetica, Arial, Sans-Serif;
text-align: center;
color: whitesmoke;
text-shadow: 0px 2px 3px #555;
font-weight: bold;
}
#t{
background-color: rgba(255, 255, 255, 0.2);
position: relative;
z-index: 1000;
}
.plane,
.cloud{
position:absolute;
}
/*plane animation*/
.plane{
animation-duration: 1s;
animation-name: anim-plane;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function:linear;
animation-fill-mode:forwards;
display:block;
margin:0 auto;
transform: translateY(80px);
left:30%;
}
@keyframes anim-plane{
to{
transform:translateY(95px);
}
}
/* Cloud Animation */
@keyframes fade{
0%{ opacity: 0;}
10%{ opacity: 1;}
90%{ opacity:1;}
100%{ opacity:0;}
}
@keyframes move{
from{
left:200px;
}
to{
left:0px;
}
}
.cloud{
animation-duration:10s;
animation-name:move, fade;
animation-direction: normal;
animation-iteration-count:infinite;
animation-timing-function:linear;
animation-fill-mode:both;
display:block;
background:url(data:image/svg+xml;base64,PHN2ZyBpZD0iY2xvdWQiIHZpZXdCb3g9IjAgMCA1MiA0MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI1MnB4IiBoZWlnaHQ9IjQwcHgiPgoJPGRlZnM+CgkJPGZpbHRlciBpZD0iZjEiIHg9Ii0xMDAlIiB5PSItMTAwJSIgd2lkdGg9IjMwMCUiIGhlaWdodD0iMzAwJSI+IAoJCQk8ZmVPZmZzZXQgcmVzdWx0PSJvdXQiIGluPSJTb3VyY2VHcmFwaGljIiBkeD0iMCIgZHk9IjEiLz4KCQkJPGZlQ29sb3JNYXRyaXggcmVzdWx0PSJvdXQiIGluPSJvdXQiIHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwIDAgMCAwIDAgIDAgMCAwIDAgMCAgMCAwIDAgMCAwICAwIDAgMCAwLjQgMCIvPgoJCQk8ZmVHYXVzc2lhbkJsdXIgcmVzdWx0PSJvdXQiIGluPSJvdXQiIHN0ZERldmlhdGlvbj0iMiIvPgoJCQk8ZmVCbGVuZCBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJvdXQiIG1vZGU9Im5vcm1hbCIgcmVzdWx0PSJkcCIvPgoJCTwvZmlsdGVyPgoJPC9kZWZzPiAKCTxwYXRoIGlkPSJmZy1jbG91ZCIgZmlsdGVyPSJ1cmwoI2YxKSIgZD0iTTYuMyAzNS4xQzQuNyAzNC4yLTAuNCAzMi4zIDEuNCAyNSAzLjEgMTguMSA4LjcgMTkuNSA4LjcgMTkuNSA4LjcgMTkuNSAzLjIgMTQuMSAxMC40IDYuOCAxNi45IDAuMiAyMy4xIDQuNiAyMy4xIDQuNiAyMy4xIDQuNiAzMC0xLjcgMzUuMiAyLjQgNDQuNiA5LjcgNDIuOCAyNS4zIDQyLjggMjUuMyA0Mi44IDI1LjMgNDggMjIuNiA0OS44IDI4LjYgNTEgMzIuNyA0NiAzNS44IDQyLjggMzYuNyAzOS43IDM3LjUgOC45IDM2LjYgNi4zIDM1LjFaIiBzdHJva2U9IiNjY2NjY2MiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0iI2ZmZmZmZiIvPgo8L3N2Zz4=);
height:40px;
width:53px;
margin:0 auto;
}
.cloud--small{
animation-duration:6s;
top:65px;
transform: scaleX(0.5) scaleY(0.5);
}
.cloud--medium{
animation-duration:5s;
animation-delay:1s;
top:95px;
transform: scaleX(0.7) scaleY(0.7);
}
.cloud--large{
animation-duration:4.5s;
animation-delay:2.5s;
top:95px;
transform: scaleX(0.8) scaleY(0.8);
}
.whoami{
padding-top:3em;
text-align:center;
}
* {
margin: 0;
padding: 0;
}
@media (max-width: 960px) {
body {
zoom: 0.7;
}
}
html, body {
height: 100%;
}
@keyframes bounce {
from {
transform: translateY(0px);
}
to {
transform: translateY(-4px);
}
}
@keyframes sway {
from {
transform: translateX(0px);
}
to {
transform: translateX(-12px);
}
}
body {
background:url("../forest.svg") no-repeat;
min-height: 100%;
background: -webkit-linear-gradient(top, #152c3e, #37618a);
position: relative;
}
body #mountains {
z-index: 2;
position: absolute;
bottom: 20%;
margin-bottom: -16px;
left: 10%;
}
body #cloud1 {
z-index: 2;
position: absolute;
top: 20%;
right: 4%;
animation: bounce 2s ease-in-out 0s infinite alternate;
}
body #cloud2 {
z-index: 1;
position: absolute;
top: 22%;
right: 16%;
animation: bounce 3.5s ease-in-out 2s infinite alternate;
}
body .trees {
width: 100%;
height: 130px;
z-index: 4;
position: absolute;
bottom: 20%;
margin-bottom: -100px;
}
body #ground {
z-index: 1;
width: 100%;
height: 20%;
position: absolute;
bottom: 0;
background: #879759;
}
body #hills {
position: absolute;
left: 10%;
margin-left: -120px;
margin-bottom: -86px;
bottom: 20%;
z-index: 3;
}
body #stars {
width: 100%;
height: 100%;
}
</style>
<script>
var sky = document.getElementById("sky");
sky.width = document.body.clientWidth;
sky.height = document.body.clientHeight;
if (sky.getContext){
var skyContext = sky.getContext("2d");
var radius = 2;
for(var star = 0; star < 50; star++){
var min = ( Math.random() * 30 + 5 ) / 10;
var max = sky.width - radius;
var centerX = Math.floor(Math.random() * (max - min + 1)) + min;
var centerY = Math.floor(Math.random() * (max - min + 1)) + min;
skyContext.beginPath();
skyContext.arc(centerX, centerY, min, 0, 2 * Math.PI);
skyContext.fillStyle = "rgb(255, 255, 255)";
skyContext.fill();
}
}
</script>