accessibility, removed eclectic stuff, site rectified
This commit is contained in:
parent
67b8cfda77
commit
1eec5b3bb8
98
accessibility.css
Normal file
98
accessibility.css
Normal 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
31
accessibility.js
Normal 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();
|
||||
}
|
||||
|
|
@ -5,6 +5,7 @@
|
|||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="../latex.css">
|
||||
<link rel="stylesheet" href="../style.css">
|
||||
<link rel="stylesheet" href="../accessibility.css">
|
||||
<title>Alternate Portrait Versions</title>
|
||||
<meta name="robots" content="noindex,nofollow">
|
||||
<meta name="google-site-verification" content="DibIHTYcO0f2RAdscthaJh1g_-TNwN0vu6j25GT93kg" />
|
||||
|
|
@ -12,16 +13,16 @@
|
|||
<meta name="description" content="Mattia Mascarello's personal website" />
|
||||
<meta name="keywords" content="Mattia Mascarello, Liceo Cocito, Mordapp" />
|
||||
<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: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) -->
|
||||
<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="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">
|
||||
<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">
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag() { dataLayer.push(arguments); }
|
||||
|
|
@ -32,54 +33,58 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Alternate Protrait Versions</h1>
|
||||
<p>These are the variations of the main portrait which are displayed during the appropriate time frames.</p>
|
||||
</header>
|
||||
<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>
|
||||
<main>
|
||||
<header>
|
||||
<h1>Alternate Protrait Versions</h1>
|
||||
<p>These are the variations of the main portrait which are displayed during the appropriate time frames.</p>
|
||||
</header>
|
||||
<a href="#" id="accessibleToggle" aria-label="Toggle accessibility mode">Accessible Mode</a>
|
||||
|
||||
<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>
|
||||
© 2022 Mattia Mascarello
|
||||
</p>
|
||||
</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>
|
||||
© 2022 Mattia Mascarello
|
||||
</p>
|
||||
</div>
|
||||
<script src="script.js"></script>
|
||||
</main>
|
||||
<script src="../accessibility.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
BIN
docs/english.pdf
BIN
docs/english.pdf
Binary file not shown.
|
|
@ -20,7 +20,7 @@
|
|||
\ecvemail{\href{mailto:mattia.mascarello@outlook.it}{mattia.mascarello@outlook.it}}
|
||||
\ecvprofessional{\href{mailto:mattia.mascarello@edu.unito.it}{mattia.mascarello@edu.unito.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}
|
||||
\ecvdateofbirth{19/11/2002}
|
||||
|
|
|
|||
BIN
docs/italian.pdf
BIN
docs/italian.pdf
Binary file not shown.
|
|
@ -36,7 +36,7 @@
|
|||
\ecvemail{\href{mailto:mattia.mascarello@outlook.it}{mattia.mascarello@outlook.it}}
|
||||
\ecvprofessional{\href{mailto:mattia.mascarello@edu.unito.it}{mattia.mascarello@edu.unito.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}
|
||||
\ecvdateofbirth{19/11/2002}
|
||||
|
|
|
|||
BIN
images/badges/matrix.gif
Normal file
BIN
images/badges/matrix.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
|
|
@ -3,12 +3,12 @@
|
|||
"short_name": "Mattia Mascarello",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/fav/android-chrome-192x192.png",
|
||||
"src": "/images/fav/android-chrome-192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "/fav/android-chrome-512x512.png",
|
||||
"src": "/images/fav/android-chrome-512x512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png"
|
||||
}
|
||||
|
|
|
|||
444
index.html
444
index.html
|
|
@ -5,22 +5,23 @@
|
|||
<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://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: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">
|
||||
{
|
||||
"@context": "https://schema.org/",
|
||||
"@type": "Person",
|
||||
"name": "Mattia Mascarello",
|
||||
"url": "https://matmasit.github.io",
|
||||
"image": "https://matmasit.github.io/images/portrait.jpg",
|
||||
"url": "https://mattiaturin.duckdns.org",
|
||||
"image": "https://mattiaturin.duckdns.org/images/portrait.jpg",
|
||||
"sameAs": "https://github.com/MatMasIt/",
|
||||
"jobTitle": "Student",
|
||||
"worksFor": {
|
||||
|
|
@ -39,7 +40,7 @@
|
|||
</noscript>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body class="">
|
||||
<header>
|
||||
<h1>
|
||||
<span id="mattia" class="container"><span class="typed-out">Mattia</span></span> <span
|
||||
|
|
@ -51,225 +52,242 @@
|
|||
alt="Listen to my name"></a>
|
||||
</span>
|
||||
</h1>
|
||||
<a href="#" id="accessibleToggle" aria-label="Toggle accessibility mode">Accessible Mode</a>
|
||||
|
||||
</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">
|
||||
<a href="https://en.wikipedia.org/wiki/Anthem_of_Europe" aria-label="Anthem of Europe"><i>Anthem of
|
||||
Europe</i></a>
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<a href="https://en.wikipedia.org/wiki/The_NATO_Hymn" aria-label="The NATO Hymn"><i>The NATO
|
||||
Hymn</i></a>
|
||||
</div>
|
||||
</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">
|
||||
<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">
|
||||
<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>
|
||||
<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> <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>
|
||||
</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>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<a href="docs/english.pdf" aria-label="English Curriculum Vitae in PDF">English</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>
|
||||
<a href="docs/english.pdf" aria-label="English Curriculum Vitae in PDF">English</a>
|
||||
</div>
|
||||
</div>
|
||||
<table id="contacts">
|
||||
<caption>Contacts</caption>
|
||||
<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>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Email</b>
|
||||
<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>
|
||||
</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.</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>
|
||||
<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">
|
||||
<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>
|
||||
|
|
@ -279,7 +297,7 @@
|
|||
</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://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://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
|
||||
|
|
@ -292,6 +310,7 @@
|
|||
<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>
|
||||
© 2022 <span id="toYear">-
|
||||
|
|
@ -317,8 +336,9 @@
|
|||
<script>
|
||||
document.getElementById("noScript").style.display = "none";
|
||||
</script>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="script.js"></script>
|
||||
<script src="accessibility.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
11
nojs.css
11
nojs.css
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -314,9 +314,8 @@ setInterval(function () {
|
|||
|
||||
setInterval(function () {
|
||||
specialDates();
|
||||
setPoemOfTheDay();
|
||||
}, 5 * 60 * 1000);
|
||||
|
||||
addEventListener("hashchange", (event) => {
|
||||
specialDates();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
23
style.css
23
style.css
|
|
@ -202,26 +202,9 @@ body {
|
|||
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 {
|
||||
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 {
|
||||
.badges>a {
|
||||
display: inline-block;
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user