accessibility, removed eclectic stuff, site rectified

accessibility.css

@@ -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;
+}

accessibility.js

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

alternatePortraitVersions/index.html

@@ -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="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>
       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"
+               <a href="../images/natoportrait.png" target="_blank"> <img src="../images/natoportrait.png"
-                  alt="NATO Day (4th of April)" /></a>
+                     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"
+               <a href="../images/xmasportrait.png" target="_blank"> <img src="../images/xmasportrait.png"
-                  alt="Christmas (19th-26th of December)" /></a>
+                     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>

docs/english.tex

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

docs/italian.tex

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

images/fav/site.webmanifest

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

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",
+        "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/",
         "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/Amsterdam" target="_blank" aria-label="Amsterdam">Amsterdam</a>, 3)
-            href="https://en.wikipedia.org/wiki/Paris" target="_blank" aria-label="Paris">Paris</a>, 4) <a
+            <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>
+         <h2 class="abstractTitle">Résumé/Curriculum Vitae</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/italian.pdf" aria-label="Italian Curriculum Vitae in PDF">Italiano</a> &nbsp;&nbsp;&nbsp;&nbsp;
+            &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">
+   <footer class="footnotes">
-      <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">
          <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>

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

script.js

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

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  {
+.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;
     margin: 0 5px;
 }
+