├── README.md ├── .DS_Store ├── images ├── f8.JPG ├── hero.jpg ├── logo.png ├── favicon.png ├── platzi.png ├── platzi-conf.jpg ├── platzi-video-react-native.png ├── facebook.svg ├── envelope.svg ├── instagram.svg ├── twitter.svg └── github.svg ├── portfolio.png ├── portafolio └── index.html ├── css └── estilos.css └── index.html /README.md: -------------------------------------------------------------------------------- 1 | # desarrollo-web-portafolio 2 | Proyecto realizado 3 | -------------------------------------------------------------------------------- /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elyager-forks/desarrollo-web-portafolio/HEAD/.DS_Store -------------------------------------------------------------------------------- /images/f8.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elyager-forks/desarrollo-web-portafolio/HEAD/images/f8.JPG -------------------------------------------------------------------------------- /portfolio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elyager-forks/desarrollo-web-portafolio/HEAD/portfolio.png -------------------------------------------------------------------------------- /images/hero.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elyager-forks/desarrollo-web-portafolio/HEAD/images/hero.jpg -------------------------------------------------------------------------------- /images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elyager-forks/desarrollo-web-portafolio/HEAD/images/logo.png -------------------------------------------------------------------------------- /images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elyager-forks/desarrollo-web-portafolio/HEAD/images/favicon.png -------------------------------------------------------------------------------- /images/platzi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elyager-forks/desarrollo-web-portafolio/HEAD/images/platzi.png -------------------------------------------------------------------------------- /images/platzi-conf.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elyager-forks/desarrollo-web-portafolio/HEAD/images/platzi-conf.jpg -------------------------------------------------------------------------------- /images/platzi-video-react-native.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elyager-forks/desarrollo-web-portafolio/HEAD/images/platzi-video-react-native.png -------------------------------------------------------------------------------- /portafolio/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |

portafolio

11 | 12 | -------------------------------------------------------------------------------- /images/facebook.svg: -------------------------------------------------------------------------------- 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 | -------------------------------------------------------------------------------- /images/envelope.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 9 | 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 | -------------------------------------------------------------------------------- /images/instagram.svg: -------------------------------------------------------------------------------- 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 | -------------------------------------------------------------------------------- /images/twitter.svg: -------------------------------------------------------------------------------- 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 | -------------------------------------------------------------------------------- /images/github.svg: -------------------------------------------------------------------------------- 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 | -------------------------------------------------------------------------------- /css/estilos.css: -------------------------------------------------------------------------------- 1 | /* reglas 2 | selectores 3 | declaraciones 4 | propiedades 5 | valores */ 6 | 7 | 8 | /* seletor de etiqueta header - section - article - nav */ 9 | /* header { 10 | background: pink; 11 | color: red 12 | } */ 13 | 14 | /* selector descendente */ 15 | /* body header div nav ol li a */ 16 | 17 | /* selector de clase . */ 18 | 19 | /* .link */ 20 | 21 | /* selector de id # */ 22 | /* #portafolio */ 23 | 24 | 25 | 26 | /* gris oscuro = #1d252c */ 27 | /* gris claro = #626262 */ 28 | /* background gris = #1b2127 */ 29 | /* celeste = #026fff */ 30 | 31 | body { 32 | font-family: 'Source Sans Pro', sans-serif; 33 | margin: 0; 34 | } 35 | 36 | h1, 37 | h2, 38 | h3, 39 | h4, 40 | h5, 41 | h6{ 42 | font-family: 'Fjalla One', sans-serif; 43 | font-weight: normal; 44 | /* font-style: italic; */ 45 | } 46 | 47 | h1 { 48 | font-size: 40px; 49 | line-height: 1.5; 50 | letter-spacing: -.2px; 51 | color: white; 52 | margin: 0; 53 | /* margin: 100px 150px 70px 30px; */ 54 | /* text-transform: uppercase; */ 55 | /* text-decoration: dashed; */ 56 | } 57 | h1 strong { 58 | color: #026fff; 59 | } 60 | h2 { 61 | color: #026fff; 62 | text-transform: uppercase; 63 | font-family: 'Source Sans Pro', sans-serif; 64 | font-weight: bold; 65 | font-size: 24px; 66 | margin-bottom: 40px; 67 | } 68 | 69 | .hero { 70 | height: 300px; 71 | /* background-image: url('../images/hero.jpg'); */ 72 | background-color: #1b2127; 73 | /* background-size: 500px 300px; */ 74 | /* background-repeat: no-repeat; */ 75 | /* background-position-x: right; */ 76 | display: flex; 77 | align-items: center; 78 | justify-content: space-between; 79 | 80 | } 81 | 82 | .hero-image{ 83 | object-fit: cover; 84 | } 85 | 86 | 87 | .portfolio { 88 | background: #fafafa; 89 | padding: 20px; 90 | /* background: red; */ 91 | } 92 | 93 | .project { 94 | /* border-top: 10px solid red; 95 | border-right: 10px solid green; 96 | border-left: 10px solid orange; 97 | border-bottom: 10px solid pink; */ 98 | /* color: blue; */ 99 | /* border-top-color: red; 100 | border-top-width: 15px; 101 | border-top-style: solid; */ 102 | border: 1px solid gray; 103 | border-radius: 10px; 104 | /* border-top-left-radius: 50px; 105 | border-top-right-radius: 10px; 106 | border-bottom-left-radius: 10px; 107 | border-bottom-right-radius: 10px; */ 108 | /* margin: 10px; */ 109 | margin-bottom: 15px; 110 | /* margin-right 111 | margin-left 112 | margin-top */ 113 | padding: 20px; 114 | background: white; 115 | display: flex; 116 | align-items: center; 117 | justify-content: space-between; 118 | } 119 | .project-course, 120 | .project-date, 121 | .project-url { 122 | margin: 10px 0; 123 | } 124 | .project-description { 125 | font-size: 20px; 126 | } 127 | .project strong { 128 | font-family: 'Fjalla One', sans-serif; 129 | } 130 | /* .project-date { 131 | margin: 10px 0; 132 | } */ 133 | 134 | .project-title { 135 | font-size: 30px; 136 | margin-top: 0; 137 | margin-bottom: 10px; 138 | } 139 | 140 | 141 | .project-details { 142 | width: 500px; 143 | } 144 | 145 | .project-imageContainer { 146 | width: 500px; 147 | } 148 | 149 | .header { 150 | background-color: #1b2127; 151 | color: white; 152 | display: flex; 153 | height: 70px; 154 | align-items: center; 155 | justify-content: space-between; 156 | } 157 | 158 | ol, 159 | ul { 160 | margin: 0; 161 | padding: 0; 162 | list-style: none; 163 | } 164 | 165 | figure { 166 | margin: 0; 167 | } 168 | 169 | .header a { 170 | color: white; 171 | text-decoration: none; 172 | } 173 | .menu { 174 | height: inherit; 175 | } 176 | .header ol { 177 | display: flex; 178 | height: inherit; 179 | } 180 | .header ol li { 181 | height: inherit; 182 | } 183 | .header a { 184 | display: flex; 185 | align-items: center; 186 | height: inherit; 187 | padding: 0 10px; 188 | } 189 | 190 | .flexbox { 191 | display: flex; 192 | /* flex-wrap: nowrap; */ 193 | flex-wrap: wrap; 194 | /* flex-direction: column; */ 195 | } 196 | 197 | .box { 198 | width: 50px; 199 | height: 50px; 200 | margin: 5px; 201 | border: 1px solid red; 202 | 203 | flex-shrink: 0; 204 | } 205 | 206 | .footer { 207 | color: white; 208 | background-color: #1b2127; 209 | display: flex; 210 | align-items: center; 211 | justify-content: space-between; 212 | } 213 | 214 | .footer img { 215 | vertical-align: middle; 216 | } 217 | 218 | .footer a { 219 | color: white; 220 | } 221 | 222 | .event-list { 223 | display: flex; 224 | flex-wrap: wrap; 225 | } 226 | .event-list-title { 227 | margin-left: 20px; 228 | } 229 | .event { 230 | margin: 10px; 231 | width: 480px; 232 | flex-shrink: 0; 233 | border-radius: 10px; 234 | overflow: hidden; 235 | background: #f4fbff; 236 | } 237 | .event img { 238 | width: 480px; 239 | height: 200px; 240 | object-fit: cover; 241 | } 242 | .event-detail { 243 | margin: 20px 40px; 244 | margin-top: -40px; 245 | background-color: white; 246 | position: relative; 247 | padding: 20px; 248 | text-align: center; 249 | } 250 | .event-description { 251 | text-align: left; 252 | } 253 | 254 | .event-url { 255 | color: #056fff; 256 | border: 1px solid; 257 | padding: 5px 20px; 258 | text-decoration: none; 259 | border-radius: 5px; 260 | } 261 | 262 | .contact { 263 | background-color: #056fff; 264 | color: white; 265 | height: 150px; 266 | display: flex; 267 | align-items: center; 268 | justify-content: space-between; 269 | } 270 | 271 | .social { 272 | } 273 | 274 | .social-link { 275 | display: inline-block; 276 | width: 50px; 277 | height: 50px; 278 | margin: 0 10px; 279 | background-size: 50px 50px; 280 | } 281 | 282 | .social-link.twitter { 283 | background-image: url('../images/twitter.svg'); 284 | } 285 | .social-link.facebook { 286 | background-image: url('../images/facebook.svg'); 287 | } 288 | .social-link.github { 289 | background-image: url('../images/github.svg'); 290 | } 291 | .social-link.instagram { 292 | background-image: url('../images/instagram.svg'); 293 | } 294 | 295 | 296 | .form-email input { 297 | border-color: gray; 298 | border-style: solid; 299 | border-radius: 5px; 300 | padding: 10px 20px 10px 25px; 301 | background-image: url('../images/envelope.svg'); 302 | background-size: 15px 15px; 303 | background-repeat: no-repeat; 304 | background-position-y: center; 305 | background-position-x: 5px; 306 | } 307 | 308 | .form-email button { 309 | display: block; 310 | background: transparent; 311 | color: white; 312 | padding: 10px 0; 313 | border-radius: 5px; 314 | width: 100px; 315 | margin-top: 10px; 316 | } 317 | 318 | .form-email h3 { 319 | font-family: 'Source Sans Pro', sans-serif; 320 | } 321 | 322 | .container { 323 | /* border: 1px solid red; */ 324 | width: 1000px; 325 | margin: 0 auto; 326 | display: inherit; 327 | justify-content: inherit; 328 | align-items: inherit; 329 | height: inherit; 330 | flex-wrap: inherit; 331 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Leonidas Esteban 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 | 16 | 29 |
30 |
31 |
32 |
33 |

34 | Hola! Soy Leonidas Esteban
Desarrollador Javascript con
pasión por la enseñanza 35 |

36 | imagen principal del sitio 37 |
38 |
39 |
40 |
41 |

Portafolio (Proyectos Destacados)

42 |
43 |
44 |

Platzi Video

45 |
React Native / React
46 |

Fecha: 01/07/2018

47 |

Puedes verlo en: www.platzi.com/native

48 |

Platzi Video fue el resultado de 3 meses de trabajo 49 | para crear la mejor app para enseñar el funcionamiento 50 | de React y React Native. Desde crear un vista-detalle, hasta patrones avanzados de nevegación, este proyecto ha sido el ejemplo de futuros creadores de aplicaciones multiplataforma

51 |
52 |
53 | prouyecto del curso de React Native 54 |
55 |
56 |
57 |
58 |

Platzi Video

59 |
React Native / React
60 |

Fecha: 01/07/2018

61 |

Puedes verlo en: www.platzi.com/native

62 |

Platzi Video fue el resultado de 3 meses de trabajo 63 | para crear la mejor app para enseñar el funcionamiento 64 | de React y React Native. Desde crear un vista-detalle, hasta patrones avanzados de nevegación, este proyecto ha sido el ejemplo de futuros creadores de aplicaciones multiplataforma

65 |
66 |
67 | prouyecto del curso de React Native 68 |
69 |
70 |
71 | 72 |
73 |
74 |

Más sobre mi experiencia

75 |
76 |
77 |
78 |
79 |
80 | 81 |
82 |
83 |

PlatziConf México 2018

84 |

El evento más grande sobre gente que quiere aprender más de internet. En esté evento te comparto como tener una vida de constante aprendizaje.

85 | Ver Plática 86 |
87 |
88 |
89 |
90 | 91 |
92 |
93 |

PlatziConf México 2018

94 |

El evento más grande sobre gente que quiere aprender más de internet. En esté evento te comparto como tener una vida de constante aprendizaje.

95 | Ver Plática 96 |
97 |
98 |
99 |
100 | 101 |
102 |
103 |

PlatziConf México 2018

104 |

El evento más grande sobre gente que quiere aprender más de internet. En esté evento te comparto como tener una vida de constante aprendizaje.

105 | Ver Plática 106 |
107 |
108 |
109 |
110 | 111 |
112 |
113 |

PlatziConf México 2018

114 |

El evento más grande sobre gente que quiere aprender más de internet. En esté evento te comparto como tener una vida de constante aprendizaje.

115 | Ver Plática 116 |
117 |
118 |
119 |
120 |
121 |
122 | 127 | 133 |
134 |
135 | 147 | 148 | --------------------------------------------------------------------------------