-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
executable file
·357 lines (328 loc) · 18.3 KB
/
Copy pathindex.html
File metadata and controls
executable file
·357 lines (328 loc) · 18.3 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
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
<!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, initial-scale=1">
<title>Daniel Loiola - Portfólio</title>
<meta name="description" content="Pesquisador de plataformas digitais e desenvolvedor Python. Portfolio de projetos em software e pesquisa acadêmica.">
<meta name="author" content="Daniel Loiola">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://danielfeloiola.github.io/">
<meta property="og:title" content="Daniel Loiola - Portfolio">
<meta property="og:description" content="Pesquisador de plataformas digitais e desenvolvedor Python. Portfolio de projetos em software e pesquisa acadêmica.">
<meta property="og:image" content="https://danielfeloiola.github.io/assets/img/og-image.jpg">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://danielfeloiola.github.io/">
<meta property="twitter:title" content="Daniel Loiola - Portfolio">
<meta property="twitter:description" content="Pesquisador de plataformas digitais e desenvolvedor Python">
<meta property="twitter:image" content="https://danielfeloiola.github.io/assets/img/og-image.jpg">
<!-- Canonical -->
<link rel="canonical" href="https://danielfeloiola.github.io/">
<!-- Alternate Languages -->
<link rel="alternate" hreflang="pt" href="https://danielfeloiola.github.io/">
<link rel="alternate" hreflang="en" href="https://danielfeloiola.github.io/?lang=en">
<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="assets/img/favicon.svg">
<!-- Preconnect -->
<link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>
<link rel="preconnect" href="https://cloud.umami.is" crossorigin>
<!-- Local Fonts -->
<link rel="stylesheet" href="assets/css/fonts.css">
<!-- Analytics -->
<script defer src="https://cloud.umami.is/script.js" data-website-id="d232f6a2-1251-48cc-9b55-2bfa7d71f2ce"></script>
<!-- Font Awesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="stylesheet" href="assets/css/main.css">
<link rel="stylesheet" href="assets/css/hero-graph.css">
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Person",
"name": "Daniel Loiola",
"url": "https://danielfeloiola.github.io",
"jobTitle": "Pesquisador de plataformas digitais e desenvolvedor Python",
"alumniOf": {
"@type": "CollegeOrUniversity",
"name": "Universidade Federal de Minas Gerais (UFMG)"
},
"sameAs": [
"https://www.linkedin.com/in/daniel-loiola/",
"https://github.com/danielfeloiola"
]
}
</script>
</head>
<body>
<!-- Header with Network Graph -->
<div id="hero-container">
<canvas id="hero-canvas"></canvas>
<div class="header-content">
<!-- Greeting -->
<p lang="pt" class="greeting">Olá, eu sou</p>
<p lang="en" class="greeting">Hello, I'm</p>
<!-- Name -->
<h1 class="name">Daniel Loiola</h1>
<!-- Tagline -->
<p lang="pt" class="tagline">Pesquisador de plataformas digitais e desenvolvedor Python</p>
<p lang="en" class="tagline">Digital platforms researcher and Python developer</p>
<!-- Social Links -->
<div class="social-links">
<a href="mailto:danielfeloiola@gmail.com" aria-label="Email"><i class="fa-solid fa-envelope"></i></a>
<a href="https://www.linkedin.com/in/daniel-loiola/" target="_blank" aria-label="LinkedIn"><i class="fa-brands fa-linkedin"></i></a>
<a href="https://github.com/danielfeloiola" target="_blank" aria-label="GitHub"><i class="fa-brands fa-github"></i></a>
</div>
<!-- Language Selector -->
<div class="header-links">
<button id="ptSelector" class="active" onclick="Lang('pt')">Português</button>
<span>/</span>
<button id="enSelector" onclick="Lang('en')">English</button>
</div>
</div>
<a class="down" href="#about" data-scroll><i class="icon fa fa-chevron-down" aria-hidden="true"></i></a>
</div>
<main class="bottom-content">
<!-- About Section -->
<section id="about">
<h2 class="section-title" lang="pt">Sobre mim</h2>
<h2 class="section-title" lang="en">About me</h2>
<p class="about-text" lang="pt">
Sou uma pessoa curiosa que adora explorar a web e descobrir seus mistérios, caindo
em rabbit holes e tentar entender como fui parar lá. Me interesso por entender como
comunidades online funcionam, como algoritmos moldam o que vemos, e como grupos de
pessoas constroem realidades compartilhadas, às vezes bem distantes da nossa.
Valorizo criatividade e imaginação, e acredito que as melhores perguntas surgem
quando a gente se permite estranhar o que parece óbvio.
</p>
<p class="about-text" lang="pt">
Sou doutor em Comunicação pela UFMG, com passagem pelo Politecnico di Milano como
pesquisador visitante. Também tenho experiência profissional como desenvolvedor Python,
tendo trabalhado com coleta de dados e construção de ferramentas de monitoramento de
mídias sociais. Minha pesquisa combina métodos computacionais com teoria social:
escrevo código para coletar dados e mapear redes, e leio teoria crítica para
interpretar o que encontro. Já investiguei bolhas algorítmicas no YouTube,
negacionismo climático e teorias da conspiração como o QAnon.
</p>
<p class="about-text" lang="en">
I'm a curious person who loves exploring the web and uncovering its mysteries,
falling into rabbit holes and trying to figure out how I got there. I'm interested
in understanding how online communities work, how algorithms shape what we see, and
how groups of people build shared realities, sometimes quite far from our own.
I value creativity and imagination, and I believe the best questions come when we
allow ourselves to find the obvious strange.
</p>
<p class="about-text" lang="en">
I hold a PhD in Communication from UFMG, with a research stay at Politecnico di
Milano. I also have professional experience as a Python developer, having worked
with data collection and building social media monitoring tools. My research combines
computational methods with social theory: I write code to collect data and map
networks, and read critical theory to interpret what I find. I've investigated
algorithmic filter bubbles on YouTube, climate denial, and conspiracy theories
like QAnon.
</p>
</section>
<!-- Projects Section -->
<section id="projects">
<div class="project-tabs">
<button class="active" onclick="showTab('software', event)">
<span lang="pt" class="inline">Softwares</span>
<span lang="en" class="inline">Software</span>
</button>
<span>/</span>
<button onclick="showTab('research', event)">
<span lang="pt" class="inline">Pesquisa</span>
<span lang="en" class="inline">Research</span>
</button>
</div>
<!-- Software Projects -->
<div id="software" class="projects-grid active">
<!-- Tube Plotter -->
<div class="project-card">
<img src="assets/img/plotter.jpg" alt="Grafo de rede com thumbnails do YouTube como nós" class="project-card-img" width="426" height="254" loading="lazy">
<div class="project-card-body">
<h3>Tube Plotter</h3>
<p class="project-meta">WEB APP</p>
<p lang="pt">
Aplicação web que plota thumbnails do YouTube em grafos de rede extraídos
do YouTube Data Tools e espacializados no Gephi. Permite navegar pelo grafo
usando as thumbnails como nós.
</p>
<p lang="en">
Web application that plots YouTube thumbnails on network graphs extracted
from YouTube Data Tools and spatialized in Gephi. Allows navigating the
graph using thumbnails as nodes.
</p>
<div class="project-tags">
<span>Python</span>
<span>Flask</span>
<span>Sigma.js</span>
<span>Network Analysis</span>
</div>
<a href="https://github.com/danielfeloiola/tube_plotter_cli" class="project-link" target="_blank">
GitHub <i class="fa-solid fa-arrow-right"></i>
</a>
</div>
</div>
<!-- Puppybot -->
<div class="project-card project-card-reverse">
<img src="assets/img/puppy.jpg" alt="Imagem de cachorro repostada pelo bot Puppybot" class="project-card-img" width="425" height="254" loading="lazy">
<div class="project-card-body">
<h3>Puppybot</h3>
<p class="project-meta">BLUESKY BOT</p>
<p lang="pt">
Bot do Bluesky que reposta imagens de cachorros. Utiliza classificação
de imagens com TensorFlow e Keras para filtrar conteúdo indesejado.
</p>
<p lang="en">
Bluesky bot that reposts puppy images. Uses image classification with
TensorFlow and Keras to filter unwanted content.
</p>
<div class="project-tags">
<span>Python</span>
<span>TensorFlow</span>
<span>Keras</span>
<span>Bluesky API</span>
</div>
<a href="https://bsky.app/profile/puppy-bot.bsky.social" class="project-link" target="_blank">
<span lang="pt" class="inline">Perfil</span>
<span lang="en" class="inline">Profile</span>
<i class="fa-solid fa-arrow-right"></i>
</a>
</div>
</div>
<!-- Pinocchio's Pizza -->
<div class="project-card">
<img src="assets/img/pinocchios.jpg" alt="Interface do site de e-commerce Pinocchio's Pizza" class="project-card-img" width="425" height="258" loading="lazy">
<div class="project-card-body">
<h3>Pinocchio's Pizza</h3>
<p class="project-meta">E-COMMERCE</p>
<p lang="pt">
Site para uma pizzaria com funcionalidades de e-commerce: carrinho de compras,
gestão de pedidos e painel administrativo para atualização do menu.
</p>
<p lang="en">
Website for a pizzeria with e-commerce features: shopping cart, order
management, and admin panel for menu updates.
</p>
<div class="project-tags">
<span>Python</span>
<span>Django</span>
<span>PostgreSQL</span>
</div>
<a href="https://thick-lissi-its-just-me-62e2a881.koyeb.app/" class="project-link" target="_blank">
<span lang="pt" class="inline">Visitar</span>
<span lang="en" class="inline">Visit</span>
<i class="fa-solid fa-arrow-right"></i>
</a>
</div>
</div>
</div>
<!-- Research Projects -->
<div id="research" class="projects-grid">
<!-- Dissertação -->
<div class="project-card">
<img src="assets/img/dissertacao.jpg" alt="Grafo de rede mostrando comunidades polarizadas de vídeos do YouTube" class="project-card-img" width="640" height="485" loading="lazy">
<div class="project-card-body">
<h3>Recomendado Para Você: o impacto do algoritmo do YouTube na formação de bolhas</h3>
<p class="project-meta">
<span lang="pt" class="inline">DISSERTAÇÃO DE MESTRADO • UFMG • 2018</span>
<span lang="en" class="inline">MASTER'S THESIS • UFMG • 2018</span>
</p>
<p lang="pt">
Estudo do impacto do sistema de recomendação do YouTube na diversidade de
conteúdo, utilizando análise de redes e observação qualitativa de perfis
simulados com diferentes orientações políticas.
</p>
<p lang="en">
Study of YouTube's recommendation system impact on content diversity,
using network analysis and qualitative observation of simulated profiles
with different political orientations.
</p>
<div class="project-tags">
<span>Filter Bubbles</span>
<span>YouTube</span>
<span>Network Analysis</span>
<span>Algorithms</span>
</div>
<a href="https://repositorio.ufmg.br/items/61329167-140f-448f-bad8-7bba27596532" class="project-link" target="_blank">
<span lang="pt" class="inline">Ler dissertação</span>
<span lang="en" class="inline">Read thesis</span>
<i class="fa-solid fa-arrow-right"></i>
</a>
</div>
</div>
<!-- Artigo Negacionismo -->
<div class="project-card project-card-reverse">
<img src="assets/img/rch.jpg" alt="Grafo de rede de vídeos negacionistas sobre mudanças climáticas no YouTube" class="project-card-img" width="640" height="305" loading="lazy">
<div class="project-card-body">
<h3>O negacionismo do aquecimento global no YouTube: uma análise exploratória</h3>
<p class="project-meta">
<span lang="pt" class="inline">ARTIGO • REVISTA DE CIÊNCIAS HUMANAS - RCH • 2022</span>
<span lang="en" class="inline">PAPER • REVISTA DE CIÊNCIAS HUMANAS - RCH • 2022</span>
</p>
<p lang="pt">
Análise exploratória da circulação de conteúdo negacionista sobre mudanças
climáticas no YouTube brasileiro.
</p>
<p lang="en">
Exploratory analysis of climate change denial content circulation on
Brazilian YouTube.
</p>
<div class="project-tags">
<span>Climate Denial</span>
<span>YouTube</span>
<span>Misinformation</span>
</div>
<a href="https://www.rchunitau.com.br/index.php/rch/article/view/928" class="project-link" target="_blank">
<span lang="pt" class="inline">Ler artigo</span>
<span lang="en" class="inline">Read paper</span>
<i class="fa-solid fa-arrow-right"></i>
</a>
</div>
</div>
<!-- Data Sprint -->
<div class="project-card">
<img src="assets/img/smart-data-sprint.jpg" alt="Visualização de dados do SMART Data Sprint sobre dinâmicas meméticas no Twitter" class="project-card-img" width="640" height="455" loading="lazy">
<div class="project-card-body">
<h3>I WON THIS ELECTION, BY A LOT! Trump Spectacle and Memetic Antagonism on Twitter</h3>
<p class="project-meta">DATA SPRINT • NOVA FCSH LISBOA • 2021</p>
<p lang="pt">
Análise das dinâmicas meméticas e do antagonismo político nas respostas ao tweet
de Trump declarando vitória na eleição de 2020. Combina análise de redes,
Google Vision API e visualização de dados para mapear padrões de imitação e
confronto afetivo.
</p>
<p lang="en">
Analysis of memetic dynamics and political antagonism in replies to Trump's
tweet declaring victory in the 2020 election. Combines network analysis,
Google Vision API, and data visualization to map imitation patterns and
affective confrontation.
</p>
<div class="project-tags">
<span>Memes</span>
<span>Twitter</span>
<span>Digital Methods</span>
<span>Network Analysis</span>
</div>
<a href="https://metodosdigitais.fcsh.unl.pt/?page_id=2390" class="project-link" target="_blank">
<span lang="pt" class="inline">Ver projeto</span>
<span lang="en" class="inline">View project</span>
<i class="fa-solid fa-arrow-right"></i>
</a>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<p>© <span id="year"></span> Daniel Loiola</p>
</footer>
</main>
<script src="assets/js/hero-graph.js"></script>
<script src="assets/js/selectors.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>