Website/index.html

377 lines
20 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="latex.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="accessibility.css">
<title>Mattia Mascarello</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Mattia Mascarello's personal website">
<meta name="keywords" content="Mattia Mascarello, UniTo">
<meta property="og:title" content="Mattia Mascarello">
<meta property="og:url" content="https://mattiaturin.duckdns.org">
<meta property="og:description" content="Mattia Mascarello's personal website">
<meta property="og:type" content="website">
<meta property="og:image" content="https://mattiaturin.duckdns.org/images/portrait.jpg">
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "Person",
"name": "Mattia Mascarello",
"url": "https://mattiaturin.duckdns.org",
"image": "https://mattiaturin.duckdns.org/images/portrait.jpg",
"sameAs": "https://github.com/MatMasIt/",
"jobTitle": "Student",
"worksFor": {
"@type": "Organization",
"name": "Computer Science Department - University of turin"
}
}
</script>
<link rel="apple-touch-icon" sizes="180x180" href="images/fav/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/fav/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/fav/favicon-16x16.png">
<link rel="manifest" href="images/fav/site.webmanifest">
<noscript>
<!-- Let's be friendly to javascript-disabled users -->
<link rel="stylesheet" href="nojs.css">
</noscript>
</head>
<body class="">
<header>
<h1>
<span id="mattia" class="container"><span class="typed-out">Mattia</span></span> <span
id="mascarello">Mascarello</span>
<br>
<span id="pronouceBox">
<i style="font-size: 20px;">[matːˈia maskarˈɛllo]</i> &nbsp;<a href="javascript:void(0);" id="pronounce"
aria-label="Listen to my name pronunciation"><img src="images/icons/loudspeaker.svg"
alt="Listen to my name"></a>
</span>
</h1>
<div class="toggleMenu">
<a href="#" id="accessibleToggle" aria-label="Toggle accessibility mode">Accessible Mode</a>
<a href="text.txt" aria-label="See the text-omly version of this page">Text-only version</a>
</div>
</header>
<main>
<div class="abstract">
<p>
Studying <a href="https://www.cs.unito.it/do/home.pl"
aria-label="University of Turin Computer Science Department">Computer Science at the University of
Turin</a>
(Italy)<br>
<code id="living"></code>
</p>
<div class="happyEuDay">
<br>
<h2>Happy <a href="https://european-union.europa.eu/principles-countries-history/symbols/europe-day_en"
aria-label="Europe Day">Europe Day</a>!</h2>
<img data-play="eu" style="display: inline" class="playIcon" alt="Start Playing"
aria-roledescription="Play/Stop button" src="images/icons/play.svg" width="20">
&nbsp;&nbsp;<a href="https://en.wikipedia.org/wiki/Anthem_of_Europe" aria-label="Anthem of Europe"><i>Anthem
of
Europe</i></a>
</div>
<div class="happyRepublicDay">
<br><br>
<h2>Buona <a href="https://en.wikipedia.org/wiki/Festa_della_Repubblica" aria-label="Republic Day">Festa
della
Repubblica</a>!</h2>
<img data-play="it" style="display: inline" class="playIcon" alt="Start Playing"
aria-roledescription="Play/Stop button" src="images/icons/play.svg" width="20">
&nbsp;&nbsp;<a href="https://en.wikipedia.org/wiki/Il_Canto_degli_Italiani"
aria-label="Anthem of Italy (Il Canto degli Italiani)"><i>Anthem of Italy <i>(Il Canto degli
Italiani)</i></i></a>
</div>
<div class="happyXMAS">
<br>
<h2>Merry Christmas!</h2>
</div>
<div class="happyNATODay">
<br>
<h2>Happy <a href="https://en.wikipedia.org/wiki/NATO_Day" aria-label="NATO Day">NATO Day</a>!</h2>
<img data-play="nato" style="display: inline" class="playIcon" alt="Start Playing"
aria-roledescription="Play/Stop button" src="images/icons/play.svg" width="20">
&nbsp;&nbsp;<a href="https://en.wikipedia.org/wiki/The_NATO_Hymn" aria-label="The NATO Hymn"><i>The NATO
Hymn</i></a>
</div>
</div>
<figure>
<a href="images/portrait.jpg" id="portraitLink" aria-label="Portrait of Mattia Mascarello"><img
src="images/portrait.jpg" id="portrait" loading="lazy" alt="Portrait of Mattia Mascarello"
style="margin:auto"></a>
<figcaption style="text-align: center;">
Portrait <br><a href="alternatePortraitVersions/" aria-label="Alternate versions of the portrait">Alternate
versions</a>
</figcaption>
</figure>
<!-- <blockquote>
<b>This is only a foretaste of what is to come, and only the shadow of what is going to be.</b><br>We have to
have some experience with the machine before we really know its capabilities. It may take years before we settle
down to the new possibilities, but I do not see why it should not enter any one of the fields normally covered by
the human intellect, and eventually compete on equal terms.
<br><br><cite>&nbsp;&nbsp;<b>Alan Mathison Turing</b>, The Mechanical Brain. Answer Found to 300 Year Old
Problem' The Times newspaper, 11 June 1949 page 4 column 5.</cite>
</blockquote>-->
<br>
<figure>
<div class="row">
<div class="column">
<a href="images/turin.jpg" target="_blank" aria-label="Image of Turin"><img src="images/turin.jpg"
loading="lazy" alt="Me in Turin"></a>
</div>
<div class="column">
<a href="images/amsterdam.jpg" target="_blank" aria-label="Image of Amsterdam"> <img
src="images/amsterdam.jpg" loading="lazy" alt="Amsterdam"></a>
</div>
<div class="column">
<a href="images/paris.jpg" target="_blank" aria-label="Image of Paris"> <img src="images/paris.jpg"
loading="lazy" alt="Paris"></a>
</div>
<div class="column">
<a href="images/ep.jpg" target="_blank" aria-label="Image of the European Parliament in Brussels"> <img
src="images/ep.jpg" loading="lazy" alt="The European Parliament in Bruxelles"></a>
</div>
<div class="column">
<a href="images/gs.jpg" target="_blank" aria-label="Image from I Giovani e Le Scienze"> <img
src="images/gs.jpg" loading="lazy" alt="Ne at I Giovani e Le Scienze"></a>
</div>
<div class="column">
<a href="images/unito_self.jpg" target="_blank"
aria-label="Image of Mattia Mascarello at a restaurant near the University"> <img
src="images/unito_self.jpg" loading="lazy" alt="Me at a restaurant near the University"></a>
</div>
<div class="column">
<a href="images/staring.webp" target="_blank"
aria-label="Image of Mattia Mascarello staring at the void">
<img src="images/staring.webp" loading="lazy" alt="Me staring at the void"></a>
</div>
<div class="column">
<a href="images/enlarged.jpg" target="_blank" aria-label="Enlarged portrait of Mattia Mascarello"> <img
src="images/enlarged.jpg" loading="lazy" alt="Enlarged portrait"></a>
</div>
</div>
<figcaption>
<div id="clockwise"><b>From Top to Bottom in lines, </b></div>
<div id="topbottom"><b>From Top to Bottom,</b></div>
<div id="leftright"><b>From Left to Right,</b></div>
1) <a href="https://en.wikipedia.org/wiki/Turin" target="_blank" aria-label="Turin">Turin</a>, 2) <a
href="https://en.wikipedia.org/wiki/Amsterdam" target="_blank" aria-label="Amsterdam">Amsterdam</a>, 3)
<a href="https://en.wikipedia.org/wiki/Paris" target="_blank" aria-label="Paris">Paris</a>, 4) <a
href="https://en.wikipedia.org/wiki/Espace_L%C3%A9opold" target="_blank"
aria-label="European Parliament in Brussels">The European Parliament in Bruxelles</a>, 5) Me at <a
href="https://fast.mi.it/i-giovani-e-le-scienze/" target="_blank"
aria-label="I Giovani e le Scienze 2022">I
Giovani e le Scienze 2022</a>, 6) Me at a restaurant near the University,
7) Me staring at the void at <a href="https://fast.mi.it/i-giovani-e-le-scienze/" target="_blank"
aria-label="I Giovani e le Scienze 2022">I Giovani e le Scienze 2022</a>, 8) Enlarged portrait
</figcaption>
</figure>
<div class="abstract">
<h2 class="abstractTitle">Résumé/Curriculum Vitae</h2>
<div>
<a href="docs/italian.pdf" aria-label="Italian Curriculum Vitae in PDF">Italiano</a>
&nbsp;&nbsp;&nbsp;&nbsp;
<a href="docs/english.pdf" aria-label="English Curriculum Vitae in PDF">English</a>
</div>
</div>
<table id="contacts">
<caption>Contacts</caption>
<tbody>
<tr>
<td>Email</td>
<td>
<noscript> mattia [d0t] mascarello [æt] edu [d0t] unito [d0t] it</noscript>
<script src="emails/unito.js"></script><br>
<b>OpenPGP Key</b> <a href="emails/MattiaMascarelloUniTo.asc"
aria-label="OpenPGP Key for University Email">here</a>
<br><br>
<noscript> mattia [d0t] mascarello [æt] outlook [d0t] it</noscript>
<script src="emails/personal.js"></script><br>
<b>OpenPGP Key</b> <a href="emails/MattiaMascarelloOutlook.asc"
aria-label="OpenPGP Key for Personal Email">here</a>
</td>
</tr>
<tr>
<td>XMPP</td>
<td><img src="https://xmpp.mattiaturin.duckdns.org:5281/pep_avatar/mattia" width="80"
alt="Profile picture"
onerror="this.src='https://xmpp.mattiaturin.duckdns.org:5281/pep_avatar/mattia';" />
<a href="xmpp:mattia@xmpp.mattiaturin.duckdns.org"
aria-label="XMPP">mattia@xmpp.mattiaturin.duckdns.org</a>
</td>
</tr>
<tr>
<td>Telegram</td>
<td><a href="https://t.me/be94b16fbot" aria-label="Telegram Contact">@be94b16fbot</a></td>
</tr>
</tbody>
</table> <br>
<b>Notes</b>
<ol>
<li> I am not active on social media, and I do not plan to join any.</li>
<li>If you want to contact me, the preferred way is via email, with OpenPGP encryption if possible. This
ensures
that our communication remains private and secure. Please avoid using proprietary messaging platforms that
compromise privacy or are ad-supported. You may also contact me via XMPP if preferred, though please note
that responses may not be as comprehensive as those provided through formal email communication.</li>
<li> While I understand the concerns with my emails being hosted by Microsoft and Google, running my own mail
server is not in my plans yet. Therefore, I recommend using PGP encryption if you are concerned about
privacy.
</li>
<li>My PGP keys are also available at <code>keys.openpgp.org</code> keyserver</li>
<li>I actively monitor for GDPR violations and do not tolerate unsolicited marketing or spam. Any unsolicited
communication will be filtered, and persistent violations will be reported. If you have a genuine reason to
reach out, please ensure your communication is clear and relevant.</li>
<li>
For those who appreciate traditional correspondence, I still occasionally send and receive letters. If you
wish
to communicate in this manner, please reach out via email or XMPP first to arrange the exchange of physical
addresses.
</li>
</ol>
<br>
<br>
<table>
<caption>Web Resources</caption>
<tbody>
<tr>
<td>Gitea</td>
<td><a href="https://gitea.mattiaturin.duckdns.org" aria-label="Gitea profile">My gitea stash</a></td>
</tr>
<tr>
<td>Jellyfin</td>
<td><a href="https://jellyfin.mattiaturin.duckdns.org" aria-label="Jellyfin profile">My Jellyfin
server</a>
</tr>
<tr>
<td>qBittorrent</td>
<td><a href="http://qbit.mattiaturin.duckdns.org" aria-label="qBittorrent WebUI">My qBittorrent WebUI</a>
</tr>
<tr>
<td>Webmin</td>
<td><a href="https://webmin.mattiaturin.duckdns.org" aria-label="Webmin">My Webmin server</a></td>
</tr>
<tr>
<td>Trilium</td>
<td><a href="https://trilium.mattiaturin.duckdns.org" aria-label="Trilium">My Trilium server</a></td>
</tr>
<tr>
<td>Radicale</td>
<td><a href="https://radicale.mattiaturin.duckdns.org" aria-label="Radicale">My Radicale server</a></td>
</tr>
<tr>
<td>Converse.js</td>
<td><a href="https://xmpp.mattiaturin.duckdns.org:5281/conversejs" aria-label="Converse.js">My
Converse.js web client</a></td>
</tr>
</tbody>
</table>
<br>
<table>
<caption>Selected Listed Projects</caption>
<tbody>
<tr>
<td><a href="https://gitea.mattiaturin.duckdns.org/mattia/Alembic"
aria-label="Alembic - My Poetry in English">Alembic</a>
</td>
<td>My Poetry in English</td>
</tr>
<tr>
<td><a href="https://gitea.mattiaturin.duckdns.org/mattia/costLatex"
aria-label="costLatex - Italian Constitution in LaTeX">costLatex</a></td>
<td>Italian Constitution in <span class="latex">L<span>a</span>T<span>e</span>X</span></td>
</tr>
<tr>
<td><a href="https://gitea.mattiaturin.duckdns.org/mattia/costGit"
aria-label="costGit - Amendments to the Italian Constitution as Git Commits">costGit</a></td>
<td>Amendments to the italian constitution as git commits</td>
</tr>
<tr>
<td><a href="https://gitea.mattiaturin.duckdns.org/mattia/mordApp"
aria-label="mordApp - Mordecai Food Ordering System">mordApp</a></td>
<td>Mordecai Food Ordering System</td>
</tr>
<tr>
<td><a href="https://gitea.mattiaturin.duckdns.org/mattia/moodlefuse"
aria-label="moodlefuse - Moodle Virtual File System">moodlefuse</a></td>
<td>Moodle Virtual File System</td>
</tr>
</tbody>
</table>
</main>
<br>
<footer class="footnotes">
<div class="badges">
<a href="https://validator.w3.org/check?uri=referer" aria-label="Validate HTML5"><img
src="images/badges/valid_html.png" alt="Valid HTML5" style="border:0;width:88px;height:31px"></a>
<a href="https://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px" src="https://jigsaw.w3.org/css-validator/images/vcss-blue"
alt="Valid CSS">
</a>
<a href="https://ublockorigin.com/" aria-label="uBlock Origin"><img src="images/badges/ublock-now.png"
alt="uBlock Origin"></a>
<a href="https://xmpp.org/" aria-label="XMPP"><img src="images/badges/xmpp.gif" alt="XMPP"></a>
<a href="https://en.wikipedia.org/wiki/RSS" aria-label="RSS"><img src="images/badges/rss.gif" alt="RSS"></a>
<a href="https://jellyfin.org/" aria-label="Jellyfin"><img src="images/badges/jellyfin.gif" alt="Jellyfin"></a>
<a href="https://www.mozilla.org/firefox" aria-label="Get Firefox"><img
src="images/badges/GetFirefox_80x15.png" alt="Get Firefox"></a>
<a href="http://www.anybrowser.org/campaign/" aria-label="Any Browser Campaign"><img
src="images/badges/anybrowser3.gif" alt="Any Browser"></a>
<a href="https://gitea.io" aria-label="Gitea">
<img src="images/badges/gitea.gif" alt="Gitea"></a>
<a href="https://landchad.net/" aria-label="Landchad"><img src="images/badges/landchad.gif" alt="Landchad"></a>
<a href="#contacts" aria-label="Contacts"><img src="images/badges/pgp-now.gif" alt="PGP"></a>
<a href="#"><img src="images/badges/fspeech.gif" alt="Free Speech"></a>
<a href="https://ifixit.org/" aria-label="iFixit"><img src="images/badges/rtr.png" alt="Right to repair"></a>
<a href="#"><img src="images/Gadsden_flag.svg" alt="Liberty above all" style="height: 31px"></a>
</div>
<p>
&copy; 2022 <span id="toYear">-
<script>document.write((new Date()).getFullYear());</script>
</span> Mattia Mascarello
</p>
<p id="versionSwitch">
Versions: <a href="#force:eu" aria-label="Europe Day Version">Europe Day <span style="display:inline"
id="euS">(current)</span></a>, <a href="#force:it" aria-label="Republic Day Version">Republic Day <span
style="display:inline" id="redS">(current)</span></a>, <a href="#force:xmas"
aria-label="Christmas Version">Christmas<span style="display:inline" id="xmaS">(current)</span></a>, <a
href="#force:nato" aria-label="NATO Day Version">NATO Day<span style="display:inline"
id="natoS">(current)</span></a>, <a href="#force:jan" aria-label="January Version">January <span
style="display:inline" id="janS">(current)</span></a>, <a href="#force:no"
aria-label="Regular Version">Regular <span style="display:inline" id="regularS">(current)</span></a>.
</p>
<div>
<hr>
<!-- image with caption -->
<figure>
<a href="images/server.jpg" target="_blank" aria-label="Image of the server hosting this website"><img
src="images/server.jpg" loading="lazy" alt="Server hosting this website"
style="margin:auto; width: 500px;"></a>
</a>
<p style="text-align: center;">
You are being served by a friendly <span style="font-family: monospace, monospace;">ThinkCentre
M900</span>, say hi! <br>
</p>
</div>
<p id="noScript">
<b>JavaScript is disabled</b>. I respect your choice, and the website has been slightly adapted to be more
user-friendly. However, some features require JavaScript to work properly.
</p>
<script>
document.getElementById("noScript").style.display = "none";
</script>
</footer>
<script src="script.js"></script>
<script src="accessibility.js"></script>
</body>
</html>