accessibility, removed eclectic stuff, site rectified

This commit is contained in:
Mattia Mascarello 2024-08-25 01:24:41 +02:00
parent 67b8cfda77
commit 1eec5b3bb8
13 changed files with 436 additions and 291 deletions

98
accessibility.css Normal file
View File

@ -0,0 +1,98 @@
.accessible main,
.accessible footer {
font-size: 25px;
font-family: Helvetica, Arial, sans-serif, Verdana, Tahoma;
line-height: 1.6;
letter-spacing: 0.5px;
word-spacing: 2px;
}
.accessible ol,
.accessible ul {
margin-left: 30px;
padding-left: 20px;
}
.accessible li {
margin-bottom: 10px;
}
.accessible tr {
border-bottom: 1px solid black;
}
.accessible td {
padding: 10px;
}
.accessible a,
.accessible button,
.accessible input,
.accessible textarea,
.accessible select {
outline: 3px solid #005fcc;
outline-offset: 2px;
}
.accessible a:focus,
.accessible button:focus,
.accessible input:focus,
.accessible textarea:focus,
.accessible select:focus {
outline: 3px solid #005fcc;
background-color: #e0f0ff;
}
.accessible a {
color: #005fcc;
text-decoration: underline;
}
.accessible main,
.accessible footer {
font-size: 25px;
font-family: Helvetica, Arial, sans-serif ! important;
}
.accessible ol,
.accessible ul {
padding-left: 20px;
}
.accessible li {
margin-bottom: 10px;
border-bottom: 1px solid black;
}
.accessible tr {
border-bottom: 1px solid black;
}
.accessible td {
padding: 10px;
}
.accessible a:hover,
.accessible a:focus {
text-decoration: none;
}
.accessible body {
color: #000;
background-color: #fff;
}
.accessible html {
font-size: 100%;
}
@media (max-width: 768px) {
.accessible main,
.accessible footer {
font-size: 1.5rem;
}
}
.accessible #versionSwitch {
display: none;
}

31
accessibility.js Normal file
View File

@ -0,0 +1,31 @@
var accessibleToggle = document.getElementById('accessibleToggle');
let currentAccessibilityState = localStorage.getItem('accessible');
var documentBackground = document.body.style.backgroundColor;
function yesAccessible() {
accessibleToggle.innerHTML = "Regular View";
document.location.hash = "force:no";
document.body.style.background = "white";
localStorage.setItem('accessible', 'true');
}
function noAccessible() {
accessibleToggle.innerHTML = "Accessible Mode";
document.body.style.background = documentBackground;
localStorage.setItem('accessible', 'false');
}
accessibleToggle.addEventListener('click', function () {
document.body.classList.toggle('accessible');
if (document.body.classList.contains('accessible')) {
yesAccessible();
} else {
noAccessible();
}
});
if(currentAccessibilityState === 'true') {
document.body.classList.add('accessible');
yesAccessible();
}

View File

@ -5,6 +5,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" href="../latex.css"> <link rel="stylesheet" href="../latex.css">
<link rel="stylesheet" href="../style.css"> <link rel="stylesheet" href="../style.css">
<link rel="stylesheet" href="../accessibility.css">
<title>Alternate Portrait Versions</title> <title>Alternate Portrait Versions</title>
<meta name="robots" content="noindex,nofollow"> <meta name="robots" content="noindex,nofollow">
<meta name="google-site-verification" content="DibIHTYcO0f2RAdscthaJh1g_-TNwN0vu6j25GT93kg" /> <meta name="google-site-verification" content="DibIHTYcO0f2RAdscthaJh1g_-TNwN0vu6j25GT93kg" />
@ -12,16 +13,16 @@
<meta name="description" content="Mattia Mascarello's personal website" /> <meta name="description" content="Mattia Mascarello's personal website" />
<meta name="keywords" content="Mattia Mascarello, Liceo Cocito, Mordapp" /> <meta name="keywords" content="Mattia Mascarello, Liceo Cocito, Mordapp" />
<meta property="og:title" content="Mattia Mascarello" /> <meta property="og:title" content="Mattia Mascarello" />
<meta property="og:url" content="https://matmasit.github.io/images" /> <meta property="og:url" content="https://mattiaturin.duckdns.org/" />
<meta property="og:description" content="Mattia Mascarello's personal website" /> <meta property="og:description" content="Mattia Mascarello's personal website" />
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<meta property="og:image" content="https://matmasit.github.io/images/portrait.jpg" /> <meta property="og:image" content="https://mattiaturin.duckdns.org/images/portrait.jpg" />
<!-- Google tag (gtag.js) --> <!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-6WNMM3QFPW"></script> <script async src="https://www.googletagmanager.com/gtag/js?id=G-6WNMM3QFPW"></script>
<link rel="apple-touch-icon" sizes="180x180" href="../fav/apple-touch-icon.png"> <link rel="apple-touch-icon" sizes="180x180" href="../images/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="32x32" href="../images/fav/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="../fav/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="../images/fav/favicon-16x16.png">
<link rel="manifest" href="../fav/site.webmanifest"> <link rel="manifest" href="../images/fav/site.webmanifest">
<script> <script>
window.dataLayer = window.dataLayer || []; window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); } function gtag() { dataLayer.push(arguments); }
@ -32,54 +33,58 @@
</head> </head>
<body> <body>
<header> <main>
<h1>Alternate Protrait Versions</h1> <header>
<p>These are the variations of the main portrait which are displayed during the appropriate time frames.</p> <h1>Alternate Protrait Versions</h1>
</header> <p>These are the variations of the main portrait which are displayed during the appropriate time frames.</p>
<br /> </header>
<figure> <a href="#" id="accessibleToggle" aria-label="Toggle accessibility mode">Accessible Mode</a>
<div class="row">
<div class="column">
<a href="../images/portrait.jpg" target="_blank"><img src="../images/portrait.jpg" loading="lazy"
alt="Default portrait" /></a>
</div>
<div class="column">
<a href="../images/euportrait.png" target="_blank"> <img src="../images/euportrait.png" loading="lazy"
alt="Europe Day (9th of May) portrait" /></a>
</div>
<div class="column">
<a href="../images/natoportrait.png" target="_blank"> <img src="../images/natoportrait.png" loading="lazy"
alt="NATO Day (4th of April)" /></a>
</div>
<div class="column">
<a href="../images/itportrait.png" target="_blank"> <img src="../images/itportrait.png" loading="lazy"
alt="Festa della Repubblica (2nd of June)" /></a>
</div>
<div class="column">
<a href="../images/xmasportrait.png" target="_blank"> <img src="../images/xmasportrait.png" loading="lazy"
alt="Christmas (19th-26th of December)" /></a>
</div>
<br />
<figure>
<div class="row">
<div class="column">
<a href="../images/portrait.jpg" target="_blank"><img src="../images/portrait.jpg" loading="lazy"
alt="Default portrait" /></a>
</div>
<div class="column">
<a href="../images/euportrait.png" target="_blank"> <img src="../images/euportrait.png" loading="lazy"
alt="Europe Day (9th of May) portrait" /></a>
</div>
<div class="column">
<a href="../images/natoportrait.png" target="_blank"> <img src="../images/natoportrait.png"
loading="lazy" alt="NATO Day (4th of April)" /></a>
</div>
<div class="column">
<a href="../images/itportrait.png" target="_blank"> <img src="../images/itportrait.png" loading="lazy"
alt="Festa della Repubblica (2nd of June)" /></a>
</div>
<div class="column">
<a href="../images/xmasportrait.png" target="_blank"> <img src="../images/xmasportrait.png"
loading="lazy" alt="Christmas (19th-26th of December)" /></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) Default portrait, 2) <a
href="https://european-union.europa.eu/principles-countries-history/symbols/europe-day_en"
target="_blank">Europe Day</a> (9th of May), 3) <a href="https://en.wikipedia.org/wiki/NATO_Day">NATO
Day</a> (4th of April), 4) <a href="https://en.wikipedia.org/wiki/Festa_della_Repubblica">Festa della
repubblica</a> (2nd of June), 5) Christmas (19th-26th of December)
</figcaption>
</figure>
<br />
<p style="text-align: center;"> <a href="../">Home</a></p>
<div class="footnotes">
<p>
&copy; 2022 Mattia Mascarello
</p>
</div> </div>
<figcaption> </main>
<div id="clockwise"><b>From Top to Bottom in lines, </b></div> <script src="../accessibility.js"></script>
<div id="topbottom"><b>From Top to Bottom,</b></div>
<div id="leftright"><b>From Left to Right,</b></div>
1) Default portrait, 2) <a
href="https://european-union.europa.eu/principles-countries-history/symbols/europe-day_en"
target="_blank">Europe Day</a> (9th of May), 3) <a href="https://en.wikipedia.org/wiki/NATO_Day">NATO
Day</a> (4th of April), 4) <a href="https://en.wikipedia.org/wiki/Festa_della_Repubblica">Festa della
repubblica</a> (2nd of June), 5) Christmas (19th-26th of December)
</figcaption>
</figure>
<br />
<p style="text-align: center;"> <a href="../">Home</a></p>
<div class="footnotes">
<p>
&copy; 2022 Mattia Mascarello
</p>
</div>
<script src="script.js"></script>
</body> </body>
</html> </html>

Binary file not shown.

View File

@ -20,7 +20,7 @@
\ecvemail{\href{mailto:mattia.mascarello@outlook.it}{mattia.mascarello@outlook.it}} \ecvemail{\href{mailto:mattia.mascarello@outlook.it}{mattia.mascarello@outlook.it}}
\ecvprofessional{\href{mailto:mattia.mascarello@edu.unito.it}{mattia.mascarello@edu.unito.it}} \ecvprofessional{\href{mailto:mattia.mascarello@edu.unito.it}{mattia.mascarello@edu.unito.it}}
%\ecvpec{\href{mailto:emailo@pec.it}{email@pec.it}} %\ecvpec{\href{mailto:emailo@pec.it}{email@pec.it}}
\ecvhomepage{\url{https://matmasit.github.io}\newline\url{https://github.com/MatMasIt}} \ecvhomepage{\url{https://mattiaturin.duckdns.org}\newline\url{https://github.com/MatMasIt}}
\ecvnationality{Italian} \ecvnationality{Italian}
\ecvdateofbirth{19/11/2002} \ecvdateofbirth{19/11/2002}

Binary file not shown.

View File

@ -36,7 +36,7 @@
\ecvemail{\href{mailto:mattia.mascarello@outlook.it}{mattia.mascarello@outlook.it}} \ecvemail{\href{mailto:mattia.mascarello@outlook.it}{mattia.mascarello@outlook.it}}
\ecvprofessional{\href{mailto:mattia.mascarello@edu.unito.it}{mattia.mascarello@edu.unito.it}} \ecvprofessional{\href{mailto:mattia.mascarello@edu.unito.it}{mattia.mascarello@edu.unito.it}}
%\ecvpec{\href{mailto:emailo@pec.it}{email@pec.it}} %\ecvpec{\href{mailto:emailo@pec.it}{email@pec.it}}
\ecvhomepage{\url{https://matmasit.github.io}\newline\url{https://github.com/MatMasIt}} \ecvhomepage{\url{https://mattiaturin.duckdns.org}\newline\url{https://github.com/MatMasIt}}
\ecvnationality{Italiana} \ecvnationality{Italiana}
\ecvdateofbirth{19/11/2002} \ecvdateofbirth{19/11/2002}

BIN
images/badges/matrix.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

View File

@ -3,12 +3,12 @@
"short_name": "Mattia Mascarello", "short_name": "Mattia Mascarello",
"icons": [ "icons": [
{ {
"src": "/fav/android-chrome-192x192.png", "src": "/images/fav/android-chrome-192x192.png",
"sizes": "192x192", "sizes": "192x192",
"type": "image/png" "type": "image/png"
}, },
{ {
"src": "/fav/android-chrome-512x512.png", "src": "/images/fav/android-chrome-512x512.png",
"sizes": "512x512", "sizes": "512x512",
"type": "image/png" "type": "image/png"
} }

View File

@ -5,22 +5,23 @@
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" href="latex.css"> <link rel="stylesheet" href="latex.css">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="accessibility.css">
<title>Mattia Mascarello</title> <title>Mattia Mascarello</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Mattia Mascarello's personal website"> <meta name="description" content="Mattia Mascarello's personal website">
<meta name="keywords" content="Mattia Mascarello, UniTo"> <meta name="keywords" content="Mattia Mascarello, UniTo">
<meta property="og:title" content="Mattia Mascarello"> <meta property="og:title" content="Mattia Mascarello">
<meta property="og:url" content="https://matmasit.github.io/images"> <meta property="og:url" content="https://mattiaturin.duckdns.org">
<meta property="og:description" content="Mattia Mascarello's personal website"> <meta property="og:description" content="Mattia Mascarello's personal website">
<meta property="og:type" content="website"> <meta property="og:type" content="website">
<meta property="og:image" content="https://matmasit.github.io/images/portrait.jpg"> <meta property="og:image" content="https://mattiaturin.duckdns.org/images/portrait.jpg">
<script type="application/ld+json"> <script type="application/ld+json">
{ {
"@context": "https://schema.org/", "@context": "https://schema.org/",
"@type": "Person", "@type": "Person",
"name": "Mattia Mascarello", "name": "Mattia Mascarello",
"url": "https://matmasit.github.io", "url": "https://mattiaturin.duckdns.org",
"image": "https://matmasit.github.io/images/portrait.jpg", "image": "https://mattiaturin.duckdns.org/images/portrait.jpg",
"sameAs": "https://github.com/MatMasIt/", "sameAs": "https://github.com/MatMasIt/",
"jobTitle": "Student", "jobTitle": "Student",
"worksFor": { "worksFor": {
@ -39,7 +40,7 @@
</noscript> </noscript>
</head> </head>
<body> <body class="">
<header> <header>
<h1> <h1>
<span id="mattia" class="container"><span class="typed-out">Mattia</span></span> <span <span id="mattia" class="container"><span class="typed-out">Mattia</span></span> <span
@ -51,225 +52,242 @@
alt="Listen to my name"></a> alt="Listen to my name"></a>
</span> </span>
</h1> </h1>
<a href="#" id="accessibleToggle" aria-label="Toggle accessibility mode">Accessible Mode</a>
</header> </header>
<div class="abstract"> <main>
<p> <div class="abstract">
A human being <em>drifting</em> in spacetime<br> <p>
Studying <a href="https://www.cs.unito.it/do/home.pl" 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> aria-label="University of Turin Computer Science Department">Computer Science at the University of
(Italy)<br> Turin</a>
<code id="living"></code> (Italy)<br>
</p> <code id="living"></code>
<div class="happyEuDay"> </p>
<br> <div class="happyEuDay">
<h2>Happy <a href="https://european-union.europa.eu/principles-countries-history/symbols/europe-day_en" <br>
aria-label="Europe Day">Europe Day</a>!</h2> <h2>Happy <a href="https://european-union.europa.eu/principles-countries-history/symbols/europe-day_en"
<img data-play="eu" style="display: inline" class="playIcon" alt="Start Playing" aria-label="Europe Day">Europe Day</a>!</h2>
aria-roledescription="Play/Stop button" src="images/icons/play.svg" width="20"> <img data-play="eu" style="display: inline" class="playIcon" alt="Start Playing"
&nbsp;&nbsp;<a href="https://en.wikipedia.org/wiki/Anthem_of_Europe" aria-label="Anthem of Europe"><i>Anthem of aria-roledescription="Play/Stop button" src="images/icons/play.svg" width="20">
Europe</i></a> &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> </div>
<div class="happyRepublicDay"> <figure>
<br><br> <a href="images/portrait.jpg" id="portraitLink" aria-label="Portrait of Mattia Mascarello"><img
<h2>Buona <a href="https://en.wikipedia.org/wiki/Festa_della_Repubblica" aria-label="Republic Day">Festa della src="images/portrait.jpg" id="portrait" loading="lazy" alt="Portrait of Mattia Mascarello"
Repubblica</a>!</h2> style="margin:auto"></a>
<img data-play="it" style="display: inline" class="playIcon" alt="Start Playing" <figcaption style="text-align: center;">
aria-roledescription="Play/Stop button" src="images/icons/play.svg" width="20"> Portrait <br><a href="alternatePortraitVersions/" aria-label="Alternate versions of the portrait">Alternate
&nbsp;&nbsp;<a href="https://en.wikipedia.org/wiki/Il_Canto_degli_Italiani" versions</a>
aria-label="Anthem of Italy (Il Canto degli Italiani)"><i>Anthem of Italy <i>(Il Canto degli </figcaption>
Italiani)</i></i></a> </figure>
</div> <!-- <blockquote>
<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 <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 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 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. 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 <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> Problem' The Times newspaper, 11 June 1949 page 4 column 5.</cite>
</blockquote> </blockquote>-->
<br> <br>
<figure> <figure>
<div class="row"> <div class="row">
<div class="column"> <div class="column">
<a href="images/turin.jpg" target="_blank" aria-label="Image of Turin"><img src="images/turin.jpg" <a href="images/turin.jpg" target="_blank" aria-label="Image of Turin"><img src="images/turin.jpg"
loading="lazy" alt="Me in Turin"></a> 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> </div>
<div class="column"> <figcaption>
<a href="images/amsterdam.jpg" target="_blank" aria-label="Image of Amsterdam"> <img <div id="clockwise"><b>From Top to Bottom in lines, </b></div>
src="images/amsterdam.jpg" loading="lazy" alt="Amsterdam"></a> <div id="topbottom"><b>From Top to Bottom,</b></div>
</div> <div id="leftright"><b>From Left to Right,</b></div>
<div class="column"> 1) <a href="https://en.wikipedia.org/wiki/Turin" target="_blank" aria-label="Turin">Turin</a>, 2) <a
<a href="images/paris.jpg" target="_blank" aria-label="Image of Paris"> <img src="images/paris.jpg" href="https://en.wikipedia.org/wiki/Amsterdam" target="_blank" aria-label="Amsterdam">Amsterdam</a>, 3)
loading="lazy" alt="Paris"></a> <a href="https://en.wikipedia.org/wiki/Paris" target="_blank" aria-label="Paris">Paris</a>, 4) <a
</div> href="https://en.wikipedia.org/wiki/Espace_L%C3%A9opold" target="_blank"
<div class="column"> aria-label="European Parliament in Brussels">The European Parliament in Bruxelles</a>, 5) Me at <a
<a href="images/ep.jpg" target="_blank" aria-label="Image of the European Parliament in Brussels"> <img href="https://fast.mi.it/i-giovani-e-le-scienze/" target="_blank"
src="images/ep.jpg" loading="lazy" alt="The European Parliament in Bruxelles"></a> aria-label="I Giovani e le Scienze 2022">I
</div> Giovani e le Scienze 2022</a>, 6) Me at a restaurant near the University,
<div class="column"> 7) Me staring at the void at <a href="https://fast.mi.it/i-giovani-e-le-scienze/" target="_blank"
<a href="images/gs.jpg" target="_blank" aria-label="Image from I Giovani e Le Scienze"> <img aria-label="I Giovani e le Scienze 2022">I Giovani e le Scienze 2022</a>, 8) Enlarged portrait
src="images/gs.jpg" loading="lazy" alt="Ne at I Giovani e Le Scienze"></a> </figcaption>
</div> </figure>
<div class="column"> <div class="abstract">
<a href="images/unito_self.jpg" target="_blank" <h2 class="abstractTitle">Résumé/Curriculum Vitae</h2>
aria-label="Image of Mattia Mascarello at a restaurant near the University"> <img <div>
src="images/unito_self.jpg" loading="lazy" alt="Me at a restaurant near the University"></a> <a href="docs/italian.pdf" aria-label="Italian Curriculum Vitae in PDF">Italiano</a>
</div> &nbsp;&nbsp;&nbsp;&nbsp;
<div class="column"> <a href="docs/english.pdf" aria-label="English Curriculum Vitae in PDF">English</a>
<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>
</div> </div>
<figcaption> <table id="contacts">
<div id="clockwise"><b>From Top to Bottom in lines, </b></div> <caption>Contacts</caption>
<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> <tbody>
<tr> <tr>
<td>Email</td> <td>Email</b>
<td> <td>
<noscript> mattia [d0t] mascarello [at] edu [d0t] unito [d0t] it</noscript> <noscript> mattia [d0t] mascarello [at] edu [d0t] unito [d0t] it</noscript>
<script src="emails/unito.js"></script><br> <script src="emails/unito.js"></script><br>
<b>OpenPGP Key</b> <a href="emails/MattiaMascarelloUniTo.asc" <b>OpenPGP Key</b> <a href="emails/MattiaMascarelloUniTo.asc"
aria-label="OpenPGP Key for University Email">here</a> aria-label="OpenPGP Key for University Email">here</a>
<br><br> <br><br>
<noscript> mattia [d0t] mascarello [at] outlook [d0t] it</noscript> <noscript> mattia [d0t] mascarello [at] outlook [d0t] it</noscript>
<script src="emails/personal.js"></script><br> <script src="emails/personal.js"></script><br>
<b>OpenPGP Key</b> <a href="emails/MattiaMascarelloOutlook.asc" <b>OpenPGP Key</b> <a href="emails/MattiaMascarelloOutlook.asc"
aria-label="OpenPGP Key for Personal Email">here</a> aria-label="OpenPGP Key for Personal Email">here</a>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Telegram</td> <td>Telegram</td>
<td><a href="https://t.me/be94b16fbot" aria-label="Telegram Contact">@be94b16fbot</a></td> <td><a href="https://t.me/be94b16fbot" aria-label="Telegram Contact">@be94b16fbot</a></td>
</tr> </tr>
<tr> </tbody>
<td>XMPP</td> </table> <br>
<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>
<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.</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 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>
</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>
</main>
<br> <br>
<table> <footer class="footnotes">
<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"> <div class="badges">
<a href="https://validator.w3.org/check?uri=referer" aria-label="Validate HTML5"><img <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> src="images/badges/valid_html.png" alt="Valid HTML5" style="border:0;width:88px;height:31px"></a>
@ -279,7 +297,7 @@
</a> </a>
<a href="https://ublockorigin.com/" aria-label="uBlock Origin"><img src="images/badges/ublock-now.png" <a href="https://ublockorigin.com/" aria-label="uBlock Origin"><img src="images/badges/ublock-now.png"
alt="uBlock Origin"></a> alt="uBlock Origin"></a>
<a href="https://xmpp.org/" aria-label="XMPP"><img src="images/badges/xmpp.gif" alt="XMPP"></a> <a href="https://matrix.org/" aria-label="Matrix"><img src="images/badges/matrix.gif" alt="Matrix"></a>
<a href="https://en.wikipedia.org/wiki/RSS" aria-label="RSS"><img src="images/badges/rss.gif" alt="RSS"></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://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 <a href="https://www.mozilla.org/firefox" aria-label="Get Firefox"><img
@ -292,6 +310,7 @@
<a href="#contacts" aria-label="Contacts"><img src="images/badges/pgp-now.gif" alt="PGP"></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="#"><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="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> </div>
<p> <p>
&copy; 2022 <span id="toYear">- &copy; 2022 <span id="toYear">-
@ -317,8 +336,9 @@
<script> <script>
document.getElementById("noScript").style.display = "none"; document.getElementById("noScript").style.display = "none";
</script> </script>
</div> </footer>
<script src="script.js"></script> <script src="script.js"></script>
<script src="accessibility.js"></script>
</body> </body>
</html> </html>

View File

@ -1,3 +1,12 @@
.human-calendar, #toYear, #poemOfTheDay, #pronounce, .happyEuDay, .happyRepublicDay, .happyXMAS, .happyNATODay, #versionSwitch { .human-calendar,
#toYear,
#poemOfTheDay,
#pronounce,
.happyEuDay,
.happyRepublicDay,
.happyXMAS,
.happyNATODay,
#versionSwitch,
#accessibleToggle {
display: none !important; display: none !important;
} }

View File

@ -314,7 +314,6 @@ setInterval(function () {
setInterval(function () { setInterval(function () {
specialDates(); specialDates();
setPoemOfTheDay();
}, 5 * 60 * 1000); }, 5 * 60 * 1000);
addEventListener("hashchange", (event) => { addEventListener("hashchange", (event) => {

View File

@ -202,26 +202,9 @@ body {
background-position-x: 1000px; background-position-x: 1000px;
} }
.centered-container {
width: 20vw;
margin: 0 auto; /* Centers the div horizontally */
text-align: center; /* Centers the content inside the div */
}
.centered-container img {
display: block; /* Ensures the image is treated as a block element */
margin: 0 auto; /* Centers the image inside the div */
}
.human-calendar { .badges>a {
width: 215px;
height: 215px;
border: none; /* Removes the border */
margin: 0; /* Removes any default margin */
padding: 0; /* Removes any default padding */
overflow: hidden; /* Hides any overflowing content */
}
.badges > a {
display: inline-block; display: inline-block;
margin: 0 5px; margin: 0 5px;
} }