-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
216 lines (211 loc) · 8.84 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
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" href="images/perfil_red.png">
<link href="css/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Space+Mono" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>L. - IT Services</title>
<meta name="viewport" content="width=device-width,height=device-height, initial-scale=1">
<meta name="description" content="Luis Alfie Website">
<meta name="keywords" content="IT Audit, Cybersecurity, IT Risks, Development">
<meta name="author" content="L.">
<script>
function show(shown, hidden) {
document.getElementById(shown).style.display = 'block';
document.getElementById(hidden).style.display = 'none';
return false;
}
</script>
<script>
const changeLang = (languageCode) => {document.documentElement.setAttribute("lang", languageCode);};
</script>
<script>
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
const typingLetters = async(id, msj) => {
const deltaMs=300;
const msjLen=msj.length;
const el=document.getElementById(id);
const wrongLetter = Math.round(Math.random() * (msjLen - 2) + 1);
for(let i=0;i<msjLen;i++){
let text=el.textContent;
el.innerHTML = text + msj[i];
await sleep(Math.random() * deltaMs + 10);
if(i===wrongLetter){
el.innerHTML = text + String.fromCharCode(msj[i].charCodeAt(0) + 1);
await sleep(Math.random() * deltaMs + 10);
el.innerHTML = text + '\b';
await sleep(Math.random() * deltaMs + 10);
el.innerHTML = text + msj[i];
await sleep(Math.random() * deltaMs + 10);
}
}
}
</script>
</head>
<body>
<header>
</header>
<video id="videoBackground" class="video-overlay" loop muted>
</video>
<div id="loading">
<div id="loading-image" class="spinner-border text-primary" style="width: 4rem; height: 4rem;" role="status"></div>
<div style="width: 1px; height: 1px; visibility: hidden; overflow: hidden"></div>
</div>
<div id="Page1">
<div class="container-fluid px-0 container-Page1">
<div class="controllerPage1">
<div class=marg>
<div class="text-center">
<img class="profile-thumb" src="images/perfil.jpg" />
</div>
<div class="text-center nombre">
<span class="textNombre">- Luis Alfie -</span>
</div>
<div class="text-center roles">
<span class="en textRoles">IT Auditor, CISA, COBIT, ISO27k - Cybersecurity - C & Java Developer</span>
<span lang="es" class="es textRoles">IT Auditor, CISA, COBIT, ISO27k - Ciberseguridad - Desarrollador C & Java</span>
</div>
<div class="text-center">
<a target="_blank" href="https://www.linkedin.com/in/luis-alfie/"><img src="iconos/linkedin-16.png" /></a>
</div>
<div class="text-center">
<div>
<button onclick="changeLang('es')" type="button" class="btn en textVersion">[Versión en Español]</button>
</div>
<div>
<button onclick="changeLang('en')" type="button" class="btn es textVersion">[English Version]</button>
</div>
<div>
<button onclick="show('Page2','Page1');" type="button" class="btn en textBtnAboutMe">
<span id="findMoreAboutMe"></span>
</button>
</div>
<div>
<button onclick="show('Page2','Page1');" type="button" class="btn es textBtnAboutMe">[Más Sobre Mí]</button>
</div>
</div>
<div id="freeCookieToast" class="toast freeCookieToast" data-bs-delay="4000" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-body">(Site Free Of Cookies)</div>
</div>
</div>
</div>
</div>
</div>
<div id="Page2" style="display: none">
<div class="container-fluid px-0 container-Page2">
<div class="controllerPage2">
<div class="paddPage2">
<div class="text-center">
<p class="en txtAboutMe">About Me</p>
<p class="es txtAboutMe">Sobre Mí</p>
</div>
<p class="en textPage2">- Phone: +54 9 116 878 0211</p>
<p class="es textPage2">- Tel: +54 9 116 878 0211</p>
<p class="textPage2">- Email: luis.alfie@gmail.com</p>
<p align=justify>
<span class="en textPage2">Information systems professional, specialist in IT audit and security, with solid theoretical, technical and
methodological knowledge, and with more than 18 years of experience in the practice of the profession, including local and international
experiences in consultancies, banks and insurance companies, among others. </span>
<span class="es textPage2">Profesional de sistemas de
información, especialista en auditoría y seguridad de TI, con sólidos conocimientos teóricos, técnicos y metodológicos, y con más de 18 años de
experiencia en el ejercicio de la profesión, incluyendo experiencias locales e internacionales en consultoras, bancos y compañías aseguradoras,
entre otros. </span>
</p>
<p class="en txtMyService">Approach</p>
<p class="es txtMyService">Propuestas</p>
<p class="en textPage2">- IT & Business Processes Audits</p>
<p class="es textPage2">- Auditorías de IT & Procesos de Negocio</p>
<p class="en textPage2">- Cybersecurity assessments</p>
<p class="es textPage2">- Evaluaciones de Ciberseguridad</p>
<p class="en textPage2">- IT Risk Assessments</p>
<p class="es textPage2">- Evaluaciones de Riesgos de IT</p>
<p class="en textPage2">- Data Analytic</p>
<p class="es textPage2">- Análisis de Datos</p>
<p class="en textPage2">- C & Java Developments</p>
<p class="es textPage2">- Desarrollos en C & Java</p>
<div class="text-center">
<img alt="" src="images/qr_bw.png" height="75">
</div>
<div class="text-center">
<div>
<button onclick="window.open('https://github.com/lucho-a','_blank')" type="button" class="btn en textBtnGitContact">[Visit my GitHub]</button>
</div>
<div>
<button onclick="window.open('https://github.com/lucho-a','_blank')" type="button" class="btn es textBtnGitContact">[Mi GitHub]</button>
</div>
<div>
<button onclick="location.href='mailto:luis.alfie@gmail.com'" type="button" class="btn en textBtnGitContact">[Contact]</button>
</div>
<div>
<button onclick="location.href='mailto:luis.alfie@gmail.com'" type="button" class="btn es textBtnGitContact">[Contacto]</button>
</div>
<button onclick="show('Page1','Page2');" type="button" class="btn textBtnBack">[↩]</button>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<script>
window.onload = function() {
let interval = setInterval(bufferBgVideo, 500);
const vi = document.getElementById("videoBackground");
let cont=0;
function bufferBgVideo(){
vi.play();
if(vi.buffered.end(0)>=3.0 || cont>=5){
clearInterval(interval);
vi.play();
setTimeout(()=>{
document.getElementById("loading").style.visibility = "hidden";
typingLetters('findMoreAboutMe','[Find More About Me]');
var bsAlert = new bootstrap.Toast(document.getElementById('freeCookieToast'));
bsAlert.show();
},500);
}
cont++;
}
};
</script>
<script>
window.addEventListener('focus', function() {
var linkElementLnk = document.getElementById("videoBackground");
linkElementLnk.play();
});
window.addEventListener('blur', function() {
var linkElementLnk = document.getElementById("videoBackground");
linkElementLnk.play();
});
</script>
<script>
let details = navigator.userAgent;
let regexp = /android|Android|iphone|Iphone|kindle|Kindle|ipad/i;
let isMobileDevice = regexp.test(details);
const v = document.querySelector("#videoBackground");
if(isMobileDevice==false){
const el = document.querySelector("#Page1");
const windowWidth = window.innerWidth / 5;
const windowHeight = window.innerHeight / 5 ;
v.setAttribute("src", "videos/MatrixCode.mp4");
v.setAttribute("width", "120%");
v.setAttribute("height", "120%");
el.addEventListener("mousemove", (e) => {
const mouseX = e.clientX / windowWidth;
const mouseY = e.clientY / windowHeight;
v.style.transform = `translate3d(-${mouseX}%, -${mouseY}%, 0)`;
});
}else{
v.setAttribute("src", "videos/MatrixCode-Android.mp4");
v.setAttribute("width", "100%");
v.setAttribute("height", "100%");
}
v.load();
</script>
</body>
</html>