-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
332 lines (286 loc) · 14.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
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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/png" href="/favicon.png" />
<!-- Font family -->
<link href="https://api.fontshare.com/v2/css?f[]=ranade@700,300,400,500&display=swap" rel="stylesheet">
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/022d96bb69.js" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Luca Picci</title>
<meta name="description" content="Luca Picci's personal website" />
<meta name="keywords" content="Luca Picci, Luca, Picci, data, international development, data visualization, Python" />
</head>
<body>
<!-- header and navigation -->
<header class="header container">
<div class="header__title">
<h2>Luca Picci</h3>
</div>
<div class="header__menu">
<nav>
<ul class="header__menu-list">
<li><a class="header__menu-link" href="#my-work">My work</a></li>
<li><a class="header__menu-link" href="#about-me">About me</a></li>
<li><a class="header__menu-link" href="/LucaPicci/resume.pdf" target="_blank">Resume</a></li>
</ul>
<!-- bar button for mobile -->
<button class="header__mobile-btn" aria-label="mobile navigation button">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
</button>
</nav>
</div>
</header>
<!-- Mobile navigation window -->
<div class="mobile-nav">
<nav>
<ul class="mobile-nav__menu">
<li><a class="mobile-nav__menu-link" href="#my-work">My work</a></li>
<li><a class="mobile-nav__menu-link" href="#about-me">About me</a></li>
<li><a class="mobile-nav__menu-link" href="/LucaPicci/resume.pdf" target="_blank">Resume</a></li>
</ul>
</nav>
</div>
<main>
<!-- Hero -->
<section class="hero container">
<div>
<div class="hero__nameBlock">
<img class="hero__headshot" src="/headshot.jpg" alt="headshot portfolio picture of Luca">
<div>
<p class="hero__content">Hi, I'm <strong>Luca</strong>.</p>
<p class="hero__content">I do <span id="typing-paragraph__skills"></span></p>
</div>
</div>
<p class="hero__content hero__content-description">I'm a senior data analyst at
<a href="https://data.one.org/" target="_blank">the ONE Campaign</a>.
<br>
I build visualisations, data tools, and analyses to understand and tackle the most challenging issues in global development.</p>
<div class="social__container hero__social-container">
<a class="fa fa-github social__icon" href="https://github.com/lpicci96" target="_blank" aria-label="GitHub link"></a>
<a class="fa-brands fa-x-twitter social__icon" href="https://twitter.com/lpicci96" target="_blank" aria-label="Twitter X link"></a>
<a class="fa fa-linkedin social__icon" href="https://www.linkedin.com/in/luca-picci-589735b3/" target="_blank" aria-label="LinkedIn link"></a>
<a class="fa fa-envelope social__icon" href="mailto:[email protected]" target="_blank" aria-label="Email link"></a>
</div>
<div class="social__container">
<a class=" fa-solid fa-chevron-down down-chevron bounce" href="#my-work"></a>
</div>
</div>
</section>
<!-- My Work section -->
<section class="container">
<h3 class="work__title" id="my-work">Explore my recent work and projects</h3>
<div class="work__container">
<!-- Project Vaccine Manufacturing-->
<div class="work__project-contents">
<a href = "https://data.one.org/data-dives/manufacturing/" target="_blank">
<img loading="lazy" src="/projects/vaccines.png" alt="GIF scrolling a webpage">
</a>
<div>
<h4 class="work__project-title">
<a href="https://data.one.org/data-dives/manufacturing/" target="_blank">
Vaccine Manufacturing
</a>
</h4>
<div class="work__project-description">
<p>Why it is essential for Africa to build its vaccine manufacturing capacity and reach vaccine sovereignty.</p>
<div class="work__project-tools"><span class="fa fa-wrench"></span><span> Python, Flourish, D3.js</span></div>
</div>
</div>
</div>
<!-- DuBois DuBois poverty -->
<div class="work__project-contents">
<a href="https://observablehq.com/d/38bd95681cf4c0df" target="_blank">
<img loading="lazy" src="/projects/observable.png" alt="Screenshot of a Du Bois bar chart recreation">
</a>
<div>
<h4 class="work__project-title">
<a href="https://observablehq.com/d/38bd95681cf4c0df" target="_blank">
A DuBoisian exploration of global poverty
</a>
</h4>
<div class="work__project-description">
<p>Showcasing W.E.B DuBois visualisation styles and exploring trends in global poverty</p>
<div class="work__project-tools"><span class="fa fa-wrench"></span><span> D3.js, Vanilla JS, Observable Plot, CSS</span></div>
</div>
</div>
</div>
<!-- Climate Finance-->
<div class="work__project-contents">
<a href = "https://datacommons.one.org/climate-finance-files" target="_blank">
<img loading="lazy" src="/projects/image.png" alt="Image of the landing page for the project">
</a>
<div>
<h4 class="work__project-title">
<a href="https://datacommons.one.org/climate-finance-files" target="_blank">
Climate Finance
</a>
</h4>
<div class="work__project-description">
<p>How much is really being spent to address climate change and why are reporting methodologies an issue?</p>
<div class="work__project-tools"><span class="fa fa-wrench"></span><span> Python</span></div>
</div>
</div>
</div>
<!-- Gender DataDive -->
<div class="work__project-contents">
<a href="https://data.one.org/data-dives/women-arent-given-power-they-make-it/" target="_blank">
<img loading="lazy" src="/projects/genderViz.png" alt="Beeswarm chart showing gender inequality for countries">
</a>
<div>
<h4 class="work__project-title">
<a href="https://data.one.org/data-dives/women-arent-given-power-they-make-it/" target="_blank">
Gender and Development
</a>
</h4>
<div class="work__project-description">
<p>How gender inequality is preventing progress in human development</p>
<div>
<a class="work__project-tools" href="https://github.com/ONEcampaign/DataDive_Gender" target="_blank">
<span class="fa fa-code"></span>
<span> Access the respository</span>
</a>
</div>
<div class="work__project-tools"><span class="fa fa-wrench"></span><span> Python, Flourish, CSS</span></div>
</div>
</div>
</div>
<!-- unesco-reader-->
<div class="work__project-contents">
<a href="https://pypi.org/project/unesco-reader/" target="_blank">
<img loading="lazy" class="work__img" src="/projects/unesco.png" alt="screenshot of the python package documentation">
</a>
<div>
<h4 class="work__project-title">
<a href="https://pypi.org/project/unesco-reader/" target="_blank">
unesco-reader
</a>
</h4>
<div class="work__project-description">
<p>A Python package to access UNESCO data</p>
<div>
<a class="work__project-tools" href="https://github.com/lpicci96/unesco_reader" target="_blank">
<span class="fa fa-code"></span>
<span>Access the code</span>
</a>
</div>
<div class="work__project-tools"><span class="fa fa-wrench"></span><span> Python</span></div>
</div>
</div>
</div>
<!-- imf-reader-->
<div class="work__project-contents">
<a href="https://pypi.org/project/imf-reader/" target="_blank">
<img loading="lazy" class="work__img" src="/projects/imf-reader.png" alt="GIF scrolling a webpage">
</a>
<div>
<h4 class="work__project-title">
<a href="https://pypi.org/project/imf-reader/" target="_blank">
imf-reader
</a>
</h4>
<div class="work__project-description">
<p>A Python package to access IMF World Economic Outlook (WEO) data</p>
<div>
<a class="work__project-tools" href="https://github.com/ONEcampaign/imf-reader" target="_blank">
<span class="fa fa-code"></span>
<span>Access the code</span>
</a>
</div>
<div class="work__project-tools"><span class="fa fa-wrench"></span><span> Python</span></div>
</div>
</div>
</div>
<!-- Project 4 IPSOS survey Tableau dashboard-->
<div class="work__project-contents">
<a href="https://public.tableau.com/views/AddressingVaccineInequitySurvey/AddressingVaccineInequitySurvey?:language=en-US&:display_count=n&:origin=viz_share_link" target="_blank">
<img loading="lazy" src="/projects/vaccine_equity.png" alt="Screenshot of a Tableau dashboard">
</a>
<div>
<h4 class="work__project-title">
<a href="https://public.tableau.com/views/AddressingVaccineInequitySurvey/AddressingVaccineInequitySurvey?:language=en-US&:display_count=n&:origin=viz_share_link" target="_blank">
Addressing Vaccine Inequality
</a>
</h4>
<div class="work__project-description">
<p>Dashboard for the ONE Campaign using IPSOS data</p>
<div class="work__project-tools"><span class="fa fa-wrench"></span><span> Python, Tableau</span></div>
</div>
</div>
</div>
<!-- Project 5 FlipbookR -->
<div class="work__project-contents">
<a href="https://posit.co/blog/building-code-movies-with-flipbookr/" target="_blank">
<img loading="lazy" src="/projects/flipbookR.gif" alt="GIF scrolling a code movie">
</a>
<div>
<h4 class="work__project-title">
<a href="https://posit.co/blog/building-code-movies-with-flipbookr/" target="_blank">
FlipbookR package demos
</a>
</h4>
<div class="work__project-description">
<p>Contribution to Gina Reynold's FlipbookR package</p>
<div class="work__project-tools"><span class="fa fa-wrench"></span><span> R</span></div>
</div>
</div>
</div>
</div>
</section>
<!-- About -->
<section class="container">
<h3 class="about__title" id="about-me">About me</h3>
<div class="about__container">
<div class="about__img-container">
<img loading="lazy" src="/about-me-blur-crop.png" alt="Photo of Luca smiling">
</div>
<div class="about__description">
<p>
I am passionate about using data and data visualisation understand complex global issues and to make decisions
for a better future.
</p>
<p>
I work on issues ranging from
global health to gender equality and climate change. I build modern data tools
and Python packages to make global development data more accessible. I make data visualisations
to clearly explain complex, multifaceted, and often interelated issues in global development.
</p>
<p>
I am from Sardinia, and currently live in Paris. In my free time I am a fiercly competitive tennis player or out enjoying
fresh air on my bike.
</p>
<p>
Reach out if you would like to collaborate on a project or chat about my work!
</p>
<div class="about__reachout-btn">
<button class="about__reachout-btn btn" aria-label="Reach out button">
<a class="about__reachout-link" href="mailto:[email protected]" target="_blank">Reach Out</a>
</button>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="footer container">
<div class="footer__container">
<span class="footer__text">Copyright © Luca Picci 2024</span>
<div class="social__container">
<a class="fa fa-github social__icon footer__social-icon" href="https://github.com/lpicci96" target="_blank" aria-label="GitHub link"></a>
<a class="fa-brands fa-x-twitter social__icon footer__social-icon" href="https://twitter.com/lpicci96" target="_blank" aria-label="Twitter X link"></a>
<a class="fa fa-linkedin social__icon footer__social-icon" href="https://www.linkedin.com/in/luca-picci-589735b3/" target="_blank" aria-label="LinkedIn link"></a>
<a class="fa fa-envelope social__icon footer__social-icon" href="mailto:[email protected]" target="_blank" aria-label="Email link"></a>
</div>
<span class="footer__text">Built with
<a class="footer__vite-link" href="https://vitejs.dev/" target="_blank">
Vite
</a>
</span>
</div>
</footer>
<script type="module" src="./src/main.js"></script>
</body>
</html>