-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
360 lines (302 loc) · 14.6 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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TP Portfolio UTN</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
<link rel="stylesheet" href="estilo.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;600;700&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="nav-bar">
<h1>ORTIZ</h1>
<nav class="menu-bar">
<a href="#inicio">INICIO</a>
<a href="#acercade">ACERCA DE</a>
<a href="#servicios">SERVICIOS</a>
<a href="#cv">CURRÍCULUM</a>
<a href="#portfolio">PORTFOLIO</a>
<a href="#contacto">CONTACTO</a>
</nav>
<nav class="social-bar">
<a class="fb-icon" href=""><i class="bi bi-facebook"></i></a>
<a class="tw-icon" href=""><i class="bi bi-twitter"></i></a>
<a class="in-icon" href=""><i class="bi bi-instagram"></i></a>
<a class="gh-icon" href="https://github.com/FireDust97?tab=repositories" target="_blank"><i
class="bi bi-github"></i></a>
</nav>
</div>
</header>
<main>
<div class="hero-container" id="inicio">
<div class="hero">
<div class="Dev-presentation">
<h1>Hola, soy Freelancer</h1>
<h2>Desarrollador</h2>
<p>Capacitado en Salta, AR.</p>
<div class="contact-button">
<button>
<a class="portfolio-button" href="#portfolio">Ver mis trabajos</a>
<i class="bi bi-arrow-right-circle"></i>
</button>
<a href="#contacto" class="specified-contact-bt" href="">Contáctame</a><i class="bi bi-arrow-down-circle"></i>
</div>
</div>
<div class="pfp-container">
<img src="profile-pic.png" alt="DevProfilePicture">
</div>
</div>
</div>
<div class="Aboutme-section1" id="acercade">
<div class="section-title">
<span>Sobre mí</span>
<h1>Conóceme más</h1>
</div>
<div class="aboutme-container">
<div class="aboutme-text">
<div class="hi-im">
<p>Hola soy </p><span>Lautaro Ortiz</span>
</div>
<div class="aboutme-presentation">
<p>Soy un diseñador y desarrollador de páginas web. Disfruto haciendo páginas simples, limpias y
dinámicas que cumplan con las necesidades tanto para quien me contrata como para el usuario
final. Destaco por ser puntual y por hacer buenos trabajos. </p>
</div>
</div>
<div class="xp-years">
<div class="xp-years-title">
<h1>2</h1>
</div>
<div class="xp-years-text">
<p>años de </p><span>experiencia</span>
</div>
</div>
</div>
<div class="contact-data">
<div>
<span>Nombre:</span><br>
<div class="aboutme-2ndline">
<p>Lautaro Ortiz</p>
</div>
</div>
<div>
<span>Email:</span><br>
<div class="aboutme-2ndline">
<a href="mailto:lautarortiz472@gmail.com">lautarortiz472@gmail.com</a>
</div>
</div>
<div>
<span>Fecha de nacimiento:</span>
<br>
<div class="aboutme-2ndline">
<p>17 de Julio, 2003</p>
</div>
</div>
<div>
<span>De:</span><br>
<div class="aboutme-2ndline">
<p>Salta, AR</p>
</div>
</div>
</div>
</div>
<div class="whatcanido-section2" id="servicios">
<div class="section-title">
<span>¿Qué es lo que hago?</span>
<h1>Cómo puedo ayudarte en tu próximo proyecto</h1>
</div>
<div class="projecthelp-container">
<div class="projecthelpdiv">
<i class="bi bi-alarm"></i>
<h1>Entrega en tiempo y forma</h1>
<p>Sólo tienes que establecer el tiempo límite para recibir tu página web. Me aseguraré de que la recibas a tiempo y funcionando según lo establecido.</p>
</div>
<div class="projecthelpdiv">
<i class="bi bi-display"></i>
<h1>Diseño Web</h1>
<p>Poseo conocimientos en CSS, ya sea si necesitas un menú fijo en la parte superior de tu página,
animaciones, inserciones u efectos específicos, puedo insertarlos sin problema.</p>
</div>
<div class="projecthelpdiv">
<i class="bi bi-hammer"></i>
<h1>Desarrollo Web</h1>
<p>La planificación es importante para perfeccionar una página web. Es por ello que sea que tengas
una página ya diseñada que quieras que haga, o prefieres que haga una desde cero, puedo asegurar
su funcionamiento si es necesario.</p>
</div>
<div class="projecthelpdiv">
<i class="bi bi-clipboard-pulse"></i>
<h1>Seguimiento de progreso</h1>
<p>Tu página se subirá constantemente a un repositorio exclusivo en mi perfil de Github a medida que se vayan produciendo cambios. De esa manera, podrás ver no sólo los cambios, sino una versión estática de la página gracias a GitHub Pages.</p>
</div>
<div class="projecthelpdiv">
<i class="bi bi-search"></i>
<h1>SEO</h1>
<p>El SEO es una técnica importante para facilitar a las personas encontrar tu página por palabras claves y demás elementos que se encuentren en tu página. Al desarrollar la misma, tendré un enfoque importante en esta técnica para impulsar aún más tu proyecto.</p>
</div>
<div class="projecthelpdiv">
<i class="bi bi-file-earmark-plus"></i>
<h1>Abierto a cambios</h1>
<p>¿Necesitas crear algún cambio a tu página mientras la desarrollaba? Sólo tienes que avisarme y me pondré manos a la obra sin ninguna complicación.</p>
</div>
</div>
</div>
<div class="whatcanido-section3" id="cv">
<div class="section-title">
<span>Currículum</span>
<h1>Un resumen de mi currículum</h1>
</div>
<div class="resume-container">
<div class="summary-resume-container">
<div class="resume-title">
<h1>Mi educación</h1>
</div>
<div class="resume-content">
<h1>Bachillerato en informática</h1>
<span>Colegio 5021 / 2019 - 2021</span>
<p>Educado en Base de datos, Photoshop, Office, Maquetación web, edición de audio y video y ciberseguridad básica.</p>
<hr>
<h1>Diplomatura en diseño web y multimedial</h1>
<span>Universidad Tecnológica Nacional / 2022 - 2023</span>
<p>Educado en HTML5, CSS, Git/GitHub y BootStrap.</p>
<hr>
<h1>Programador Full-Stack Jr.</h1>
<span>INTI - Instituto Nacional de Tecnología Industrial / 2022 - 2023</span>
<p>Educado en base de datos avanzada, Git/GitHub, Ruby, HTML, CSS, JavaScript y BootStrap</p>
<hr>
</div>
</div>
<div class="summary-resume-container">
<div class="resume-title">
<h1>Mi experiencia</h1>
</div>
<div class="resume-content">
<h1>Editor de video y Audio</h1>
<span>Por encargo / 2020 - actualidad</span>
<p>Llevo trabajando en métodos audiovisuales por encargo, generalmente para personas individuales o pequeños eventos.</p>
<hr>
</div>
</div>
</div>
<div class="skill-container">
<div class="resume-title">
<h1>Mis habilidades</h1>
</div>
<div class="skill-content">
<div class="skill-box">
<div class="skill-info">
<p>Diseño Web</p>
<p>60%</p>
</div>
<progress max="100" value="60" class="skill-bar"></progress>
</div>
<div class="skill-box">
<div class="skill-info">
<p>Ruby</p>
<p>22%</p>
</div>
<progress max="100" value="22" class="skill-bar"></progress>
</div>
<div class="skill-box">
<div class="skill-info">
<p>HTML/CSS</p>
<p>72%</p>
</div>
<progress max="100" value="72" class="skill-bar"></progress>
</div>
<div class="skill-box">
<div class="skill-info">
<p>MySQL</p>
<p>30%</p>
</div>
<progress max="100" value="30" class="skill-bar"></progress>
</div>
<div class="skill-box">
<div class="skill-info">
<p>JavaScript</p>
<p>19%</p>
</div>
<progress max="100" value="19" class="skill-bar"></progress>
</div>
<div class="skill-box">
<div class="skill-info">
<p>BootStrap</p>
<p>10%</p>
</div>
<progress max="100" value="10" class="skill-bar"></progress>
</div>
</div>
</div>
<div class="CVdownload">
<form method="get" action="CV.pdf">
<input type="submit" value="Descargar CV" />
</form>
</div>
</div>
<div class="whatcanido-section4" id="portfolio">
<div class="section-title">
<span>Portfolio</span>
<h1>Algunos de mis proyectos más recientes</h1>
</div>
<div class="img-container">
<img src="tower.jpg" alt="torre">
<img src="tower.jpg" alt="torre">
<img src="tower.jpg" alt="torre">
<img src="tower.jpg" alt="torre">
<img src="tower.jpg" alt="torre">
<img src="tower.jpg" alt="torre">
</div>
</div>
</main>
<footer>
<div class="footer-container" id="contacto">
<div class="contact-1">
<div class="contact1-title">
<h1>Contáctate conmigo</h1>
</div>
<div class="contact1-info">
<p>Disfruto de diseñar, o de llevar a la realidad diseños hechos con anterioridad a la web. Escriba la mayor cantidad de información posible, para que de esa manera podamos aprovechar al máximo nuestro primer encuentro.</p>
</div>
<div class="contact1-personalinfo">
<h1>Vivo en:</h1>
<p>Av. General Güemes 441, Salta, AR.</p>
<h1>Llámame:</h1>
<p>(+54) 387 513-1798</p>
</div>
<div class="contact1-socialbar">
<nav class="contact1-sociallist">
<a class="tw-icon-contact1" href=""><i class="bi bi-twitter"></i></a>
<a class="fb-icon-contact1" href=""><i class="bi bi-facebook"></i></a>
<a class="in-icon-contact1" href=""><i class="bi bi-instagram"></i></a>
<a class="gh-icon-contact1" href="https://github.com/FireDust97?tab=repositories" target="_blank"><i class="bi bi-github"></i></a>
</nav>
</div>
</div>
<div class="contact-2">
<div class="contact2-title">
<h1>Estimemos su proyecto</h1>
</div>
<div class="contact2-form">
<form action="https://">
<label>Indique su nombre:</label>
<input type="text" required>
<label>Su dirección de email:</label>
<input type="email" required>
<label>¿Cómo puedo ayudarte?:</label>
<textarea cols="60" rows="5" required></textarea>
<input class="form-send" type="submit" value="Enviar"/>
</form>
</div>
</div>
</div>
</footer>
</body>
</html>