-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
177 lines (163 loc) · 9.01 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
<!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">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- Fuente del Proyecto Raleway -->
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@500&display=swap" rel="stylesheet">
<title>Portafolio de Gustavo</title>
</head>
<body>
<!-- Menú -->
<header class="cabecera">
<img class="cabecera__logo" src="assets/vector.png" alt="Logo">
<h1 class="cabecera__titulo">Gustavo Eguiazú</h1>
<a href="mailto:[email protected]">[email protected]</a>
<nav class="navegacion">
<ul class="navegacion__lista">
<li class="navegacion__elemento"><a href="#sobre-mi">Sobre mí</a></li>
<li class="navegacion__elemento"><a href="#habilidades">Habilidades</a></li>
<li class="navegacion__elemento"><a href="#aficiones">Aficiones</a></li>
<li class="navegacion__elemento"><a href="#formacion">Formación</a></li>
<li class="navegacion__elemento"><a href="#proyectos">Proyectos</a></li>
<li class="navegacion__elemento"><a href="#contacto">Contacto</a></li>
</ul>
</nav>
</header>
<!-- Sección de Presentación -->
<section class="presentacion">
<img class="presentacion__foto" src="assets/profile.jpg" alt="Foto de perfil">
<div class="presentacion__contenedor">
<h2 class="presentacion__titulo">Hola, mi nombre es Gustavo Eguiazú y construyo páginas web</h2>
<p class="presentacion__subtitulo">Soy formado en FrontEnd y actualmente estoy participando del proyecto Oracle ONE en Alura Latam.</p>
<ul class="redes">
<li class="redes__img"><a href="https://github.com/GustavoEguiazu">Github <img src="assets/arrow.png" alt="Flecha"></a></li>
<li class="redes__img"><a href="https://www.linkedin.com/in/gustavo-eguiazu-2a69472a">Linkedin <img src="assets/arrow.png" alt="Flecha"></a></li>
<li class="redes__img"><a href="https://www.instagram.com/gustavoeguiazu/">Instagram <img src="assets/arrow.png" alt="Flecha"></a></li>
<li class="redes__img"><a href="">Currículo <img src="assets/arrow.png" alt="Flecha"></a></li>
</ul>
</div>
</section>
<!-- Sección sobre mí -->
<section class="sobre-mi" id="sobre-mi">
<h2 class="sobre-mi__titulo">Sobre mí</h2>
<p class="sobre-mi__texto">Con mas de treinta años de experiencia en la adminiStración y solución de conflictos, hoy pongo toda ese bagaje de conocimientos al servicio del usuario a través de la generación de soluciones web orientadas al conflicto interpersonal.</p>
<p class="sobre-mi__texto">Primero como abogado, y luego como mediador tuve oportunidad de ayudar a los miembros de mi comunidad a acceder a soluciones buscadas. Desde este punto me propongo llevar mi pasión a la comunidad mundial brindando tanto a profesionales como usuarios finales la posibilidad de acceso a traves de servicios web de alta competencia y fiabilidad.</p>
<!-- Firma opcional -->
<img class="sobre-mi__firma" src="assets/signature.png" alt="Firma">
</section>
<!-- Sección de Habilidades -->
<section class="habilidades" id="habilidades">
<h2 class="habilidades__titulo">Habilidades</h2>
<ul class="habilidades__lista">
<li class="habilidades__elemento">
<img class="habilidades__icono" src="assets/htlm.png" alt="HTML">
<p class="habilidades__nombre">HTML 5</p>
</li>
<li class="habilidades__elemento">
<img class="habilidades__icono" src="assets/js_icon.png" alt="JavaScript">
<p class="habilidades__nombre">JavaScript</p>
</li>
<li class="habilidades__elemento">
<img class="habilidades__icono" src="assets/php_icon.png" alt="PHP">
<p class="habilidades__nombre">PHP</p>
</li>
<li class="habilidades__elemento">
<img class="habilidades__icono" src="assets/nodejs_icon.png" alt="Node.js">
<p class="habilidades__nombre">Node.js</p>
</li>
<li class="habilidades__elemento">
<img class="habilidades__icono" src="assets/react_icon.png" alt="React">
<p class="habilidades__nombre">React</p>
</li>
<li class="habilidades__elemento">
<img class="habilidades__icono" src="assets/css_icon.png" alt="CSS">
<p class="habilidades__nombre">CSS</p>
</li>
</ul>
</section>
<!-- Sección de Aficiones -->
<section class="aficiones" id="aficiones">
<h2 class="aficiones__titulo">Aficiones</h2>
<ul class="aficiones__lista">
<li class="aficiones__elemento">
<img class="aficiones__icono" src="assets/skate_icon.png" alt="Patinaje">
<p class="aficiones__nombre">RCC</p>
</li>
<li class="aficiones__elemento">
<img class="aficiones__icono" src="assets/guitar_icon.png" alt="Tocar bajo">
<p class="aficiones__nombre">Soy Rotario</p>
</li>
<li class="aficiones__elemento">
<img class="aficiones__icono" src="assets/headphones_icon.png" alt="Oír música">
<p class="aficiones__nombre">Oír música</p>
</li>
<li class="aficiones__elemento">
<img class="aficiones__icono" src="assets/tv_icon.png" alt="Ver series">
<p class="aficiones__nombre">Ver series</p>
</li>
<li class="aficiones__elemento">
<img class="aficiones__icono" src="assets/forkspoon_icon.png" alt="Cocinar">
<p class="aficiones__nombre">Cocinar</p>
</li>
<li class="aficiones__elemento">
<img class="aficiones__icono" src="assets/camera_icon.png" alt="Tomar fotos">
<p class="aficiones__nombre">Tomar fotos</p>
</li>
</ul>
</section>
<!-- Sección de Formación académica -->
<section class="formacion" id="formacion">
<h2 class="formacion__titulo">Formación académica</h2>
<ul class="formacion__lista">
<li class="formacion__elemento">
<img class="formacion__icono" src="assets/alura_logo.png" alt="Alura">
<div>
<h3 class="formacion__nombre">Programa ONE "Oracle Next Education"</h3>
<p class="formacion__detalle">En curso - Alura</p>
</div>
</ul>
</section>
<!-- Sección de Proyectos -->
<section class="proyectos" id="proyectos">
<h2 class="proyectos__titulo">Experiencia Profesional</h2>
<div class="proyectos__contenedor">
<img class="proyectos__icono" src="assets/decod_print.png" alt="Imágen de proyecto">
<div>
<h3 class="proyectos__nombre">Encriptador de Texto</h3>
<p class="proyectos__descripcion">Challenge Oracle</p>
</div>
</div>
<!-- Botones para Ver Repositorio y Ver Demo -->
<div class="proyectos__botones">
<a href="https://github.com/GustavoEguiazu/Encriptador-de-texto.git" class="proyectos__boton">Ver Repositorio</a>
<a href="https://github.com/GustavoEguiazu/Encriptador-de-texto" class="proyectos__boton">Ver Demo</a>
</div>
</section>
<!-- Sección de Contacto -->
<section class="contacto" id="contacto">
<h2 class="contacto__titulo">Contacto</h2>
<p class="contacto__descripcion">¿Quieres contactarme? Completa el siguiente formulario y me pondré en contacto contigo a la brevedad</p>
<form class="contacto__formulario">
<input class="contacto__campo" type="text" placeholder="Nombre">
<input class="contacto__campo" type="text" placeholder="Asunto">
<input class="contacto__campo" type="email" placeholder="Tu Correo Electrónico">
<input class="contacto__campo" type="email" placeholder="Correo Electrónico del Consultante">
<textarea class="contacto__campo contacto__campo--textarea" placeholder="Mensaje"></textarea>
<button class="contacto__boton" type="submit">Enviar</button>
</form>
</section>
<!-- Pie -->
<footer>
<p> <img src="/assets/e.png" alt="Creative Commons" class="footer">
Creative Commons 2024 - Desarrollado por Gustavo Eguiazú para el challenge de Alura Latam
<a href="https://www.linkedin.com/in/gustavo-eguiazu-2a69472a"> <img src="assets/f.png" alt="LinkedIn" class="e"></a>
</p>
</footer>
</body>
<script src="script.js"></script>
</html>