-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
241 lines (213 loc) · 13.1 KB
/
index.html
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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="Portfolio Imagens/coding_programming.ico" type="image/x-icon">
<title>Portfólio Thatiane Costa</title>
<!-- Slides CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />
<!-- Ícones -->
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
<!-- CSS Personalizado -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Design do Cabeçalho-->
<header class="header">
<a href="#" class="logo">Portfólio.</a>
<nav class="navbar">
<a href="#home" class="active">Ínicio</a>
<a href="#about">Sobre</a>
<a href="#services">Especialidades</a>
<a href="#portfolio">Projetos</a>
<a href="#contact">Contato</a>
</nav>
<div class="bx bx-moon" id="darkMode-icon"></div>
<div class="bx bx-menu" id="menu-icon"></div>
</header>
<!-- home section design -->
<section class="home" id="home">
<div class="home-content">
<h3>Olá, me chamo</h3>
<h1>Thatiane</h1>
<p>
Prazer em te conhecer, sou Desenvolvedora Júnior, apaixonada por tecnologia e inovação. Gosto de enfrentar desafios e resolver problemas através do código.
</p>
<p>Estou empolgada para contribuir e colaborar em projetos que façam a diferença.</p>
<div class="social-media">
<a href="https://www.linkedin.com/in/thatiane-costa" target="_blank"><i class='bx bxl-linkedin'></i></a>
<a href="https://www.github.com/ThatianeCosta" target="_blank"><i class='bx bxl-github'></i></a>
<a href="mailto:thatianecosta09@gmail.com"><i class='bx bxl-gmail'></i></a>
</div>
<a href="Portfolio Imagens/CurrículoThatianeCosta.pdf" class="btn" target="_blank">Download CV</a>
</div>
<div class="profession-container">
<div class="profession-box">
<div class="profession">
<i class='bx bx-code-alt'></i>
<h3>Dev Júnior</h3>
</div>
<div class="overlay"></div>
</div>
<div class="home-img">
<img src="Portfolio Imagens/AREmoji_inicio.gif" alt="image/Emoji">
</div>
</section>
<!-- Design do Sobre -->
<section class="about" id="about">
<div class="about-img">
<img src="Portfolio Imagens/AREmoji_meio.gif" alt="">
</div>
<div class="about-content">
<h2 class="heading">Sobre <span>Mim</span></h2>
<h3>
Olá, seja bem-vindo ao meu site! Sou a Thatiane Costa, tenho 27 anos,
formada em Gestão da Tecnologia da Informação. Ao longo da minha jornada acadêmica, iniciei diversos cursos de programação, onde adquiri conhecimentos fundamentais em
CSS e HTML, e também nas linguagens de programação como Python, JavaScript e Java.
</h3>
<p>
Esse é o meu site, onde compartilho meus projetos, detalhando a funcionalidade de cada um deles.
Aqui, você poderá explorar o que venho desenvolvendo e como essas criações podem ser aplicadas. Estou sempre em busca de novos desafios e oportunidades para expandir meu conhecimento, e contribuir com projetos inovadores.
</p>
<p>
Agradeço por visitar meu site e por se interessar em conhecer meu trabalho. Espero que os projetos que compartilhei sejam úteis e informativos para você.
Se você quiser acompanhar mais sobre meus projetos, me siga no GitHub, é la onde eu sempre posto.
Estou sempre aberta a comentários e sugestões, então sinta-se à vontade para entrar em contato comigo. Adoraria ouvir sua opinião!
</p>
<a href="https://www.linkedin.com/in/thatiane-costa" class="btn" target="_blank">Saiba mais</a>
</div>
</section>
<!-- services section design -->
<section class="services" id="services">
<h2 class="heading">Minhas <span>Especialidades</span></h2>
<div class="services-container">
<div class="services-box">
<i class='bx bx-terminal'></i>
<h3>Back-end</h3>
<p>Possuo conhecimentos em linguagens como Python e Java, gosto de resolver problemas e trabalhar em equipe para criar soluções eficientes. Disposta a aprender novas tecnologias e aprimorar minhas habilidades, em áreas como bancos de dados, APIs e arquitetura de software.</p>
</div>
<div class="services-box">
<i class='bx bx-code'></i>
<h3>Front-end</h3>
<p>Apaixonada por criar interfaces intuitivas e responsivas para aplicativos e sites funcionais. Transformando wireframes em experiências envolventes e agradáveis. Comprometida em melhorar constantemente o design, priorizando a usabilidade e a satisfação do usuário em cada projeto que desenvolvo.</p>
</div>
<div class="services-box">
<i class='bx bx-bar-chart-alt'></i>
<h3>Assistente de Dados</h3>
<p>Tenho conhecimentos em coleta, análise e ferramentas de visualização de dados, utilizo técnicas de analíticas para extrair insights que apoiam a equipe. Busco sempre aprimorar minhas habilidades, transformando dados em informações acionáveis para o sucesso da organização.</p>
</div>
</div>
</section>
<!-- portfolio section design -->
<section class="portfolio" id="portfolio">
<h2 class="heading"><span>Projetos</span> Recentes</h2>
<div class="portfolio-container">
<div class="portfolio-box">
<img src="Portfolio Imagens/calnov.png" alt="image/Calculadora-IMC">
<div class="portfolio-layer">
<h4>Calculadora IMC</h4>
<p>Projeto de uma Calculadora de Índice de Massa Corporal(IMC), utilizando a Linguagem de Programação Python e a biblioteca Tkinter.</p>
<a href="https://github.com/ThatianeCosta/Calculadora-IMC" target="_blank"><i class='bx bx-link-external'></i></a>
</div>
</div>
<div class="portfolio-box">
<img src="Portfolio Imagens/agendanov.png" alt="image/Formulario-de-Agendamento">
<div class="portfolio-layer">
<h4>Formulário de Agendamento</h4>
<p>Projeto de um Formulário de Agendamento de Consulta, utilizando a Linguagem de Programação Python, a biblioteca Tkinter e SQLite.</p>
<a href="https://github.com/ThatianeCosta/Formulario-de-Agendamento" target="_blank""><i class='bx bx-link-external'></i></a>
</div>
</div>
<div class="portfolio-box">
<img src="Portfolio Imagens/snakenov.png" alt="image/SnakeGame">
<div class="portfolio-layer">
<h4>Snake Game</h4>
<p>Projeto de um Snake Game, utilizando a linguagem de programação JavaScript, HTML e CSS. Aprimorando minhas habilidades em programação e design.</p>
<a href="https://github.com/ThatianeCosta/Snake-Game" target="_blank"><i class='bx bx-link-external'></i></a>
</div>
</div>
</div>
</section>
<!-- testimonial design -->
<div class="testimonial-container">
<h2 class="heading">Minhas <span>Habilidades</span></h2>
<div class="testimonial-wrapper">
<div class="testimonial-box mySwiper">
<div class="testimonial-content swiper-wrapper">
<div class="testimonial-slide swiper-slide">
<img src="Portfolio Imagens/python.png" alt="image/Python">
<h3>Python</h3>
<p>Possuo conhecimentos básicos em Python, incluindo a compreensão de conceitos fundamentais como variáveis, estruturas de controles e funções. Consigo escrever scripts simples e resolver problemas básicos, além de estar me familiarizando com algumas bibliotecas padrão.
Estou fazendo uma exploração em projetos pequenos, para explorar bibliotecas e ferramentas que ampliem minha capacidade na linguagem.
</p>
</div>
<div class="testimonial-slide swiper-slide">
<img src="Portfolio Imagens/html5.png" alt="image/HTML5">
<h3>HTML</h3>
<p>Com o HTML, tenho habilidade em criar e estruturar páginas web simples. Tenho familiaridade com os principais elementos e tags, como cabeçalho, parágrafos, links e imagens.
Posso construir layouts básicos, além de ter uma compreensão inicial de como o HTML se integra com o CSS para estilização.
</p>
</div>
<div class="testimonial-slide swiper-slide">
<img src="Portfolio Imagens/CSS3.png" alt="image/CSS">
<h3>CSS</h3>
<p>Em CSS, sei estilizar páginas web de maneira básica. Tenho um bom entendimento dos conceitos essenciais como seletores, propriedades e valores, o que me permite aplicar cores, fontes e margens de forma eficaz.
Estou me dedicando a aprender técnicas de design responsivo, para melhorar minhas habilidades na área, além de ter familiaridade com o uso de classes e IDs para organizar estilos.
</p>
</div>
<div class="testimonial-slide swiper-slide">
<img src="Portfolio Imagens/JavaScript.png" alt="image/JavaScript">
<h3>JavaScript</h3>
<p>Com o meu conhecimento inicial em JavaScript, sou capaz de adicionar interatividade e dinamismo a página web. Entendo os princípios funndamentais da linguagem, como variáveis, operadores e tipos de dados. Também estou aprendendo sobre estruturas de controle como loops e condicionais.
Além disso, tenho noção inicial de manipulação do DOM, o que me permite interagir com elementos de uma página web e alterá-los dinamicamente.
</p>
</div>
<div class="testimonial-slide swiper-slide">
<img src="Portfolio Imagens/Java.png" alt="image/Java">
<h3>Java</h3>
<p>Meu conhecimento básico em Java, me capacita a entender a sintaxe essencial da linguagem, permitindo-me trabalhar com variáveis, tipos de dados, operadores e estruturas de controle como if, switch e loops.
Além disso, tenho noções de orientação a objetos, o que me tornar familiarizado com conceitos como classes e métodos, permitindo-me desenvolver programas simples e resolver problemas inicias na linguagem.
</p>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<!-- contact section design -->
<section class="contact" id="contact">
<h2 class="heading">Converse <span>Comigo</span></h2>
<form action="#">
<div class="input-box">
<input type="text" placeholder="Nome Completo">
<input type="email" placeholder="Seu melhor Email">
</div>
<div class="input-box">
<input type="number" placeholder="Número de Telefone">
<input type="text" placeholder="Assunto do Email">
</div>
<textarea name="" id="" cols="30" rows="10" placeholder="Sua Mensagem"></textarea>
<input type="submit" value="Enviar Mensagem" class="btn">
</form>
</section>
<!-- footer design -->
<footer class="footer">
<div class="footer-text">
<p>Copyright © 2024 | All Rights Reserved.</p>
</div>
<div class="footer-iconTop">
<a href="#home"><i class='bx bx-up-arrow-alt'></i></a>
</div>
</footer>
<!-- scroll reveal -->
<script src="https://unpkg.com/scrollreveal"></script>
<!-- swiper js -->
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
<!-- custom js -->
<script src="script.js"></script>
</body>
</html>