-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
251 lines (221 loc) · 10.1 KB
/
Copy pathindex.html
File metadata and controls
251 lines (221 loc) · 10.1 KB
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
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>Kátia Reis - Desenvolvedora Front End | UX & UI Design</title>
<meta name="description" content="Desenvolvedora Front End - JavaSript | UX/UI Designer entusiasta a Fullstack< - Localizado em São Paulo.">
<style>
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=IBM+Plex+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
</style>
<link rel="stylesheet" href="./css/style.css"> <!-- -->
</head>
<body>
<!-- Header -->
<header class="header">
<img src="./img/logo.svg" alt="Logo Katia Reis" width="213" height="48">
<nav>
<ul class="header-menu">
<li><a href="#projects">Projetos</a></li>
<li><a href="#education">Formação</a></li>
<li><a href="#contact">Contato</a></li>
<!-- <li><a href="#">Blog</a></li> -->
</ul>
</nav>
</header>
<!-- Main Content -->
<main>
<!-- Intro -->
<section class="intro-section">
<div class="container">
<h1 class="intro-title">Desenvolvedora<br> Front End &<br> entusiasta a<br> Fullstack</h1>
<div class="intro-txt">
<p>Localizada em São Paulo</p>
<p>Inglês fluente</p>
</div>
<blockquote class="quote">
<p>“ Code is like humor. <br>When you have to explain it, it’s bad.”</p>
<cite>- Cory House</cite>
</blockquote>
</div>
<div class="image-hero">
<!-- <img src="./img/image-hero-grande.jpg" alt="Foto de Kátia Reis" width="750" height="auto"> -->
</div>
</section>
<!-- About -->
<section aria-label="about" class="about">
<h2 class="about-title"><Sou/></h2>
<p class="about-txt">
Desenvolvedora Web com domínio em <strong>HTML5</strong>, <strong>CSS3</strong> e <strong>JavaScript</strong>.
<br><br>
Estilização de componentes com e sem uso de frameworks(Bootstrap) para o desenvolvimento de sites responsivos, profundos conhecimentos em CSS positioning, <strong>Flexbox</strong> e <strong>Grid layout</strong>. SEO e HTML semântico.
<br><br>
Versionamento com <strong>Git</strong> e <strong>Github</strong>.<br>
Iniciante em <strong>SQL Server</strong>.
<br><br>
<strong>Sprint design</strong> utilizando sólidos conceitos de <strong>UX</strong> e <strong>UI Design</strong>. Prototipação em Figma (wireframing e protótipo de alta fidelidade).
<br><br>
<span><strong>Inglês fluente</strong>.</span>
<br>
Conhecimentos intermediários de Francês e Espanhol
</p>
</section>
<!-- Projects -->
<section aria-label="projects" class="projects" id="projects">
<h2 class="projects-title">Principais Projetos<strong>++</strong></h2>
<p class="projects-txt">Estes são alguns dos projetos desenvolvidos durante o meu aprendizado em programação e tecnologias web.</p>
<div class="portfolio">
<div class="item-bg">
<span class="portfolio-year">2020</span>
<h3 class="portfolio-title"><a href="https://katiareis.github.io/origamid_WebDevCourse/" target="_blank">Bikcraft</a></h3>
<p class="portfolio-txt">
Desenvolvido utilizando HTML5, CSS3 e JavaScript puros. Responsivo com Media Queries e CSS positioning apenas. Projeto Final do Curso Web Design Completo da Origamid - Site Responsivo do Zero.
</p>
<ul class="portfolio-skills">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>UX Design & Usabilidade</li>
<li>Media Queries</li>
<li>Tipografia & Cores</li>
<li>SEO & Analytics</li>
<li>Wireframe & Prototipação</li>
<li>Código Semantico</li>
</ul>
</div>
<div class="item-bg">
<span class="portfolio-year">2021</span>
<h3 class="portfolio-title"><a href="https://katiareis.github.io/Ada_Lovelace_tribute_page/" target="_blank">Ada Lovelace</a></h3>
<p class="portfolio-txt">Página desenvolvida usando apenas CSS Flexbox e Media Queries para a responsividade. Curso de Web Design Responsivo da FreeCodeCamp.org - A Tribute Page.
</p>
<ul class="portfolio-skills">
<li>HTML</li>
<li>CSS Flexbox</li>
<li>Media Queries</li>
<li>UI Design</li>
<li>Tipografia & Cores</li>
<li>Wireframe & Prototipação</li>
<li>Código Semantico</li>
</ul>
</div>
<div class="item-bg">
<span class="portfolio-year">2021</span>
<h3 class="portfolio-title"><a href="https://katiareis.github.io/js-calculator/" target="_blank">JavaScript Calculator</a></h3>
<p class="portfolio-txt">Uma calculadora simples em JavaScript. Usei classes do CSS e querySelector () para chamar funções JS. Tentei manter o código bem simples, então usei o JavaScript puro básico e a função eval().
</p>
<ul class="portfolio-skills">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Prototipação</li>
<li>Vanilla Javascript</li>
</ul>
</div>
<div class="item-bg">
<span class="portfolio-year">2021</span>
<h3 class="portfolio-title"><a href="https://katiareis.github.io/css-flexbox-webpage/" target="_blank">FlexBlog</a></h3>
<p class="portfolio-txt">Uma página da web simples que aplica somente as propriedades do CSS Flexbox para um layout responsivo.
</p>
<ul class="portfolio-skills">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>UX Design & Usabilidade</li>
<li>UI Design</li>
<li>Tipografia & Cores</li>
<li>SEO & Analytics</li>
<li>Wireframe & Prototipação</li>
<li>Código Semantico</li>
</ul>
</div>
<h3 class="see-more">Veja meus projetos em andamento no <a href="https://github.com/katiareis" target="_blank">Github.</a></h3>
</div>
</section>
<!-- Education -->
<section class="education" id="education" aria-label="Education">
<div class="education-container">
<h2 class="education-title">Formação</h2>
<p class="education-txt">Minha mais recente experiência acadêmica é o curso de <strong>Eng. da Computação</strong> na Univesp. <br><br>Além disso, me mantenho sempre atualizada com <strong>cursos intensivos</strong> e <strong>bootcamps</strong> online.</p>
<ul class="education-list">
<li class="course">
<span class="course-type">Bacharel</span>
<h3 class="course-name">Engenharia da
Computação</h3>
<span class="institution-name">Univesp</span>
</li>
<li class="course">
<span class="course-type">Bootcamp</span>
<h3 class="course-name">Fullstack
Developer</h3>
<span class="institution-name">DIO</span>
</li>
<li class="course">
<span class="course-type">Curso Intensivo</span>
<h3 class="course-name">Web Design
Completo
UI / UX</h3>
<span class="institution-name">Origamid</span>
</li>
</ul>
</div>
<div class="skills-list">
<div class="programming-skills">
<h3>Habilidades</h3>
<ul>
<li>UX Design & UI Design <span>56</span></li>
<li>Responsive Web Design Certification <span>300h</span></li>
<li>JavaScript Algorithms and Data Structures <span>300h</span></li>
<li>Front End Development Libraries Certification <span>300h</span></li>
<li>Data Visualization Certification <span>300h</span></li>
<li>Back End Development and APIs Certification <span>300h</span></li>
<li>Python para Iniciantes <span>72h</span></li>
</ul>
</div>
<div class="languages-list">
<div class="languages">
<h3>Idiomas</h3>
<ul>
<li>Inglês <span>Fluente</span></li>
<li>Espanhol <span>Intermediário</span></li>
<li>Francês <span>Intermediário</span></li>
</ul>
</div>
</div>
</div>
</section>
</main>
<div class="img-decoration">
<!-- <img src="./img/image-deco.svg" alt="Imagem decorativa de formas geométricas e cores"> -->
</div>
<!-- Footer -->
<footer class="footer">
<section class="contact" id="contact">
<h3 class="contact-title">Contato</h3>
<p class="contact-txt">Estou disponível para novos projetos no momento. <br><br>Entre em contato comigo.</p>
<ul class="contact_list">
<li>
<a href="mailto:reis.katia.devgirl@gmail.com">reis.katia.devgirl@gmail.com</a>
</li>
<li>
<span><a href="tel:+55(11)930752218">+55 11 93075-2218</a></span>
</li>
</ul>
<ul class="social">
<li>
<a href="https://www.linkedin.com/in/katiareis/" target="_blank">LinkedIn Profile</a>
</li>
<li>
<a href="https://github.com/katiareis" target="_blank">Github</a>
</li>
<li>
<a href="https://twitter.com/KatiaRe98314126">Twitter</a>
</li>
</ul>
</section>
<section class="copy">
<p>Desenvolvido por Kátia Reis. Alguns direitos reservados. | Veja o código deste site em <a href="https://github.com/katiareis" target="_blank">Github.</a></p>
</section>
</footer>
</body>
</html>