-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
199 lines (190 loc) · 12.8 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
<!DOCTYPE html>
<html lang="br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfólio da Natália</title>
<link rel="stylesheet" href="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=Borel&family=Urbanist:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
</head>
<header class="header">
<div class="header-conteudo">
<span class="linha"></span>
<span class="conteudo-header">portfólio</span>
<span class="linha"></span>
</div>
<nav class="nav-container">
<a class="nav-item" href="#sobre">sobre</a>
<a class="nav-item" href="#reportagem">reportagem</a>
<a class="nav-item" href="#projetos">projetos</a>
<a class="nav-item" href="#experimentos">experimentos & tutoriais</a>
<a class="nav-item" href="#contatos">contatos</a>
</nav>
</header>
<body>
<section class="apresentacao">
<div class="img"><img src="imagens/imagem-apresentacao-natalia.svg"></div>
<div class="apresentacao-conteudo">
<div class="apresentacao-conteudo-linha">
<div class= "bola-conteudo-tipo-2" id="laranja"></div>
<p class="topico">jornalismo guiado por dados</p>
<div class= "bola-conteudo-tipo-2" id="amarelo"></div>
<p class="topico">análise de dados</p>
<div class= "bola-conteudo-tipo-2" id="verde"></div>
<p class="topico">LAI e dados abertos</p>
</div>
<div class="apresentacao-conteudo-linha">
<div class= "bola-conteudo-tipo-2" id="azul"></div>
<p class="topico">desenvolvimento python</p>
<div class= "bola-conteudo-tipo-2" id="rosa"></div>
<p class="topico">programação web</p>
<div class= "bola-conteudo-tipo-2" id="roxo"></div>
<p class="topico">visualização de dados</p>
</div>
</div>
</section>
<div class="linha-separacao" id="laranja"></div>
<section class="sobre">
<div class="sobre-conteudo">
<p class="titulo">sobre</p>
<div class="sobre-conteudo-texto">
<p class="texto">Sou repórter de jornalismo de dados no <span class=negrito>DeltaFolha</span>, núcleo de dados da Folha de S. Paulo. Tenho 4 anos de experiência em análise e visualização de dados, Lei de Acesso à Informação e dados abertos.
<p class="texto">Anteriormente, integuei a equipe de Política do <span class=negrito>Estadão</span>, onde participei da cobertura das eleições de 2022 e da produção do agregador de pesquisas eleitorais do Estadão. Também atuei como repórter da newsletter Don't LAI to me da <span class=negrito>Fiquem Sabendo</span>, agência de dados independente especializada no acesso à informação</p>
<p class="texto">Tenho domínio em desenvolvimento Python, programação web e visualização de dados; todas experiências adquiridas durante o mestrado em Jornalismo de Dados, Automação e Data Storytelling no Insper (2022-2023).</p>
<p class="intertitulo">Destaques</p>
<p href="https://congresso.abraji.org.br/palestrante/natalia-santos" class="texto">🎤 Palestrante no 18º Congresso Internacional de Jornalismo Investigativo da Abraji (2013)</p>
<p class="texto">📝 Co-autora do "Manual de Redação: O jornalismo antirracista a partir da experiência da Alma Preta", lançado em agosto de 2023 <a class="texto-tipo-2" href="https://almapreta.com.br/images/2023/11/manual-de-redacao-o-jornalismo-antirracista-a-partir-da-experiencia-da-alma-preta.pdf">( edição em português</a>|<a class="texto-tipo-2" href="https://mailchi.mp/fundaciongabo/manual-redaccion-alma-preta">edição em espanhol )</a></p>
<p class="texto">🥇 Finalista do 5º Prêmio Livre.jor de Jornalismo-Mosca (Edição 2023)</p>
</div>
<!--<div class="sobre-conteudo-fotos">
<div class="sobre-foto">
<img class="foto-redonda-sobre" src="congresso-abraji-2023.jpeg">
</div>
<div class="sobre-foto">
<img class="foto-redonda-sobre" src="manual-alma-preta-2023.jpeg">
</div>
</div>-->
</div>
</section>
<div class="linha-separacao" id="verde"></div>
<section id="reportagem" class="reportagem">
<div class="reportagem-titulo">
<p class="titulo">reportagens</p>
</div>
<div class="reportagem-conteudo">
<div class="item">
<a href="https://www1.folha.uol.com.br/cotidiano/2024/03/a-cada-hora-9-mulheres-denunciam-crime-de-stalking-no-brasil.shtml" target="_blank">
<img class="imagem-reportagem" src="imagens/stalking.jpg" alt="">
</a>
<div class="item-conteudo">
<p class="fonte-veiculo">FOLHA DE S. PAULO | 2024</p>
<p class="fonte-titulo-reportagem">A cada hora, 9 mulheres denunciam crime de stalking no Brasil</p>
<p class="fonte-contem">Contém:</p>
<div class="conteudo-item">
<div class= "bola-conteudo" data="jornalismo guiado por dados" id="laranja"></div>
<div class= "bola-conteudo" data="análise de dados" id="amarelo"></div>
<div class= "bola-conteudo" data="dados abertos" id="verde"></div>
</div>
<a class="texto-link" target="_blank" href="https://www1.folha.uol.com.br/cotidiano/2024/03/a-cada-hora-9-mulheres-denunciam-crime-de-stalking-no-brasil.shtml">Acesse o conteúdo</a>
</div>
</div>
<div class="item">
<a href="https://www1.folha.uol.com.br/cotidiano/2023/12/novos-registros-de-posse-de-armas-caem-74-no-governo-lula-total-e-o-menor-em-10-anos.shtml" target="_blank">
<img class="imagem-reportagem" src="imagens/armas.jpg" alt=""></a>
<div class="item-conteudo">
<p class="fonte-veiculo">FOLHA DE S. PAULO | 2024</p>
<p class="fonte-titulo-reportagem">Novos registros de armas caem 74% no governo Lula; total é o menor em 10 anos</p>
<p class="fonte-contem">Contém:</p>
<div class="conteudo-item">
<div class= "bola-conteudo" data="jornalismo guiado por dados" id="laranja"></div>
<div class= "bola-conteudo" data="análise de dados" id="amarelo"></div>
<div class= "bola-conteudo" data="dados abertos" id="verde"></div>
</div>
<a class="texto-link" target="_blank" href="https://www1.folha.uol.com.br/cotidiano/2023/12/novos-registros-de-posse-de-armas-caem-74-no-governo-lula-total-e-o-menor-em-10-anos.shtml">Acesse o conteúdo</a>
</div>
</div>
<div class="item">
<a href="https://www1.folha.uol.com.br/cotidiano/2024/03/brasil-tem-media-de-40-casamentos-de-meninas-a-cada-dia.shtml" target="_blank">
<img class="imagem-reportagem" src="imagens/casamento_infantil.jpg" alt=""></a>
<div class="item-conteudo">
<p class="fonte-veiculo">FOLHA DE S. PAULO | 2024</p>
<p class="fonte-titulo-reportagem">Brasil tem média de 40 casamentos de meninas a cada dia</p>
<p class="fonte-contem">Contém:</p>
<div class="conteudo-item">
<div class= "bola-conteudo" data="jornalismo guiado por dados" id="laranja"></div>
<div class= "bola-conteudo" data="análise de dados" id="amarelo"></div>
<div class= "bola-conteudo" data="dados abertos" id="verde"></div>
</div>
<a class="texto-link" target="_blank" href="https://www1.folha.uol.com.br/cotidiano/2024/03/brasil-tem-media-de-40-casamentos-de-meninas-a-cada-dia.shtml">Acesse o conteúdo</a>
</div>
</div>
<div class="item">
<a href="https://www1.folha.uol.com.br/poder/2024/02/brasil-tem-a-camara-dos-deputados-mais-desigual-em-genero-da-america-do-sul.shtml" target="_blank">
<img class="imagem-reportagem" src="imagens/camara.jpg" alt=""></a>
<div class="item-conteudo">
<p class="fonte-veiculo">FOLHA DE S. PAULO | 2024</p>
<p class="fonte-titulo-reportagem">Brasil tem a Câmara dos Deputados mais desigual em gênero da América do Sul</p>
<p class="fonte-contem">Contém:</p>
<div class="conteudo-item">
<div class= "bola-conteudo" data="jornalismo guiado por dados" id="laranja"></div>
<div class= "bola-conteudo" data="análise de dados" id="amarelo"></div>
<div class= "bola-conteudo" data="dados abertos" id="verde"></div>
</div>
<a class="texto-link" target="_blank" href="https://www1.folha.uol.com.br/poder/2024/02/brasil-tem-a-camara-dos-deputados-mais-desigual-em-genero-da-america-do-sul.shtml">Acesse o conteúdo</a>
</div>
</div>
</div>
<div class="reportagem-veja-mais">
<a class="texto-tipo-2" target="_blank">confira outras publicações</a> <!--href="reportagens.html"-->
</div>
</section>
<div class="linha-separacao" id="amarelo"></div>
<section id="projetos" class="projetos">
<p class="titulo">projetos</p>
<div class="projeto-conteudo">
<div class="projeto-item">
<div class="projeto-descricao">
<p class="fonte-item-titulo">🤖 Ben do Diário Oficial da União</p>
<p class="fonte-titulo-descricao">Para facilitar a vida, o robô Ben do DOU envia diariamente, pelo Telegram, os destaques do Diário Oficial da União (DOU)</p>
</div>
<p class="fonte-contem">Contém:</p>
<div class="conteudo-item">
<div class= "bola-conteudo" data="desenvolvimento python" id="azul"></div>
<div class= "bola-conteudo" data="dados abertos" id="verde"></div>
</div>
<a class="texto-link" target="_blank" href="https://t.me/BenDOU_bot">Acesse o conteúdo</a>
</div>
<div class="projeto-item">
<a href=""></a>
<p class="fonte-item-titulo">🎮 Quiz sobre a cantora Taylor Swift</p>
<p class="fonte-titulo-descricao">Projeto experimental de jogo de perguntas e respostas coloca em teste os conhecimentos sobre a cantora e carreira</p>
<p class="fonte-contem">Contém:</p>
<div class="conteudo-item">
<div class= "bola-conteudo" data="programação web" id="rosa"></div>
</div>
<a class="texto-link" target="_blank" href="https://tanatelha.github.io/quiz-taylor-swift/">Acesse o conteúdo</a>
</div>
</div>
</section>
<div class="linha-separacao" id="roxo"></div>
<section id="experimentos" class="experimentos">
<p class="titulo">experimentos & tutoriais 🧪</p>
<p class="texto">Confira outros projetos experimentais para me conhecer um pouco mais</p>
<a class="texto-tipo-2" target="_blank" href="experimentos.html">ir para a página de experimentos</a>
</section>
<div class="linha-separacao" id="azul"></div>
<section id="contatos" class="contatos">
<p class="titulo">contatos</p>
<p class="texto">Vamos conversar? Envie um e-mail ou entre em contato por meio da minha rede social.</p>
<p class="texto-tipo-2">[email protected]</p>
<a class="texto-tipo-2" target="_blank" href="">linkedin</a>
</section>
<footer>
<p class="footer-conteudo">feito com ❤ da natália do presente para a natália do passado</p>
</footer>
<!--<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160zm352-160l-160 160c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L301.3 256 438.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0z"/></svg>-->
<script src="script.js"></script>
</body>
</html>