-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
232 lines (199 loc) · 15.2 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
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/flowbite.min.css" rel="stylesheet" />
<style>
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:[email protected]&display=swap');
.title-main {
font-family: "IBM Plex Sans", sans-serif;
font-weight: 700;
font-style: normal;
}
.title-main2 {
font-family: "Outfit", sans-serif;
font-weight: 800;
font-style: normal;
}
.title {
font-family: "Bebas Neue", sans-serif;
font-weight: 400;
font-style: normal;
}
.title-form {
font-family: "Roboto", serif;
font-weight: 500;
font-style: normal;
}
.text-body {
font-family: "Space Grotesk", sans-serif;
font-weight: 700;
font-style: normal;
}
</style>
</head>
<main id="Home" class="flex flex-col p-8 bg-no-repeat bg-cover text-center sm:grid sm:grid-cols-1 md:bg-cover md:m-0 md:bg-cover md:w-100 ">
<nav class="mt-12 align-self-center md:h-40 md:m-0">
<h5 class="title-main text-4xl md:text-6xl text-neutral-100 md:m-16">BRUNA H. M.</h5>
</nav>
<header class="grid h-96 grid-cols-1 gap-4 m-20 md:grid-cols-4 md:m-15 lg:grid-cols-4">
<a href="#Sobre" class="rounded-3xl grid bg-gray-950 transition ease-in-out delay-150 hover:bg-gray-400/75 hover:scale-110 md:col-span-2 md:row-span-4 md:grid-rows-7 lg:col-span-2 lg:row-span-4 lg:grid-rows-7">
<div class="title-main2 row-start-1 text-zinc-200 text-start text-md p-4 md:text-lg lg:text-xl">
<h3>SOBRE</h3>
</div>
<div class="text-body row-start-4 text-zinc-700 rows-span-2 flex-row text-md p-2 md:text-2xl lg:text-4xl">
<p>Suporte técnico | Estudante de ADS</p>
</div>
<div class="title-main2 row-start-7 text-zinc-200 text-start text-md p-4 md:text-lg lg:text-xl">
<p>UM POUCO MAIS</p>
</div>
</a>
<a href="#Projetos" class="container grid grid-rows-3 rounded-3xl bg-gray-600 hover:bg-gray-400/75 transition ease-in-out delay-150 hover:scale-110 md:col-span-2 md:row-span-2 lg:col-span-2 lg:row-span-2">
<p class="title-main2 text-zinc-200 text-md row-start-3 md:text-xl">PROJETOS</p>
</a>
<a href="#Habilidades" class="container grid grid-rows-3 rounded-3xl bg-gray-700 transition ease-in-out delay-150 hover:bg-gray-400/75 hover:scale-110 md:col-span-1 md:row-span-2">
<p class="title-main2 text-zinc-200 text-md row-start-3 md:text-xl">HABILIDADES</p>
</a>
<a href="#Certificados" class="container grid grid-rows-3 rounded-3xl bg-gray-800 transition ease-in-out delay-150 hover:bg-gray-400/75 hover:scale-110 md:col-span-1 md:row-span-2">
<p class="title-main2 text-zinc-200 text-md row-start-3 md:text-xl">CERTIFICADOS</p>
</a>
</header>
<body>
<section id="Sobre" class="h-screen mt-16 bg-zinc-950/75">
<div class="container flex flex-col size-full p-16 space-y-8 justify-items-center items-center gap-x-10 space-y-8 md:grid md:grid-cols-7">
<img class="rounded-full col-span-1 md:col-start-2 md:col-span-2" src="./static/images/perfil.jpg"/>
<article class="text-body col-start-4 col-span-3 text-sm text-body text-justify indent-8 tracking-wider text-white md:text-lg">
Estudante de Análise e Desenvolvimento de Sistemas na FATEC - Jessen Vidal. Formada em História-licenciatura pela UFOP - MG anteriormente.
Sempre busquei me atualizar sobre a área de tecnologia e mais recentemente
comecei a atuar como Suporte Técnico, sendo esse o pontapé incial para que eu decidisse me desenvolver e crescer na área.
<br>Adoro as possibilidades de criação que
se abrem ao entender sobre tecnologia e explorar seus recursos.
</article>
</div>
</section>
<section id ="Projetos" class="h-screen">
<p class="title text-6xl text-white backdrop-blur-xl tracking-widest p-4">PROJETOS</p>
<div class="container flex flex-col size-full p-8 justify-items-center items-center md:grid md:grid-cols-6 md:grid-rows-6 md:p-16 md:space-x-8">
<a href="https://github.com/EquipeEcho/EasyScrum" class="flex flex-col w-full aspect-square col-start-2 col-span-2 row-start-3 items-center bg-gray-950 hover:bg-zinc-800/75 rounded-lg z-10">
<img class="w-40 md:size-auto md:h-auto max-w-xs p-3" src="./static/images/LogoES.png" >
<div class="flex flex-col justify-between p-2 leading-normal m-2">
<h5 class="title-form mb-2 text-xl md:text-2xl font-bold tracking-wide text-white ">EasyScrum</h5>
<p class="text-body text-sm font-normal text-white md:text-lg">Projeto desenvolvido no primeiro semestre do curso de ADS da FATEC, Jessen Vidal - SJC.</p>
</div>
</a>
<a href="https://github.com/bruna-hm/AlienInvasionGame" class="flex flex-col w-full aspect-square mt-3 col-start-4 col-span-2 row-start-3 items-center bg-gray-950 hover:bg-zinc-800/75 md:mt-0 rounded-lg">
<img class="size-52 md:size-auto h-auto md:max-w-sm p-3" src="./static/images/alieninv.png" >
<div class="flex flex-col justify-between p-2 leading-normal">
<h5 class="title-form mb-2 text-xlfont-bold tracking-wide text-white md:text-2xl">Alien Invasion Game</h5>
<p class="text-body text-sm font-normal text-white md:text-lg">Projeto desenvolvido a partir do livro Python Crash Course, para aprender mais sobre a lib pygame.</p>
</div>
</a>
</div>
</section>
<section id="Habilidades" class="h-screen">
<p class="title text-6xl text-white backdrop-blur-xl tracking-widest p-4">HABILIDADES</p>
<div class="container flex-col space-y-8 grid-rows-6 size-full p-8 gap-8 justify-items-center items-center md:grid md:grid-cols-4 md:p-16">
<a href="./static/files/CurriculoBruna.pdf" class="title-button row-start-1 col-start-2 col-span-2 bg-amber-400/50 backdrop-blur-xl text-white text-xl rounded-full tracking-wider p-4 transition ease-in-out delay-150 hover:backdrop-blur-sm hover:scale-110" target="_blank">Currículo</a>
<div class="container flex-col col-start-2 row-start-3 rounded-lg p-8 bg-gray-950">
<ul class="text-body text-white text-left text-md tracking-wide space-y-2 marker:text-amber-600 list-disc lg:list-inside md:text-lg">
<li>Python básico</li>
<li>HTML & CSS básicos</li>
<li>Bootstrap e Tailwind básicos</li>
<li>Django e Flask básicos</li>
<li>Git e Github básicos</li>
</ul>
</div>
<div class="container flex-col col-start-3 row-start-3 rounded-lg p-8 bg-gray-950">
<ul class="text-body text-white text-left text-md tracking-wide space-y-2 marker:text-amber-600 list-disc lg:list-inside md:text-lg">
<li>Inglês Avançado</li>
<li>Francês intermediário</li>
<li>Boa comunicação e escrita</li>
<li>Organização</li>
<li>Proatividade</li>
</ul>
</div>
</div>
</section>
<section id="Certificados" class="h-fill md:h-screen">
<p class="title text-6xl text-white backdrop-blur-xl tracking-widest pt-4">CERTIFICADOS</p>
<div class="container flex flex-col grid-rows-6 size-full text-center justify-items-center items-center sm:grid sm:grid-cols-4">
<a href="./static/files/Coursera.pdf" class="col-start-2 row-start-2 md:self-start hover:bg-zinc-900 rounded-lg p-5 bg-gray-800 transition ease-in-out delay-150 hover:scale-110" download>
<p class="title-form text-lg font-normal text-white mb-2">Suporte em TI do Google - Coursera</p>
<img class="max-w-xs" src="./static/images/Coursera.jpg">
</a>
<a href="./static/files/Ndg.pdf" class="col-start-3 row-start-2 md:self-start hover:bg-zinc-900 rounded-lg p-5 bg-gray-800 transition ease-in-out delay-150 hover:scale-110" download>
<p class="title-form text-lg font-normal text-white mb-2">NDG Linux Essentials - Cisco</p>
<img class="max-w-xs" src="./static/images/Ndg.jpg">
</a>
<a href="./static/files/Linux_Essentials.pdf" class="col-start-2 row-start-4 hover:bg-zinc-900 rounded-lg p-5 bg-gray-950 transition ease-in-out delay-150 hover:scale-110" download>
<p class="title-form text-lg font-normal text-white mb-2">Linux Essentials - LinuxTips</p>
<img class="max-w-xs" src="./static/images/Linux_essentials.jpg">
</a>
<a href="./static/files/Python_essentials.pdf" class="col-start-3 row-start-4 hover:bg-zinc-900 rounded-lg p-5 bg-gray-950 transition ease-in-out delay-150 hover:scale-110" download>
<p class="title-form text-lg font-normal text-white mb-2">Python Essentials - LinuxTips</p>
<img class="max-w-xs" src="./static/images/Python_essentials.jpg">
</a>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/flowbite.min.js"></script>
</body>
<div data-dial-init class="fixed end-6 bottom-6 group">
<div id="speed-dial-menu-default" class="flex flex-col items-center hidden mb-4 space-y-2">
<button type="button" data-tooltip-target="tooltip-linkedin" data-tooltip-placement="left" class="flex justify-center items-center w-[52px] h-[52px] text-gray-500 bg-amber-500/75 rounded-full shadow-sm focus:ring-4 focus:ring-gray-300 focus:outline-none hover:bg-gray-600 hover:text-gray-900">
<a href="https://linkedin.com/in/bruna-hayashi-matsunaga-1b4a71324" class="transition ease-in-out delay-100 hover:-translate-1 hover:scale-110">
<svg class="w-10 h-10 fill-blue-700 rounded-full hover:fill-blue-500 hover:bg-neutral-300/50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M12.51 8.796v1.697a3.738 3.738 0 0 1 3.288-1.684c3.455 0 4.202 2.16 4.202 4.97V19.5h-3.2v-5.072c0-1.21-.244-2.766-2.128-2.766-1.827 0-2.139 1.317-2.139 2.676V19.5h-3.19V8.796h3.168ZM7.2 6.106a1.61 1.61 0 0 1-.988 1.483 1.595 1.595 0 0 1-1.743-.348A1.607 1.607 0 0 1 5.6 4.5a1.601 1.601 0 0 1 1.6 1.606Z" clip-rule="evenodd"/>
<path d="M7.2 8.809H4V19.5h3.2V8.809Z"/>
</svg>
</a>
</button>
<div id="tooltip-linkedin" role="tooltip" class="absolute z-10 invisible inline-block w-auto px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
Linkedin
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
<button type="button" data-tooltip-target="tooltip-github" data-tooltip-placement="left" class="flex justify-center items-center w-[52px] h-[52px] text-gray-500 hover:text-gray-900 bg-amber-500/75 rounded-full shadow-sm hover:bg-gray-600 focus:ring-4 focus:ring-gray-300 focus:outline-none">
<a href="https://github.com/bruna-hm" class="transition ease-in-out delay-100 hover:-translate-1 hover:scale-110">
<svg class="w-10 h-10 fill-zinc-900 rounded-full hover:fill-gray-700 hover:bg-neutral-300/50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M12.006 2a9.847 9.847 0 0 0-6.484 2.44 10.32 10.32 0 0 0-3.393 6.17 10.48 10.48 0 0 0 1.317 6.955 10.045 10.045 0 0 0 5.4 4.418c.504.095.683-.223.683-.494 0-.245-.01-1.052-.014-1.908-2.78.62-3.366-1.21-3.366-1.21a2.711 2.711 0 0 0-1.11-1.5c-.907-.637.07-.621.07-.621.317.044.62.163.885.346.266.183.487.426.647.71.135.253.318.476.538.655a2.079 2.079 0 0 0 2.37.196c.045-.52.27-1.006.635-1.37-2.219-.259-4.554-1.138-4.554-5.07a4.022 4.022 0 0 1 1.031-2.75 3.77 3.77 0 0 1 .096-2.713s.839-.275 2.749 1.05a9.26 9.26 0 0 1 5.004 0c1.906-1.325 2.74-1.05 2.74-1.05.37.858.406 1.828.101 2.713a4.017 4.017 0 0 1 1.029 2.75c0 3.939-2.339 4.805-4.564 5.058a2.471 2.471 0 0 1 .679 1.897c0 1.372-.012 2.477-.012 2.814 0 .272.18.592.687.492a10.05 10.05 0 0 0 5.388-4.421 10.473 10.473 0 0 0 1.313-6.948 10.32 10.32 0 0 0-3.39-6.165A9.847 9.847 0 0 0 12.007 2Z" clip-rule="evenodd"/>
</svg>
</a>
</button>
<div id="tooltip-github" role="tooltip" class="absolute z-10 invisible inline-block w-auto px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
Github
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
<button type="button" data-tooltip-target="tooltip-home" data-tooltip-placement="left" class="flex justify-center items-center w-[52px] h-[52px] text-gray-500 bg-amber-500/75 rounded-full shadow-sm focus:ring-4 focus:ring-gray-300 focus:outline-none hover:bg-gray-600 hover:text-gray-900">
<a href="#Home" class="transition ease-in-out delay-100 hover:-translate-1 hover:scale-110">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-6 w-10 h-10 fill-indigo-900 rounded-full hover:fill-indigo-700 hover:bg-neutral-300/50">
<path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
</svg>
</a>
</button>
<div id="tooltip-home" role="tooltip" class="absolute z-10 invisible inline-block w-auto px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
Início
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</div>
<button type="button" data-dial-toggle="speed-dial-menu-default" aria-controls="speed-dial-menu-default" aria-expanded="false" class="flex items-center justify-center text-white bg-amber-700/75 rounded-full w-14 h-14 focus:ring-4 focus:ring-amber-300 focus:outline-none hover:bg-amber-800">
<svg class="w-5 h-5 transition-transform group-hover:rotate-45" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16"/>
</svg>
<span class="sr-only">Open actions menu</span>
</button>
</div>
<footer class="h-12 content-center rounded-lg bg-fuchsia-950/50">
<span class="block text-lg text-zinc-400 font-semibold md:text-center">
© 2024 -
Bruna H. M. -
Obrigada pela visita
</span>
</footer>
</main>
</html>