-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
178 lines (175 loc) · 7.8 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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description"
content="Desarrollador web apasionado en constante aprendizaje, especializado en HTML, CSS, JavaScript, React, Node.js, MongoDB, y más. Explora mi portafolio y contáctame para colaboraciones.">
<meta name="keywords"
content="desarrollador web, programación, HTML, CSS, JavaScript, React, Node.js, MongoDB, portafolio, contacto">
<meta name="author" content="Pablo Madrid">
<meta name="robots" content="index, follow">
<meta property="og:title" content="Portafolio Pablo Madrid">
<meta property="og:description"
content="Desarrollador web apasionado en constante aprendizaje, especializado en HTML, CSS, JavaScript, React, Node.js, MongoDB, y más. Explora mi portafolio y contáctame para colaboraciones.">
<meta property="og:image" content="./assets/young-paul.jpg">
<meta property="og:url" content="https://pablomad75.github.io/Portafolio-PabloMad/">
<link rel="shortcut icon" href="./assets/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link rel="stylesheet" href="./css/styles.css">
<title>
Pablo Madrid - Desarrollador Web | Portafolio y Proyectos
</title>
</head>
<body>
<!-- Header -->
<header class="header">
<!-- Logo y nombre de la empresa -->
<section class="logo">
<img src="./assets/favicon.png" alt="Logo web Pablo Madrid">
<!-- <h1>PabloMad</h1> -->
</section>
<!-- Opciones de navegación -->
<nav class="nav">
<div class="menu-icon">☰</div>
<ul class="menu">
<li><a href="#inicio">Inicio</a></li>
<li><a href="#habilidades">Habilidades</a></li>
<li><a href="#portfolio">Portafolio</a></li>
<li><a href="#contact">Contacto</a></li>
</ul>
</nav>
</header>
<main>
<!-- sección Perfil -->
<section class="perfil" id="perfil">
<div id="descripcion">
<h1 class="title">¡Hola! Soy Pablo Madrid</h1>
<p class="parrafo-descripcion">Un apasionado desarrollador web en constante aprendizaje. Mi viaje en el mundo de
la programación comenzó con
una curiosidad incesante y un deseo profundo de crear soluciones impactantes en la web.</p>
<div class="btn-container">
<a class="btn btn-color-3 project-btn" href="./assets/docs/curriculumejemplo.pdf" target="_blank">Descarga CV</a>
</div>
</div>
<div id="imagen">
<img src="./assets/young-paul.jpg" alt="Tu Foto">
</div>
</section>
<!-- Sección de Habilidades y Conocimientos -->
<article id="habilidades">
<p class="section__text__p1">Manejo de tecnologías</p>
<h2 class="title">Habilidades</h2>
<div class="contact-info-upper-container">
<div class="contact-info-container">
<i class="fab fa-html5" title="HTML5"></i>
<i class="fab fa-css3" title="CSS3"></i>
<i class="fab fa-js" title="JavaScript"></i>
<i class="fab fa-envira" title="MongoDB"></i>
<i class="fab fa-node" title="Node.js"></i>
<i class="fab fa-react" title="React"></i>
<i class="fab fa-node-js" title="Express"></i>
<i class="fab fas fa-database" title="SQL"></i>
<i class="fab fa-php" title="PHP"></i>
</div>
</div>
</article>
<!-- SECCION PORTFOLIO -->
<section id="portfolio" class="portfolio">
<div class="contenido-seccion">
<p class="section__text__p1">Proyectos desarrollados</p>
<h2 class="title">Portafolio</h2>
<div class="galeria">
<div class="proyecto">
<img src="./assets/landing-CRUD-basico.jpg" alt="CRUD básico usando LocalStorage">
<div class="overlay">
<h3>CRUD básico</h3>
<p>Fotografía</p>
<div class="btn-container">
<a class="btn btn-color-2 project-btn" href="https://github.com/PabloMad75/001_CRUD_LocalStorage"
target="_blank">Github</a>
<a class="btn btn-color-2 project-btn" href="https://pablomad75.github.io/001_CRUD_LocalStorage/"
target="_blank">Demo</a>
</div>
</div>
<!-- </a> -->
</div>
<div class="proyecto">
<img src="./assets/landing-arcuch.jpg" alt="Landing page básico de una pastelería">
<div class="overlay">
<h3>Landing Page</h3>
<p>Fotografía</p>
<div class="btn-container">
<a class="btn btn-color-2 project-btn" href="https://github.com/PabloMad75/Proyecto_Landing_Arcuch"
target="_blank">Github</a>
<a class="btn btn-color-2 project-btn" href="https://pablomad75.github.io/Proyecto_Landing_Arcuch/"
target="_blank">Demo</a>
</div>
</div>
</div>
<div class="proyecto">
<a href="" target="_blank">
<img src="./assets/landing-api-financia.jpg" alt="API de inficadores financieros">
<div class="overlay">
<h3>API financiera</h3>
<p>Fotografía</p>
<div class="btn-container">
<a class="btn btn-color-2 project-btn" href="https://github.com/PabloMad75/001_DashBoard_API"
target="_blank">Github</a>
<a class="btn btn-color-2 project-btn" href="https://api-pablomad.netlify.app/"
target="_blank">Demo</a>
</div>
</div>
</a>
</div>
<div class="proyecto">
<img src="./assets/Restaurant-san-pedro.jpg" alt="Web de Restaurant San Pedro">
<div class="overlay">
<h3>Web Restaurant</h3>
<p>Fotografía</p>
<div class="btn-container">
<a class="btn btn-color-2 project-btn" href="https://github.com/PabloMad75/App-Restaurant"
target="_blank">Github</a>
<a class="btn btn-color-2 project-btn" href="https://restaurant-pablomad.netlify.app"
target="_blank">Demo</a>
</div>
</div>
</div>
<div class="proyecto">
<img src="./assets/Shop-Arcuch.jpg" alt="E-Commerce de patelería Arcuch">
<div class="overlay">
<h3>E-Commerce</h3>
<p>Fotografía</p>
<div class="btn-container">
<a class="btn btn-color-2 project-btn" href="https://github.com/PabloMad75/FrontTiendaPago"
target="_blank">Github</a>
<a class="btn btn-color-2 project-btn" href="https://arcuch.netlify.app/" target="_blank">Demo</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Sección Contacto -->
<section id="contact">
<p class="section__text__p1">Necesitas ayuda?</p>
<h2 class="title">Contáctame</h2>
<div class="contact-info-upper-container">
<div class="contact-info-container">
<img src="./assets/github.png" alt="Email icon" class="icon contact-icon email-icon" />
<p><a href="https://github.com/pablomad75" target="_blank">Github</a></p>
</div>
<div class="contact-info-container">
<img src="./assets/linkedin.png" alt="LinkedIn icon" class="icon contact-icon email-icon" />
<p><a href="https://www.linkedin.com" target="_blank">LinkedIn</a></p>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="footer">
<span>© Todos los derechos reservados | Pagina creada por: <strong>Pablo Madrid</strong>
</footer>
<script src="./js/script.js"></script>
</body>
</html>