-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
382 lines (326 loc) · 14.1 KB
/
index.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
<!DOCTYPE HTML>
<html amp lang="en">
<!--
v0.1
HI! If you are reading this maybe we are interested into each other. This is a dummy site with a simple vanilla js/css game
in order to keep you on the website for more than 10 seconds.
I know it's not that great, I have a lot of great design ideas i would've loved to put in here (I love the web sites you
can find on awwwards) , but with the little time i have i 'm not able to realize them. But since you are here I can tell
you that I realized the most efficient website ever in one hour.
# So who I'm?
—-------------
My name is Alessandro Avolio and I'm a softawre engineer, I work in a interdisciplinary team in which I can make use of
both my creativity and IT skills and I'm enthusiastic about it! I try my best to improve my skills daily in order to find
always better and better solutions and approaches to engineer and design usable applications. I'm currently working as a
coordinator for the front-end group in one of the five biggest (50 people, €3.5M) and most innovative Agile projects in my
company (Engineering S.p.A.). Thanks to this I have a chance to become highly skilled on the new front-end technology stack,
so much that i attended as a speaker in one of the most important Angular Conferences in Italy.
# What tecnologies I know and I worked with?
—------------------------------------—
I started as a back-end engineer and with time I managed to mix it with my passion for web design
- Back-end: Spring Boot, the whole J2EE stack and a little NodeJS
- Front-end: Angular 2+, Angular.js and a little React. I'm confident I have good design skills (please don't judge them
from this page) and a good CSS know-how
- Mobile: Android, Cordova Hybrid solutions, i know something about Progressive Web Apps
# How can you get in touch with me?
—---------------------—
- twitter: @avol_io
- linkedin: https://www.linkedin.com/in/alessandro-avolio-baa39765/
# Other boring things about my educational path and projects where I worked
—---------------------------------------------------------------------—
Go to Linkedin...I hope you'll enjoy my beautiful and professional picture :D
In the next version:
- Offline working / complete progressive web application technique integration
- Realtime pipe comunication with mobile version and little desktop/mobile interaction game
- The final website? Ahhah... maybe...
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name=viewport content="width=device-width, initial-scale=1,user-scalable=no">
<title>Alessandro Avolio</title>
<link href="https://fonts.googleapis.com/css?family=Raleway:200,700" rel="stylesheet">
<style>
/* @font-face kit by Fonts2u (http://www.fonts2u.com) */
@font-face {
font-family: "Beon-Medium";
src: url("Beon.eot?") format("eot"), url("Beon.woff") format("woff"), url("Beon.ttf") format("truetype"), url("Beon.svg#Beon-Medium") format("svg");
font-weight: normal;
font-style: normal;
}
body {
transform: rotate3d(0, 0, 0);
background: white;
color: black;
font-family: 'Raleway', sans-serif;
font-size: 16px;
width: 100vw;
overflow: hidden;
/*text-align: center;
vertical-align: middle;*/
}
main {
margin: 10vh 10vw;
}
#first {
font-size: 10em;
font-weight: 700;
margin: 0;
width: 100vw;
/* overflow: hidden; */
/*margin-left: -0.2em;*/
}
#second {
font-size: 4em;
font-weight: 500;
margin: 0;
/* margin-top: -0.2em;
margin-left: 1.3em; */
/*display: inline-block !important;*/
/* width: 90vw; */
line-height: 80%;
}
#three {
font-weight: 100;
/* display: inline !important; */
opacity: 0;
transition: 3s linear opacity;
font-size: 1rem;
/* margin-top: -2.5em;
margin-left: 24.3em; */
width: 250px;
text-align: right;
line-height: initial;
}
button {
font-family: 'Raleway', sans-serif;
border: 1px solid black;
background: white;
margin: auto;
/* margin-top: 5em; */
color: black;
padding: 1em;
width: 5em;
font-weight: 200;
display: block;
transition: 0.25s linear all;
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* Internet Explorer/Edge */
user-select: none;
}
button:hover {
background: black;
color: white;
}
*:focus {
outline: 0 !important;
}
#aMessageForYou span {
display: block;
text-align: center;
animation-fill-mode: both;
animation-duration: 1s;
min-height: 2em;
margin: 0 10vw;
}
@keyframes fadeOutUp {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(0, -100%, 0);
}
}
.fadeOutUp {
animation-duration: 1s;
animation-name: fadeOutUp;
}
.swithLight {
animation: neon1 1.5s ease-in-out infinite alternate;
}
@keyframes neon1 {
from {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF1177, 0 0 70px #FF1177, 0 0 80px #FF1177, 0 0 100px #FF1177, 0 0 150px #FF1177;
}
to {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px #FF1177, 0 0 40px #FF1177, 0 0 50px #FF1177, 0 0 75px #FF1177;
}
}
@media (max-width: 650px) {
#first,
#second,
#three {
display: inline !important;
margin: 0;
}
#first {
font-size: 30vw;
/*line-height:50%;*/
}
#second {
font-size: 10vw;
/*line-height: 70%;*/
}
#three {}
}
br, body.blackout {
color: white;
background: black;
font-family: 'Beon-Medium', sans-serif;
}
body.blackout button {
background: transparent;
color:#444;
border-color:#222;
width:auto
}
</style>
</head>
<body>
<main>
<div id="first">Sorry,</div>
<div id="second">I have no time to make a better site.
<!-- <div id="three">In any case here there is everything about me and my abilities. </div> -->
</div>
<!-- <div id="four">Thanks for visiting ; -)</div> -->
<br/>
</main>
<p id="aMessageForYou">
<span id="old"></span>
<span id="new"></span>
</p>
<button id="mySuperMegaYeahButton">Enter</button>
<script>
if(navigator.serviceWorker){navigator.serviceWorker.register('service-worker.js')};
var abutton = document.getElementById('mySuperMegaYeahButton');
var aMessageForYou_old = document.getElementById('old');
var aMessageForYou_new = document.getElementById('new');
var pointOfStory = 0;
var step = 1;
var blaBlaBlaAboutMe = [
"Really, I have no time to make a better site.",
"That's all.",
"It's true! This is is everything you need to know about me and my skills.",
"Thanks for believing there is something else other than this page. Really that's all.",
"1", "2", "3", "4", "5", "6", "7", "8", "9", "10",
"11",
"Wow! You sure like a lot pressing a button, don't you?",
"Ah I see...it's because there's 'Enter' written on it",
"Okay you have a compulsive button pressing problem...Then I shift it.",
"Okay, stop or I'll turn off the lights",
//17
"Bye!", "Damn it!", "Still here?",
"Look behind you, a Three-Headed Monkey!", "Where?",
"If you didn't close your browser to go play Monkey Island after this, I might start questioning your tastes.",
"Ok, really the game is over.",
"Listen...I would like to keep playing with you but if I had more time I would have made a better site.",
"Oh okay, if you have nothing better to do then maybe you may spend some time to follow me on Twitter",
"You're back...There was no need to come back here.",
"Okay I feel we can start the first button-man friendship.",
"Did you know you've been on this page for more time than it would've taken to read my CV?",
"Okay seriously if you're still here then you are wasting energy you could've used to find what's invisible to your eyes",
"Let's start again!"
]
abutton.onclick = function () {
thereWasOnce[step++]();
}
var thereWasOnce = [];
thereWasOnce[1] = thereWasOnce[2] = thereWasOnce[3] = thereWasOnce[4] = thereWasOnce[5] = thereWasOnce[6] =
thereWasOnce[7] = thereWasOnce[8] = thereWasOnce[9] = thereWasOnce[10] = thereWasOnce[11] = thereWasOnce[12] =
thereWasOnce[13] = thereWasOnce[14] = thereWasOnce[15] = thereWasOnce[16] = thereWasOnce[17] = thereWasOnce[
22] = thereWasOnce[23] = thereWasOnce[24] = thereWasOnce[25] =
thereWasOnce[26] = thereWasOnce[27] = thereWasOnce[28] = thereWasOnce[30] = thereWasOnce[31] = thereWasOnce[
32] = thereWasOnce[33] = function (
point) {
// console.log('step:'+step,'pointOfStory'+pointOfStory);
changeWord(blaBlaBlaAboutMe[pointOfStory++]);
}
// thereWasOnce[0] = function () {
// document.getElementById('three').style.opacity = 1;
// }
thereWasOnce[17] = function () {
changeWord(blaBlaBlaAboutMe[pointOfStory++]);
abutton.textContent = "Don't touch me";
}
thereWasOnce[18] = function (x, y) {
changeWord(blaBlaBlaAboutMe[pointOfStory++]);
abutton.style.transition = '0.6s cubic-bezier(0.22, 0.61, 0.36, 1) all';
abutton.style.margin = 0;
abutton.style.transform = "translateX(calc(100vw - 100px))";
abutton.onmouseover = function () {
thereWasOnce[step++]();
}
}
thereWasOnce[19] = function () {
changeWord(blaBlaBlaAboutMe[pointOfStory++]);
abutton.style.transform = 'translateX(calc(40vw - 100px)) translateY(-200px) rotateZ(35deg)';
}
thereWasOnce[20] = function () {
changeWord(blaBlaBlaAboutMe[pointOfStory++]);
abutton.textContent = "You don't see me more.. ahhaha!";
abutton.style="";
document.getElementsByTagName('body')[0].className = "blackout";
document.getElementById('first').className = "swithLight";
// document.getElementsByTagName('h1')[0].style="font-family: Monoton";
document.getElementById('second').style = " animation: neon1 0.8s ease-in-out infinite alternate;"
abutton.onmouseover = undefined;
}
thereWasOnce[21] = function () {
changeWord(blaBlaBlaAboutMe[pointOfStory++]);
abutton.style = "";
abutton.textContent = "A button";
document.getElementsByTagName('body')[0].className = "";
document.getElementById('first').className = "";
// document.getElementsByTagName('h1')[0].style="font-family: Monoton";
document.getElementById('second').style = ""
}
function changeWord(string) {
aMessageForYou_old.className = "";
setTimeout(function () {
aMessageForYou_old.textContent = aMessageForYou_new.textContent;
aMessageForYou_new.textContent = string;
aMessageForYou_old.className = "fadeOutUp";
}, 10);
}
thereWasOnce[24] = function () {
changeWord(blaBlaBlaAboutMe[pointOfStory++]);
Notification.requestPermission(function (result) {
if (result === 'granted') {
navigator.serviceWorker.ready.then(function (registration) {
registration.showNotification('Here!!', {
body: 'Here!!',
icon: 'icon.jpeg',
image:'icon.jpeg',
vibrate: [1000,500,1000,500,1000],
tag: 'vibration-sample',
badge: 'icon.jpeg'
});
});
}
}).catch(function (){
alert('No monkey if you not allow notification');
});
}
thereWasOnce[29] = function () {
changeWord(blaBlaBlaAboutMe[pointOfStory++]);
window.open("https://twitter.com/avol_io", '_blank', 'location=yes');
}
thereWasOnce[34] = function () {
pointOfStory = 0;
step = 1;
}
setTimeout(function () {
alert('Uh! you are still here.. thank you!');
}, 1000 * 60 * 5);
</script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-110136901-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {dataLayer.push(arguments);}
gtag('js', new Date()); gtag('config', 'UA-110136901-1');
</script>
</body>
</html>