-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
180 lines (162 loc) · 12.4 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
<!DOCTYPE html>
<html lang="en">
<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" type="image/x-icon" href="./src/favicon/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="./src/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./src/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./src/favicon/favicon-16x16.png">
<link rel="manifest" href="./src/favicon/site.webmanifest">
<link rel="stylesheet" href="src/reset.css">
<link rel="stylesheet" href="src/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Climate+Crisis&family=Lilita+One&family=Lobster&family=Press+Start+2P&family=Shrikhand&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<title>Costa</title>
</head>
<body>
<header class="header">
<h1 class="header__title">Hi, <b> how are you?</b></h1>
<h2 class="header__subtitle">I am <b>brawling the bits!</b></h2>
<img class="header__image" src="./src/assets/jotaro.png" alt="Jotaro">
<img class="header__image" src="./src/assets/to_be_continued.png" alt="To Be Continued">
</header>
<main class="main-content">
<section class="about" id="about">
<h2 class="about__title">About me</h2>
<p class="about__description">
I'm Beatriz, a Brazilian who was born in 2000 and grew up from the time when personal computers became popular to what we have in technology today. I started on the computer science journey at the beginning of the 20s decade. Moved by learning, creating and solving problems, I've been always finding myself again on my career path.
</p>
</section>
<section class="experience" id="experience">
<h2 class="experience__title">Experience</h2>
<article class="experience__item">
<h3 class="experience__company">Safety Cybersecurity Inc.</h3>
<h4 class="experience__duration">September 2022 - Present</h4>
<p class="experience__description">
Safety Cybersecurity Inc. is a Canadian based software-supply-chain security company where I joined as a <b>Junior Software Developer</b> and expanded my responsibilities to be a <b>Junior Cybersecurity Researcher</b>. Since then, I've been working on various tasks, such as:
</p>
<ul class="experience__list">
<li class="experience__list-item">
SEO Optimization and Subdomain Reorganization: Restructuring the website's routes and optimizing the SEO. This led to a significant improvement in search rankings, enhancing the site's visibility and reach.
</li>
<li class="experience__list-item">
Product Statistics and Integration: Developing system for calculating and monitoring the product statistics based on supply and demand. Integrating with third-party products such as Google Cloud and content management system. These tasks results are aligned with the administration process for the sales team, allowing for better client prioritization, support, and contract renewal.
</li>
<li class="experience__list-item">
Security Enhancements: Developing security features of the public site, aligning closely with feedback from bug bounty programs to address reported issues and prevent new flaws.
</li>
<li class="experience__list-item">
Database of Vulnerabilities in the Python Ecosystem: Conducting extensive research to identify vulnerabilities in open source libraries from PyPI. It contributed directly to the company's vulnerability scanner, which is the main product.
</li>
</ul>
</article>
<article class="experience__item">
<h3 class="experience__company">Kenzie Academy Brazil</h3>
<h4 class="experience__duration">May 2021 - July 2022</h4>
<p class="experience__description">
Kenzie is a Brazilian programming school and bootcamp that offers a two-thousand-hour full stack development training. During my one-year journey as a <b>Bootcamp student</b>, I had an experience similar to a part-time job:
</p>
<ul class="experience__list">
<li class="experience__list-item">Daily check-ins, checkouts, and weekly deadlines for solo projects were part of the routine.</li>
<li class="experience__list-item">There was a requirement to learn a new technology stack every three months and participate in a group project.</li>
<li class="experience__list-item">Problem-solving skills were developed, independent of the tools used. This proficiency was demonstrated in technical interviews and code challenges.</li>
</ul>
</article>
</section>
<section class="tech-stack" id="tech-stack">
<h2 class="tech-stack__title">Stack</h2>
<div class="tech-stack__icons">
<img class="tech-stack__icon" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/git/git-original-wordmark.svg" alt="Git">
<img class="tech-stack__icon" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/html5/html5-original-wordmark.svg" alt="HTML5">
<img class="tech-stack__icon" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/css3/css3-original-wordmark.svg" alt="CSS3">
<img class="tech-stack__icon" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original-wordmark.svg" alt="Python">
<img class="tech-stack__icon" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/flask/flask-original.svg" alt="Flask">
<img class="tech-stack__icon" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/django/django-plain.svg" alt="Django">
<img class="tech-stack__icon" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original-wordmark.svg" alt="Node.js">
<img class="tech-stack__icon" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg" alt="TypeScript">
<img class="tech-stack__icon" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-original-wordmark.svg" alt="PostgreSQL">
<img class="tech-stack__icon" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/docker/docker-original-wordmark.svg" alt="Docker">
<img class="tech-stack__icon" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/googlecloud/googlecloud-plain.svg" alt="Google Cloud">
</div>
</section>
<section class="education" id="education">
<h2 class="education__title">Education</h2>
<p class="education__description">
My journey is a little different from the usual chronology. I started in the market after being immersed in a bootcamp, which helped me understand what a Software Developer's day-to-day life would be like, and so I had the opportunity to get closer to cybersecurity.
</p>
<p class="education__description">
I like how the pieces fit together when I study computer science while working in the field, so I feel I can align academia with the market. For my higher education, I'm studying Computer Systems at the Fluminense Federal University, popularly known in Brazil as UFF.
</p>
<p class="education__description">I also like to be guided a lot by various contents and guides such as:</p>
<ul class="education__resources">
<li class="education__resource-item"><a href="https://teachyourselfcs.com/">Teach Yourself Computer Science</a></li>
<li class="education__resource-item"><a href="https://roadmap.sh/backend">Backend Developer Roadmap</a></li>
<li class="education__resource-item"><a href="https://roadmap.sh/cyber-security">Cybersecurity Expert Roadmap</a></li>
</ul>
</section>
<section class="about" id="about-brawling-the-bits">
<h2 class="about__title">Why Brawling The Bits?</h2>
<p class="about__description">
I heard the expression “Bit bashing” and could not stop thinking about for a while about 'how do I treat the bits'? So, I also remembered that my favourite kind of game, since the oldest consoles, were beat 'em up. I just concluded that my neurons have been fighting the bits for a long time. It's a mental battle, challenges transform us, and I need to be in progress. So, I just like to be brawling the bits.
</p>
</section>
<section class="contact" id="contact">
<h2 class="contact__title">Contact</h2>
<div class="contact__links">
<a href="mailto:[email protected]" target="_blank" class="contact__link"><img src="./src/assets/icons8-mail-48.png" alt="Email"></a>
<a href="https://www.github.com/brawlingthebits" target="_blank" class="contact__link"><img src="./src/assets/icons8-github-48.png" alt="GitHub"></a>
<a href="https://www.linkedin.com/in/dev-bcdc/" target="_blank" class="contact__link"><img src="./src/assets/icons8-linkedin-circundado-48.png" alt="LinkedIn"></a>
<a href="https://www.discordapp.com/users/1115976120932778094" target="_blank" class="contact__link"><img src="./src/assets/icons8-logo-discord-48.png" alt="Discord"></a>
</div>
</section>
</main>
<footer class="footer">
<div class="footer__content">
<p class="footer__text">This CMS is made easier thanks to</p>
<a href="https://buttercms.com" target="_blank" class="footer__link">
<img class="footer__logo" src="./src/assets/butter-w.png" alt="ButterCMS Logo">
</a>
</div>
</footer>
<aside class="control-sidebar" id="control-sidebar">
<button class="control-sidebar__close" id="close-sidebar">✖</button>
<label class="control-sidebar__label" for="margin-slider">Margin:</label>
<input class="control-sidebar__slider" type="range" id="margin-slider" name="margin-slider" min="0" max="100" value="15">
<label class="control-sidebar__label" for="font-slider">Font Size:</label>
<input class="control-sidebar__slider" type="range" id="font-slider" name="font-slider" min="12" max="30" value="16">
</aside>
<button class="control-sidebar__open" id="open-sidebar">Aa</button>
<script>
const marginSlider = document.getElementById('margin-slider');
const fontSlider = document.getElementById('font-slider');
const contentSection = document.querySelector('.main-content');
const openSidebar = document.getElementById('open-sidebar');
const closeSidebar = document.getElementById('close-sidebar');
const controlSidebar = document.getElementById('control-sidebar');
marginSlider.addEventListener('input', (event) => {
const marginValue = event.target.value;
contentSection.style.marginLeft = marginValue + 'vw';
contentSection.style.marginRight = marginValue + 'vw';
});
fontSlider.addEventListener('input', (event) => {
const fontSize = event.target.value + 'px';
contentSection.style.fontSize = fontSize;
});
openSidebar.addEventListener('click', () => {
controlSidebar.style.display = 'flex';
openSidebar.style.display = 'none';
});
closeSidebar.addEventListener('click', () => {
controlSidebar.style.display = 'none';
openSidebar.style.display = 'block';
});
// Initial state
controlSidebar.style.display = 'none';
openSidebar.style.display = 'block';
</script>
</body>
</html>