-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
266 lines (244 loc) · 14 KB
/
index.html
File metadata and controls
266 lines (244 loc) · 14 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cecilia Tivir | Researcher</title>
<!-- Tailwind (replace with your built file or CDN) -->
<link href="assets/css/tailwind.css" rel="stylesheet">
<!-- fonts -->
<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=Inter:wght@300;400;500&family=Playfair+Display:wght@400;700&
display=swap" rel="stylesheet">
<script>
// Dark mode initialization
if (localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
</script>
</head>
<body class="bg-bg dark:bg-gray-900 text-text dark:text-gray-100 font-sans leading-relaxed">
<!-- navigation -->
<header class="sticky top-0 bg-white/90 backdrop-blur z-50">
<nav class="container mx-auto flex items-center justify-between py-4">
<a href="/" class="text-2xl font-serif text-heading">Cecilia Tivir</a>
<ul class="flex items-center space-x-6 text-heading">
<li><a href="#home" class="hover:text-primary">Welcome</a></li>
<li><a href="#research" class="hover:text-primary">Research</a></li>
<li><a href="#community" class="hover:text-primary">Community</a></li>
<li><a href="#talks" class="hover:text-primary">Talks & Awards</a></li>
<li><a href="#blog" class="hover:text-primary">Blog</a></li>
<li><a href="#contact" class="hover:text-primary">Contact</a></li>
<!-- <button id="theme-toggle" class="p-2 rounded-lg bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600" aria-label="Toggle dark mode">
<span class="block dark:hidden">🌙</span>
<span class="hidden dark:block">☀️</span>
</button> -->
</ul>
</nav>
</header>
<main>
<!-- hero -->
<section id="home" class="min-h-screen flex flex-col md:flex-row items-center container mx-auto px-6">
<div class="flex-1">
<h1 class="text-4xl md:text-6xl font-serif text-heading">
Hi, I’m Cecilia.
</h1>
<p class="mt-4 text-xl">PhD Researcher & Python Enthusiast.</p>
<p class="mt-2">
Bridging technology and community development in Mozambique.
</p>
</div>
<div class="flex-1 mt-8 md:mt-0">
<img src="assets/img/cecilia.jpg" alt="Cecilia Tivir"
class="rounded-lg shadow-lg w-full object-cover" />
</div>
</section>
<!-- capulana divider (example SVG, keep it subtle) -->
<div class="my-12">
<svg class="w-full h-6" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
<path d="M0 0 L100 6 L200 0" fill="none" stroke="#D4A017" stroke-width="2" />
</svg>
</div>
<!-- research -->
<section id="research" class="container mx-auto py-12">
<h2 class="text-3xl font-serif text-center text-heading">Research</h2>
<div class="mt-8 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
<article class="bg-white rounded-lg shadow p-6">
<h3 class="font-serif text-xl text-heading">
Learning Analytics
</h3>
<p class="mt-2">This project analyzes Moodle action logs and grades to
understand student engagement and predict academic performance...</p>
<a href="https://github.com/ctivir/moodle-analytics-pipeline" class="mt-4 inline-block text-primary font-medium">
Learn more →
</a>
</article>
<!-- duplicate for MOOCs, SRL, etc. -->
<article class="bg-white rounded-lg shadow p-6">
<h3 class="font-serif text-xl text-heading">
Maize Leaf Diseases Classification
</h3>
<p class="mt-2">This study leverages Machine Learning and Deep Learning (CNNs)
to automate the detection of Maize Streak Virus and Fall Armyworm in
Sub-Saharan Africa...</p>
<a href="https://link.springer.com/chapter/10.1007/978-3-031-94442-0_8" class="mt-4 inline-block text-primary font-medium">
Learn more →
</a>
</article>
<article class="bg-white rounded-lg shadow p-6">
<h3 class="font-serif text-xl text-heading">
Moodle and Cognix Integration
</h3>
<p class="mt-2">This project focuses on the technical integration between the
Moodle VLE and the Cognix Repository to streamline the storage and retrieval
of digital learning objects...</p>
<a href="https://www.tise.cl/volumen13/TISE2017/02.pdf" class="mt-4 inline-block text-primary font-medium">
Learn more →
</a>
</article>
</div>
</section>
<div class="my-12">
<!-- repeat divider if desired -->
</div>
<!-- community -->
<section id="community" class="container mx-auto py-12">
<h2 class="text-3xl font-serif text-center text-heading">Community</h2>
<div class="mt-8 grid gap-8 sm:grid-cols-2">
<div class="relative overflow-hidden rounded-lg shadow-lg">
<img src="assets/img/wansatilab.jpg" alt="Wansati Lab" class="w-full h-64 object-cover" />
<div class="absolute inset-0 bg-black bg-opacity-25 flex items-center justify-center">
<a href="#" class="text-white font-semibold text-lg bg-primary px-4 py-2 rounded">
Wansati Lab →
</a>
</div>
</div>
<div class="relative overflow-hidden rounded-lg shadow-lg">
<img src="assets/img/djangogirls.png" alt="Django Girls" class="w-full h-64 object-cover" />
<div class="absolute inset-0 bg-black bg-opacity-25 flex items-center justify-center">
<a href="#" class="text-white font-semibold text-lg bg-primary px-4 py-2 rounded">
Django Girls →
</a>
</div>
</div>
</div>
</section>
<!-- awards & prizes -->
<section id="awards" class="container mx-auto py-12">
<h2 class="text-3xl font-serif text-center text-heading">Awards & Recognition</h2>
<div class="mt-8 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border-l-4 border-accent">
<div class="flex items-center mb-4">
<span class="text-3xl mr-3"></span>
<h3 class="font-serif text-lg text-heading">Co-founder, Mozambican Women in Technology</h3>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Leadership & Diversity • Ongoing</p>
<p class="text-text dark:text-gray-300">Passionate about advancing gender inclusion and diversity in
the Mozambican tech ecosystem.</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border-l-4 border-primary">
<div class="flex items-center mb-4">
<span class="text-3xl mr-3"></span>
<h3 class="font-serif text-lg text-heading">Co-organizer, Django Girls Mozambique</h3>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Community Education • 2015–Present</p>
<p class="text-text dark:text-gray-300">Organizing workshops and training programs in Maputo,
Matola, and Xai-Xai to introduce women to Django and web development.</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border-l-4 border-accent">
<div class="flex items-center mb-4">
<span class="text-3xl mr-3"></span>
<h3 class="font-serif text-lg text-heading">Co-organizer, PyLadies Maputo</h3>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Python Community • 2016–Present</p>
<p class="text-text dark:text-gray-300">Building a supportive community for women in Python
development and open source contributions.</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border-l-4 border-primary">
<div class="flex items-center mb-4">
<span class="text-3xl mr-3"></span>
<h3 class="font-serif text-lg text-heading">Conference Speaker & Mentor</h3>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-2">PyLadies &Community Events • Recent</p>
<p class="text-text dark:text-gray-300">Talk: "Beyond Code: Dinâmicas Emocionais das Comunidades
PyLadies" and "Mentorship That Works" on effective community leadership.</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border-l-4 border-accent">
<div class="flex items-center mb-4">
<span class="text-3xl mr-3"></span>
<h3 class="font-serif text-lg text-heading">PhD Researcher, Big Data & AI</h3>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Gaston Berger University • In Progress</p>
<p class="text-text dark:text-gray-300">Focus: Artificial Intelligence in Education, Educational
Data Mining, and intelligent systems for learning.</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border-l-4 border-primary">
<div class="flex items-center mb-4">
<span class="text-3xl mr-3"></span>
<h3 class="font-serif text-lg text-heading">Community Leader, Python Maputo</h3>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Active Member & Contributor • Ongoing</p>
<p class="text-text dark:text-gray-300">Fostering growth and collaboration in the Mozambique Python
community through events, mentorship, and advocacy.</p>
</div>
</div>
</section>
<!-- blog section -->
<section id="blog" class="container mx-auto py-12">
<h2 class="text-3xl font-serif text-center text-heading">Blog</h2>
<div class="mt-8 max-w-2xl mx-auto">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-8 text-center">
<p class="text-lg text-text dark:text-gray-300 mb-4">
I share thoughts on learning analytics, Python development, and tech community building on
Medium.
</p>
<a href="https://medium.com/@ceciliativir" target="_blank" rel="noopener noreferrer"
class="inline-block bg-primary hover:bg-opacity-90 text-white px-6 py-3 rounded-lg font-medium transition">
Read my articles on Medium →
</a>
</div>
</div>
</section>
<!-- contact -->
<section id="contact" class="container mx-auto py-12">
<h2 class="text-3xl font-serif text-center text-heading">Contact</h2>
<form class="mt-8 max-w-lg mx-auto space-y-4">
<input type="text" name="name" placeholder="Your name"
class="w-full border border-gray-300 rounded px-4 py-2" />
<input type="email" name="email" placeholder="Your email"
class="w-full border border-gray-300 rounded px-4 py-2" />
<textarea name="message" rows="5" placeholder="Message"
class="w-full border border-gray-300 rounded px-4 py-2"></textarea>
<button type="submit" class="bg-primary text-white px-6 py-2 rounded font-medium">
Send
</button>
</form>
</section>
</main>
<!-- footer -->
<footer class="bg-white dark:bg-gray-800 py-6 mt-12">
<div class="container mx-auto text-center text-sm text-gray-500 dark:text-gray-400">
© 2026 Cecilia Tivir. All rights reserved.
</div>
</footer>
<script>
// Dark mode toggle functionality
const themeToggle = document.getElementById('theme-toggle');
themeToggle.addEventListener('click', () => {
const html = document.documentElement;
const isDark = html.classList.contains('dark');
if (isDark) {
html.classList.remove('dark');
localStorage.setItem('theme', 'light');
} else {
html.classList.add('dark');
localStorage.setItem('theme', 'dark');
}
});
</script>
</body>
</html>