Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
307 lines (286 loc) · 21.1 KB
/
Copy pathindex.html
File metadata and controls
307 lines (286 loc) · 21.1 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
<!DOCTYPE html>
<html lang="en-GB" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Franco Ferrari-Accardi | Portfolio</title>
<meta name="description" content="Electronic Engineer and Educator in Manchester, UK. Learning systems, EdTech apps, educational robotics curricula and AI workflow automation." />
<script src="https://cdn.tailwindcss.com"></script>
<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@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
body { font-family: 'Inter', sans-serif; }
</style>
</head>
<body class="bg-slate-50 text-slate-900 antialiased selection:bg-blue-600 selection:text-white">
<!-- Top Navigation -->
<header class="sticky top-0 z-30 bg-white/90 backdrop-blur border-b border-slate-200">
<div class="max-w-5xl mx-auto px-6 h-16 flex items-center justify-between">
<a href="#" class="font-bold text-slate-900 tracking-tight">Franco Ferrari-Accardi</a>
<nav class="hidden sm:flex items-center gap-6 text-sm font-medium text-slate-600">
<a href="#edtech" class="hover:text-slate-900 transition">EdTech & Robotics</a>
<a href="#platform" class="hover:text-slate-900 transition">Digital Platform</a>
<a href="#automation" class="hover:text-slate-900 transition">AI & Automation</a>
<a href="#background" class="hover:text-slate-900 transition">Background</a>
<a href="https://github.com/fferracc" target="_blank" rel="noopener" class="text-blue-700 hover:text-blue-800 font-semibold">GitHub →</a>
</nav>
</div>
</header>
<main class="max-w-5xl mx-auto px-6 py-12 sm:py-16 space-y-20">
<!-- Hero Section -->
<section class="flex flex-col-reverse md:flex-row items-center gap-10 md:gap-14">
<div class="flex-1 space-y-5 text-center md:text-left">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-50 border border-blue-200 text-blue-800 text-xs font-semibold tracking-wide uppercase">
Manchester, UK · English & Spanish
</div>
<h1 class="text-3xl sm:text-5xl font-extrabold tracking-tight text-slate-900 leading-tight">
Electronic Engineer & Educator
</h1>
<p class="text-lg text-slate-600 leading-relaxed max-w-2xl">
I design and build learning systems, educational robotics programmes and workflow automations for organisations working with children, young people and adults developing digital skills.
</p>
<div class="flex flex-wrap justify-center md:justify-start gap-3 pt-2">
<a href="https://github.com/fferracc" target="_blank" rel="noopener" class="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-slate-900 text-white text-sm font-semibold hover:bg-slate-800 transition shadow-sm">
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
GitHub Profile
</a>
<a href="https://www.linkedin.com/in/franco-ferrari-accardi-2056a461/" target="_blank" rel="noopener" class="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-blue-600 text-white text-sm font-semibold hover:bg-blue-700 transition shadow-sm">
LinkedIn Profile
</a>
</div>
</div>
<div class="shrink-0">
<img src="profile.jpg" alt="Franco Ferrari-Accardi" class="w-44 h-44 sm:w-56 sm:h-56 rounded-full object-cover shadow-lg ring-4 ring-white border border-slate-200" />
</div>
</section>
<!-- Impact Metrics Bar -->
<section class="grid grid-cols-1 sm:grid-cols-3 gap-4">
<div class="bg-white rounded-xl p-6 border border-slate-200 shadow-sm">
<div class="text-2xl font-extrabold text-slate-900">312+ Learners</div>
<div class="text-sm text-slate-600 mt-1">Active learner records and 2,564 attendance logs across the UK and Ghana digital platform.</div>
</div>
<div class="bg-white rounded-xl p-6 border border-slate-200 shadow-sm">
<div class="text-2xl font-extrabold text-slate-900">300 → 1,200 Students/yr</div>
<div class="text-sm text-slate-600 mt-1">Scaled Fundación Mustakis' national educational robotics programme across 11 Chilean cities.</div>
</div>
<div class="bg-white rounded-xl p-6 border border-slate-200 shadow-sm">
<div class="text-2xl font-extrabold text-slate-900">9 Open Repositories</div>
<div class="text-sm text-slate-600 mt-1">Production apps, multilingual forms, coding games, robotics curricula and AI automations.</div>
</div>
</section>
<!-- Section 1: EdTech & Educational Robotics -->
<section id="edtech" class="space-y-6">
<div>
<h2 class="text-2xl font-bold text-slate-900">EdTech & Educational Robotics</h2>
<p class="text-slate-600 text-sm mt-1">Learning games, early years applications and structured robotics curricula designed around computational thinking.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Fido's Kente Quest -->
<article class="bg-white rounded-xl border border-slate-200 p-6 flex flex-col justify-between shadow-sm hover:shadow-md transition">
<div class="space-y-3">
<div class="flex items-center justify-between gap-2">
<span class="text-xs font-semibold px-2.5 py-0.5 rounded bg-amber-50 text-amber-800 border border-amber-200">Coding Game</span>
<span class="text-xs text-slate-400">HTML5 Canvas · JS</span>
</div>
<h3 class="text-lg font-bold text-slate-900">Fido's Kente Quest</h3>
<p class="text-sm text-slate-600 leading-relaxed">
Browser coding game teaching children sequencing, decomposition and step by step debugging. Players queue movement commands to guide Fido across a grid and reach the kente cloth. Built independently and donated to Sovereign House GH.
</p>
</div>
<div class="pt-5 mt-5 border-t border-slate-100 flex items-center gap-3 text-sm font-semibold">
<a href="https://fidos-quest-game.web.app" target="_blank" rel="noopener" class="text-blue-600 hover:text-blue-800">Live Game →</a>
<span class="text-slate-300">·</span>
<a href="https://github.com/fferracc/fidos-kente-quest" target="_blank" rel="noopener" class="text-slate-600 hover:text-slate-900">Source Code</a>
</div>
</article>
<!-- Kids Learning App -->
<article class="bg-white rounded-xl border border-slate-200 p-6 flex flex-col justify-between shadow-sm hover:shadow-md transition">
<div class="space-y-3">
<div class="flex items-center justify-between gap-2">
<span class="text-xs font-semibold px-2.5 py-0.5 rounded bg-emerald-50 text-emerald-800 border border-emerald-200">Early Years App</span>
<span class="text-xs text-slate-400">React 19 · TypeScript</span>
</div>
<h3 class="text-lg font-bold text-slate-900">Kids Learning App</h3>
<p class="text-sm text-slate-600 leading-relaxed">
Spoken learning app for alphabet, numbers and simple addition up to 10. Uses the Web Speech API so every instruction and prompt is read aloud for pre-readers. Built independently and donated to Sovereign House GH.
</p>
</div>
<div class="pt-5 mt-5 border-t border-slate-100 flex items-center gap-3 text-sm font-semibold">
<a href="https://kids-learning-app-12ebc.web.app" target="_blank" rel="noopener" class="text-blue-600 hover:text-blue-800">Live App →</a>
<span class="text-slate-300">·</span>
<a href="https://github.com/fferracc/kids-learning-app" target="_blank" rel="noopener" class="text-slate-600 hover:text-slate-900">Source Code</a>
</div>
</article>
<!-- mBot Neo Robotics Curriculum -->
<article class="bg-white rounded-xl border border-slate-200 p-6 flex flex-col justify-between shadow-sm hover:shadow-md transition">
<div class="space-y-3">
<div class="flex items-center justify-between gap-2">
<span class="text-xs font-semibold px-2.5 py-0.5 rounded bg-purple-50 text-purple-800 border border-purple-200">Curriculum</span>
<span class="text-xs text-slate-400">mBot2 · mBlock 5</span>
</div>
<h3 class="text-lg font-bold text-slate-900">mBot Neo Robotics Curriculum</h3>
<p class="text-sm text-slate-600 leading-relaxed">
Complete 12 hour project based syllabus (six 2 hour sessions) for learners aged 11 to 16. Covers sensors, loops, variables, conditionals, logical operators and autonomous line following with obstacle detection.
</p>
</div>
<div class="pt-5 mt-5 border-t border-slate-100 flex items-center gap-3 text-sm font-semibold">
<a href="https://github.com/fferracc/mbot-robotics-curriculum" target="_blank" rel="noopener" class="text-blue-600 hover:text-blue-800">Read Full Syllabus →</a>
</div>
</article>
</div>
</section>
<!-- Section 2: Full Stack Digital Platform -->
<section id="platform" class="space-y-6">
<div>
<h2 class="text-2xl font-bold text-slate-900">Full Stack Charity Operations Platform</h2>
<p class="text-slate-600 text-sm mt-1">Interconnected Next.js, React and Capacitor Android applications built for Sovereign House GH in Greater Manchester and Ghana.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Intranet Portal -->
<article class="bg-white rounded-xl border border-slate-200 p-6 flex flex-col justify-between shadow-sm hover:shadow-md transition">
<div class="space-y-3">
<div class="flex items-center justify-between gap-2">
<span class="text-xs font-semibold px-2.5 py-0.5 rounded bg-blue-50 text-blue-800 border border-blue-200">Operations Portal</span>
<span class="text-xs text-slate-400">Next.js 15 · TypeScript · Firebase</span>
</div>
<h3 class="text-lg font-bold text-slate-900">SHGH Intranet Portal</h3>
<p class="text-sm text-slate-600 leading-relaxed">
Central staff portal handling student and volunteer recruitment, UK and Ghana attendance analytics, annual leave, policy compliance, laptop inventory, grant tracking and Gemini AI assistants for grant writing and social media. Sends Microsoft 365 mail via workload identity federation with zero stored secrets.
</p>
</div>
<div class="pt-5 mt-5 border-t border-slate-100 flex items-center gap-3 text-sm font-semibold">
<a href="https://shgh-portal.web.app" target="_blank" rel="noopener" class="text-blue-600 hover:text-blue-800">Live Portal →</a>
<span class="text-slate-300">·</span>
<a href="https://github.com/fferracc/shgh-intranet-portal" target="_blank" rel="noopener" class="text-slate-600 hover:text-slate-900">Source Code</a>
</div>
</article>
<!-- UK Learning App -->
<article class="bg-white rounded-xl border border-slate-200 p-6 flex flex-col justify-between shadow-sm hover:shadow-md transition">
<div class="space-y-3">
<div class="flex items-center justify-between gap-2">
<span class="text-xs font-semibold px-2.5 py-0.5 rounded bg-blue-50 text-blue-800 border border-blue-200">Android & Web App</span>
<span class="text-xs text-slate-400">Capacitor · Firebase · JS</span>
</div>
<h3 class="text-lg font-bold text-slate-900">SHGH Learning App (UK)</h3>
<p class="text-sm text-slate-600 leading-relaxed">
Used by teachers, volunteers and admins across Greater Manchester digital skills courses to take offline capable registers, submit session reports, log volunteer hours and award service badges. Features automatic rollback over the air updates.
</p>
</div>
<div class="pt-5 mt-5 border-t border-slate-100 flex items-center gap-3 text-sm font-semibold">
<a href="https://shgh-lms1.web.app" target="_blank" rel="noopener" class="text-blue-600 hover:text-blue-800">Live Web App →</a>
<span class="text-slate-300">·</span>
<a href="https://github.com/fferracc/shgh-learning-app-uk" target="_blank" rel="noopener" class="text-slate-600 hover:text-slate-900">Source Code</a>
</div>
</article>
<!-- Ghana Attendance App -->
<article class="bg-white rounded-xl border border-slate-200 p-6 flex flex-col justify-between shadow-sm hover:shadow-md transition">
<div class="space-y-3">
<div class="flex items-center justify-between gap-2">
<span class="text-xs font-semibold px-2.5 py-0.5 rounded bg-blue-50 text-blue-800 border border-blue-200">Offline First App</span>
<span class="text-xs text-slate-400">Capacitor · Firestore Offline</span>
</div>
<h3 class="text-lg font-bold text-slate-900">SHGH Attendance App (Ghana)</h3>
<p class="text-sm text-slate-600 leading-relaxed">
Built for low connectivity at Sovereign House GH's school in Ghana. Teachers take class attendance from Creche to Primary, manage school library loans and request leave, with offline Firestore caching and over the air updates.
</p>
</div>
<div class="pt-5 mt-5 border-t border-slate-100 flex items-center gap-3 text-sm font-semibold">
<a href="https://shgh-attendance-redesign.web.app" target="_blank" rel="noopener" class="text-blue-600 hover:text-blue-800">Live Web App →</a>
<span class="text-slate-300">·</span>
<a href="https://github.com/fferracc/shgh-attendance-app-ghana" target="_blank" rel="noopener" class="text-slate-600 hover:text-slate-900">Source Code</a>
</div>
</article>
<!-- Multilingual Application Forms -->
<article class="bg-white rounded-xl border border-slate-200 p-6 flex flex-col justify-between shadow-sm hover:shadow-md transition">
<div class="space-y-3">
<div class="flex items-center justify-between gap-2">
<span class="text-xs font-semibold px-2.5 py-0.5 rounded bg-blue-50 text-blue-800 border border-blue-200">Multilingual Forms</span>
<span class="text-xs text-slate-400">React 19 · i18next · Firebase</span>
</div>
<h3 class="text-lg font-bold text-slate-900">SHGH Application Forms</h3>
<p class="text-sm text-slate-600 leading-relaxed">
Mobile friendly public course application, robotics enrolment and partner referral forms in five languages (English, Arabic, Tigrinya, Amharic and Farsi) with automatic right to left layout and PayPal payment confirmation.
</p>
</div>
<div class="pt-5 mt-5 border-t border-slate-100 flex items-center gap-3 text-sm font-semibold">
<a href="https://github.com/fferracc/shgh-application-forms" target="_blank" rel="noopener" class="text-blue-600 hover:text-blue-800">Source Code →</a>
</div>
</article>
</div>
</section>
<!-- Section 3: AI & Workflow Automation -->
<section id="automation" class="space-y-6">
<div>
<h2 class="text-2xl font-bold text-slate-900">AI & Workflow Automation</h2>
<p class="text-slate-600 text-sm mt-1">Event driven automation pipelines, computer vision safeguarding tools and programmatic publishing.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- n8n Automations -->
<article class="bg-white rounded-xl border border-slate-200 p-6 flex flex-col justify-between shadow-sm hover:shadow-md transition">
<div class="space-y-3">
<div class="flex items-center justify-between gap-2">
<span class="text-xs font-semibold px-2.5 py-0.5 rounded bg-slate-100 text-slate-800 border border-slate-200">Workflow Automation</span>
<span class="text-xs text-slate-400">n8n · Google Workspace · PayPal</span>
</div>
<h3 class="text-lg font-bold text-slate-900">n8n Automations</h3>
<p class="text-sm text-slate-600 leading-relaxed">
Importable n8n workflows and REST configuration scripts that provision student Google Workspace accounts, enrol learners in Google Classroom, send Gmail and WhatsApp welcome messages, and reconcile PayPal IPN and webhook payments in Firestore.
</p>
</div>
<div class="pt-5 mt-5 border-t border-slate-100 flex items-center gap-3 text-sm font-semibold">
<a href="https://github.com/fferracc/n8n-automations" target="_blank" rel="noopener" class="text-blue-600 hover:text-blue-800">Source Code →</a>
</div>
</article>
<!-- Website & Safeguarding Automation -->
<article class="bg-white rounded-xl border border-slate-200 p-6 flex flex-col justify-between shadow-sm hover:shadow-md transition">
<div class="space-y-3">
<div class="flex items-center justify-between gap-2">
<span class="text-xs font-semibold px-2.5 py-0.5 rounded bg-slate-100 text-slate-800 border border-slate-200">Web & Computer Vision</span>
<span class="text-xs text-slate-400">Python · OpenCV · Puppeteer</span>
</div>
<h3 class="text-lg font-bold text-slate-900">Website & Safeguarding Automation</h3>
<p class="text-sm text-slate-600 leading-relaxed">
Local WordPress mirror, automated REST API page publishers, Puppeteer verification scripts and an OpenCV face detection pipeline that automatically anonymises children's faces in workshop photos before publication.
</p>
</div>
<div class="pt-5 mt-5 border-t border-slate-100 flex items-center gap-3 text-sm font-semibold">
<a href="https://github.com/fferracc/shgh-website-automation" target="_blank" rel="noopener" class="text-blue-600 hover:text-blue-800">Source Code →</a>
</div>
</article>
</div>
</section>
<!-- Background & Education -->
<section id="background" class="bg-white rounded-2xl border border-slate-200 p-8 shadow-sm space-y-6">
<h2 class="text-2xl font-bold text-slate-900">Background & Qualifications</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 text-sm text-slate-700">
<div class="space-y-3">
<h3 class="font-bold text-slate-900 uppercase tracking-wider text-xs">Career</h3>
<ul class="space-y-2.5">
<li><strong class="text-slate-900">Digital Inclusion Officer</strong> · Sovereign House GH (Greater Manchester & Ghana, 2025 to Present)</li>
<li><strong class="text-slate-900">STEM Learning Manager</strong> · Eureka! Science + Discovery (2023 to 2025)</li>
<li><strong class="text-slate-900">National Manager, Educational Robotics</strong> · Fundación Mustakis, Chile (2016 to 2020)</li>
</ul>
</div>
<div class="space-y-3">
<h3 class="font-bold text-slate-900 uppercase tracking-wider text-xs">Education & Research</h3>
<ul class="space-y-2.5">
<li><strong class="text-slate-900">MA Education (Social Justice)</strong> · University of Birmingham, UK (Merit)</li>
<li><strong class="text-slate-900">BSc Electronic Engineering</strong> · Universidad de La Frontera, Chile (Distinction)</li>
<li><strong class="text-slate-900">Research Interests:</strong> Computational thinking assessment, Bayesian Knowledge Tracing, Rasch modelling</li>
</ul>
</div>
</div>
</section>
</main>
<footer class="border-t border-slate-200 bg-white py-8 text-center text-sm text-slate-500">
<div class="max-w-5xl mx-auto px-6 flex flex-col sm:flex-row items-center justify-between gap-4">
<span>Franco Ferrari-Accardi · Manchester, UK</span>
<div class="flex items-center gap-5">
<a href="https://github.com/fferracc" target="_blank" rel="noopener" class="hover:text-slate-900">GitHub</a>
<a href="https://www.linkedin.com/in/franco-ferrari-accardi-2056a461/" target="_blank" rel="noopener" class="hover:text-slate-900">LinkedIn</a>
</div>
</div>
</footer>
</body>
</html>