mattia/Website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

accessibility, removed eclectic stuff, site rectified

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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();
}

27
alternatePortraitVersions/index.html
View File

@ -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,10 +33,13 @@
</head>
<body>
<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">
@ -48,16 +52,16 @@
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>
<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>
<a href="../images/xmasportrait.png" target="_blank"> <img src="../images/xmasportrait.png"
loading="lazy" alt="Christmas (19th-26th of December)" /></a>
</div>
</div>
@ -79,7 +83,8 @@
&copy; 2022 Mattia Mascarello
</p>
</div>
<script src="script.js"></script>
</main>
<script src="../accessibility.js"></script>
</body>
</html>

BIN
docs/english.pdf
View File

Binary file not shown.

2
docs/english.tex
View File

@ -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
View File

Binary file not shown.

2
docs/italian.tex
View File

@ -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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

4
images/fav/site.webmanifest
View File

@ -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"
}

102
index.html
View File

@ -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,12 +52,15 @@
alt="Listen to my name"></a>
</span>
</h1>
<a href="#" id="accessibleToggle" aria-label="Toggle accessibility mode">Accessible Mode</a>
</header>
<main>
<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>
aria-label="University of Turin Computer Science Department">Computer Science at the University of
Turin</a>
(Italy)<br>
<code id="living"></code>
</p>
@ -66,12 +70,14 @@
aria-label="Europe Day">Europe Day</a>!</h2>
<img data-play="eu" style="display: inline" class="playIcon" alt="Start Playing"
aria-roledescription="Play/Stop button" src="images/icons/play.svg" width="20">
&nbsp;&nbsp;<a href="https://en.wikipedia.org/wiki/Anthem_of_Europe" aria-label="Anthem of Europe"><i>Anthem of
&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
<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">
@ -101,14 +107,14 @@
versions</a>
</figcaption>
</figure>
<blockquote>
<!-- <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>
</blockquote>-->
<br>
<figure>
<div class="row">
@ -138,7 +144,8 @@
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">
<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">
@ -151,27 +158,22 @@
<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/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
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>
<h2 class="abstractTitle">Résumé/Curriculum Vitae</h2>
<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/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>
@ -180,7 +182,7 @@
<tbody>
<tr>
<td>Email</td>
<td>Email</b>
<td>
<noscript> mattia [d0t] mascarello [at] edu [d0t] unito [d0t] it</noscript>
<script src="emails/unito.js"></script><br>
@ -197,13 +199,33 @@
<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>
</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>
@ -214,7 +236,8 @@
</tr>
<tr>
<td>Jellyfin</td>
<td><a href="https://jellyfin.mattiaturin.duckdns.org" aria-label="Jellyfin profile">My Jellyfin server</a>
<td><a href="https://jellyfin.mattiaturin.duckdns.org" aria-label="Jellyfin profile">My Jellyfin
server</a>
</tr>
<tr>
<td>qBittorrent</td>
@ -262,14 +285,9 @@
</tr>
</tbody>
</table>
</main>
<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>
&copy; 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
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;
}

1
script.js
View File

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

19
style.css
View File

@ -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 {
display: inline-block;
margin: 0 5px;
}