Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
595 lines (476 loc) · 43.2 KB
/
Copy pathindex.html
File metadata and controls
595 lines (476 loc) · 43.2 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
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width"/>
<meta name="google" contemt="notranslate" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <!--fontAwsome style for rating icon-->
<script src="utils.js"></script>
<title>Michela Parma</title>
<link rel="icon" href="images/logo.png">
<link rel="stylesheet" href="style.css" />
</head>
<body class="page--intro">
<div id="en" class="cr cr-top cr-right cr-sticky cr-color first-ribbon"><a href="MichelaParmaCV.pdf" target="_blank" style="color:white">Download CV</a></div>
<div id="it" class="cr cr-top cr-right cr-sticky cr-color first-ribbon"><a href="MichelaParmaCV.pdf" target="_blank" style="color:white">Download CV</a></div>
<div id="en" class="cr cr-bottom cr-right cr-sticky cr-color second-ribbon"><a href="MichelaParmaCV.pdf" target="_blank" style="color:white">Download CV</a></div>
<div id="it" class="cr cr-bottom cr-right cr-sticky cr-color second-ribbon"><a href="MichelaParmaCV.pdf" target="_blank" style="color:white">Download CV</a></div>
<!--------------------------------------------------NAVBAR---------------------------------------->
<nav id="start" class="navbar navbar-expand-lg navbar-dark bg-dark" style="padding: 5px; background-color: black !important;">
<div class="logo-index">
<a class="index-button" >
<div>
<img class="logo" src="images/loghino.png" style="width:30px; margin-left:10px;">
</div>
</a>
</div>
<a class="index-button second-open" style="color: white; font-family: basis; font-size: 20px; text-indent: 1em;">Michela Parma</a>
<button class="navbar-toggler" type="button" data-target="#navbarNav" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation" aria-controls="navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle first-open" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="color: white; font-family: basis; font-size: 22px; margin-left:10px;">Michela Parma</a>
<div class="dropdown-menu first-open" style="font-family: basis;">
<a id="en" class="btn dropdown-item" data-toggle="modal" data-target="#michela">Who am I?</a>
<a id="it" class="btn dropdown-item" data-toggle="modal" data-target="#michela">Chi sono?</a>
<div class="dropdown-divider"></div>
<a id="en" class="btn dropdown-item" data-toggle="modal" data-target="#portfolio">Portfolio</a>
<a id="it" class="btn dropdown-item" data-toggle="modal" data-target="#portfolio">Portfolio</a>
<div class="dropdown-divider"></div>
<a id="en" class="btn dropdown-item" data-toggle="modal" data-target="#skill">Skills</a>
<a id="it" class="btn dropdown-item" data-toggle="modal" data-target="#skill">Skill</a>
<div class="dropdown-divider"></div>
<a id="en" class="btn dropdown-item" data-toggle="modal" data-target="#cv">Resume</a>
<a id="it" class="btn dropdown-item" data-toggle="modal" data-target="#cv">Curriculum</a>
<div class="dropdown-divider"></div>
<a id="en" class="btn dropdown-item" data-toggle="modal" data-target="#contacts">Contacts</a>
<a id="it" class="btn dropdown-item" data-toggle="modal" data-target="#contacts">Contatti</a>
</div>
<a id="en" href="#" class="nav-link second-open" data-toggle="modal" data-target="#michela" role="button" aria-haspopup="true" aria-expanded="false" style="color: white; font-family: basis; font-size: 15px; margin-left:20px">Who am I?</a>
<a id="it" href="#" class="nav-link second-open" data-toggle="modal" data-target="#michela" role="button" aria-haspopup="true" aria-expanded="false" style="color: white; font-family: basis; font-size: 15px; margin-left:20px">Chi sono?</a>
<a id="en" href="#" class="nav-link second-open" data-toggle="modal" data-target="#portfolio" role="button" aria-haspopup="true" aria-expanded="false" style="color: white; font-family: basis; font-size: 15px; margin-left:20px">Portfolio</a>
<a id="it" href="#" class="nav-link second-open" data-toggle="modal" data-target="#portfolio" role="button" aria-haspopup="true" aria-expanded="false" style="color: white; font-family: basis; font-size: 15px; margin-left:20px">Portfolio</a>
<a id="en" href="#" class="nav-link second-open" data-toggle="modal" data-target="#skill" role="button" aria-haspopup="true" aria-expanded="false" style="color: white; font-family: basis; font-size: 15px; margin-left:20px">Skills</a>
<a id="it" href="#" class="nav-link second-open" data-toggle="modal" data-target="#skill" role="button" aria-haspopup="true" aria-expanded="false" style="color: white; font-family: basis; font-size: 15px; margin-left:20px">Skill</a>
<a id="en" href="#" class="nav-link second-open" data-toggle="modal" data-target="#cv" role="button" aria-haspopup="true" aria-expanded="false" style="color: white; font-family: basis; font-size: 15px; margin-left:20px">Resume</a>
<a id="it" href="#" class="nav-link second-open" data-toggle="modal" data-target="#cv" role="button" aria-haspopup="true" aria-expanded="false" style="color: white; font-family: basis; font-size: 15px; margin-left:20px">Curriculum</a>
<a id="en" href="#" class="nav-link second-open" data-toggle="modal" data-target="#contacts" role="button" aria-haspopup="true" aria-expanded="false" style="color: white; font-family: basis; font-size: 15px; margin-left:20px">Contacts</a>
<a id="it" href="#" class="nav-link second-open" data-toggle="modal" data-target="#contacts" role="button" aria-haspopup="true" aria-expanded="false" style="color: white; font-family: basis; font-size: 15px; margin-left:20px">Contatti</a>
</li>
</ul>
</div>
</nav>
<!--FINE NAVBAR-->
<!--CUBE-->
<section class="content" id="content">
<div class="scene scene--hero">
<div class="cube cube--hero is-spinning">
<div><a id="en" class="btn cube__face cube__face--front" data-toggle="modal" data-target="#michela">Who am I?</a></div>
<div><a id="it" class="btn cube__face cube__face--front" data-toggle="modal" data-target="#michela">Chi sono?</a></div>
<div><a id="en" class="btn cube__face cube__face--right" data-toggle="modal" data-target="#cv">Resume</a></div>
<div><a id="it" class="btn cube__face cube__face--right" data-toggle="modal" data-target="#cv">Curriculum</a></div>
<div class="cube__face cube__face--back"></div>
<div><a id="en" class="btn cube__face cube__face--left" data-toggle="modal" data-target="#contacts">Contacts</a></div>
<div><a id="it" class="btn cube__face cube__face--left" data-toggle="modal" data-target="#contacts">Contatti</a></div>
<div><a id="en" class="btn cube__face cube__face--top" data-toggle="modal" data-target="#portfolio">Portfolio</a></div>
<div><a id="it" class="btn cube__face cube__face--top" data-toggle="modal" data-target="#portfolio">Portfolio</a></div>
<div><a id="en" class="btn cube__face cube__face--bottom" data-toggle="modal" data-target="#skill">Skills</a></div>
<div><a id="it" class="btn cube__face cube__face--bottom" data-toggle="modal" data-target="#skill">Skill</a></div>
</div>
</div>
<!-- Modal Who am I-->
<div class="modal fade" id="michela" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 id="en" class="modal-title">Who am I?</h4>
<h4 id="it" class="modal-title">Chi sono?</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body modal-style">
<img class="michela-circle" src="images/mp-circle.png" align="right">
<p id="en">I am Michela Parma, graduated in <a href="https://corsi.unibo.it/2cycle/DigitalHumanitiesKnowledge" target="_blank"><i><u>Digital Humanities and Digital Knowledge</u></i></a> at the University of Bologna.</p>
<p id="it">Sono Michela Parma, appena laureta in <a href="https://corsi.unibo.it/2cycle/DigitalHumanitiesKnowledge" target="_blank"><i><u>Digital Humanities and Digital Knowledge</u></i></a> presso l'università di Bologna</p>
<p id="en">Creativity, curiosity and interest in design have led me to this creative and communication medium that is the web. My course of study has changed a lot over the years. I have gone from love for architecture to love for History. I have never denied either of them because both have allowed me to understand what I really like to do: create websites and enrich them with content.
On the one hand the sensitivity for design, color matching and the choice of images, and on the other hand the skills of historical research. <br> I like to call myself <i>Brutalism lover</i>. Brutalism is a design current that applies to both architecture and web development: geometric, rough and visually heavy elements that are reflected in my creative choices.</p>
<p id="it">Creatività, curiosità e interesse per il design mi hanno portato a questo mezzo creativo e di comunicazione che è il web. Il mio percorso di studi è cambiato molto nel corso degli anni. Sono passata dall'amore per l'Architettura a quello per la Storia, ma non ho mai rinnegato nessuna delle due discipline perché entrambe mi hanno permesso di capire cosa mi piace davvero fare: creare siti web e contenuti.
Da un lato, quindi, la sensibilità per il design, l'abbinamento dei colori e la scelta delle immagini, dall'altro la capacità di ricerca storica. <br>Mi piace definirmi <i>Brutalism lover</i>. Il brutalismo è una corrente progettuale che si applica sia all'architettura che allo sviluppo del web: elementi geometrici, grezzi e visivamente pesanti che si riflettono nelle mie scelte creative.</p>
<h2 id="en">What I love about web design</h2>
<h2 id="it">Cosa amo del web design</h2>
<p id="en">I like to see how a project comes to life, from the original idea to the design on paper and, finally, to the technological implementation. I like to watch the project from beginning to end, and have people test the finished product. I like to study human behavior in relation to computers, the conscious and subconscious choices of people using a tool and the needs of users. Finally, I like the infinite possibilities offered by digital support.</p>
<p id="it">Mi piace vedere come nasce un progetto: dall'idea originale al disegno su carta e, infine, all'implementazione tecnologica. Mi piace seguire il progetto dall'inizio alla fine, e far testare il prodotto finito agli utenti. Mi piace studiare il comportamento umano in relazione ai computer, le scelte più o meno consapevoli delle persone e le esigenze degli utenti. Infine, mi piacciono le infinite possibilità offerte dal supporto digitale.</p>
<h2 id="en">Other interests</h2>
<h2 id="it">Altri interessi</h2>
<p id="en">I like acting, baking cakes and I love chihuahuas!</p>
<p id="it">Mi piace recitare, cucinare dolci e amo i chihuahua!</p>
</div>
<div class="modal-footer">
<button id="en" type="button" class="btn btn-default" data-dismiss="modal" style="font-family: basis; font-size: 20px;text-transform: uppercase;">Close</button>
<button id="it" type="button" class="btn btn-default" data-dismiss="modal" style="font-family: basis; font-size: 20px;text-transform: uppercase;">Chiudi</button>
</div>
</div>
</div>
</div>
<!-- Modal CV-->
<div class="modal fade" id="cv" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 id="en" class="modal-title">Resume</h4>
<h4 id="it" class="modal-title">Curriculum Vitae</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<button id="en" class="accordion"><img src="images/personal-detail.png" class="cv-images">Personal Data</button>
<div class="panel">
<h2 id="en">Michela Parma</h2>
<p id="en" class="cv">Digital Humanist</p>
<p id="en" class="cv">DOB: 14/06/1995</p>
<p id="en" class="cv">First Language: Italian</p>
<p id="en" class="cv">Other language: English (B2), German (beginner)</p>
</div>
<button id="it" class="accordion"><img src="images/personal-detail.png" class="cv-images">Dati Personali</button>
<div class="panel">
<h2 id="it">Michela Parma</h2>
<p id="it" class="cv">Laureata in Digital Humanities and Digital Knowledge</p>
<p id="it" class="cv">Data di nascita: 14/06/1995</p>
<p id="it" class="cv">Madre lingua: Italiano</p>
<p id="it" class="cv">Altre lingue: Inglese (B2), Tedesco (principiante)</p>
</div>
<hr>
<button id="en" class="accordion"><img src="images/contact.png" class="cv-images">Contacts</button>
<div class="panel">
<p id="en" class="cv">ADDRESS: Blücherstr. 16, 21335, Lüneburg, Germany</p>
<p id="en" class="cv">MOBILE: +39 3349029656 (IT)</p>
<p id="en" class="cv">PERSONAL EMAIL: <a href="mailto:michelaparma95@gmail.com" style="font-family: modern; font-size: 16px;">michelaparma95@gmail.com</a> </p>
<p id="en" class="cv">UNIVERSITY EMAIL: <a href="mailto:michela.parma4@studio.unibo.it" style="font-family: modern; font-size: 16px;">michela.parma4@studio.unibo.it</a></p>
<p id="en" class="cv">GITHUB: <a href="https://github.com/michelaparma" style="font-family: modern; font-size: 16px" target="_blank">michelaparma</a></p>
<p id="en" class="cv">LINKEDIN: <a href="https://www.linkedin.com/in/michela-parma-79a20818a/" style="font-family: modern; font-size: 16px;" target="_blank">Michela Parma</a></p>
</div>
<button id="it" class="accordion"><img src="images/contact.png" class="cv-images">Contatti</button>
<div class="panel">
<p id="it" class="cv">INDIRIZZO: Blücherstr. 16, 21335, Lüneburg, Germania</p>
<p id="it" class="cv">CELLULARE: +39 3349029656</p>
<p id="it" class="cv">EMAIL PERSONALE: <a href="mailto:michelaparma95@gmail.com" style="font-family: modern; font-size: 16px;">michelaparma95@gmail.com</a> </p>
<p id="it" class="cv">EMAIL UNIVERSITARIA: <a href="mailto:michela.parma4@studio.unibo.it" style="font-family: modern; font-size: 16px;">michela.parma4@studio.unibo.it</a></p>
<p id="it" class="cv">GITHUB: <a href="https://github.com/michelaparma" style="font-family: modern; font-size: 16px;" target="_blank">michelaparma</a></p>
<p id="it" class="cv">LINKEDIN: <a href="https://www.linkedin.com/in/michela-parma-79a20818a/" style="font-family: modern; font-size: 16px;" target="_blank">Michela Parma</a></p>
</div>
<hr>
<button id="en" class="accordion"><img src="images/education.png" class="cv-images">Education</button>
<div class="panel">
<ul>
<li id="en" class="cv">2018-2021: Second cycle degree in Digital Humanities and Digital Knowledge - <i>University of Bologna</i></li>
<li id="en" class="cv">2014-2017: Bachelor's Degree in History - <i>Ca' Foscari University</i>, Venice</li>
<li id="en" class="cv">2009-2014: High School Diploma in Architecture and Design - <i>A. Serpieri</i>, Rimini</li>
</ul>
</div>
<button id="it" class="accordion"><img src="images/education.png" class="cv-images">Educazione</button>
<div class="panel">
<ul>
<li id="it" class="cv">2018-2021: Laurea magistrale in Digital Humanities and Digital Knowledge - <i>Università di Bologna</i></li>
<li id="it" class="cv">2014-2017: Laurea triennale in Storia - <i>Università Ca' Foscari</i>, Venezia</li>
<li id="it" class="cv">2009-2014: Diploma in Architettura e Design - <i>A. Serpieri</i>, Rimini</li>
</ul>
</div>
<hr>
<button id="en" class="accordion"><img src="images/experience.png" class="cv-images">Experiences</button>
<div class="panel">
<p id="en" class="cv">September 2020 - February 2021: <i>Big Rocket</i> <br>Via Coriano, 58, Rimini, 47924, IT <br>Preparation of the final thesis internship.</p>
<p id="en" class="cv">January - April 2017: <i>Associazione ZerOff - Officine Zero Roma - Istituto LUCE</i> <br> Via U. Partini 20, Rome, 00159, IT <br>Production of the exhibition "Fonti in piazza. Dal fascismo alla liberazione. Storia per immagini e suoni" (Sources in the Square. From fascism to liberation. History through images and sounds).</p>
<p id="en" class="cv">November 2016 - February 2017: <i>Istituto Veneziano per la storia della Resistenza e dell'età contemporanea</i> <br> Calle Michelangelo 54/P, Venice, 30133, IT <br>University Internship: archivist and librarian</p>
<p id="en" class="cv">September 2015 - April 2016: <i>Fondazione Ex Campo Fossoli di Carpi</i> <br>Via G. Rovighi 57, Carpi (MO), 41012, IT <br>Volunteering consultant for <i>"Un treno per Auschwitz"</i> and <i>"Memoria dei lager. Stroia e costruzione della memoria"</i> </p>
</div>
<button id="it" class="accordion"><img src="images/experience.png" class="cv-images">Esperienze</button>
<div class="panel">
<p id="it" class="cv">Settembre 2020 - Febbraio 2021: <i>Big Rocket</i> <br>Via Coriano, 58, Rimini, 47924, IT</p>
<p id="it" class="cv">Gennaio - Aprile 2017: <i>Associazione ZerOff - Officine Zero Roma - Istituto LUCE</i> <br> Via U. Partini 20, Roma, 00159, IT <br>Produzione della mostra "Fonti in piazza. Dal fascismo alla liberazione. Storia per immagini e suoni".</p>
<p id="it" class="cv">Novembre 2016 - Febbraio 2017: <i>Istituto Veneziano per la storia della Resistenza e dell'età contemporanea</i> <br> Calle Michelangelo 54/P, Venezia, 30133, IT <br>Tirocinio universitario: archivista and bibliotecaria</p>
<p id="it" class="cv">Sett. 2015 - Aprile 2016: <i>Fondazione Ex Campo Fossoli di Carpi</i> <br>Via G. Rovighi 57, Carpi (MO), 41012, IT <br>Tutor per <i>"Un treno per Auschwitz"</i> e <i>"Memoria dei lager. Stroia e costruzione della memoria"</i> </p>
</div>
<hr>
<div>
<button id="en" class="accordion"><img src="images/download-icon.png" class="cv-images"><a href="MichelaParmaCV.pdf" target="_blank">Download CV</a></button>
<button id="it" class="accordion"><img src="images/download-icon.png" class="cv-images"><a href="MichelaParmaCV.pdf" target="_blank">Download CV</a></button>
</div>
<div class="modal-footer">
<button id="en" type="button" class="btn btn-default" data-dismiss="modal" style="font-family: basis; font-size: 20px;text-transform: uppercase;">Close</button>
<button id="it" type="button" class="btn btn-default" data-dismiss="modal" style="font-family: basis; font-size: 20px;text-transform: uppercase;">Chiudi</button>
</div>
</div>
</div>
</div>
</div>
<!-- Modal Contact me-->
<div class="modal fade" id="contacts" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 id="en" class="modal-title">Contacts</h4>
<h4 id="it" class="modal-title">Contatti</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p id="en">You can contact me at: </p>
<p id="it">Puoi contattarmi a:</p>
<ul id="en">
<li id="en"><a href="mailto:michelaparma95@gmail.com" style="font-family: modern; font-size: 16px;">michelaparma95@gmail.com</a></li>
<li id="en"><a href="mailto:michela.parma4@studio.unibo.it" style="font-family: modern; font-size: 16px;">michela.parma4@studio.unibo.it</a></li>
</ul>
<ul id="it">
<li id="it"><a href="mailto:michelaparma95@gmail.com" style="font-family: modern; font-size: 16px;">michelaparma95@gmail.com</a></li>
<li id="it"><a href="mailto:michela.parma4@studio.unibo.it" style="font-family: modern; font-size: 16px;">michela.parma4@studio.unibo.it</a></li>
</ul>
<p id="en">You can also found me on <a href="https://www.linkedin.com/in/michela-parma-79a20818a/" class="link" target= "_blank"><u>LinkedIn</u></a> and on <a href="https://github.com/michelaparma" target= "_blank"><u>GitHub</u>.</a></p>
<p id="it">Puoi trovarmi anche su <a href="https://www.linkedin.com/in/michela-parma-79a20818a/" class="link" target= "_blank"><u>LinkedIn</u></a> e su <a href="https://github.com/michelaparma" target= "_blank"><u>GitHub</u>.</a></p>
</div>
<div class="modal-footer">
<button id="en" type="button" class="btn btn-default" data-dismiss="modal" style="font-family: basis; font-size: 20px;text-transform: uppercase;">Close</button>
<button id="it" type="button" class="btn btn-default" data-dismiss="modal" style="font-family: basis; font-size: 20px;text-transform: uppercase;">Chiudi</button>
</div>
</div>
</div>
</div>
<!-- Modal Portfolio-->
<div class="modal fade" id="portfolio" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 id="en" class="modal-title">Portfolio</h4>
<h4 id="it" class="modal-title">Portfolio</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<button id="en" class="accordion"><img src="images/Logo_ROS.png" class="portfolio-images">Rimini Old School</button>
<div id="en" class="panel">
<p id="en" style="margin-top:10px;">Go to the <a href="https://riminioldschool.herokuapp.com/" target="_blank">website<img src="images/goto.png" style="width: 20px; margin-left: 10px;"></a></p>
<p id="en">My thesis project concerns the recovery of Rimini's history linked to the 70s, 80s and 90s through the memories and stories of the people who lived through that period, a period that allowed the city to be remembered as Italy's Las Vegas.
</p>
</div>
<button id="it" class="accordion"><img src="images/Logo_ROS.png" class="portfolio-images">Rimini Old School</button>
<div id="it" class="panel">
<p id="it" style="margin-top:10px;">Visita il <a href="https://riminioldschool.herokuapp.com/" target="_blank">sito<img src="images/goto.png" style="width: 20px; margin-left: 10px;"></a></p>
<p id="it">Progetto di tesi che riguarda il recupero della storia di Rimini legata agli anni '70, '80 e '90 attraverso i ricordi e le storie delle persone che hanno vissuto quel periodo, un periodo che ha permesso alla città di essere ricordata come la Las Vegas italiana.
</p>
</div>
<hr>
<button id="en" class="accordion"><img src="images/parallels.png" class="portfolio-images">Parallels</button>
<div id="en" class="panel">
<p id="en" style="margin-top:10px;">Go to the <a href="https://parallels-dhdk.github.io/" target="_blank">website<img src="images/goto.png" style="width: 20px; margin-left: 10px;"></a></p>
<p id="en">Team project developed for the course of <i>Information Modeling and Web Technologies</i> (University of Bologna). The aim is to represent the evolution of news throughout history and to foresee future developments. You can choose in which historical style to read the newspaper.
</p>
</div>
<button id="it" class="accordion"><img src="images/parallels.png" class="portfolio-images">Parallels</button>
<div id="it" class="panel">
<p id="it" style="margin-top:10px;">Visita il <a href="https://parallels-dhdk.github.io/" target="_blank">sito<img src="images/goto.png" style="width: 20px; margin-left: 10px;"></a></p>
<p id="it">Progetto di gruppo sviluppato per il corso di <i>Information Modeling and Web Technologies</i> (Università di Bologna). L'obiettivo è quello di rappresentare l'evoluzione delle notizie nel corso della storia e di prevedere gli sviluppi futuri. È possibile scegliere in quale stile storico leggere il giornale.
</p>
</div>
<hr>
<button id="en" class="accordion"><img src="images/fellini.png" class="portfolio-images">La dolce vita</button>
<div class="panel">
<p id="en" style="margin-top:10px;">Go to the <a href="https://fellini-lod.github.io/" target="_blank">website<img src="images/goto.png" style="width: 20px; margin-left: 10px;"></a></p>
<p id="en"> Team project developed for the course of <i>Knowledge Organization and Digital Methods in the Cultural Heritage Domain</i> (University of Bologna). For the 60th anniversary of the release of the movie "La Dolce Vita", a Link Open Data model has been implemented. It focuses on the production and distribution of this cult movie directed by Federico Fellini in 1960.
</p>
</div>
<button id="it" class="accordion"><img src="images/fellini.png" class="portfolio-images">La dolce vita</button>
<div class="panel">
<p id="it" style="margin-top:10px;">Visita il <a href="https://fellini-lod.github.io/" target="_blank">sito<img src="images/goto.png" style="width: 20px; margin-left: 10px;"></a></p>
<p id="it"> Progetto di gruppo sviluppato per il corso di <i>Knowledge Organization and Digital Methods in the Cultural Heritage Domain</i> (Università di Bologna). In occasione del 60° anniversario dell'uscita del film "La Dolce Vita", è stato implementato un modello Link Open Data basato sulla produzione e distribuzione di questo film diretto da Federico Fellini nel 1960.
</p>
</div>
<hr>
<button id="en" class="accordion"><img src="images/nice.png" class="portfolio-images">Nice to MET you</button>
<div class="panel">
<p id="en" style="margin-top:10px;">Go to the <a href="https://nicetometyou.github.io/" target="_blank">website<img src="images/goto.png" style="width: 20px; margin-left: 10px;"></a></p>
<p id="en">Project developed for the course of <i>Intangible Artifacts, Cultural Heritage and Multimedia</i> (University of Bologna). It is a project for the redevelopment of the Ethnographic Museum of the Customs and Traditions of the People of Romagna (MET) has been designed to digitize some of its contents. In particular, a 3D animation short film has been conceived to explain the rust printing technique.</p>
</div>
<button id="it" class="accordion"><img src="images/nice.png" class="portfolio-images">Nice to MET you</button>
<div class="panel">
<p id="it" style="margin-top:10px;">Visita il <a href="https://nicetometyou.github.io/" target="_blank">sito<img src="images/goto.png" style="width: 20px; margin-left: 10px;"></a></p>
<p id="it">Progetto sviluppato per il corso di <i>Intangible Artifacts, Cultural Heritage and Multimedia</i> (Università di Bologna). Si tratta di un progetto di riqualificazione del Museo Etnografico degli Usi e Costumi della Gente di Romagna (MET) che ha come obiettivo la digitalizzazione di alcuni aspetti del museo. In particolare, è stato sviluppato un cortometraggio di animazione 3D per spiegare la tecnica della stampa a ruggine.</p>
</div>
<hr>
<button id="en" class="accordion"><img src="images/divo.png" class="portfolio-images">DIV-O</button>
<div class="panel">
<p id="en" style="margin-top:10px;">Go to the <a href="https://div-o.github.io/" target="_blank">website<img src="images/goto.png" style="width: 20px; margin-left: 10px;"></a></p>
<p id="en">Team project developed for the course of <i>Knowledge Representation and Extraction</i> (University of Bologna). DIV-O stands for Dante Inferno V - Ontology. The project presents a tool to explore the Canto V through four differet editions of Divina commedia, according to characters and places, both real and fictional, and literary references present in the Canto. It's also possible to analise the relations identified in the Canto V through the Knowledge Graph.</p>
</div>
<button id="it" class="accordion"><img src="images/divo.png" class="portfolio-images">DIV-O</button>
<div class="panel">
<p id="it" style="margin-top:10px;">Visita il <a href="https://div-o.github.io/" target="_blank">sito<img src="images/goto.png" style="width: 20px; margin-left: 10px;"></a></p>
<p id="it">Progetto di gruppo sviluppato per il corso di <i>Knowledge Representation and Extraction</i> (Università di Bologna). DIV-O è l'acronimo di Dante Inferno V - Ontologia. Il progetto presenta uno strumento per esplorare il Canto V attraverso quattro edizioni moderne della Divina Commedia, e permette di analizzare i personaggi e i luoghi, sia reali che immaginari, e i riferimenti letterari presenti nel Canto. È anche possibile analizzare le relazioni individuate nel Canto V attraverso un Knowledge Graph.</p>
</div>
<hr>
<button id="en" class="accordion"><img src="images/007.png" class="portfolio-images">007forArt</button>
<div class="panel">
<p id="en" style="margin-top:10px;">Go to the <a href="https://www.canva.com/design/DADqmtd-788/vLrXPKPKGAY5oViOvsJVRA/view?utm_content=DADqmtd-788&utm_campaign=designshare&utm_medium=link&utm_source=publishsharelink" target="_blank">presentation<img src="images/goto.png" style="width: 20px; margin-left: 10px;"></a></p>
<p id="en">Team project developed for the course of <i>Web Writing and Digital Storytelling</i> (University of Bologna). It concerns a serious game designed to make known the history of the Italian Monument Man, Rodolfo Siviero. The game consists of an escape room located inside Casa Siviero, in Florence. Players are called to act as secret collaborators of Siviero in order to save an important Italian work of art from the capture of Nazis. Through a series of puzzles and enigmas to solve, participants will have to contact the authorities to hide the painting and conclude the game.</p>
</div>
<button id="it" class="accordion"><img src="images/007.png" class="portfolio-images">007forArt</button>
<div class="panel">
<p id="it" style="margin-top:10px;">Vai alla <a href="https://www.canva.com/design/DADqmtd-788/vLrXPKPKGAY5oViOvsJVRA/view?utm_content=DADqmtd-788&utm_campaign=designshare&utm_medium=link&utm_source=publishsharelink" target="_blank">presentazione<img src="images/goto.png" style="width: 20px; margin-left: 10px;"></a></p>
<p id="it">Progetto di gruppo sviluppato per il corso di <i>Web Writing and Digital Storytelling</i> (Università di Bologna). Si tratta di un serious game, pensato per far conoscere la storia del Monument Man italiano, Rodolfo Siviero. Il gioco consiste in una escape room situata all'interno di Casa Siviero, a Firenze. I giocatori sono chiamati ad agire in qualità di collaboratori segreti di Siviero, e hanno l'obiettivo di salvare un'importante opera d'arte italiana dalla cattura dei nazisti. Attraverso una serie di enigmi da risolvere, i partecipanti dovranno riuscire a contattare le autorità per nascondere il dipinto e concludere il gioco.</p>
</div>
<hr>
<button id="en" class="accordion"><img src="images/spaziogiovani.png" class="portfolio-images">Spazio Giovani Bologna</button>
<div class="panel">
<p id="en" style="margin-top:10px;">Go to the <a href="https://github.com/UX-SpazioGiovaniBologna/UX-SpazioGiovaniBologna" target="_blank">analysis report and wireframes design<img src="images/goto.png" style="width: 20px; margin-left: 10px;"></a></p>
<p id="en">Team project developed for the course of <i>Usability and User Experience</i> (University of Bologna). It deals with <i>Spazio Giovani</i>, a dedicated space inside the family counselling centre, reserved for young people from 14 to 19. It includes market analysis and interviews on direct and indirect competitors of the centre, design, development and test of a new website to promote the service.</p>
</div>
<button id="it" class="accordion"><img src="images/007.png" class="portfolio-images">007forArt</button>
<div class="panel">
<p id="it" style="margin-top:10px;">Vai al <a href="https://github.com/UX-SpazioGiovaniBologna/UX-SpazioGiovaniBologna" target="_blank">report e al design dei wireframes<img src="images/goto.png" style="width: 20px; margin-left: 10px;"></a></p>
<p id="it">Progetto di gruppo sviluppato per il corso di <i>Usability and User Experience</i> (Università di Bologna). Si tratta dello <i>Spazio Giovani</i>, uno spazio all'interno del consultorio familiare, riservato ai giovani dai 14 ai 19 anni. Il progetto include analisi di mercato e interviste sui competitors diretti e indiretti, progettazione, sviluppo e test di un nuovo sito web per la promozione dei servizi offerti.</p>
</div>
<hr>
<button id="en" class="accordion"><img src="images/taffo.png" class="portfolio-images">Taffo Funeral Services</button>
<div class="panel">
<p id="en" style="margin-top:10px;">Go to the <a href="https://github.com/michelaparma/TaffoFuneralServices" target="_blank">presentation<img src="images/goto.png" style="width: 20px; margin-left: 10px;"></a></p>
<p id="en">Team project developed for the course of <i>Social Media technologies</i> (University of Bologna). It concerns the social media case study of Taffo Funeral Services, a funeral agency in Rome that undertaken a strong web advertising campaigns since 2017. The Social Media Manager of the agency constantly creates provocative advertising on the theme of death, using current topics. The fame of Taffo is due to the irreverent use of social media to promote services for dead, which is difficult to put on the web.</p>
</div>
<button id="it" class="accordion"><img src="images/taffo.png" class="portfolio-images">Taffo Funeral Services</button>
<div class="panel">
<p id="it" style="margin-top:10px;">Vai alla <a href="https://github.com/michelaparma/TaffoFuneralServices" target="_blank">presentazione<img src="images/goto.png" style="width: 20px; margin-left: 10px;"></a></p>
<p id="it">Progetto di gruppo sviluppato per il corso di <i>Social Media Tecnologies</i> (Università di Bologna). Si tratta del social media case-study di <i>Taffo Funeral Services</i>, un'agenzia funebre di Roma che dal 2017 ha intrapreso una forte campagna pubblicitaria sul web. Il Social Media Manager dell'agenzia crea costantemente pubblicità provocatorie sul tema della morte, utilizzando argomenti di attualità. La fama di Taffo è dovuta all'uso irriverente dei social media per promuovere i servizi per i defunti, difficili da posizionare sul web.</p>
</div>
</div>
<div class="modal-footer">
<button id="en" type="button" class="btn btn-default" data-dismiss="modal" style="font-family: basis; font-size: 20px;text-transform: uppercase;">Close</button>
<button id="it" type="button" class="btn btn-default" data-dismiss="modal" style="font-family: basis; font-size: 20px;text-transform: uppercase;">Chiudi</button>
</div>
</div>
</div>
</div>
<!-- Modal Skills-->
<div class="modal fade" id="skill" role="dialog">
<div class="modal-dialog ">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 id="en" class="modal-title">Skills</h4>
<h4 id="it" class="modal-title">Skill</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body modal-style">
<h1 id="en">Front-end development</h1><h1 id="it">Sviluppo Front-end</h1>
<img src="images/html.png" style="width:70px; margin-right: 20px; margin-top: 10px; display:inline-block;">
<img src="images/css.png" style="width:50px; margin-right: 20px; margin-top: 10px; display:inline-block;">
<img src="images/bootstrap.png" style="width:50px; margin-right: 20px; margin-top: 10px; display:inline-block;">
<img src="images/js.png" style="width:50px; margin-right: 20px; margin-top: 10px; display:inline-block;">
<hr>
<h1 id="en">Back-end development</h1><h1 id="it">Sviluppo Back-end</h1>
<img src="images/node.png" style="width:130px; margin-right: 20px; margin-top: 10px;">
<hr>
<h1 id="en">Programming languages</h1><h1 id="it">Linguaggi di programmazione</h1>
<img src="images/python.png" style="width:80px; margin-right: 20px; margin-top: 5px;" >
<hr>
<h1 id="en">Database development</h1><h1 id="it">Database development</h1>
<img src="images/mysql.png" style="width:80px; margin-right: 20px; margin-top: 5px;" >
<hr>
<h1 id="en">Design sensibility</h1><h1 id="it">Sensibilità per il design</h1>
<hr>
<h1 id="en">Principles of UX, UI and Usability</h1><h1 id="it">Principi di UX, UI and Usabilità</h1>
<hr>
<h1 id="en">Game Design and Gamification</h1><h1 id="it">Game Design e Gamification</h1>
</div>
<div class="modal-footer">
<button id="en" type="button" class="btn btn-default" data-dismiss="modal" style="font-family: basis; font-size: 20px;text-transform: uppercase;">Close</button>
<button id="it" type="button" class="btn btn-default" data-dismiss="modal" style="font-family: basis; font-size: 20px;text-transform: uppercase;">Chiudi</button>
</div>
</div>
</div>
</div>
<div class="lang">
<ul>
<li id="en_click" class="button_lang current_lang">En</li>
<li id="it_click" class="button_lang">It</li>
</ul>
</div>
<div class="footer">
<div class="copyright">
<p style="color: #bfbfbf; text-align: center; font-family: basis !important;font-size: 14px;">[2021 © MichelaParma]</p>
</div>
</div>
<!--accordion script-->
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
</script>
<!--language en/it-->
<script>
var italian = document.getElementById('it_click'),
english = document.getElementById('en_click'),
it_txt = document.querySelectorAll('#it'),
en_txt = document.querySelectorAll('#en'),
nb_it = it_txt.length,
nb_en = en_txt.length;
italian.addEventListener('click', function() {
langue(italian,english);
}, false);
english.addEventListener('click', function() {
langue(english,italian);
}, false);
function langue(langueOn,langueOff){
if (!langueOn.classList.contains('current_lang')) {
langueOn.classList.toggle('current_lang');
langueOff.classList.toggle('current_lang');
}
if(langueOn.innerHTML == 'It'){
afficher(it_txt, nb_it);
cacher(en_txt, nb_en);
}
else if(langueOn.innerHTML == 'En'){
afficher(en_txt, nb_en);
cacher(it_txt, nb_it);
}
}
function afficher(txt,nb){
for(var i=0; i < nb; i++){
txt[i].style.display = 'block';
}
}
function cacher(txt,nb){
for(var i=0; i < nb; i++){
txt[i].style.display = 'none';
}
}
function init(){
langue(english,italian);
}
init();
</script>
</section>
</body>
</html>