Website/index.html

281 lines
12 KiB
HTML
Raw Normal View History

2024-04-08 09:44:54 +02:00
<!DOCTYPE html>
<html>
<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="fav/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="fav/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="fav/favicon-16x16.png">
<link rel="manifest" href="fav/site.webmanifest">
</head>
<body>
<header>
<h1>
<span id="mattia" class="container"><span class="typed-out">Mattia</span></span> <span
id="mascarello">Mascarello</span>
<br />
<div id="pronouceBox">
<i style="font-size: 20px;">[matːˈia maskarˈɛllo]</i> &nbsp;<a href="javascript:void(0);"
id="pronounce"><img src="icons/loudspeaker.svg" alt="Listen to my name" /></a>
</div>
</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">Computer Science at the University of Turin</a>
(Italy)<br />
<code id="living"></code>
<div class="happyEuDay">
<br />
<h2>Happy <a href="https://european-union.europa.eu/principles-countries-history/symbols/europe-day_en">Europe
Day</a>!</h2>
<img data-play="eu" style="display: inline" class="playIcon" alt="Start Playing"
aria-roledescription="Play/Stop button" src="icons/play.svg" width="20" />
&nbsp;&nbsp;<a href="https://en.wikipedia.org/wiki/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"><i>Festa della repubblica</i></a>!
</h2>
<img data-play="it" style="display: inline" class="playIcon" alt="Start Playing"
aria-roledescription="Play/Stop button" src="icons/play.svg" width="20" />
&nbsp;&nbsp;<a href="https://en.wikipedia.org/wiki/Il_Canto_degli_Italiani">Anthem of Italy <i>(Il Canto degli
Italiani)</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">NATO Day</a>!</h2>
<img data-play="nato" style="display: inline" class="playIcon" alt="Start Playing"
aria-roledescription="Play/Stop button" src="icons/play.svg" width="20" />
&nbsp;&nbsp;<a href="https://en.wikipedia.org/wiki/The_NATO_Hymn"><i>The NATO Hymn</i></a>
</div>
</div>
<figure>
<a href="images/portrait.jpg" id="portraitLink"><img src="images/portrait.jpg" id="portrait" loading="lazy"
alt="I Giovani e Le Scienze 2022" style="margin:auto" /></a>
<figcaption style="text-align: center;">
Portrait <br /><a href="alternatePortraitVersions/">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"><img src="images/turin.jpg" loading="lazy"
alt="Me in Turin" /></a>
</div>
<div class="column">
<a href="images/amsterdam.jpg" target="_blank"> <img src="images/amsterdam.jpg" loading="lazy"
alt="Amsterdam" /></a>
</div>
<div class="column">
<a href="images/paris.jpg" target="_blank"> <img src="images/paris.jpg" loading="lazy" alt="Paris" /></a>
</div>
<div class="column">
<a href="images/ep.jpg" target="_blank"> <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"> <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"> <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"> <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"> <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="ttps://en.wikipedia.org/wiki/Turin" target="_blank">Turin</a>, 2) <a
href="https://en.wikipedia.org/wiki/Amsterdam" target="_blank">Amsterdam</a>, 3) <a
href="https://en.wikipedia.org/wiki/Paris" target="_blank">Paris</a>, 4) <a
href="https://en.wikipedia.org/wiki/Espace_L%C3%A9opold" target="_blank">The European Parliament in
Bruxelles</a>, 5) Me at <a href="https://fast.mi.it/i-giovani-e-le-scienze/" target="_blank">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">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">Italiano</a> &nbsp;&nbsp;&nbsp;&nbsp;
<a href="docs/english.pdf">English</a>
</div>
</div>
<table>
<caption>Contacts</caption>
<tbody>
<tr>
<td>Email</td>
<td>
<script src="emails/unito.js"></script><br />
<b>OpenPGP Key</b> <a href="emails/MattiaMascarelloUniTo.asc">here</a>
<br /><br />
<script src="emails/personal.js"></script><br />
<b>OpenPGP Key</b> <a href="emails/MattiaMascarelloOutlook.asc">here</a>
</td>
</tr>
<tr>
<td>Telegram</td>
<td>Via <a href="https://t.me/be94b16fbot">@be94b16fbot</a></td>
</tr>
<tr>
<td>XMPP</td>
<td><a href="xmpp:mattia.mascarello@jabber.hot-chilli.eu">mattia.mascarello@jabber.hot-chilli.eu</a></td>
</tr>
</tbody>
</table>
<br />
<table>
<caption>Web Resources</caption>
<tbody>
<tr>
<td>Github</td>
<td><a href="https://github.com/MatMasIt">MatMasIt</a></td>
</tr>
<tr>
<td>"Stazione Meteorologica Permanente del Liceo Scientifico Statale Leonardo Cocito"</td>
<td><a href="https://liceococito.edu.it/meteo">Home</a></td>
</tr>
<tr>
<td>Open Source Cocito Weather Station</td>
<td><a href="http://github.com/StazioneMeteoCocito/">Repos</a></td>
</tr>
</tbody>
</table>
<br />
<table>
<caption>Top Listed Projects</caption>
<tbody>
<tr>
<td>BiblioTau <em>(Work in Progress)</em></td>
<td>Library Management System</td>
</tr>
<tr>
<td><a href="https://github.com/MatMasIt/Alembic">Alembic</a></td>
<td>My Poetry in English</td>
</tr>
<tr>
<td><a href="https://github.com/MatMasIt/epg-it">epg-it</a></td>
<td>Italian tv electronic program guide archival repo</td>
</tr>
<tr>
<td><a href="https://github.com/MatMasIt/notesArchive">notesArchive</a></td>
<td>My school notes organized</td>
</tr>
<tr>
<td><a href="https://github.com/MatMasIt/fantaProf">fantaProf</a></td>
<td>The classic italian professor blaming game</td>
</tr>
<tr>
<td><a href="https://github.com/MatMasIt/dante-lang">dante-lang</a></td>
<td>The Dante Programming Language</td>
</tr>
<tr>
<td><a href="https://github.com/MatMasIt/costLatex">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://github.com/MatMasIt/costGit">costGit</a></td>
<td>Amendments to the italian constitution as git commits</td>
</tr>
<tr>
<td><a href="https://github.com/MatMasIt/SocialCreditScoreGame">SocialCreditScoreGame</a></td>
<td>A videogame to eloquently praise the most perfect chinese social credit system</td>
</tr>
<tr>
<td><a href="https://github.com/MatMasIt/mordApp">mordApp</a></td>
<td>Mordecai Food Ordering System</td>
</tr>
</tbody>
</table>
<article>
<h3>My <i>poem of the day</i>, n. <span id="poemn"></span>, from <a target="_blank"
href="https://github.com/MatMasIt/Alembic"><i>Alembic</i></a></h3>
<h2 id="poemTitle"></h2>
<p id="poemText"></p>
</article>
<br />
<img src="images/Gadsden_flag.svg" alt="Liberty above all" style="width:20vw; margin:auto">
<br />
<div class="footnotes">
<p>
&copy; 2022-2023 Mattia Mascarello
</p>
<p>
Versions: <a href="#force:eu">Europe Day <span style="display:inline" id="euS">(current)</span></a>, <a
href="#force:it">Republic Day <span style="display:inline" id="redS">(current)</span></a>, <a
href="#force:xmas">Christmas<span style="display:inline" id="xmaS">(current)</span></a>, <a
href="#force:nato">NATO Day<span style="display:inline" id="natoS">(current)</span></a>, <a
href="#force:jan">January <span style="display:inline" id="janS">(current)</span></a>, <a
href="#force:no">Regular <span style="display:inline" id="regularS">(current)</span></a>.
</p>
</div>
<script src="poemOfTheDay.js"></script>
<script src="script.js"></script>
</body>
</html>