-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
183 lines (177 loc) · 8.67 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
<!DOCTYPE html>
<html lang="en">
<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="styles.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css">
<title>Mi Portfolio</title>
</head>
<body>
<header>
<nav class="navbar">
<a href="#" class="logo">Mi Portfolio</a>
<ul class="menu">
<li class="menu-item">
<a href="#home">Home</a>
</li>
<li class="menu-item">
<a href="#about">Sobre mí</a>
</li>
<li class="menu-item">
<a href="#projects">Experiencia</a>
</li>
<li class="menu-item">
<a href="#technologies">Tecnologías</a>
</li>
<li class="menu-item">
<a href="#contact">Contacto</a>
</li>
</ul>
</nav>
</header>
<section id="home" class="content">
<div class="half-section">
<div class="avatar-container">
<img src="./assets/img_perfil.png" alt="">
<h3>"Bienvenidos!!</h3>
</div>
</div>
<div class="half-section text-section">
<div class="introduction">
<h1 class="title">Hola!, <br> Soy Alvaro Guzman Rengipo </h1>
<ul class="socials">
<li><a class="socials-icon" href="https://github.com/AlvaroGuzmanRengipo/portfolio-template"><i class="bi bi-github"></i></a></li>
<li><a class="socials-icon" href="https://www.linkedin.com/in/alvaro-guzman-796305128/"><i class="bi bi-linkedin"></i></a></li>
<li><a class="socials-icon" href="https://twitter.com/?lang=es"><i class="bi bi-twitter"></i></a></li>
<li><a class="socials-icon" href="https://www.facebook.com/alvaro.guzman.39566"><i class="bi bi-facebook"></i></a></li>
<li><a class="socials-icon" href="https://www.instagram.com/allguzman/"><i class="bi bi-instagram"></i></a></li>
</ul>
<p class="description">Estudiante de Ingenieria Informatica en la Facultad de Ingenieria UNJu. <br> Déjame contarte un poco de mí, sigue deslizando!</p>
</div>
</div>
</section>
<section id="about" class="content">
<aside class="half-section text-section">
<p>
"Hello there" y Bienvenidos a mi primer Portfolio. Mi nombre es Alvaro Guzman Rengipo y soy estudiante avanzado de la carrera de Ingenieria Informatica de la Facultad de Ingenieria UNJu.
La programacion siempre es algo que me llamo la atencion, pero a su vez no soy muy bueno en ello y me cuesta mucho. Tuve la oportunidad de poder realizar un par de cursos correspondientes a
la programacion pero creo que mi falta de constancia es lo que me hace no poder encariñarme o sentirme comodo con la programacion. Pero aun despues de todo esto la programacion me encanta y
me encanta todo lo que se puede hacer con ella.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus dolore esse a officiis autem sint harum quos rerum neque aut, totam itaque iure perferendis vitae reiciendis praesentium corporis saepe consectetur.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati veniam, deleniti rem, neque ipsum eos ullam distinctio, atque harum perferendis itaque ipsam labore voluptatibus. Maiores provident perspiciatis sunt mollitia impedit.
</p>
</aside>
<aside class="half-section title-section">
<h2>Un poco sobre mí</h2>
</aside>
</section>
<section id="projects" class="content">
<aside class="half-section title-section">
<h2>Experiencia en el campo</h2>
</aside>
<aside class="half-section text-section">
<ul class="project-list">
<li>
<h3>Proyecto 1 - Ejemplo</h3>
<p>
Técnico superior informático con más de 5 años de experiencia dando soporte a usuarios y empresas en relación a servicios online. Mi sistema de trabajo metódico me ha llevado a resolver incidentes de más de 30 usuarios de forma semanal,
al mismo tiempo que contribuía con el desarrollo de aplicaciones propias en colaboración con otros departamentos, cumpliendo con los plazos y objetivos establecidos en relación a la experiencia de usuario. </p>
<a class="project-link" href="https://github.com/AlvaroGuzmanRengipo/portfolio-template"><i class="bi bi-github"></i> Ver más</a>
</li>
<li>
<h3>Proyecto 2 - Ejemplo</h3>
<p>
Soporte microinformático y redes.
Extracción y procesamiento de bases de datos para la generación de informes de utilidad para diversos departamentos de la empresa.
Desarrollo de aplicaciones propias desarrolladas en C#.
Mantenimiento de servidores Windows Server y entorno Hyper-V.
</p>
<a class="project-link" href="https://github.com/AlvaroGuzmanRengipo/portfolio-template"><i class="bi bi-github"></i> Ver más</a>
</li>
</ul>
</aside>
</section>
<section id="technologies" class="content">
<aside class="half-section text-section">
<div class="tech-icons-container">
<ul class="tech-icon-list">
<li class="tech-icon-item">
<img height="120px" width="auto" src="./assets/tech-icons/icon-git.svg" alt="Git Icon">
<span>Git</span>
</li>
<li class="tech-icon-item">
<img height="120px" width="auto" src="./assets/tech-icons/icon-github.svg" alt="GitHub Icon">
<span>GitHub</span>
</li>
<li class="tech-icon-item-end">
<img height="120px" width="auto" src="./assets/tech-icons/icon-html.svg" alt="HTML Icon">
<span>HTML</span>
</li>
</ul>
<ul class="tech-icon-list">
<li class="tech-icon-item">
<img height="120px" width="auto" src="./assets/tech-icons/icon-css.svg" alt="CSS Icon">
<span>CSS</span>
</li>
<li class="tech-icon-item">
<img height="120px" width="auto" src="./assets/tech-icons/icon-js.svg" alt="JavaScript Icon">
<span>JavaScript</span>
</li>
<li class="tech-icon-item-end">
<img height="120px" width="auto" src="./assets/tech-icons/icon-react.svg" alt="ReactJS Icon">
<span>React</span>
</li>
</ul>
<ul class="tech-icon-list-end">
<li class="tech-icon-item">
<img height="120px" width="auto" src="./assets/tech-icons/icon-nodejs.svg" alt="NodeJS Icon">
<span>NodeJS</span>
</li>
<li class="tech-icon-item">
<img height="120px" width="auto" src="./assets/tech-icons/icon-postgresql.svg" alt="PostgreSQL Icon">
<span>PostgreSQL</span>
</li>
</ul>
</div>
</aside>
<aside class="half-section title-section">
<h2>Tecnologías que manejo</h2>
</aside>
</section>
<section id="contact" class="content">
<aside class="half-section title-section">
<h2>Envíame un mensaje y charlemos!</h2>
</aside>
<aside class="half-section text-section">
<form action="">
<label for="name">Nombre</label>
<input class="input-field" type="text" name="name" id="name">
<label for="email">Email</label>
<input class="input-field" type="email" name="email" id="email">
<label for="message">Mensaje</label>
<textarea class="input-field" name="message" id="message" cols="30" rows="10"></textarea>
<input class="btn-send-message" type="submit" value="Enviar">
</aside>
</section>
<footer>
<div class="footer-section-container">
<ul class="socials">
<li><a class="socials-icon" href="https://github.com/AlvaroGuzmanRengipo/portfolio-template"> <i class="bi bi-github"></i></a></li>
<li><a class="socials-icon" href="https://www.linkedin.com/in/alvaro-guzman-796305128/"><i class="bi bi-linkedin"></i></a></li>
<li><a class="socials-icon" href="https://twitter.com/?lang=es"><i class="bi bi-twitter"></i></a></li>
<li><a class="socials-icon" href="https://www.facebook.com/alvaro.guzman.39566"><i class="bi bi-facebook"></i></a></li>
<li><a class="socials-icon" href="https://www.instagram.com/allguzman/"><i class="bi bi-instagram"></i></a></li>
</ul>
</div>
<div class="footer-section-container">
<p>
© 2022 - <a class="footer-link" href="https://www.linkedin.com/in/alvaro-guzman-796305128/">Alvaro Guzman Rengipo</a>
</p>
</div>
</footer>
</body>
</html>