├── .gitignore ├── imagenes ├── icono.png ├── proyecto1.png ├── proyecto2.png ├── proyecto3.png ├── proyecto4.png ├── proyecto5.png ├── proyecto6.png ├── readme │ ├── screenshot1.png │ ├── screenshot2.png │ ├── screenshot3.png │ ├── screenshot4.png │ └── screenshot5.png ├── imagenes-desarrolladores │ ├── desarrollador-ejemplo.svg │ ├── desarrollador1.svg │ ├── desarrollador4.svg │ └── desarrollador3.svg └── icono-blanco.svg ├── README.md ├── style.css └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /imagenes/icono.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/estefaniacn/portafolio-adaptable-bootstrap/HEAD/imagenes/icono.png -------------------------------------------------------------------------------- /imagenes/proyecto1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/estefaniacn/portafolio-adaptable-bootstrap/HEAD/imagenes/proyecto1.png -------------------------------------------------------------------------------- /imagenes/proyecto2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/estefaniacn/portafolio-adaptable-bootstrap/HEAD/imagenes/proyecto2.png -------------------------------------------------------------------------------- /imagenes/proyecto3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/estefaniacn/portafolio-adaptable-bootstrap/HEAD/imagenes/proyecto3.png -------------------------------------------------------------------------------- /imagenes/proyecto4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/estefaniacn/portafolio-adaptable-bootstrap/HEAD/imagenes/proyecto4.png -------------------------------------------------------------------------------- /imagenes/proyecto5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/estefaniacn/portafolio-adaptable-bootstrap/HEAD/imagenes/proyecto5.png -------------------------------------------------------------------------------- /imagenes/proyecto6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/estefaniacn/portafolio-adaptable-bootstrap/HEAD/imagenes/proyecto6.png -------------------------------------------------------------------------------- /imagenes/readme/screenshot1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/estefaniacn/portafolio-adaptable-bootstrap/HEAD/imagenes/readme/screenshot1.png -------------------------------------------------------------------------------- /imagenes/readme/screenshot2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/estefaniacn/portafolio-adaptable-bootstrap/HEAD/imagenes/readme/screenshot2.png -------------------------------------------------------------------------------- /imagenes/readme/screenshot3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/estefaniacn/portafolio-adaptable-bootstrap/HEAD/imagenes/readme/screenshot3.png -------------------------------------------------------------------------------- /imagenes/readme/screenshot4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/estefaniacn/portafolio-adaptable-bootstrap/HEAD/imagenes/readme/screenshot4.png -------------------------------------------------------------------------------- /imagenes/readme/screenshot5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/estefaniacn/portafolio-adaptable-bootstrap/HEAD/imagenes/readme/screenshot5.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Portafolio Adaptable (Responsive) con Bootstrap 5 2 | 3 | Este proyecto creado para un curso publicado en el canal de YouTube de freeCodeCamp es una página web adaptable a dispositivos de distintos tamaños (este tipo de sitio web se conoce en inglés como "responsive"). 4 | 5 | El propósito de esta página web es mostrar el portafolio de proyectos de un(a) desarrollador(a) y su experiencia. Incluye una descripción breve de su motivación, experiencia, proyectos, artículos publicados y formas de contacto. 6 | 7 | También incluye imágenes alternativas en la carpeta `imagenes` en caso de que se desee personalizar la imagen principal del desarrollador. 8 | 9 | ### Capturas de pantalla: 10 | 11 | Primera parte de la página web: 12 | 13 | ![Primera parte de la página web](imagenes/readme/screenshot1.png) 14 | 15 | Experiencia: 16 | 17 | ![Experiencia](imagenes/readme/screenshot2.png) 18 | 19 | Proyectos: 20 | 21 | ![Proyectos](imagenes/readme/screenshot3.png) 22 | 23 | Testimonios: 24 | 25 | ![Testimonios](imagenes/readme/screenshot4.png) 26 | 27 | Contacto: 28 | 29 | ![Contacto](imagenes/readme/screenshot5.png) 30 | 31 | ## Tecnologías 32 | 33 | Esta página web fue creada con: 34 | 35 | * HTML 36 | * CSS 37 | * JavaScript 38 | * Bootstrap 5 39 | 40 | Además, se incluyeron **Google Fonts** para personalizar la fuente y **Bootstrap icons** para incorporar íconos como flechas y logos de redes sociales populares. 41 | 42 | ## Español 43 | 44 | El texto de la página web está escrito en español, al igual que las clases y atributos personalizados. Las clases relacionadas con Bootstrap se incluyeron en inglés. 45 | 46 | ## Proyecto en vivo 47 | 48 | Puedes acceder al proyecto en vivo en: https://estefaniacn.github.io/portafolio-adaptable-bootstrap/ 49 | 50 | 51 | ## Curso en YouTube 52 | 53 | Para crear este proyecto paso a paso te invito a tomar el curso de forma gratuita en el canal de YouTube de [freeCodeCamp en Español](https://www.youtube.com/freecodecampespanol). -------------------------------------------------------------------------------- /imagenes/imagenes-desarrolladores/desarrollador-ejemplo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /imagenes/icono-blanco.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* Barra de navegacion */ 2 | 3 | .navbar { 4 | padding: 2rem; 5 | background-color: #f5f6f7; 6 | } 7 | 8 | .navbar-collapse { 9 | align-items: center; 10 | justify-content: space-between; 11 | } 12 | 13 | /* Estilos generales */ 14 | 15 | section { 16 | display: flex; 17 | flex-direction: column; 18 | align-items: center; 19 | justify-content: center; 20 | } 21 | 22 | h1 { 23 | font-size: 2.5rem; 24 | font-family: 'Rubik Dirt', cursive; 25 | } 26 | 27 | .seccion-oscura { 28 | color: white; 29 | background-color: #1b1b32; 30 | } 31 | 32 | .seccion-clara { 33 | color: black; 34 | background-color: white; 35 | } 36 | 37 | .seccion-titulo { 38 | font-size: 2rem; 39 | padding: 15px 0; 40 | font-family: 'Rubik Dirt', cursive; 41 | } 42 | 43 | .seccion-descripcion { 44 | font-size: 1.2rem; 45 | color: #584e4e; 46 | } 47 | 48 | .seccion-texto { 49 | font-size: 1.2rem; 50 | } 51 | 52 | .btn-info { 53 | font-size: 1.1rem; 54 | margin: 20px; 55 | } 56 | 57 | .texto-negro { 58 | color: black; 59 | } 60 | 61 | .texto-blanco { 62 | color: white; 63 | } 64 | 65 | /* Seccion Hero */ 66 | 67 | .hero { 68 | background-color: #f5f6f7; 69 | min-height: 450px; 70 | text-align: center; 71 | } 72 | 73 | .hero-principal { 74 | padding: 3rem; 75 | } 76 | 77 | .hero-imagen-desarrollador { 78 | width: 200px; 79 | height: 200px; 80 | margin: 20px; 81 | } 82 | 83 | .hero-principal h2 { 84 | font-size: 1.5rem; 85 | color: #615151; 86 | } 87 | 88 | /* Sobre mi */ 89 | 90 | .sobre-mi { 91 | height: 500px; 92 | padding: 10px; 93 | } 94 | 95 | .sobre-mi .contenedor { 96 | max-width: 600px; 97 | text-align: center; 98 | } 99 | 100 | /* Experiencia */ 101 | 102 | .experiencia { 103 | padding: 40px 40px 60px 40px; 104 | } 105 | 106 | .experiencia .columna { 107 | padding: 20px; 108 | border: 2px solid #8080804d; 109 | display: flex; 110 | flex-direction: column; 111 | align-items: center; 112 | justify-content: space-evenly; 113 | transition: all 0.2s ease-in; 114 | } 115 | 116 | .experiencia .columna:hover { 117 | color: white; 118 | background-color: #1b1b32; 119 | } 120 | 121 | .experiencia i { 122 | font-size: 2.5rem; 123 | color: #7ade30; 124 | background-color: #0a0a23; 125 | padding: 8px 19px; 126 | border-radius: 50%; 127 | } 128 | 129 | .experiencia-titulo { 130 | font-size: 25px; 131 | font-weight: bold; 132 | margin: 10px 0; 133 | } 134 | 135 | .badges-contenedor { 136 | font-size: 20px; 137 | font-weight: bold; 138 | margin: 10px 0; 139 | } 140 | 141 | .badge { 142 | margin: 5px; 143 | } 144 | 145 | /* Proyectos */ 146 | 147 | .proyectos-recientes { 148 | padding: 40px; 149 | } 150 | 151 | .proyectos-recientes img { 152 | height: 100%; 153 | width: 100%; 154 | padding: 10px; 155 | border-radius: 10px; 156 | display: block; 157 | transition: all 0.2s ease; 158 | } 159 | 160 | .proyectos-contenedor { 161 | padding-top: 60px; 162 | margin-bottom: 40px; 163 | } 164 | 165 | .overlay { 166 | transition: all 0.2s ease; 167 | opacity: 0; 168 | position: absolute; 169 | top: 50%; 170 | left: 50%; 171 | transform: translate(-50%, -50%); 172 | text-align: center; 173 | } 174 | 175 | .overlay p { 176 | font-size: 25px; 177 | font-weight: bold; 178 | margin-bottom: 0; 179 | } 180 | 181 | .proyecto { 182 | position: relative; 183 | } 184 | 185 | .proyecto:hover img { 186 | opacity: 0.2; 187 | } 188 | 189 | .proyecto:hover .overlay { 190 | opacity: 1; 191 | } 192 | 193 | .overlay .iconos-contenedor { 194 | display: flex; 195 | } 196 | 197 | .overlay i { 198 | color: black; 199 | font-size: 60px; 200 | margin: 10px; 201 | } 202 | 203 | /* Articulos */ 204 | 205 | .articulos { 206 | min-height: 500px; 207 | padding: 30px; 208 | } 209 | 210 | .articulos .card { 211 | width: 80%; 212 | max-width: 600px; 213 | margin: 20px; 214 | } 215 | 216 | .articulos .card-header { 217 | font-weight: bold; 218 | } 219 | 220 | /* Testimonios */ 221 | 222 | .testimonios { 223 | padding: 40px 40px 80px 40px; 224 | } 225 | 226 | .testimonios .carousel { 227 | max-width: 800px; 228 | } 229 | 230 | .carousel-item { 231 | height: 500px; 232 | } 233 | 234 | .carousel-item .container { 235 | width: 100%; 236 | height: 100%; 237 | display: flex; 238 | flex-direction: column; 239 | align-items: center; 240 | justify-content: center; 241 | } 242 | 243 | .testimonio-imagen { 244 | height: 150px; 245 | width: 150px; 246 | margin: 10px 10px 20px 10px; 247 | } 248 | 249 | .testimonio-texto { 250 | max-width: 70%; 251 | font-size: 20px; 252 | text-align: center; 253 | font-family: 'Share Tech Mono', monospace; 254 | } 255 | 256 | .testimonio-info { 257 | font-weight: bold; 258 | text-align: center; 259 | } 260 | 261 | .testimonio-info p { 262 | margin-bottom: 0; 263 | } 264 | 265 | .testimonio-footer .cliente { 266 | font-size: 1.2rem; 267 | } 268 | 269 | .testimonio-info .cargo { 270 | font-size: 0.9rem; 271 | color: #656060; 272 | } 273 | 274 | /* Contacto */ 275 | 276 | .contacto .container { 277 | max-width: 1100px; 278 | min-height: 200px; 279 | padding: 20px; 280 | } 281 | 282 | .contacto .rectangulo { 283 | margin-top: -5rem; 284 | background-color: rgb(13, 110, 253); 285 | border-radius: 10px; 286 | box-shadow: 0px 1px 4px 1px white; 287 | } 288 | 289 | .contacto .row { 290 | width: 100%; 291 | display: flex; 292 | align-items: center; 293 | } 294 | 295 | .contacto .descripcion { 296 | color: white; 297 | font-size: 1.2rem; 298 | } 299 | 300 | .contacto button { 301 | color: white; 302 | font-weight: bold; 303 | background-color: transparent; 304 | border: 2px solid white; 305 | padding: 1.25em 2em; 306 | margin: 10px; 307 | border-radius: 100px; 308 | transition: all 0.2s ease-in-out; 309 | } 310 | 311 | .contacto button:hover { 312 | background-color: white; 313 | color: black; 314 | } 315 | 316 | .contacto button i { 317 | color: white; 318 | font-size: 1.3rem; 319 | transition: all 0.2s ease-in-out; 320 | } 321 | 322 | .contacto button:hover i { 323 | color: black; 324 | } 325 | 326 | /* Pie de pagina (footer) */ 327 | 328 | footer { 329 | min-height: 500px; 330 | } 331 | 332 | .footer-logo { 333 | height: 80px; 334 | width: 80px; 335 | margin: 10px; 336 | } 337 | 338 | .footer-texto { 339 | font-size: 1.5rem; 340 | padding: 20px; 341 | margin-bottom: 30px; 342 | font-family: 'Quicksand', sans-serif; 343 | } 344 | 345 | .iconos-redes-sociales a { 346 | width: 50px; 347 | height: 50px; 348 | display: flex; 349 | align-items: center; 350 | justify-content: center; 351 | padding: 2px; 352 | margin: 10px; 353 | border: 2px solid white; 354 | border-radius: 50%; 355 | transition: all 0.2s ease-in; 356 | } 357 | 358 | .iconos-redes-sociales i { 359 | color: white; 360 | font-size: 1.5rem; 361 | transition: all 0.2s ease-in; 362 | } 363 | 364 | .iconos-redes-sociales a:hover { 365 | background-color: white; 366 | border: 2px solid rgb(13, 110, 253); 367 | } 368 | 369 | .iconos-redes-sociales a:hover i { 370 | color: black; 371 | } 372 | 373 | .derechos-de-autor { 374 | font-size: 15px; 375 | color: #aeaeae; 376 | padding: 20px; 377 | } 378 | 379 | /* Adaptable (Responsivo) */ 380 | 381 | @media screen and (max-width: 400px) { 382 | .overlay p { 383 | font-size: 18px; 384 | } 385 | 386 | .overlay i { 387 | font-size: 40px; 388 | } 389 | } 390 | 391 | @media screen and (max-width: 767px) { 392 | .navbar-brand { 393 | display: none; 394 | } 395 | } 396 | 397 | @media screen and (max-width: 800px) { 398 | .testimonio-imagen { 399 | height: 120px; 400 | width: 120px; 401 | } 402 | 403 | .testimonio-texto { 404 | font-size: 18px; 405 | } 406 | } 407 | 408 | @media screen and (min-width: 700px) { 409 | .hero-inferior-imagen { 410 | max-width: 600px; 411 | } 412 | } -------------------------------------------------------------------------------- /imagenes/imagenes-desarrolladores/desarrollador1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /imagenes/imagenes-desarrolladores/desarrollador4.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Jane Doe | Desarrollo Web Front-End 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 53 | 54 | 55 |
56 |
57 | Foto de Jane Doe 58 |

Hola, soy Jane Doe

59 |

Desarrollo sitios web y escribo artículos sobre programación.

60 |
61 |
62 | Monitor, laptop y logos de HTML, CSS, JavaScript y React. 63 |
64 |
65 | 66 | 67 |
68 |
69 |

Conoce a Jane Doe

70 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras laoreet, odio eget fringilla scelerisque, sem purus fringilla mauris, nec ultricies nisl nisl sit amet dolor. Donec et venenatis nunc, vel hendrerit ex. Vestibulum sapien ipsum, rutrum eget est et, ultricies sagittis urna. In non volutpat est. Vestibulum diam sapien, ultrices et euismod at, ultrices ut odio. Nullam in massa et elit ultrices suscipit. Proin lacinia leo ac posuere placerat.

71 |
72 |
73 | 74 | 75 |
76 |
77 |
78 | 79 |
80 | 81 |

Desarrollo Web

82 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras laoreet, odio eget fringilla scelerisque, sem purus fringilla mauris, nec ultricies nisl nisl sit amet dolor.

83 |
84 | HTML 85 | CSS 86 | JavaScript 87 | React 88 |
89 |
90 | 91 |
92 | 93 |

Artículos

94 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras laoreet, odio eget fringilla scelerisque, sem purus fringilla mauris, nec ultricies nisl nisl sit amet dolor.

95 |
96 | Escribir 97 | Editar 98 | Blogs 99 |
100 |
101 | 102 |
103 | 104 |

Estudiante

105 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras laoreet, odio eget fringilla scelerisque, sem purus fringilla mauris, nec ultricies nisl nisl sit amet dolor.

106 |
107 | freeCodeCamp 108 | Desarrollo Web 109 | Python 110 |
111 |
112 |
113 |
114 |
115 | 116 | 117 |
118 |

Mis proyectos recientes

119 |

Estos son algunos proyectos que he creado recientemente...

120 | 121 |
122 |
123 | 124 |
125 |
126 | Proyecto 1 127 |
128 |

Proyecto 1

129 |
130 | 131 | 132 | 133 | 134 | 135 | 136 |
137 |
138 |
139 |
140 | 141 |
142 |
143 | Proyecto 1 144 |
145 |

Proyecto 2

146 |
147 | 148 | 149 | 150 | 151 | 152 | 153 |
154 |
155 |
156 |
157 | 158 |
159 |
160 | Proyecto 1 161 |
162 |

Proyecto 3

163 |
164 | 165 | 166 | 167 | 168 | 169 | 170 |
171 |
172 |
173 |
174 | 175 |
176 |
177 | Proyecto 1 178 |
179 |

Proyecto 4

180 |
181 | 182 | 183 | 184 | 185 | 186 | 187 |
188 |
189 |
190 |
191 | 192 |
193 |
194 | Proyecto 1 195 |
196 |

Proyecto 5

197 |
198 | 199 | 200 | 201 | 202 | 203 | 204 |
205 |
206 |
207 |
208 | 209 |
210 |
211 | Proyecto 1 212 |
213 |

Proyecto 6

214 |
215 | 216 | 217 | 218 | 219 | 220 | 221 |
222 |
223 |
224 |
225 |
226 |
227 | 228 | 232 | 233 |
234 | 235 | 236 |
237 |

Artículos

238 |
239 |
240 | Más recientes 241 |
242 | 269 |
270 | 271 | 275 | 276 |
277 | 278 | 279 |
280 |

Testimonios

281 |

Estos son algunos testimonios de mis clientes...

282 | 283 | 284 | 326 |
327 | 328 | 329 |
330 |
331 |
332 |
333 |
334 | ¡Hablemos! 335 |
336 |
337 | Contáctame para iniciar tu proyecto de desarrollo web y haré que tu visión se vuelva realidad. 338 |
339 |
340 | 341 | 345 | 346 |
347 |
348 |
349 |
350 |
351 | 352 | 353 | 375 | 376 | 377 | 378 | -------------------------------------------------------------------------------- /imagenes/imagenes-desarrolladores/desarrollador3.svg: -------------------------------------------------------------------------------- 1 | --------------------------------------------------------------------------------