├── README.md ├── index.html ├── src └── img │ ├── Game 1 - Pokémon.png │ ├── Game 2 - FFVII.jpg │ ├── Game 3 - Mario.jpg │ ├── Game 4 - Kindom Hearts.jpg │ ├── Game 5 - Zelda.jpg │ ├── facebook.png │ ├── foto igti.jpg │ ├── github.png │ ├── linkedin.png │ └── wordpress.png └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # Portfolio with Flexbox and CSS Grid 2 | A simple portfolio developed with HTML and CSS focusing on Flexbox and CSS Grid 3 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Meu portfólio 9 | 10 | 11 | 17 |
18 |
19 |

Meu Portfólio

20 |
21 |
22 | 23 |
24 |

Sobre mim

25 |

Mudei para a área de tecnologia há 5 anos, onde encontrei sua paixão. Sou graduada em Negócios Internacionais e Sistema de Informação, especialista em Letras e Desenvolvimento Fullstack, e mestre em Relações Internacionais. Além de professora e desenvolvedora, sou mentora e palestrante em eventos de tecnologia. Atualmente sou desenvolvedora Front-end na Avenue Code, presto consultoria e tenho meu próprio projeto de mentoria para Desenvolvedores Júnior.

26 |
27 |
28 |
29 |

"Não sei, só sei que foi assim"

30 |

- Chicó, Auto da Compadecida

31 |
32 |
33 |
34 |

Experiência de Trabalho

35 |
36 |
37 | 38 |
39 |

Empresa 1

40 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

41 |
42 |
43 |
44 | 45 |
46 |

Empresa 2

47 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

48 |
49 |
50 |
51 | 52 |
53 |

Empresa 3

54 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

55 |
56 |
57 |
58 | 59 |
60 |

Empresa 4

61 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

62 |
63 |
64 |
65 | 66 |
67 |

Empresa 5

68 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

69 |
70 |
71 |
72 |
73 |

Habilidades

74 |

Programação

75 | 84 |

Softwares

85 | 91 |

Línguas Estrangeiras

92 | 98 |
99 |
100 |

Formação Acadêmica

101 |
102 |

Universidade 1

103 |

Nível: graduação

104 |

Curso: Sistema de Informação

105 |

Status: formado (2018)

106 |
107 |
108 |

Universidade 2

109 |

Nível: especialização

110 |

Curso: Desenvolvimento Web Fullstack

111 |

Status: em andamento (2021)

112 |
113 |
114 |

Universidade 3

115 |

Nível: pós-graduação

116 |

Curso: Abordagens Contemporâneas de Ensino de Inglês

117 |

Status: formado (2018)

118 |
119 |
120 |

Universidade 4

121 |

Nível: mestrado

122 |

Curso: Relações Internacionais

123 |

Status: formado (2016)

124 |
125 |
126 |
127 |

Atividades Complementares

128 |
129 |

Cursos Extracurriculares

130 |
    131 |
  • Bootcamp IGTI - Front-end
    • 132 |
  • Bootcamp DIO - JavaScrip Game Development
    • 133 |
  • Coursera - Fullstack
    • 134 |
  • Udacity - Accessibility
    • 135 |
136 |

Palestras e eventos

137 |
    138 |
  • Lego Scrum e Kanban Game
    • 139 |
  • IGTI Dev Summit
    • 140 |
  • Meetup Front-end BH
    • 141 |
142 |
143 |
144 |
145 |

Outras experiências

146 |

Voluntariado

147 | 152 |

Freelancer

153 | 157 |

Experiência no Exterior

158 | 163 |
164 |
165 |

Informações Adicionais

166 |

Certificações

167 | 173 |
174 |

Outras Informações

175 |
    176 |
  • Carteira de Habilitação: B
    • 177 |
178 |
179 |
180 |
181 | 196 | 197 | -------------------------------------------------------------------------------- /src/img/Game 1 - Pokémon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rafonha/portfolio-with-flexbox-and-css-grid/7ef54e334938c166eeb23ec6805576ff59399ddd/src/img/Game 1 - Pokémon.png -------------------------------------------------------------------------------- /src/img/Game 2 - FFVII.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rafonha/portfolio-with-flexbox-and-css-grid/7ef54e334938c166eeb23ec6805576ff59399ddd/src/img/Game 2 - FFVII.jpg -------------------------------------------------------------------------------- /src/img/Game 3 - Mario.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rafonha/portfolio-with-flexbox-and-css-grid/7ef54e334938c166eeb23ec6805576ff59399ddd/src/img/Game 3 - Mario.jpg -------------------------------------------------------------------------------- /src/img/Game 4 - Kindom Hearts.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rafonha/portfolio-with-flexbox-and-css-grid/7ef54e334938c166eeb23ec6805576ff59399ddd/src/img/Game 4 - Kindom Hearts.jpg -------------------------------------------------------------------------------- /src/img/Game 5 - Zelda.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rafonha/portfolio-with-flexbox-and-css-grid/7ef54e334938c166eeb23ec6805576ff59399ddd/src/img/Game 5 - Zelda.jpg -------------------------------------------------------------------------------- /src/img/facebook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rafonha/portfolio-with-flexbox-and-css-grid/7ef54e334938c166eeb23ec6805576ff59399ddd/src/img/facebook.png -------------------------------------------------------------------------------- /src/img/foto igti.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rafonha/portfolio-with-flexbox-and-css-grid/7ef54e334938c166eeb23ec6805576ff59399ddd/src/img/foto igti.jpg -------------------------------------------------------------------------------- /src/img/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rafonha/portfolio-with-flexbox-and-css-grid/7ef54e334938c166eeb23ec6805576ff59399ddd/src/img/github.png -------------------------------------------------------------------------------- /src/img/linkedin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rafonha/portfolio-with-flexbox-and-css-grid/7ef54e334938c166eeb23ec6805576ff59399ddd/src/img/linkedin.png -------------------------------------------------------------------------------- /src/img/wordpress.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rafonha/portfolio-with-flexbox-and-css-grid/7ef54e334938c166eeb23ec6805576ff59399ddd/src/img/wordpress.png -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: lightgray; 3 | margin: 0 4 | } 5 | 6 | a { 7 | text-decoration: none; 8 | } 9 | 10 | p { 11 | margin: 0; 12 | } 13 | 14 | h1 { 15 | text-align: center; 16 | } 17 | 18 | h3 { 19 | margin: 10px 0; 20 | } 21 | 22 | nav { 23 | min-height: 50px; 24 | background-color: rgb(175, 43, 207); 25 | padding: 0 20%; 26 | position: sticky; 27 | top: 0; 28 | display: flex; 29 | flex-flow: row wrap; 30 | justify-content: space-evenly; 31 | align-items: center; 32 | } 33 | 34 | nav > a { 35 | color: lightgray; 36 | } 37 | 38 | main { 39 | max-width: 1148px; 40 | margin: 0 auto; 41 | display: grid; 42 | grid-template-columns: (4, 1fr); 43 | grid-template-rows: auto; 44 | column-gap: 10px; 45 | row-gap: 10px; 46 | grid-template-areas: 47 | "main-title main-title main-title main-title" 48 | "about about about about" 49 | "quote quote quote quote" 50 | "job-experiences job-experiences job-experiences skills" 51 | "education other-activities other-experiences other-information" 52 | } 53 | 54 | #main-title { 55 | grid-area: main-title; 56 | } 57 | 58 | #profile-photo { 59 | width: 20vw; 60 | height: auto; 61 | max-height: 300px; 62 | } 63 | 64 | #about { 65 | grid-area: about; 66 | display: flex; 67 | flex-flow: row nowrap; 68 | } 69 | 70 | .resume { 71 | background-color: white; 72 | padding: 40px; 73 | } 74 | 75 | #quote { 76 | background-color: rgb(113, 0, 128); 77 | color: white; 78 | padding: 20px; 79 | text-align: center; 80 | grid-area: quote; 81 | } 82 | 83 | #job-experiences { 84 | background-color: rgb(236, 236, 236); 85 | padding: 20px 70px 20px 20px; 86 | grid-area: job-experiences; 87 | display: grid; 88 | column-gap: 10px; 89 | row-gap: 10px; 90 | grid-template-columns: 16.67% 16.67% 16.67% 16.67% 16.67% 16.67%; 91 | grid-template-rows: auto; 92 | grid-template-areas: 93 | "experiences-title experiences-title experiences-title experiences-title experiences-title experiences-title" 94 | "exp1 exp1 exp2 exp2 exp3 exp3" 95 | "exp4 exp4 exp4 exp5 exp5 exp5" 96 | } 97 | 98 | #experiences-title { 99 | grid-area: experiences-title; 100 | } 101 | 102 | .job-exp1 { 103 | border-radius: 20px; 104 | background-color: rgb(221, 175, 252); 105 | padding: 20px; 106 | text-align: center; 107 | display: flex; 108 | flex-flow: column wrap; 109 | align-items: center; 110 | } 111 | 112 | .job-exp2 { 113 | border-radius: 20px; 114 | background-color: rgb(221, 175, 252); 115 | padding: 20px; 116 | display: flex; 117 | flex-flow: row nowrap; 118 | align-items: center; 119 | } 120 | 121 | .job-description { 122 | padding-left: 20px; 123 | } 124 | 125 | #exp1 { 126 | grid-area: exp1; 127 | } 128 | 129 | #exp2 { 130 | grid-area: exp2; 131 | } 132 | 133 | #exp3 { 134 | grid-area: exp3; 135 | } 136 | 137 | #exp4 { 138 | grid-area: exp4; 139 | } 140 | 141 | #exp5 { 142 | grid-area: exp5; 143 | } 144 | 145 | #skills { 146 | grid-area: skills; 147 | background-color: white; 148 | padding: 20px; 149 | } 150 | 151 | .company-logo { 152 | max-width: 150px; 153 | max-height: 100px; 154 | } 155 | 156 | #education { 157 | grid-area: education; 158 | margin-bottom: 10px; 159 | padding: 10px; 160 | background-color: rgb(221, 175, 252); 161 | } 162 | 163 | #other-activities { 164 | grid-area: other-activities; 165 | margin-bottom: 10px; 166 | padding: 10px; 167 | background-color: white; 168 | } 169 | 170 | #other-experiences { 171 | grid-area: other-experiences; 172 | margin-bottom: 10px; 173 | padding: 10px; 174 | background-color: rgb(221, 175, 252); 175 | } 176 | 177 | #other-information { 178 | grid-area: other-information; 179 | margin-bottom: 10px; 180 | padding: 10px; 181 | background-color: white; 182 | } 183 | 184 | footer { 185 | background-color: #3e3e3e; 186 | color: lightgray; 187 | padding: 10px 11%; 188 | display: flex; 189 | flex-flow: row nowrap; 190 | justify-content: space-between; 191 | align-items: center; 192 | } 193 | 194 | .social-media { 195 | display: flex; 196 | flex-flow: row nowrap; 197 | } 198 | 199 | .social-icon { 200 | max-width: 40px; 201 | max-height: 40px; 202 | padding: 5px; 203 | } --------------------------------------------------------------------------------