Website/index.html
2024-08-20 22:33:38 +02:00

324 lines
16 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="it">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="latex.css">
<link rel="stylesheet" href="style.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://matmasit.github.io/images">
<meta property="og:description" content="Mattia Mascarello's personal website">
<meta property="og:type" content="website">
<meta property="og:image" content="https://matmasit.github.io/images/portrait.jpg">
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "Person",
"name": "Mattia Mascarello",
"url": "https://matmasit.github.io",
"image": "https://matmasit.github.io/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>
<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>
</header>
<div class="abstract">
<p>
A human being <em>drifting</em> in spacetime<br>
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">Abstract</h2>
<p>
I am a human, i like coding, playing badminton, poetry, debating (expecially about politics) and chatting in
general.
This is my website, in a very minimal style, just how I like it;
I code in <code>PHP, Python, Java, JavaScript, C, HTML, CSS</code>
</p><br>
<div>
<b>My <i>Curriculum vitæ (PDF)</i></b> <br>
<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 [at] 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 [at] 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>Telegram</td>
<td><a href="https://t.me/be94b16fbot" aria-label="Telegram Contact">@be94b16fbot</a></td>
</tr>
<tr>
<td>XMPP</td>
<td><a href="xmpp:mattia.mascarello@jabber.hot-chilli.eu"
aria-label="XMPP Contact">mattia.mascarello@jabber.hot-chilli.eu</a></td>
</tr>
</tbody>
</table>
<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>
</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>
</tbody>
</table>
<br>
<div class="centered-container">
<img src="images/Gadsden_flag.svg" alt="Liberty above all"><br>
<iframe src="https://api2.humancalendar.com/iframe.php?t=2x2&s=215" class="human-calendar" sandbox
aria-label="Human Calendar"></iframe>
</div>
<br>
<div 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>
</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>
<hr>
<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>
</div>
<script src="script.js"></script>
</body>
</html>