Website/index.html

281 lines
12 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>
<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>