-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
328 lines (257 loc) · 11.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
<!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">
<title>MI PORTAFOLIO</title>
<!-- ESTILOS -->
<link rel="stylesheet" href="./home-css/style.css">
<link rel="stylesheet" href="./aboutme-css/aboutme.css">
<link rel="stylesheet" href="./contact-css/contact.css">
<link rel="stylesheet" href="./portfolio-css/portfolio.css">
<link rel="stylesheet" href="./skills-css/style.css">
<!-- FUENTES -->
<script src="https://kit.fontawesome.com/e96ceec182.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css"
integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Russo+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Slackey&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Rancho&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Sarala&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Otomanopee+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Sulphur+Point:wght@300;400;700&display=swap" rel="stylesheet">
</head>
<body>
<header id="header">
<div class="menu"></div>
<nav>
<ul class="menulist">
<li><a href="#header" class="active">HOME</a></li>
<li><a href="#about">ACERCA DE MI</a></li>
<li><a href="#portfolio">PORTAFOLIO</a></li>
<li><a href="#skill">HABILIDADES</a></li>
<li><a href="#contact">CONTACTO</a></li>
</ul>
</nav>
</header>
<section>
<img src="./imagenes/nube1.png" alt="nube1" id="nube1">
<img src="./imagenes/fondo_transparente.png" alt="" id="transparente">
<img src="./imagenes/nube2.png" alt="nube2" id="nube2">
<!--<h2 id="slogan">¡Encuentra tu pasión!</h2> -->
<!--<a href="#" id="btn">Ahora</a> -->
<img src="./imagenes/fondo.png" alt="fondo" id="fondo">
<img src="./imagenes/viento.png" alt="viento" id="viento">
<img src="./imagenes/persona.png" alt="persona" id="persona">
<img src="./imagenes/persona2.png" alt="persona2" id="persona2">
</section>
<div class="wrapper">
<main class="main">
<div class="info-content">
<h1>Hola, soy<span> Pablo </span>Macedo</h1>
<p>Bienvenido a mi portafolio, en él podrás ver un poco de mi mundo, intereses, aficiones, hobbies, estudios y
demás.
Me considero una persona multidisciplinaria y multifascetica, espero disfrutes tu recorrido por mi web site.
</p>
<br>
<a download="CV_Pablo_Macedo" href="./cv/cv.pdf">
<button class="download-cv"> Descargar CV</button>
</a>
</div>
<img src="./imagenes/pexels-photo-1516680-removebg-preview.png" alt="Pablo Macedo picture" id="simpsons">
</main>
</div>
<div class="about" id="about">
<img id="imagenCambia" src="./imagenes/about.png" alt="Pablo Macedo Imagen">
<div class="about-info">
<h2>Acerca de mi</h2>
<div class="divider"></div>
<p>Nacido en la ciudad de La Plata en la provincia de Buenos Aires Argentina, me considero una persona en
constante evolución y crecimiento.
Constantemente me encuentro adquiriendo nuevos conocimientos y perfeccionando los ya obtenidos. Considero el
aprendizaje continuo algo escencial
en mi desarrollo personal, académico y profesional </p>
<p>Te invito a leer y profundizar un poco más acerca de mí en temas como hobbies, formación académica, desarrollo
profesional,
experiencia laboral, intereses, aptitudes, etc</p>
<button class="project-details download-cv">
<a href="./aboutme.html" style="text-decoration: none ;">
Leer más
</a>
</button>
</div>
</div>
<div class="sec">
<div class="skill-section" id="skill">
<h2 class="heading">Habilidades</h2>
<div class="skills-container">
<div class="skill-card">
<img src="./imagenes/html.png" class="skill-img" alt="">
<div class="skill-level">70%</div>
<h1 class="skill-name">HTML</h1>
<P class="skill-info">Mi preparación y desarrollo con HTML5 comenzó en 2022 con los cursos de Oracle/Alura,
obteniendo las correspondientes certificaciones y mejorando dia a dia con práctica en diversos proyectos.
</P>
</div>
<div class="skill-card">
<img src="./imagenes/css.png" class="skill-img" alt="">
<div class="skill-level">70%</div>
<h1 class="skill-name">CSS</h1>
<P class="skill-info">Mi preparación y desarrollo con CSS3 comenzó en 2022 con los cursos de Oracle/Alura,
obteniendo las correspondientes certificaciones y mejorando dia a dia con práctica en diversos proyectos.
</P>
</div>
<div class="skill-card">
<img src="./imagenes/js.png" class="skill-img" alt="">
<div class="skill-level">50%</div>
<h1 class="skill-name">JS</h1>
<P class="skill-info">En el caso de Java Script aunque del mismo modo mi preparación con este lenjuage arranco
en 2022, a priori tenía
conocimientos de otras áreas relacionadas con estudios previos como lógica, matemática discreta, álgebra de
boole, etc que me ayudaron y ayudan
día a día extrapolando esos conocimientos al lenjuage propiamente dicho</P>
</div>
<div class="skill-card">
<img src="./imagenes/nodejs.png" class="skill-img" alt="">
<div class="skill-level">20%</div>
<h1 class="skill-name">NODEJS</h1>
<P class="skill-info">Mi preparación y desarrollo con NODE comenzó recientemente con lo cual este en proceso
de aprendizaje y evolución</P>
</div>
<div class="skill-card">
<img src="./imagenes/reactjs.png" class="skill-img" alt="">
<div class="skill-level">90%</div>
<h1 class="skill-name">Office</h1>
<P class="skill-info">Tengo conocimientos del paquete office completo el cual utilizo a diario en mi trabajo,
especialmente
sobre todo Excel Avanzado (fórmulas, tablas dinámicas, Macros, etc). Muchas macros creadas por mí se
utilizan a diario en mi trabajo.
</P>
</div>
<div class="skill-card">
<img src="./imagenes/photoshop.png" class="skill-img" alt="">
<div class="skill-level">70%</div>
<h1 class="skill-name">PHOTOSHOP</h1>
<P class="skill-info">Aunque no poseo certificaciones sobre este programa, cuento con bastante experiencia en
éste por
desarrollos propios, prácticas y trabajos que he tenido durante estos años</P>
</div>
</div>
</div>
</div>
<div class="portfolio" id="portfolio">
<div class="portfolio-headings" id="portafolio-headings">
<h2>PORTAFOLIO</h2>
</div>
<div class="container">
<div class="card">
<div class="card__img">
</div>
<div class="card__tittle">
<h2 class="title__cards">Encriptador</h2>
</div>
<div class="project-details-content">
<p class="descripcion__portafolios">
Es un programa en el cual el usuario puede ingresar un texto y luego de presionar un boton el mismo resulta
encriptado. De la misma forma el programa permite desencriptar el texto retornando el mensaje original.
</p>
</div>
<div class="projects-links">
<a href="https://github.com/pablotrialp/challengeonecodificador3" target="_blank">
<i class="fa-brands fa-github"></i>
</a>
<a href="https://pablotrialp.github.io/challengeonecodificador3/" target="_blank">
<i class="fas fa-globe-americas"></i>
</a>
</div>
</div>
<div class="card">
<div class="card__img1">
</div>
<div class="card__tittle">
<h2 class="title__cards">Hangman</h2>
</div>
<div class="project-details-content">
<p class="descripcion__portafolios">
El famoso juego del ahorcado. En éste caso presento dos versiones del juego, una de terror con temática a
tono (personaje,palabras,música,etc)
y una version divertida con una temática completamente distinta.
</p>
</div>
<div class="projects-links">
<a href="https://github.com/pablotrialp/HANGMAN-GAME" target="_blank">
<i class="fa-brands fa-github"></i>
</a>
<a href="https://pablotrialp.github.io/HANGMAN-GAME/" target="_blank">
<i class="fas fa-globe-americas"></i>
</a>
</div>
</div>
<div class="card">
<div class="card__img2">
</div>
<div class="card__tittle">
<h2 class="title__cards">Puzzle</h2>
</div>
<div class="project-details-content">
<p class="descripcion__portafolios">
En este programa me propuse armar un puzzle con un dibujo realizado en base a una fotografia propia, se
arrastran las piezas y se posicionan
en su lugar. Al ganar la imagen obtenida es la fotografia original.
</p>
</div>
<div class="projects-links">
<a href="https://github.com/pablotrialp/puzzle1" target="_blank">
<i class="fa-brands fa-github"></i>
</a>
<a href="https://pablotrialp.github.io/puzzle1/" target="_blank">
<i class="fas fa-globe-americas"></i>
</a>
</div>
</div>
</div>
</div>
<div class="contact-section" id="contact">
<div class="contact-headings" id="contact-headings">
<h2>Ponte en contacto</h2>
</div>
<div class="container-contact">
<img src="./imagenes/img-opacity50.png" alt="imagen pablo macedo">
<div class="contact-form">
<h4>Send me a message..</h4>
<form action="https://formsubmit.co/03d0882eeea7aa809e89e229c0b428f2" method="POST" class="form">
<input type="text" placeholder="Name" name="name" required>
<input type="email" placeholder="Email" name="email" required>
<input type="hidden" name="_next" value="https://pablotrialp.github.io/PORTAFOLIO7/">
<textarea placeholder="Place your message here.." name="textarea" required>
</textarea>
<button type="submit" class="btn-submit">
Send message
</button>
</form>
</div>
</div>
</div>
<footer class="footer">
<div class="footer-content">
<h2>Pablo Macedo</h2>
<h5>Frontend Developer</h5>
<div class="social-network">
<a href="https://www.instagram.com/pabloo_macedo/" target="_blank">
<i class="fab fa-instagram"></i>
</a>
<a href="https://www.linkedin.com/in/pablonahuelmacedo/" target="_blank">
<i class="fab fa-linkedin-in"></i>
</a>
<a href="https://twitter.com/pablomacedo92" target="_blank">
<i class="fab fa-twitter"></i>
</a>
</div>
</div>
</footer>
<!-- SCRIPT -->
<script src="./parralax.js"></script>
</body>
</html>