├── src ├── img │ ├── Vue.png │ ├── css.png │ ├── Figma.png │ ├── HTML5.png │ ├── Java.png │ ├── Github.png │ ├── Python.png │ ├── behance.png │ ├── github2.png │ ├── linkedin.png │ ├── WhatsappLogo.png │ ├── Capturar-removebg-preview 2.png │ ├── Code.svg │ ├── linkedin.svg │ ├── Figma.svg │ ├── github.svg │ ├── designer.svg │ ├── BezierCurve.svg │ ├── kanban.svg │ ├── behance.svg │ └── logo.svg └── style.css ├── README.md └── index.html /src/img/Vue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marianicacio/portfolio/HEAD/src/img/Vue.png -------------------------------------------------------------------------------- /src/img/css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marianicacio/portfolio/HEAD/src/img/css.png -------------------------------------------------------------------------------- /src/img/Figma.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marianicacio/portfolio/HEAD/src/img/Figma.png -------------------------------------------------------------------------------- /src/img/HTML5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marianicacio/portfolio/HEAD/src/img/HTML5.png -------------------------------------------------------------------------------- /src/img/Java.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marianicacio/portfolio/HEAD/src/img/Java.png -------------------------------------------------------------------------------- /src/img/Github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marianicacio/portfolio/HEAD/src/img/Github.png -------------------------------------------------------------------------------- /src/img/Python.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marianicacio/portfolio/HEAD/src/img/Python.png -------------------------------------------------------------------------------- /src/img/behance.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marianicacio/portfolio/HEAD/src/img/behance.png -------------------------------------------------------------------------------- /src/img/github2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marianicacio/portfolio/HEAD/src/img/github2.png -------------------------------------------------------------------------------- /src/img/linkedin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marianicacio/portfolio/HEAD/src/img/linkedin.png -------------------------------------------------------------------------------- /src/img/WhatsappLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marianicacio/portfolio/HEAD/src/img/WhatsappLogo.png -------------------------------------------------------------------------------- /src/img/Capturar-removebg-preview 2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marianicacio/portfolio/HEAD/src/img/Capturar-removebg-preview 2.png -------------------------------------------------------------------------------- /src/img/Code.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![image](https://github.com/marianicacio/portfolio/assets/156533948/ca2f5a38-b92f-453f-a4b8-fc06ea05dd5a) 2 | ![image](https://github.com/marianicacio/portfolio/assets/156533948/e2cb542b-6531-474c-8b52-0ef433129f69) 3 | ![image](https://github.com/marianicacio/portfolio/assets/156533948/ed07b603-8a7e-4dd2-9be9-bd79182525b9) 4 | ![image](https://github.com/marianicacio/portfolio/assets/156533948/4e6a9957-c62a-4664-b0b4-f0d63ab10c29) 5 | ![image](https://github.com/marianicacio/portfolio/assets/156533948/6396c5e2-6caf-463c-a8c7-ca8ed29b472e) 6 | ![image](https://github.com/marianicacio/portfolio/assets/156533948/ea7a2970-54fc-4943-9a09-85aff7a1f467) 7 | ![image](https://github.com/marianicacio/portfolio/assets/156533948/8a2d1dfc-e536-415c-b59d-f7eeedd1f041) 8 | ![image](https://github.com/marianicacio/portfolio/assets/156533948/67ed9d69-8ef0-43cc-9ed4-1f6273360e94) 9 | 10 | -------------------------------------------------------------------------------- /src/img/linkedin.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/img/Figma.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/img/github.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/img/designer.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/img/BezierCurve.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/img/kanban.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /src/img/behance.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 |

Home

16 |

Sobre mim

17 |

Portfólio

18 |

Skills

19 |

Carreira

20 |

Recomendações

21 |

Contato

22 |
23 | 24 |
25 |

👋 Saudações!

26 |

Maria Eduarda

27 |

Front-end developer · UI designer

28 | 29 | 30 | 31 |
32 | 33 |
34 |
35 | 36 |
37 |
38 |
39 | 40 |

5 meses como

41 |

Programadora

42 |
43 |
44 |
45 | 46 |

5 meses de

47 |

Trabalhos

48 |
49 |
50 |
51 | 52 |

5 meses como

53 |

Designer

54 |
55 |
56 | 57 |
58 | 59 | 60 |
61 |
62 |
63 |

Desenvolvedora

64 |

Dezenas de projetos e

65 |

Designer Freelancer e

66 |
67 |
68 |

Front-end

69 |

Experiências

70 |

UI · UX

71 |
72 |
73 |
74 |
75 |
76 |

🔗 Portfólio

77 |

Trabalhos e projetos

78 |
79 |
80 |
81 | 87 | 92 |
93 |
94 |
95 |

Cat Coffee!

96 |

Um projeto pessoal, realizado com html e css, onde fiz todo o desktop e mobile de maneira responsiva.

97 |
98 |
99 |
100 |
101 |

interior-design!

102 |

Um projeto feito em parceria com a Beatriz Veloso, realizado com html e css, onde fizemos todo o desktop 103 | e mobile de maneira responsiva.

104 |
105 |
106 |
107 |
108 |

VGB!

109 |

Um projeto feito em uma aula de adimistração na escola, onde eu realizei com html e css, onde fiz todo o 110 | desktop e mobile de maneira responsiva.

111 |
112 |
113 |
114 |
115 |

Velnic!

116 |

Um projeto feito em parceria com a Beatriz Veloso, realizado com html e css, onde fizemos todo o desktop 117 | e mobile de maneira responsiva.

118 |
119 |
120 |
121 |
122 |

🧑‍💻 Skills · Experiências

123 |

Tecnologias e habilidades

124 |
125 |
126 |
127 |
128 |

Techs que uso no dia a dia

129 |
130 | 131 | 132 | 133 | 134 | 135 |
136 |
137 |

Outras techs com que já realizei projetos

138 | 139 | 140 |
141 |
142 |
143 |
144 |
145 |

💼Carreira

146 |

Trajetória até aqui

147 |
148 |
149 |

Área profissional

150 |
151 |

Acadêmica

152 |

2019 · Atualmente

153 |
154 |
155 |
156 |
157 |
158 |

Inglês · Duolingo

159 |

Faço Duolingo todos os dias e tenho mais de 1 ano de ofensiva.

160 |
161 | + de 1 ano 162 |

Dezembro/2019 · Até hoje em dia

163 |
164 |
165 |
166 |
167 |
168 |

Cursando o Ensinio médio

169 |

Estou cursando o Segundo Ano Médio, na escola Agnus Dei, no Pq.América.

170 |
171 |

Atualmente

172 |
173 |
174 |
175 |
176 |
177 |

📬 Contatos

178 |

Vamos conversar!

179 |
180 | 181 |

Vamos conversar

182 |
183 |
184 |
185 |
186 |

E-mail:

187 |

mariaeduarda.nicacio2007@gmail.com

188 |
189 |
190 | 201 |
202 | 203 | 204 | -------------------------------------------------------------------------------- /src/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Aref+Ruqaa:wght@400;700&family=Questrial&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap'); 2 | 3 | * { 4 | padding: 0%; 5 | margin: 0%; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | background-color: #FCE7D2; 11 | } 12 | 13 | header { 14 | display: flex; 15 | margin-left: 120px; 16 | gap: 40px; 17 | background-color: #C0CEAA; 18 | width: 85%; 19 | height: 64px; 20 | border-radius: 16px; 21 | } 22 | 23 | header p { 24 | font-family: 'Raleway'; 25 | font-weight: 700; 26 | font-size: 18px; 27 | line-height: 21px; 28 | display: flex; 29 | margin-top: 20px; 30 | text-align: center; 31 | padding-left: 20px; 32 | color: #EB5874; 33 | } 34 | 35 | main h2 { 36 | font-family: 'Raleway'; 37 | font-size: 16px; 38 | color: #E0DBBD; 39 | background-color: #EB5874; 40 | border-radius: 16px; 41 | width: 140px; 42 | height: 45px; 43 | display: flex; 44 | margin-left: 90px; 45 | margin-top: 150px; 46 | align-items: center; 47 | text-align: center; 48 | } 49 | 50 | main h1 { 51 | color: #FD8086; 52 | font-family: 'Raleway'; 53 | font-style: bold; 54 | font-size: 48px; 55 | margin-left: 70px; 56 | margin-top: 20px; 57 | } 58 | 59 | main p { 60 | color: #FD8086; 61 | font-family: 'Raleway'; 62 | font-style: bold; 63 | font-size: 20px; 64 | margin-left: 70px; 65 | } 66 | 67 | main img { 68 | padding-left: 80px; 69 | padding-top: 20px; 70 | } 71 | 72 | .myImage { 73 | display: flex; 74 | margin-left: 600px; 75 | margin-top: -150px; 76 | background-color: #FD8086; 77 | width: 515px; 78 | height: 510px; 79 | border-radius: 400px; 80 | } 81 | 82 | .myImage img { 83 | margin-top: 30px; 84 | margin-left: -25px; 85 | } 86 | 87 | .figma { 88 | background-color: #C0CEAA; 89 | width: 71px; 90 | height: 71px; 91 | border-radius: 400px; 92 | margin-left: 820px; 93 | margin-top: -40px; 94 | position: absolute; 95 | } 96 | 97 | .figma img { 98 | margin-left: -63px; 99 | } 100 | 101 | .programmerBorder { 102 | border: #C0CEAA solid 1px; 103 | width: 246px; 104 | height: 200px; 105 | margin-top: 150px; 106 | margin-left: 200px; 107 | border-radius: 16px; 108 | } 109 | 110 | .programmer { 111 | background-color: #C0CEAA; 112 | box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); 113 | width: 40px; 114 | height: 40px; 115 | border-radius: 400px; 116 | margin-top: 30px; 117 | margin-left: 110px; 118 | } 119 | 120 | .programmer img { 121 | margin-top: -30px; 122 | margin-left: -110px; 123 | } 124 | 125 | .programmer p { 126 | width: 300px; 127 | display: flex; 128 | flex-direction: column; 129 | align-items: center; 130 | color: #EB5874; 131 | margin-left: -140px; 132 | font-family: 'Raleway'; 133 | font-style: normal; 134 | font-weight: 700; 135 | font-size: 16px; 136 | line-height: 19px; 137 | } 138 | 139 | .programmer h1 { 140 | font-family: 'Raleway'; 141 | font-style: normal; 142 | font-weight: 700; 143 | font-size: 32px; 144 | line-height: 38px; 145 | margin-left: -100px; 146 | color: #EB5874; 147 | } 148 | 149 | .works { 150 | background-color: #C0CEAA; 151 | border-radius: 16px; 152 | width: 246px; 153 | height: 200px; 154 | margin-left: 550px; 155 | margin-top: -200px; 156 | } 157 | 158 | .works p { 159 | width: 300px; 160 | display: flex; 161 | flex-direction: column; 162 | align-items: center; 163 | color: #EB5874; 164 | margin-left: -35px; 165 | font-family: 'Raleway'; 166 | font-style: normal; 167 | font-weight: 700; 168 | font-size: 16px; 169 | line-height: 19px; 170 | } 171 | 172 | .works h1 { 173 | font-family: 'Raleway'; 174 | font-style: normal; 175 | font-weight: 700; 176 | font-size: 32px; 177 | line-height: 38px; 178 | margin-left: 45px; 179 | color: #EB5874; 180 | } 181 | 182 | .works img { 183 | margin-top: 5px; 184 | margin-left: 10px; 185 | } 186 | 187 | .designer { 188 | background-color: #C0CEAA; 189 | box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); 190 | width: 40px; 191 | height: 40px; 192 | border-radius: 400px; 193 | margin-top: 30px; 194 | margin-left: 105px; 195 | } 196 | 197 | .designer img { 198 | margin-top: -30px; 199 | margin-left: -110px; 200 | } 201 | 202 | .designer p { 203 | width: 300px; 204 | display: flex; 205 | flex-direction: column; 206 | align-items: center; 207 | color: #EB5874; 208 | margin-left: -140px; 209 | font-family: 'Raleway'; 210 | font-style: normal; 211 | font-weight: 700; 212 | font-size: 16px; 213 | line-height: 19px; 214 | } 215 | 216 | .designer h1 { 217 | font-family: 'Raleway'; 218 | font-style: normal; 219 | font-weight: 700; 220 | font-size: 32px; 221 | line-height: 38px; 222 | margin-left: -50px; 223 | color: #EB5874; 224 | } 225 | 226 | main article { 227 | border: #C0CEAA solid 1px; 228 | width: 246px; 229 | height: 200px; 230 | margin-top: -200px; 231 | margin-left: 900px; 232 | border-radius: 16px; 233 | } 234 | 235 | .experience { 236 | background-color: #C0CEAA; 237 | width: 948px; 238 | height: 110px; 239 | display: flex; 240 | margin-left: 200px; 241 | margin-top: 30px; 242 | justify-content: center; 243 | border-radius: 16px; 244 | } 245 | 246 | .experience p { 247 | display: flex; 248 | justify-content: center; 249 | padding: 75px; 250 | margin-top: -40px; 251 | font-family: 'Raleway'; 252 | font-style: normal; 253 | font-weight: 700; 254 | font-size: 16px; 255 | line-height: 19px; 256 | color: #FD8086; 257 | } 258 | 259 | .experienceTwo { 260 | display: flex; 261 | margin-top: -60px; 262 | margin-left: 265px; 263 | gap: 120px; 264 | font-family: 'Raleway'; 265 | font-style: normal; 266 | font-weight: 700; 267 | font-size: 32px; 268 | line-height: 38px; 269 | color: #EB5874; 270 | } 271 | 272 | .worksAndProjects p { 273 | background-color: #C0CEAA; 274 | width: 144px; 275 | height: 45px; 276 | border-radius: 16px; 277 | display: flex; 278 | align-items: center; 279 | margin-left: 50px; 280 | margin-top: 250px; 281 | font-family: 'Raleway'; 282 | font-style: normal; 283 | font-weight: 700; 284 | font-size: 20px; 285 | line-height: 23px; 286 | color: #FD8086; 287 | } 288 | 289 | .worksAndProjects h1 { 290 | font-family: 'Raleway'; 291 | font-style: normal; 292 | font-weight: 800; 293 | font-size: 48px; 294 | line-height: 56px; 295 | color: #EB5874; 296 | margin-left: 50px; 297 | margin-top: 10px; 298 | } 299 | 300 | .design { 301 | border: #C0CEAA solid 1px; 302 | width: 184px; 303 | height: 60px; 304 | border-radius: 16px; 305 | margin-left: 710px; 306 | margin-top: -60px; 307 | background-color: transparent; 308 | } 309 | 310 | .designButton { 311 | display: flex; 312 | align-items: center; 313 | justify-content: center; 314 | gap: 15px; 315 | margin-top: 0px; 316 | margin-left: -5px; 317 | } 318 | 319 | .designButton img { 320 | background-color: #FD8086; 321 | border-radius: 20px; 322 | } 323 | 324 | .designButton p { 325 | font-family: 'Raleway'; 326 | font-style: normal; 327 | font-weight: 600; 328 | font-size: 20px; 329 | line-height: 23px; 330 | color: #FD8086; 331 | } 332 | 333 | .designButton-2 { 334 | background-color: #E0DBBD; 335 | width: 184px; 336 | height: 60px; 337 | border-radius: 16px; 338 | display: flex; 339 | align-items: center; 340 | justify-content: center; 341 | } 342 | 343 | .designButton-2 p { 344 | font-family: 'Raleway'; 345 | font-style: normal; 346 | font-weight: 600; 347 | font-size: 20px; 348 | line-height: 23px; 349 | color: #EB5874; 350 | } 351 | 352 | .design-2 { 353 | border: #C0CEAA solid 1px; 354 | width: 184px; 355 | height: 60px; 356 | border-radius: 16px; 357 | margin-top: -60px; 358 | background-color: transparent; 359 | } 360 | 361 | .designButton-3 { 362 | display: flex; 363 | align-items: center; 364 | justify-content: center; 365 | gap: 15px; 366 | margin-top: 0px; 367 | margin-left: -5px; 368 | } 369 | 370 | .designButton-3 img { 371 | background-color: #FD8086; 372 | border-radius: 20px; 373 | } 374 | 375 | .designButton-3 p { 376 | font-family: 'Raleway'; 377 | font-style: normal; 378 | font-weight: 600; 379 | font-size: 20px; 380 | line-height: 23px; 381 | color: #FD8086; 382 | } 383 | 384 | .projectsCatCoffee { 385 | display: flex; 386 | flex-direction: column; 387 | border: #C0CEAA solid 1px; 388 | width: 360px; 389 | height: 460px; 390 | border-radius: 16px; 391 | margin-left: 200px; 392 | margin-top: 50px; 393 | } 394 | 395 | .projectsCatCoffee h1 { 396 | font-family: 'Raleway'; 397 | font-style: normal; 398 | font-weight: 700; 399 | font-size: 20px; 400 | line-height: 23px; 401 | display: flex; 402 | align-items: center; 403 | margin-top: 40px; 404 | margin-left: 30px; 405 | color: #C0CEAA; 406 | } 407 | 408 | .projectsCatCoffee p { 409 | width: 299.78px; 410 | height: 100px; 411 | display: flex; 412 | justify-content: center; 413 | align-items: center; 414 | margin-left: 20px; 415 | font-family: 'Raleway'; 416 | font-style: normal; 417 | font-weight: 400; 418 | font-size: 14px; 419 | line-height: 16px; 420 | } 421 | 422 | .projectsInterionDesign { 423 | display: flex; 424 | flex-direction: column; 425 | border: #C0CEAA solid 1px; 426 | width: 360px; 427 | height: 460px; 428 | border-radius: 16px; 429 | margin-left: 670px; 430 | margin-top: -460px; 431 | } 432 | 433 | .projectsInterionDesign h1 { 434 | font-family: 'Raleway'; 435 | font-style: normal; 436 | font-weight: 700; 437 | font-size: 20px; 438 | line-height: 23px; 439 | display: flex; 440 | align-items: center; 441 | margin-top: 40px; 442 | margin-left: 30px; 443 | color: #C0CEAA; 444 | } 445 | 446 | .projectsInterionDesign p { 447 | width: 299.78px; 448 | height: 100px; 449 | display: flex; 450 | justify-content: center; 451 | align-items: center; 452 | margin-left: 20px; 453 | font-family: 'Raleway'; 454 | font-style: normal; 455 | font-weight: 400; 456 | font-size: 14px; 457 | line-height: 16px; 458 | } 459 | 460 | .projectsVGB { 461 | display: flex; 462 | flex-direction: column; 463 | border: #C0CEAA solid 1px; 464 | width: 360px; 465 | height: 460px; 466 | border-radius: 16px; 467 | margin-left: 200px; 468 | margin-top: 100px; 469 | } 470 | 471 | .projectsVGB h1 { 472 | font-family: 'Raleway'; 473 | font-style: normal; 474 | font-weight: 700; 475 | font-size: 20px; 476 | line-height: 23px; 477 | display: flex; 478 | align-items: center; 479 | margin-top: 40px; 480 | margin-left: 30px; 481 | color: #C0CEAA; 482 | } 483 | 484 | .projectsVGB p { 485 | width: 299.78px; 486 | height: 100px; 487 | display: flex; 488 | justify-content: center; 489 | align-items: center; 490 | margin-left: 20px; 491 | font-family: 'Raleway'; 492 | font-style: normal; 493 | font-weight: 400; 494 | font-size: 14px; 495 | line-height: 16px; 496 | } 497 | 498 | .projectsVelnic { 499 | display: flex; 500 | flex-direction: column; 501 | border: #C0CEAA solid 1px; 502 | width: 360px; 503 | height: 460px; 504 | border-radius: 16px; 505 | margin-left: 670px; 506 | margin-top: -460px; 507 | } 508 | 509 | .projectsVelnic h1 { 510 | font-family: 'Raleway'; 511 | font-style: normal; 512 | font-weight: 700; 513 | font-size: 20px; 514 | line-height: 23px; 515 | display: flex; 516 | align-items: center; 517 | margin-top: 40px; 518 | margin-left: 30px; 519 | color: #C0CEAA; 520 | } 521 | 522 | .projectsVelnic p { 523 | width: 299.78px; 524 | height: 100px; 525 | display: flex; 526 | justify-content: center; 527 | align-items: center; 528 | margin-left: 20px; 529 | font-family: 'Raleway'; 530 | font-style: normal; 531 | font-weight: 400; 532 | font-size: 14px; 533 | line-height: 16px; 534 | } 535 | 536 | .skills { 537 | display: flex; 538 | justify-content: center; 539 | align-items: center; 540 | flex-direction: column; 541 | margin-top: 120px; 542 | } 543 | 544 | .skills p { 545 | background-color: #C0CEAA; 546 | width: 234px; 547 | height: 45px; 548 | border-radius: 16px; 549 | display: flex; 550 | align-items: center; 551 | font-family: 'Raleway'; 552 | font-style: normal; 553 | font-weight: 700; 554 | font-size: 18px; 555 | line-height: 23px; 556 | color: #FD8086; 557 | } 558 | 559 | .skills h1 { 560 | font-family: 'Raleway'; 561 | font-style: normal; 562 | font-weight: 800; 563 | font-size: 48px; 564 | line-height: 56px; 565 | color: #EB5874; 566 | } 567 | 568 | .skills-image p { 569 | font-family: 'Raleway'; 570 | font-style: normal; 571 | font-weight: 400; 572 | font-size: 24px; 573 | line-height: 28px; 574 | display: flex; 575 | align-items: center; 576 | text-align: center; 577 | color: #EB5874; 578 | transform: rotate(-0.03deg); 579 | } 580 | 581 | .skills-image { 582 | display: flex; 583 | flex-direction: column; 584 | align-items: center; 585 | justify-content: center; 586 | margin-top: 100px; 587 | } 588 | 589 | .img { 590 | display: flex; 591 | gap: 30px; 592 | margin-top: 20px; 593 | } 594 | 595 | .others p { 596 | margin-top: 100px; 597 | } 598 | 599 | .others img { 600 | margin-top: 20px; 601 | margin-left: 100px; 602 | } 603 | 604 | .journey { 605 | display: flex; 606 | flex-direction: column; 607 | justify-content: center; 608 | align-items: center; 609 | margin-top: 200px; 610 | } 611 | 612 | .journey p { 613 | background-color: #C0CEAA; 614 | width: 130px; 615 | height: 45px; 616 | border-radius: 16px; 617 | display: flex; 618 | align-items: center; 619 | justify-content: center; 620 | font-family: 'Raleway'; 621 | font-style: normal; 622 | font-weight: 700; 623 | font-size: 20px; 624 | line-height: 23px; 625 | color: #FD8086; 626 | } 627 | 628 | .journey h1 { 629 | font-family: 'Raleway'; 630 | font-style: normal; 631 | font-weight: 800; 632 | font-size: 48px; 633 | line-height: 56px; 634 | text-align: center; 635 | color: #EB5874; 636 | margin-top: 20px; 637 | } 638 | 639 | .academic { 640 | display: flex; 641 | justify-content: center; 642 | align-items: center; 643 | margin-top: 100px; 644 | gap: 400px; 645 | } 646 | 647 | .academic h1 { 648 | font-family: 'Raleway'; 649 | font-style: normal; 650 | font-weight: 800; 651 | font-size: 32px; 652 | line-height: 38px; 653 | text-align: center; 654 | color: #EB5874; 655 | } 656 | 657 | .moment { 658 | display: flex; 659 | flex-direction: column; 660 | align-items: center; 661 | justify-content: center; 662 | } 663 | 664 | .moment p { 665 | font-family: 'Raleway'; 666 | font-style: normal; 667 | font-weight: 400; 668 | font-size: 24px; 669 | line-height: 28px; 670 | color: #090E16; 671 | transform: rotate(-0.03deg); 672 | } 673 | 674 | .moment h1 { 675 | margin-top: 30px; 676 | } 677 | 678 | .duolingo { 679 | border: #C0CEAA solid 1px; 680 | border-radius: 16px; 681 | width: 480px; 682 | height: 220px; 683 | margin-left: 420px; 684 | margin-top: 50px; 685 | } 686 | 687 | .duolingo h1 { 688 | font-family: 'Raleway'; 689 | font-style: normal; 690 | font-weight: 700; 691 | font-size: 20px; 692 | line-height: 23px; 693 | display: flex; 694 | align-items: center; 695 | margin-left: 40px; 696 | margin-top: 30px; 697 | color: #FD8086; 698 | transform: matrix(1, 0, 0, 1, 0, 0); 699 | } 700 | 701 | .duolingo p { 702 | font-family: 'Raleway'; 703 | width: 460px; 704 | font-style: normal; 705 | font-weight: 400; 706 | font-size: 16px; 707 | line-height: 19px; 708 | color: #090E16; 709 | transform: matrix(1, 0, 0, 1, 0, 0); 710 | margin-top: 20px; 711 | margin-left: 40px; 712 | } 713 | 714 | .data { 715 | display: flex; 716 | margin-top: 50px; 717 | margin-left: 40px; 718 | } 719 | 720 | .data strong { 721 | font-family: 'Raleway'; 722 | font-style: normal; 723 | width: 200px; 724 | font-size: 16px; 725 | line-height: 19px; 726 | margin-top: 20px; 727 | } 728 | 729 | .class { 730 | border: #C0CEAA solid 1px; 731 | border-radius: 16px; 732 | width: 480px; 733 | height: 220px; 734 | margin-left: 420px; 735 | margin-top: 50px; 736 | } 737 | 738 | .class h1 { 739 | font-family: 'Raleway'; 740 | font-style: normal; 741 | font-weight: 700; 742 | font-size: 20px; 743 | line-height: 23px; 744 | display: flex; 745 | align-items: center; 746 | margin-left: 40px; 747 | margin-top: 30px; 748 | color: #FD8086; 749 | transform: matrix(1, 0, 0, 1, 0, 0); 750 | } 751 | 752 | .class p { 753 | font-family: 'Raleway'; 754 | font-style: normal; 755 | width: 420px; 756 | font-weight: 400; 757 | font-size: 16px; 758 | line-height: 19px; 759 | color: #090E16; 760 | transform: matrix(1, 0, 0, 1, 0, 0); 761 | margin-top: 20px; 762 | margin-left: 40px; 763 | } 764 | 765 | .currently { 766 | margin-left: 300px; 767 | margin-top: 50px; 768 | } 769 | 770 | .contact { 771 | display: flex; 772 | flex-direction: column; 773 | align-items: center; 774 | justify-content: center; 775 | margin-top: 100px; 776 | } 777 | 778 | .contact p { 779 | background-color: #C0CEAA; 780 | width: 130px; 781 | height: 45px; 782 | border-radius: 16px; 783 | display: flex; 784 | align-items: center; 785 | justify-content: center; 786 | font-family: 'Raleway'; 787 | font-style: normal; 788 | font-weight: 700; 789 | font-size: 20px; 790 | line-height: 23px; 791 | color: #FD8086; 792 | } 793 | 794 | .contact h1 { 795 | font-family: 'Raleway'; 796 | font-style: normal; 797 | font-weight: 800; 798 | font-size: 48px; 799 | line-height: 56px; 800 | text-align: center; 801 | color: #EB5874; 802 | margin-top: 20px; 803 | } 804 | 805 | .talk { 806 | display: flex; 807 | margin-right: 500px; 808 | border: #E0DBBD solid 1px; 809 | width: 246px; 810 | border-radius: 16px; 811 | margin-top: 120px; 812 | } 813 | 814 | .talk img { 815 | margin-left: 20px; 816 | } 817 | 818 | .talk p { 819 | background-color: transparent; 820 | width: 300px; 821 | } 822 | 823 | .talk h1 { 824 | font-family: 'Raleway'; 825 | font-style: normal; 826 | font-weight: 800; 827 | font-size: 20px; 828 | line-height: 56px; 829 | text-align: center; 830 | color: #C0CEAA; 831 | } 832 | 833 | .e-mail { 834 | display: flex; 835 | flex-direction: column; 836 | align-items: end; 837 | margin-top: -40px; 838 | margin-right: 250px; 839 | margin-top: -45px; 840 | } 841 | 842 | .e-mail h1 { 843 | font-family: 'Raleway'; 844 | font-style: normal; 845 | font-weight: 700; 846 | font-size: 20px; 847 | line-height: 23px; 848 | margin-right: 150px; 849 | display: flex; 850 | flex-direction: column; 851 | justify-content: center; 852 | align-items: center; 853 | text-align: center; 854 | color: #C0CEAA; 855 | } 856 | 857 | .e-mail p { 858 | font-family: 'Raleway'; 859 | font-style: normal; 860 | font-weight: 400; 861 | font-size: 20px; 862 | line-height: 23px; 863 | display: flex; 864 | align-items: center; 865 | text-align: center; 866 | color: #EB5874; 867 | } 868 | 869 | footer { 870 | background-color: #FD8086; 871 | margin-top: 100px; 872 | width: 100%; 873 | height: 88px; 874 | } 875 | 876 | footer p { 877 | display: flex; 878 | flex-direction: column; 879 | justify-content: center; 880 | margin-left: 40px; 881 | padding-top: 35px; 882 | } 883 | 884 | .networks { 885 | display: flex; 886 | align-items: center; 887 | justify-content: center; 888 | margin-top: -25px; 889 | gap: 10px; 890 | } 891 | 892 | .logo { 893 | display: flex; 894 | justify-content: end; 895 | align-items: end; 896 | margin-left: 1150px; 897 | margin-top: -55px; 898 | background-color: #fe9d97; 899 | width: 65px; 900 | height: 65px; 901 | border-radius: 400px; 902 | } 903 | 904 | .align { 905 | display: flex; 906 | flex-direction: column; 907 | } 908 | 909 | @media screen and (max-width: 420px) { 910 | header { 911 | display: none; 912 | } 913 | 914 | 915 | main h2 { 916 | font-family: 'Raleway'; 917 | font-style: bold; 918 | font-size: 16px; 919 | background-color: #EB5874; 920 | border-radius: 16px; 921 | width: 140px; 922 | height: 45px; 923 | display: flex; 924 | flex-direction: column-reverse; 925 | margin-left: 90px; 926 | margin-top: 550px; 927 | align-items: center; 928 | text-align: center; 929 | } 930 | 931 | main { 932 | margin-top: 200px; 933 | } 934 | 935 | main h1 { 936 | color: #FD8086; 937 | font-family: 'Raleway'; 938 | display: flex; 939 | flex-direction: column-reverse; 940 | font-style: bold; 941 | font-size: 48px; 942 | margin-left: 70px; 943 | margin-top: 20px; 944 | } 945 | 946 | main p { 947 | color: #FD8086; 948 | font-family: 'Raleway'; 949 | font-style: bold; 950 | font-size: 20px; margin-left: 70px; 951 | } 952 | 953 | main img { 954 | padding-left: 80px; 955 | padding-top: 20px; 956 | } 957 | 958 | .myImage { 959 | display: flex; 960 | margin-left: 55px; 961 | margin-top: -750px; 962 | background-color: #FD8086; 963 | width: 315px; 964 | height: 310px; 965 | border-radius: 400px; 966 | } 967 | 968 | .myImage img { 969 | margin-top: 30px; 970 | margin-left: -38px; 971 | } 972 | 973 | .figma { 974 | margin-left: 180px; 975 | margin-top: -40px; 976 | } 977 | 978 | .programmerBorder { 979 | display: flex; 980 | flex-direction: column; 981 | margin-top: 550px; 982 | } 983 | 984 | .programmer { 985 | background-color: #C0CEAA; 986 | display: flex; 987 | flex-direction: column; 988 | box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); 989 | width: 40px; 990 | height: 40px; 991 | border-radius: 400px; 992 | margin-top: 30px; 993 | margin-left: 110px; 994 | } 995 | 996 | .programmer img { 997 | margin-top: -30px; 998 | margin-left: -110px; 999 | } 1000 | 1001 | .programmer p { 1002 | width: 300px; 1003 | display: flex; 1004 | flex-direction: column; 1005 | align-items: center; 1006 | color: #EB5874; 1007 | margin-left: -140px; 1008 | font-family: 'Raleway'; 1009 | font-style: normal; 1010 | font-weight: 700; 1011 | font-size: 16px; 1012 | line-height: 19px; 1013 | } 1014 | 1015 | .programmer h1 { 1016 | font-family: 'Raleway'; 1017 | font-style: normal; 1018 | font-weight: 700; 1019 | font-size: 32px; 1020 | line-height: 38px; 1021 | margin-left: -100px; 1022 | color: #EB5874; 1023 | } 1024 | 1025 | } -------------------------------------------------------------------------------- /src/img/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | --------------------------------------------------------------------------------