Cleared history (privacy)

2024-04-08 09:44:54 +02:00 · 2024-04-08 09:44:54 +02:00 · 79c870b645
commit 79c870b645
73 changed files with 2123 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,8 @@
 docs/*.log
 docs/*.gz
 docs/europecv
 docs/*.aux
 docs/*.fdb_latexmk
 docs/*.fls
 docs/*.sh
 docs/*.out
--- a/README.md
+++ b/README.md
@ -0,0 +1,2 @@
 # mySite
 My personal Site
--- a/alternatePortraitVersions/index.html
+++ b/alternatePortraitVersions/index.html
@ -0,0 +1,85 @@
 <!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8">
   <link rel="stylesheet" href="../latex.css">
   <link rel="stylesheet" href="../style.css">
   <title>Alternate Portrait Versions</title>
   <meta name="robots" content="noindex,nofollow">
   <meta name="google-site-verification" content="DibIHTYcO0f2RAdscthaJh1g_-TNwN0vu6j25GT93kg" />
   <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, Liceo Cocito, Mordapp" />
   <meta property="og:title" content="Mattia Mascarello" />
   <meta property="og:url" content="https://matmasit.github.io/images" />
   <meta property="og:description" content="Mattia Mascarello's personal website" />
   <meta property="og:type" content="website" />
   <meta property="og:image" content="https://matmasit.github.io/images/portrait.jpg" />
   <!-- 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">
   <script>
      window.dataLayer = window.dataLayer || [];
      function gtag() { dataLayer.push(arguments); }
      gtag('js', new Date());
      gtag('config', 'G-6WNMM3QFPW');
   </script>
 </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>
      </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>
   <script src="script.js"></script>
 </body>
 </html>
--- a/audio/eu.ogg
+++ b/audio/eu.ogg
--- a/audio/ita.mp3
+++ b/audio/ita.mp3
--- a/audio/mascarello.ogg
+++ b/audio/mascarello.ogg
--- a/audio/mattia.ogg
+++ b/audio/mattia.ogg
--- a/audio/nato.mp3
+++ b/audio/nato.mp3
--- a/docs/dromont.png
+++ b/docs/dromont.png
--- a/docs/english.pdf
+++ b/docs/english.pdf
--- a/docs/english.tex
+++ b/docs/english.tex
@ -0,0 +1,149 @@
 \documentclass[totpages,helvetica,openbib,english,nologo,nobranding,notitle,totpages, flagCMYK]{europecv}
 \usepackage[T1]{fontenc}
 \usepackage{graphicx} 
 \usepackage[a4paper,top=1.27cm,left=1cm,right=1cm,bottom=2cm]{geometry}
 \usepackage[english]{babel}
 \usepackage{url}
 \usepackage{bookmark}
 \newcommand{\spacer}{
 	\ecvitem{\newline\newline}{\newline\newline}}
 \renewcommand{\ttdefault}{phv} % Uses Helvetica instead of fixed width font
 \newcommand{\mycomment}[1]{}
 \newcommand*{\SignatureAndDate}[1]{%
 	\par\noindent\makebox[2.5in]{\today}
 	\par\noindent\makebox[2.5in]{\hrulefill} \hfill\makebox[2.0in]{\hrulefill}%
 	\par\noindent\hfill\makebox[5.43in][l]{Date}    \makebox[2.0in][l]{#1}%
 }%
 \ecvname{Mattia, Mascarello}
 %\ecvfax{(Remove if not relevant)}
 \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}}
 \ecvnationality{Italian}
 \ecvdateofbirth{19/11/2002}
 \ecvgender{Male}
 \ecvdate{\today}
 \ecvpicture{portrait} 
 %\ecvyoutube{\url{www.youtube.com/myChannel}} 
 %\ecvpicture[width=3cm]{mypicture}
 %\ecvfootnote{For further details please take a look here: \url{http://europass.cedefop.eu.int}\\
 	%\textcopyright~European Communities, 2003.}
 \begin{document}
 	\selectlanguage{english}
 	\begin{europecv}
 		\ecvpersonalinfo[20pt]
 		%\ecvitem{\large\textbf{Desired employment/ Occupational~field}}{\large\textbf{(Remove if not relevant)}}
 		\pdfbookmark{Work experience}{Work experience}
 		\section{Work experience}
 		\ecvitem{Dates}{February 2023}
 		\ecvitem{ccupation or position held}{Computer Science Teacher}
 		\ecvitem{Main activities and responsibilities}{Teaching computer science to several High School classes}
 		\ecvitem{Name and address of employer}{Liceo Scientifico Statale Leonardo Cocito, corso Europa 2, 12501 Alba (CN)}
 		\ecvitem{Type of business or sector}{State Scientific High School}
 		\spacer
 		\ecvitem{Dates}{From 26\textsuperscript{th}May 2022}
 		\ecvitem{Occupation or position held}{Website fullstack developer}
 		\ecvitem{Main activities and responsibilities}{Developing a professional website with custom content management system}
 		\ecvitem{Name and address of employer}{Wild Life Protection ETS\newline Via Roma 34, Roddi (CN), Italy}
 		\ecvitem{Type of business or sector}{Non-profit environment volunteer association}
 		\spacer
 		\ecvitem{Dates}{May 2020 - September 2020}
 		\ecvitem{Occupation or position held}{IoT developer}
 		\ecvitem{Main activities and responsibilities}{Developing a remote administration platform for fleets of paint making machines
 		}
 		\ecvitem{Name and address of employer}{Freelancing for Dromont S.p.A.\newline Via Borzone, 42, 12060 Grinzane Cavour CN, Italy}
 		\ecvitem{Type of business or sector}{Industrial paint making machine engineering}
 		\pdfbookmark{Education and training}{Education and training}
 		\section{Education and training}
 		\mycomment{
 			\ecvitem{Dates}{19\textsuperscript{th} September 2022 - }
 			\ecvitem{Title of qualification awarded}{Master's degree in Computer Science}
 			\ecvitem{Principal subjects/Occupational skills covered}{Computer Science}
 			\ecvitem{Name and type of organization providing education and training}{University of Turin - Computer Science Department}
 			%\ecvitem{Level in national or international classification\footnote{If appropriate.}}{\ldots}
 			\spacer
 		}
 		\ecvitem{Dates}{19\textsuperscript{th} September 2022 - }
 		%\ecvitem{Title of qualification awarded}{Bachelor's degree in Computer Science}
 		\ecvitem{Principal subjects/Occupational skills covered}{Computer Science student}
 		\ecvitem{Name and type of organization providing education and training}{University of Turin - Computer Science Department}
 		%\ecvitem{Level in national or international classification\footnote{If appropriate.}}{\ldots}
 		\spacer
 		\ecvitem{Dates}{2017 - 2022}
 		\ecvitem{Title of qualification awarded}{Scientific high school diploma - Applied Sciences
 		}
 		%\ecvitem{Principal subjects/Occupational skills covered}{\ldots}
 		\ecvitem{Name and type of organization providing education and training}{Liceo Scientifico Statale Leonardo Cocito (Alba)}
 		\pdfbookmark{Certifications, Awards and Participations}{Certifications, Awards and Participations}
 		\section{Certifications, Awards and Participations}
 		\ecvitem{}{\textsc{\textbf{Certifications}}}
 		\ecvitem{2017}{Diplôme d'études en langue française, Niveau A2}
 		\ecvitem{2017}{Cambridge English - Key English Test (KET)}
 		\ecvitem{2019}{Cambridge English - Preliminary English Test (PET)}
 		\ecvitem{2022}{Cambridge English - Advanced Cambridge English (CAE) - C2}
 		\spacer
 		\ecvitem{}{\textsc{\textbf{Awards}}}
 		\ecvitem{2017}{``Friend of La Morra'' award, dedicated to Giacomo Oddero}
 		\ecvitem{2018}{Scolarship award, Università delle Tre Età, Alba (CN), Italy}
 		\ecvitem{2018}{National Excellence Honours Roll of the Italian Ministry of Education\newline \textit{Participation at ``Youth and science 2018'', in Milan, with the project \textbf{MordApp}}}
 		\ecvitem{2022}{National Excellence Honours Roll of the Italian Ministry of Education\newline \textit{Participation at ``Youth and science 2022'', in Milan, with the project \textbf{Open source Weather Station}}}
 		\ecvitem{2022}{\textsc{American Meteorological Society}, Award of Outstanding Achievement, for excellence in atmospheric or related sciences}
 		\spacer
 		\ecvitem{}{\textsc{\textbf{Participations}}}
 		\ecvitem{2018}{Participation at ``Youth and science 2018'', in Milan, with the project \textbf{MordApp}}
 		\ecvitem{2022}{Participation at ``Youth and science 2018'', in Milan, with the project \textbf{Open source Weather Station}}
 		\pdfbookmark{Personal skills and~competences}{Personal skills and~competences}
 		\section{Personal skills and~competences}
 		\ecvmothertongue[5pt]{Italian}
 		\ecvitem{\large Other language(s)}{}
 		\ecvlanguageheader{(*)}
 		\ecvlanguage{English}{\ecvCTwo}{\ecvCTwo}{\ecvCTwo}{\ecvCTwo}{\ecvCTwo}
 		\ecvlanguagefooter[10pt]{(*)}
 		\mycomment{
 			\ecvitem[10pt]{\large Social skills and competences}{Replace this text by a description of these competences and indicate where they were acquired (remove if not relevant).}
 			\ecvitem[10pt]{\large Organisational skills and ompetences}{Replace this text by a description of these competences and indicate where they were acquired (remove if not relevant).}
 			\ecvitem[10pt]{\large Technical skills and competences}{Replace this text by a description of these competences and indicate where they were acquired (remove if not relevant).}
 			\ecvitem[10pt]{\large Computer skills and competences}{Replace this text by a description of these competences and indicate where they were acquired (remove if not relevant).}
 			\ecvitem[10pt]{\large Artistic skills and competences}{Replace this text by a description of these competences and indicate where they were acquired (remove if not relevant).}
 			\ecvitem[10pt]{\large Other skills and competences}{Replace this text by a description of these competences and indicate where they were acquired (remove if not relevant).}
 			\ecvitem{\large Driving licence(s)}{State here whether you hold a driving licence and if so for which categories of vehicle. (Remove if not relevant).}
 			\pdfbookmark{Additional information}{Additional information}
 			\section{Additional information}
 			\ecvitem[10pt]{}{Include here any other information that may be relevant, for example contact persons, references, etc. (Remove heading if not relevant).}
 			\ecvitem{}{\textbf{Personal interests}}
 			\ecvitem{}{\ldots}
 			\pdfbookmark{Annexes}{Annexes}
 			\section{Annexes}
 			\ecvitem{}{List any item attached to the CV}
 		}
 	\end{europecv}
 	\vspace{5.0cm}
 	%\hfill\includegraphics[scale=0.05]{figure/sign.png}
 	\vspace{-2.5cm}
 	\SignatureAndDate{Name Surname}
 \end{document} 
--- a/docs/italian.pdf
+++ b/docs/italian.pdf
--- a/docs/italian.tex
+++ b/docs/italian.tex
@ -0,0 +1,162 @@
 \documentclass[totpages,helvetica,openbib,italian,nologo,nobranding,notitle,totpages, flagCMYK]{europecv}
 \usepackage{graphicx} 
 \usepackage[a4paper,top=1.27cm,left=1cm,right=1cm,bottom=2cm]{geometry}
 \usepackage[english]{babel}
 \usepackage{url}
 \usepackage{bookmark}
 \usepackage{graphicx}
 \newcommand{\spacer}{
 	\ecvitem{\newline\newline}{\newline\newline}}
 \renewcommand{\ttdefault}{phv} % Uses Helvetica instead of fixed width font
 \newcommand{\MONTH}{%
 	\ifcase\the\month
 	\or Gennaio% 1
 	\or Febbraio% 2
 	\or Marzo% 3
 	\or Aprile% 4
 	\or Maggio% 5
 	\or Giugno% 6
 	\or Giulio% 7
 	\or August% 8
 	\or Settembre% 9
 	\or Ottobre% 10
 	\or Novembre% 11
 	\or Dicembre% 12
 	\fi}
 \newcommand{\mycomment}[1]{}
 \newcommand{\dated}{\the\day \space \MONTH \space 2022}
 \newcommand*{\SignatureAndDate}[1]{%
 	\par\noindent\makebox[2.5in]{\dated}
 	\par\noindent\makebox[2.5in]{\hrulefill} \hfill\makebox[2.0in]{\hrulefill}%
 	\par\noindent\hfill\makebox[5.43in][l]{Data}    \makebox[2.0in][l]{#1}%
 }%
 \ecvname{Mattia, Mascarello}
 \ecvfootername{Mattia, Mascarello}
 \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}}
 \ecvnationality{Italiana}
 \ecvdateofbirth{19/11/2002}
 \ecvgender{M}
 \ecvdate{\dated}
 \ecvpicture{portrait} 
 %\ecvyoutube{\url{www.youtube.com/myChannel}} 
 %\ecvpicture[width=3cm]{mypicture}
 %\ecvfootnote{For further details please take a look here: \url{http://europass.cedefop.eu.int}\\
 	%\textcopyright~European Communities, 2003.}
 \begin{document}
 	\selectlanguage{english}
 	\begin{europecv}
 		\ecvpersonalinfo[20pt]
 		%\ecvitem{\large\textbf{Desired employment/ Occupational~field}}{\large\textbf{(Remove if not relevant)}}
 		\pdfbookmark{Esperienza Lavorativa}{Esperienza Lavorativa}
 		\section{Esperienza Lavorativa}
 		\ecvitem{Date}{Febbraio 2023}
 		\ecvitem{Tipo di impiego}{Docente di Informatica}
 		\ecvitem{Principali mansioni e responsabilità}{Cattedra di informatica presso più classi del Liceo}
 		\ecvitem{Nome e indirizzo del datore di lavoro}{Liceo Scientifico Statale Leonardo Cocito, corso Europa 2, 12501 Alba (CN)}
 		\ecvitem{Tipo di azienda o settore}{Liceo Scientifico}
 		\spacer
 		\ecvitem{Date}{Dal 26 Maggio 2022}
 		\ecvitem{Tipo di impiego}{Sviluppatore sito web fullstack}
 		\ecvitem{Principali mansioni e responsabilità}{Sviluppo di un sito web professionale con un sistema di gestione dei contenuti personalizzati}
 		\ecvitem{Nome e indirizzo del datore di lavoro}{Wild Life Protection ETS\newline Via Roma 34, Roddi (CN), Italy}
 		\ecvitem{Tipo di azienda o settore}{Associazione di Volontariato ambientale}
 		\spacer
 		\ecvitem{Date}{Maggio 2020 - Settembre 2020}
 		\ecvitem{Tipo di impiego}{Sviluppo IoT}
 		\ecvitem{Principali mansioni e responsabilità}{Sviluppo di una piattaforma di gestione e amministrazione di parchi macchine di tintometri}
 		\ecvitem{Nome e indirizzo del datore di lavoro}{Per Dromont S.p.A.\newline Via Borzone, 42, 12060 Grinzane Cavour CN, Italy}
 		\ecvitem{Tipo di azienda o settore}{Costruzione e progettazione di tintometri industriali}
 		\pdfbookmark{Istruzione e formazione}{Istruzione e formazione}
 		\section{Istruzione e formazione}
 		\mycomment{
 			\ecvitem{Data}{19 Settembre 2022 - }
 			\ecvitem{Qualifica conseguita}{Laurea Magistrale in Informatica}
 			\ecvitem{Principali materie / abilità professionali oggetto dello studio}{Informatica}
 			\ecvitem{Nome e tipo di istituto di istruzione o formazione}{Università di Torino - Dipartimento di Informatica}
 			%\ecvitem{Level in national or international classification\footnote{If appropriate.}}{\ldots}
 			\spacer
 		}
 		\ecvitem{Date}{19 Settembre 2022 - }
 		%\ecvitem{Qualifica conseguita}{Bachelor's degree in Computer Science}
 		\ecvitem{Principali materie / abilità professionali oggetto dello studio}{Studente di Informatica}
 		\ecvitem{Nome e tipo di istituto di istruzione o formazione}{Università di Torino - Dipartimento di Informatica}
 		%\ecvitem{Level in national or international classification\footnote{If appropriate.}}{\ldots}
 		\spacer
 		\ecvitem{Date}{2017 - 2022}
 		\ecvitem{Qualifica conseguita}{Diploma di liceo Scientifico, Scienze Applicate}
 		%\ecvitem{Principali materie / abilità professionali oggetto dello studio}{\ldots}
 		\ecvitem{Nome e tipo di istituto di istruzione o formazione}{Liceo Scientifico Statale Leonardo Cocito (Alba)}
 		\pdfbookmark{Certificati, Premi e Partecipazioni}{Certificati, Premi e Partecipazioni}
 		\section{Certificati, Premi e Partecipazioni}
 		\ecvitem{}{\textsc{\textbf{Certificati}}}
 		\ecvitem{2017}{Diplôme d'études en langue française, Niveau A2}
 		\ecvitem{2017}{Cambridge English - Key English Test (KET)}
 		\ecvitem{2019}{Cambridge English - Preliminary English Test (PET)}
 		\ecvitem{2022}{Cambridge English - Advanced Cambridge English (CAE) - C2}
 		\spacer
 		\ecvitem{}{\textsc{\textbf{Premi}}}
 		\ecvitem{2017}{Premio ``Amico di La Morra'' dedicato a Giacomo Oddero}
 		\ecvitem{2018}{Borsa di Studio, Università delle Tre Età, Alba (CN)}
 		\ecvitem{2018}{Iscrizione all'Albo Nazionale delle Eccellenze\newline \textit{Partecipazione a ``I Giovani e Le Scienze 2018'', a Milano, con il progetto  \textbf{MordApp}}}
 		\ecvitem{2022}{Iscrizione all'Albo Nazionale delle Eccellenze\newline \textit{Partecipazione a ``I Giovani e Le Scienze 2022'', a Milano, con il progetto \textbf{Stazione Meteorologica Open Source}}}
 		\ecvitem{2022}{\textsc{American Meteorological Society}, Award of Outstanding Achievement, for excellence in atmospheric or related sciences}
 		\spacer
 		\ecvitem{}{\textsc{\textbf{Partecipazioni}}}
 		\ecvitem{2018}{Partecipazione a ``I Giovani e Le Scienze 2018'', a Milano, con il progetto  \textbf{MordApp}}
 		\ecvitem{2022}{Partecipazione a ``I Giovani e Le Scienze 2022'', a Milano, con il progetto \textbf{Stazione Meteorologica Open Source}}
 		\pdfbookmark{Capacità e competenze personali}{Capacità e competenze personali}
 		\section{Capacità e competenze personali}
 		\ecvmothertongue[5pt]{Italiano}
 		\ecvitem{\large Altre Lingue}{}
 		\ecvlanguageheader{(*)}
 		\ecvlanguage{Inglese}{\ecvCTwo}{\ecvCTwo}{\ecvCTwo}{\ecvCTwo}{\ecvCTwo}
 		\ecvlanguagefooter[10pt]{(*)}
 		\mycomment{
 			\ecvitem[10pt]{\large Social skills and competences}{Replace this text by a description of these competences and indicate where they were acquired (remove if not relevant).}
 			\ecvitem[10pt]{\large Organisational skills and ompetences}{Replace this text by a description of these competences and indicate where they were acquired (remove if not relevant).}
 			\ecvitem[10pt]{\large Technical skills and competences}{Replace this text by a description of these competences and indicate where they were acquired (remove if not relevant).}
 			\ecvitem[10pt]{\large Computer skills and competences}{Replace this text by a description of these competences and indicate where they were acquired (remove if not relevant).}
 			\ecvitem[10pt]{\large Artistic skills and competences}{Replace this text by a description of these competences and indicate where they were acquired (remove if not relevant).}
 			\ecvitem[10pt]{\large Other skills and competences}{Replace this text by a description of these competences and indicate where they were acquired (remove if not relevant).}
 			\ecvitem{\large Driving licence(s)}{State here whether you hold a driving licence and if so for which categories of vehicle. (Remove if not relevant).}
 			\pdfbookmark{Additional information}{Additional information}
 			\section{Additional information}
 			\ecvitem[10pt]{}{Include here any other information that may be relevant, for example contact persons, references, etc. (Remove heading if not relevant).}
 			\ecvitem{}{\textbf{Personal interests}}
 			\ecvitem{}{\ldots}
 			\pdfbookmark{Annexes}{Annexes}
 			\section{Annexes}
 			\ecvitem{}{List any item attached to the CV}
 		}
 	\end{europecv}
 	\vspace{5.0cm}
 	%\hfill\includegraphics[scale=0.05]{figure/sign.png}
 	\vspace{-2.5cm}
 	\SignatureAndDate{Nome Cognome}
 \end{document} 
--- a/docs/logoLiceo.png
+++ b/docs/logoLiceo.png
--- a/docs/logoUnito.png
+++ b/docs/logoUnito.png
--- a/docs/portrait.jpg
+++ b/docs/portrait.jpg
--- a/docs/wlp.png
+++ b/docs/wlp.png
--- a/emails/MattiaMascarelloOutlook.asc
+++ b/emails/MattiaMascarelloOutlook.asc
@ -0,0 +1,52 @@
 -----BEGIN PGP PUBLIC KEY BLOCK-----
 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
 0057Iqd8HXfC1uvuGmAVpfs=
 =g0gZ
 -----END PGP PUBLIC KEY BLOCK-----
--- a/emails/MattiaMascarelloUniTo.asc
+++ b/emails/MattiaMascarelloUniTo.asc
@ -0,0 +1,41 @@
 -----BEGIN PGP PUBLIC KEY BLOCK-----
 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
 =xMq+
 -----END PGP PUBLIC KEY BLOCK-----
--- a/emails/personal.js
+++ b/emails/personal.js
--- a/emails/unito.js
+++ b/emails/unito.js
--- a/fav/android-chrome-192x192.png
+++ b/fav/android-chrome-192x192.png
--- a/fav/android-chrome-512x512.png
+++ b/fav/android-chrome-512x512.png
--- a/fav/apple-touch-icon.png
+++ b/fav/apple-touch-icon.png
--- a/fav/favicon-16x16.png
+++ b/fav/favicon-16x16.png
--- a/fav/favicon-32x32.png
+++ b/fav/favicon-32x32.png
--- a/fav/favicon.ico
+++ b/fav/favicon.ico
--- a/fav/site.webmanifest
+++ b/fav/site.webmanifest
@ -0,0 +1,19 @@
 {
    "name": "Mattia Mascarello",
    "short_name": "Mattia Mascarello",
    "icons": [
        {
            "src": "/fav/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/fav/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone"
 }
--- a/fonts/LM-bold-italic.ttf
+++ b/fonts/LM-bold-italic.ttf
--- a/fonts/LM-bold-italic.woff
+++ b/fonts/LM-bold-italic.woff
--- a/fonts/LM-bold-italic.woff2
+++ b/fonts/LM-bold-italic.woff2
--- a/fonts/LM-bold.ttf
+++ b/fonts/LM-bold.ttf
--- a/fonts/LM-bold.woff
+++ b/fonts/LM-bold.woff
--- a/fonts/LM-bold.woff2
+++ b/fonts/LM-bold.woff2
--- a/fonts/LM-italic.ttf
+++ b/fonts/LM-italic.ttf
--- a/fonts/LM-italic.woff
+++ b/fonts/LM-italic.woff
--- a/fonts/LM-italic.woff2
+++ b/fonts/LM-italic.woff2
--- a/fonts/LM-regular.ttf
+++ b/fonts/LM-regular.ttf
--- a/fonts/LM-regular.woff
+++ b/fonts/LM-regular.woff
--- a/fonts/LM-regular.woff2
+++ b/fonts/LM-regular.woff2
--- a/fonts/Libertinus-bold-italic.woff2
+++ b/fonts/Libertinus-bold-italic.woff2
--- a/fonts/Libertinus-bold.woff2
+++ b/fonts/Libertinus-bold.woff2
--- a/fonts/Libertinus-italic.woff2
+++ b/fonts/Libertinus-italic.woff2
--- a/fonts/Libertinus-regular.woff2
+++ b/fonts/Libertinus-regular.woff2
--- a/fonts/Libertinus-semibold-italic.woff2
+++ b/fonts/Libertinus-semibold-italic.woff2
--- a/fonts/Libertinus-semibold.woff2
+++ b/fonts/Libertinus-semibold.woff2
--- a/icons/loudspeaker.svg
+++ b/icons/loudspeaker.svg
@ -0,0 +1,7 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg xmlns="http://www.w3.org/2000/svg" version="1.0"  width="500" height="500" viewBox="0 0 75 75">
 <path d="M39.389,13.769 L22.235,28.606 L6,28.606 L6,47.699 L21.989,47.699 L39.389,62.75 L39.389,13.769z"
 style="stroke:#111;stroke-width:5;stroke-linejoin:round;fill:#111;"
 />
 <path d="M48,27.6a19.5,19.5 0 0 1 0,21.4M55.1,20.5a30,30 0 0 1 0,35.6M61.6,14a38.8,38.8 0 0 1 0,48.6" style="fill:none;stroke:#111;stroke-width:5;stroke-linecap:round"/>
 </svg>
--- a/icons/play.svg
+++ b/icons/play.svg
@ -0,0 +1,14 @@
 <?xml version="1.0" encoding="iso-8859-1"?>
 <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
 <svg fill="#000000" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
 	 viewBox="0 0 17.804 17.804" xml:space="preserve">
 <g>
 	<g id="c98_play">
 		<path d="M2.067,0.043C2.21-0.028,2.372-0.008,2.493,0.085l13.312,8.503c0.094,0.078,0.154,0.191,0.154,0.313
 			c0,0.12-0.061,0.237-0.154,0.314L2.492,17.717c-0.07,0.057-0.162,0.087-0.25,0.087l-0.176-0.04
 			c-0.136-0.065-0.222-0.207-0.222-0.361V0.402C1.844,0.25,1.93,0.107,2.067,0.043z"/>
 	</g>
 	<g id="Capa_1_78_">
 	</g>
 </g>
 </svg>
--- a/icons/stop.svg
+++ b/icons/stop.svg
@ -0,0 +1,9 @@
 <?xml version="1.0" encoding="iso-8859-1"?>
 <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
 <svg height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
 	 viewBox="0 0 10.334 10.334" xml:space="preserve">
 <g>
 	<path style="fill:#030104;" d="M10.333,9.816c0,0.285-0.231,0.518-0.517,0.518H0.517C0.233,10.334,0,10.102,0,9.816V0.517
 		C0,0.232,0.231,0,0.517,0h9.299c0.285,0,0.517,0.231,0.517,0.517V9.816z"/>
 </g>
 </svg>
--- a/images/Gadsden_flag.svg
+++ b/images/Gadsden_flag.svg
--- a/images/Social_Liberalism_Flag.jpg
+++ b/images/Social_Liberalism_Flag.jpg
--- a/images/amsterdam.jpg
+++ b/images/amsterdam.jpg
--- a/images/christmas.xcf
+++ b/images/christmas.xcf
--- a/images/enlarged.jpg
+++ b/images/enlarged.jpg
--- a/images/ep.jpg
+++ b/images/ep.jpg
--- a/images/euportrait.png
+++ b/images/euportrait.png
--- a/images/euportrait.xcf
+++ b/images/euportrait.xcf
--- a/images/gs.jpg
+++ b/images/gs.jpg
--- a/images/itportrait.png
+++ b/images/itportrait.png
--- a/images/itportrait.xcf
+++ b/images/itportrait.xcf
--- a/images/natoportrait.png
+++ b/images/natoportrait.png
--- a/images/natoportrait.xcf
+++ b/images/natoportrait.xcf
--- a/images/paris.jpg
+++ b/images/paris.jpg
--- a/images/portrait.jpg
+++ b/images/portrait.jpg
--- a/images/staring.webp
+++ b/images/staring.webp
--- a/images/turin.jpg
+++ b/images/turin.jpg
--- a/images/unito_self.jpg
+++ b/images/unito_self.jpg
--- a/images/xmasportrait.png
+++ b/images/xmasportrait.png
--- a/index.html
+++ b/index.html
@ -0,0 +1,281 @@
 <!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8">
   <link rel="stylesheet" href="latex.css">
   <link rel="stylesheet" href="style.css">
   <title>Mattia Mascarello</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta name="description" content="Mattia Mascarello's personal website" />
   <meta name="keywords" content="Mattia Mascarello, UniTo" />
   <meta property="og:title" content="Mattia Mascarello" />
   <meta property="og:url" content="https://matmasit.github.io/images" />
   <meta property="og:description" content="Mattia Mascarello's personal website" />
   <meta property="og:type" content="website" />
   <meta property="og:image" content="https://matmasit.github.io/images/portrait.jpg" />
   <script type="application/ld+json">
      {
        "@context": "https://schema.org/",
        "@type": "Person",
        "name": "Mattia Mascarello",
        "url": "https://matmasit.github.io",
        "image": "https://matmasit.github.io/images/portrait.jpg",
        "sameAs": "https://github.com/MatMasIt/",
        "jobTitle": "Student",
        "worksFor": {
          "@type": "Organization",
          "name": "Computer Science Department - University of turin"
        }  
      }
      </script>
   <link rel="apple-touch-icon" sizes="180x180" href="fav/apple-touch-icon.png">
   <link rel="icon" type="image/png" sizes="32x32" href="fav/favicon-32x32.png">
   <link rel="icon" type="image/png" sizes="16x16" href="fav/favicon-16x16.png">
   <link rel="manifest" href="fav/site.webmanifest">
 </head>
 <body>
   <header>
      <h1>
         <span id="mattia" class="container"><span class="typed-out">Mattia</span></span> <span
            id="mascarello">Mascarello</span>
         <br />
         <div id="pronouceBox">
            <i style="font-size: 20px;">[matːˈia maskarˈɛllo]</i> &nbsp;<a href="javascript:void(0);"
               id="pronounce"><img src="icons/loudspeaker.svg" alt="Listen to my name" /></a>
         </div>
      </h1>
   </header>
   <div class="abstract">
      <p>
         A human being <em>drifting</em> in spacetime<br />
         Studying <a href="https://www.cs.unito.it/do/home.pl">Computer Science at the University of Turin</a>
         (Italy)<br />
         <code id="living"></code>
      <div class="happyEuDay">
         <br />
         <h2>Happy <a href="https://european-union.europa.eu/principles-countries-history/symbols/europe-day_en">Europe
               Day</a>!</h2>
         <img data-play="eu" style="display: inline" class="playIcon" alt="Start Playing"
            aria-roledescription="Play/Stop button" src="icons/play.svg" width="20" />
         &nbsp;&nbsp;<a href="https://en.wikipedia.org/wiki/Anthem_of_Europe"><i>Anthem of Europe</i></a>
      </div>
      <div class="happyRepublicDay">
         <br /><br />
         <h2>Buona <a href="https://en.wikipedia.org/wiki/Festa_della_Repubblica"><i>Festa della repubblica</i></a>!
         </h2>
         <img data-play="it" style="display: inline" class="playIcon" alt="Start Playing"
            aria-roledescription="Play/Stop button" src="icons/play.svg" width="20" />
         &nbsp;&nbsp;<a href="https://en.wikipedia.org/wiki/Il_Canto_degli_Italiani">Anthem of Italy <i>(Il Canto degli
               Italiani)</i></a>
      </div>
      <div class="happyXMAS">
         <br />
         <h2>Merry Christmas!</h2>
      </div>
      <div class="happyNATODay">
         <br />
         <h2>Happy <a href="https://en.wikipedia.org/wiki/NATO_Day">NATO Day</a>!</h2>
         <img data-play="nato" style="display: inline" class="playIcon" alt="Start Playing"
            aria-roledescription="Play/Stop button" src="icons/play.svg" width="20" />
         &nbsp;&nbsp;<a href="https://en.wikipedia.org/wiki/The_NATO_Hymn"><i>The NATO Hymn</i></a>
      </div>
   </div>
   <figure>
      <a href="images/portrait.jpg" id="portraitLink"><img src="images/portrait.jpg" id="portrait" loading="lazy"
            alt="I Giovani e Le Scienze 2022" style="margin:auto" /></a>
      <figcaption style="text-align: center;">
         Portrait <br /><a href="alternatePortraitVersions/">Alternate versions</a>
      </figcaption>
   </figure>
   <blockquote>
      <b>This is only a foretaste of what is to come, and only the shadow of what is going to be.</b><br />We have to
      have some experience with the machine before we really know its capabilities. It may take years before we settle
      down to the new possibilities, but I do not see why it should not enter any one of the fields normally covered by
      the human intellect, and eventually compete on equal terms.
      <br /><br /><cite>&nbsp;&nbsp;<b>Alan Mathison Turing</b>, The Mechanical Brain. Answer Found to 300 Year Old
         Problem' The Times newspaper, 11 June 1949 page 4 column 5.</cite>
   </blockquote>
   <br />
   <figure>
      <div class="row">
         <div class="column">
            <a href="images/turin.jpg" target="_blank"><img src="images/turin.jpg" loading="lazy"
                  alt="Me in Turin" /></a>
         </div>
         <div class="column">
            <a href="images/amsterdam.jpg" target="_blank"> <img src="images/amsterdam.jpg" loading="lazy"
                  alt="Amsterdam" /></a>
         </div>
         <div class="column">
            <a href="images/paris.jpg" target="_blank"> <img src="images/paris.jpg" loading="lazy" alt="Paris" /></a>
         </div>
         <div class="column">
            <a href="images/ep.jpg" target="_blank"> <img src="images/ep.jpg" loading="lazy"
                  alt="The European Parliament in Bruxelles" /></a>
         </div>
         <div class="column">
            <a href="images/gs.jpg" target="_blank"> <img src="images/gs.jpg" loading="lazy"
                  alt="Ne at I Giovani e Le Scienze" /></a>
         </div>
         <div class="column">
            <a href="images/unito_self.jpg" target="_blank"> <img src="images/unito_self.jpg" loading="lazy"
                  alt="Me at a restaurant near the University" /></a>
         </div>
         <div class="column">
            <a href="images/staring.webp" target="_blank"> <img src="images/staring.webp" loading="lazy"
                  alt="Me staring at the void" /></a>
         </div>
         <div class="column">
            <a href="images/enlarged.jpg" target="_blank"> <img src="images/enlarged.jpg" loading="lazy"
                  alt="Enlarged portrait" /></a>
         </div>
      </div>
      <figcaption>
         <div id="clockwise"><b>From Top to Bottom in lines, </b></div>
         <div id="topbottom"><b>From Top to Bottom,</b></div>
         <div id="leftright"><b>From Left to Right,</b></div>
         1) <a href="ttps://en.wikipedia.org/wiki/Turin" target="_blank">Turin</a>, 2) <a
            href="https://en.wikipedia.org/wiki/Amsterdam" target="_blank">Amsterdam</a>, 3) <a
            href="https://en.wikipedia.org/wiki/Paris" target="_blank">Paris</a>, 4) <a
            href="https://en.wikipedia.org/wiki/Espace_L%C3%A9opold" target="_blank">The European Parliament in
            Bruxelles</a>, 5) Me at <a href="https://fast.mi.it/i-giovani-e-le-scienze/" target="_blank">I Giovani e le
            Scienze 2022</a>, 6) Me at a restaurant near the University,
         7) Me staring at the void at <a href="https://fast.mi.it/i-giovani-e-le-scienze/" target="_blank">I Giovani e
            le
            Scienze 2022</a>, 8) Enlarged portrait
      </figcaption>
   </figure>
   <div class="abstract">
      <h2 class="abstractTitle">Abstract</h2>
      <p>
         I am a human, i like coding, playing badminton, poetry, debating (expecially about politics) and chatting in
         general.
         This is my website, in a very minimal style, just how I like it;
         I code in <code>PHP, Python, Java, JavaScript, C, HTML, CSS</code>
      </p><br />
      <div>
         <b>My <i>Curriculum vitæ (PDF)</i></b> <br />
         <a href="docs/italian.pdf">Italiano</a> &nbsp;&nbsp;&nbsp;&nbsp;
         <a href="docs/english.pdf">English</a>
      </div>
   </div>
   <table>
      <caption>Contacts</caption>
      <tbody>
         <tr>
            <td>Email</td>
            <td>
               <script src="emails/unito.js"></script><br />
               <b>OpenPGP Key</b> <a href="emails/MattiaMascarelloUniTo.asc">here</a>
               <br /><br />
               <script src="emails/personal.js"></script><br />
               <b>OpenPGP Key</b> <a href="emails/MattiaMascarelloOutlook.asc">here</a>
            </td>
         </tr>
         <tr>
            <td>Telegram</td>
            <td>Via <a href="https://t.me/be94b16fbot">@be94b16fbot</a></td>
         </tr>
         <tr>
            <td>XMPP</td>
            <td><a href="xmpp:mattia.mascarello@jabber.hot-chilli.eu">mattia.mascarello@jabber.hot-chilli.eu</a></td>
         </tr>
      </tbody>
   </table>
   <br />
   <table>
      <caption>Web Resources</caption>
      <tbody>
         <tr>
            <td>Github</td>
            <td><a href="https://github.com/MatMasIt">MatMasIt</a></td>
         </tr>
         <tr>
            <td>"Stazione Meteorologica Permanente del Liceo Scientifico Statale Leonardo Cocito"</td>
            <td><a href="https://liceococito.edu.it/meteo">Home</a></td>
         </tr>
         <tr>
            <td>Open Source Cocito Weather Station</td>
            <td><a href="http://github.com/StazioneMeteoCocito/">Repos</a></td>
         </tr>
      </tbody>
   </table>
   <br />
   <table>
      <caption>Top Listed Projects</caption>
      <tbody>
         <tr>
            <td>BiblioTau <em>(Work in Progress)</em></td>
            <td>Library Management System</td>
         </tr>
         <tr>
            <td><a href="https://github.com/MatMasIt/Alembic">Alembic</a></td>
            <td>My Poetry in English</td>
         </tr>
         <tr>
            <td><a href="https://github.com/MatMasIt/epg-it">epg-it</a></td>
            <td>Italian tv electronic program guide archival repo</td>
         </tr>
         <tr>
            <td><a href="https://github.com/MatMasIt/notesArchive">notesArchive</a></td>
            <td>My school notes organized</td>
         </tr>
         <tr>
            <td><a href="https://github.com/MatMasIt/fantaProf">fantaProf</a></td>
            <td>The classic italian professor blaming game</td>
         </tr>
         <tr>
            <td><a href="https://github.com/MatMasIt/dante-lang">dante-lang</a></td>
            <td>The Dante Programming Language</td>
         </tr>
         <tr>
            <td><a href="https://github.com/MatMasIt/costLatex">costLatex</a></td>
            <td>Italian Constitution in <span class="latex">L<span>a</span>T<span>e</span>X</span></td>
         </tr>
         <tr>
            <td><a href="https://github.com/MatMasIt/costGit">costGit</a></td>
            <td>Amendments to the italian constitution as git commits</td>
         </tr>
         <tr>
            <td><a href="https://github.com/MatMasIt/SocialCreditScoreGame">SocialCreditScoreGame</a></td>
            <td>A videogame to eloquently praise the most perfect chinese social credit system</td>
         </tr>
         <tr>
            <td><a href="https://github.com/MatMasIt/mordApp">mordApp</a></td>
            <td>Mordecai Food Ordering System</td>
         </tr>
      </tbody>
   </table>
   <article>
      <h3>My <i>poem of the day</i>, n. <span id="poemn"></span>, from <a target="_blank"
            href="https://github.com/MatMasIt/Alembic"><i>Alembic</i></a></h3>
      <h2 id="poemTitle"></h2>
      <p id="poemText"></p>
   </article>
   <br />
   <img src="images/Gadsden_flag.svg" alt="Liberty above all" style="width:20vw; margin:auto">
   <br />
   <div class="footnotes">
      <p>
         &copy; 2022-2023 Mattia Mascarello
      </p>
      <p>
         Versions: <a href="#force:eu">Europe Day <span style="display:inline" id="euS">(current)</span></a>, <a
            href="#force:it">Republic Day <span style="display:inline" id="redS">(current)</span></a>, <a
            href="#force:xmas">Christmas<span style="display:inline" id="xmaS">(current)</span></a>, <a
            href="#force:nato">NATO Day<span style="display:inline" id="natoS">(current)</span></a>, <a
            href="#force:jan">January <span style="display:inline" id="janS">(current)</span></a>, <a
            href="#force:no">Regular <span style="display:inline" id="regularS">(current)</span></a>.
      </p>
   </div>
   <script src="poemOfTheDay.js"></script>
   <script src="script.js"></script>
 </body>
 </html>
--- a/latex.css
+++ b/latex.css
@ -0,0 +1,601 @@
 /*!
 * LaTeX.css (https://latex.now.sh/)
 *
 * Source: https://github.com/vincentdoerig/latex-css
 * Licensed under MIT (https://github.com/vincentdoerig/latex-css/blob/master/LICENSE)
 */
@font-face {
    font-family: 'Latin Modern';
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src: url('./fonts/LM-regular.woff2') format('woff2'),
        url('./fonts/LM-regular.woff') format('woff'),
        url('./fonts/LM-regular.ttf') format('truetype');
 }
@font-face {
    font-family: 'Latin Modern';
    font-style: italic;
    font-weight: normal;
    font-display: swap;
    src: url('./fonts/LM-italic.woff2') format('woff2'),
        url('./fonts/LM-italic.woff') format('woff'),
        url('./fonts/LM-italic.ttf') format('truetype');
 }
@font-face {
    font-family: 'Latin Modern';
    font-style: normal;
    font-weight: bold;
    font-display: swap;
    src: url('./fonts/LM-bold.woff2') format('woff2'),
        url('./fonts/LM-bold.woff') format('woff'),
        url('./fonts/LM-bold.ttf') format('truetype');
 }
@font-face {
    font-family: 'Latin Modern';
    font-style: italic;
    font-weight: bold;
    font-display: swap;
    src: url('./fonts/LM-bold-italic.woff2') format('woff2'),
        url('./fonts/LM-bold-italic.woff') format('woff'),
        url('./fonts/LM-bold-italic.ttf') format('truetype');
 }
@font-face {
    font-family: 'Libertinus';
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src: url('./fonts/Libertinus-regular.woff2') format('woff2');
 }
@font-face {
    font-family: 'Libertinus';
    font-style: italic;
    font-weight: normal;
    font-display: swap;
    src: url('./fonts/Libertinus-italic.woff2') format('woff2');
 }
@font-face {
    font-family: 'Libertinus';
    font-style: normal;
    font-weight: bold;
    font-display: swap;
    src: url('./fonts/Libertinus-bold.woff2') format('woff2');
 }
@font-face {
    font-family: 'Libertinus';
    font-style: italic;
    font-weight: bold;
    font-display: swap;
    src: url('./fonts/Libertinus-bold-italic.woff2') format('woff2');
 }
@font-face {
    font-family: 'Libertinus';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('./fonts/Libertinus-semibold.woff2') format('woff2');
 }
@font-face {
    font-family: 'Libertinus';
    font-style: italic;
    font-weight: 600;
    font-display: swap;
    src: url('./fonts/Libertinus-semibold-italic.woff2') format('woff2');
 }
 /* Box sizing rules */
 *,
 *::before,
 *::after {
    box-sizing: border-box;
 }
 /* Remove default margin */
 body,
 h1,
 h2,
 h3,
 h4,
 p,
 ul[class],
 ol[class],
 li,
 figure,
 figcaption,
 dl,
 dd {
    margin: 0;
 }
 /* Make default font-size 1rem and add smooth scrolling to anchors */
 html {
    font-size: 1rem;
 }
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
 }
 body.libertinus {
    font-family: 'Libertinus', Georgia, Cambria, 'Times New Roman', Times, serif;
 }
 body {
    font-family: 'Latin Modern', Georgia, Cambria, 'Times New Roman', Times, serif;
    line-height: 1.8;
    max-width: 80ch;
    min-height: 100vh;
    overflow-x: hidden;
    margin: 0 auto;
    padding: 2rem 1.25rem;
    counter-reset: theorem;
    counter-reset: definition;
    counter-reset: sidenote-counter;
    color: hsl(0, 5%, 10%);
    background-color: hsl(210, 20%, 98%);
    text-rendering: optimizeLegibility;
 }
 /* Justify and hyphenate all paragraphs */
 p {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    margin-top: 1rem;
 }
 /* A elements that don't have a class get default styles */
 a:not([class]) {
    text-decoration-skip-ink: auto;
 }
 /* Make links red */
 a,
 a:visited {
    color: #a00;
 }
 a:focus {
    outline-offset: 2px;
    outline: 2px solid hsl(220, 90%, 52%);
 }
 /* Make images easier to work with */
 img {
    max-width: 100%;
    height: auto;
    display: block;
 }
 /* Inherit fonts for inputs and buttons */
 input,
 button,
 textarea,
 select {
    font: inherit;
 }
 /* Prevent textarea from overflowing */
 textarea {
    width: 100%;
 }
 /* Natural flow and rhythm in articles by default */
 article>*+* {
    margin-top: 1em;
 }
 /* Styles for inline code or code snippets */
 code,
 pre,
 kbd {
    font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
        monospace;
    font-size: 85%;
 }
 pre {
    padding: 1rem 1.4rem;
    max-width: 100%;
    overflow: auto;
    border-radius: 4px;
    background: hsl(210, 28%, 93%);
 }
 pre code {
    font-size: 95%;
    position: relative;
 }
 kbd {
    background: hsl(210, 5%, 100%);
    border: 1px solid hsl(210, 5%, 70%);
    border-radius: 2px;
    padding: 2px 4px;
    font-size: 75%;
 }
 /* Better tables */
 table {
    border-collapse: collapse;
    border-spacing: 0;
    width: auto;
    max-width: 100%;
    border-top: 2.27px solid black;
    border-bottom: 2.27px solid black;
    /* display: block; */
    overflow-x: auto;
    /* does not work because element is not block */
    /* white-space: nowrap; */
    counter-increment: caption;
 }
 /* add bottom border on column table headings  */
 table tr>th[scope='col'] {
    border-bottom: 1.36px solid black;
 }
 /* add right border on row table headings  */
 table tr>th[scope='row'] {
    border-right: 1.36px solid black;
 }
 table>tbody>tr:first-child>td,
 table>tbody>tr:first-child>th {
    border-top: 1.36px solid black;
 }
 table>tbody>tr:last-child>td,
 table>tbody>tr:last-child>th {
    border-bottom: 1.36px solid black;
 }
 th,
 td {
    text-align: left;
    padding: 0.5rem;
    line-height: 1.1;
 }
 /* Table caption */
 caption {
    text-align: left;
    font-size: 0.923em;
    /* border-bottom: 2pt solid #000; */
    padding: 0 0.25em 0.25em;
    width: 100%;
    margin-left: 0;
 }
 caption::before {
    content: 'Table ' counter(caption) '. ';
    font-weight: bold;
 }
 /* allow scroll on the x-axis */
 .scroll-wrapper {
    overflow-x: auto;
 }
 /* if a table is wrapped in a scroll wrapper,
    the table cells shouldn't wrap */
 .scroll-wrapper>table td {
    white-space: nowrap;
 }
 /* Center align the title */
 h1:first-child {
    text-align: center;
 }
 /* Nested ordered list for ToC */
 nav ol {
    counter-reset: item;
    padding-left: 2rem;
 }
 nav li {
    display: block;
 }
 nav li:before {
    content: counters(item, '.') ' ';
    counter-increment: item;
    padding-right: 0.85rem;
 }
 /* Center definitions (most useful for display equations) */
 dl dd {
    text-align: center;
 }
 /* Theorem */
 .theorem {
    counter-increment: theorem;
    display: block;
    margin: 12px 0;
    font-style: italic;
 }
 .theorem::before {
    content: 'Theorem ' counter(theorem) '. ';
    font-weight: bold;
    font-style: normal;
 }
 /* Lemma */
 .lemma {
    counter-increment: theorem;
    display: block;
    margin: 12px 0;
    font-style: italic;
 }
 .lemma::before {
    content: 'Lemma ' counter(theorem) '. ';
    font-weight: bold;
    font-style: normal;
 }
 /* Proof */
 .proof {
    display: block;
    margin: 12px 0;
    font-style: normal;
    position: relative;
 }
 .proof::before {
    content: 'Proof. ' attr(title);
    font-style: italic;
 }
 .proof:after {
    content: '◾️';
    position: absolute;
    right: -12px;
    bottom: -2px;
 }
 /* Definition */
 .definition {
    counter-increment: definition;
    display: block;
    margin: 12px 0;
    font-style: normal;
 }
 .definition::before {
    content: 'Definition ' counter(definition) '. ';
    font-weight: bold;
    font-style: normal;
 }
 /* Center align author name, use small caps and add vertical spacing  */
 .author {
    margin: 0.85rem 0;
    font-variant-caps: small-caps;
    text-align: center;
 }
 /* Sidenotes */
 .sidenote {
    font-size: 0.8rem;
    float: right;
    clear: right;
    width: 18vw;
    margin-right: -20vw;
    margin-bottom: 1em;
 }
 .sidenote.left {
    float: left;
    margin-left: -20vw;
    margin-bottom: 1em;
 }
 /* (WIP) add border when a sidenote is clicked on */
 .sidenote:target {
    border: hsl(55, 55%, 70%) 1.5px solid;
    padding: 0 .5rem;
    scroll-margin-block-start: 10rem;
 }
 /* sidenote counter */
 .sidenote-number {
    counter-increment: sidenote-counter;
 }
 .sidenote-number::after,
 .sidenote::before {
    position: relative;
    vertical-align: baseline;
 }
 /* add number in main content */
 .sidenote-number::after {
    content: counter(sidenote-counter);
    font-size: 0.7rem;
    top: -0.5rem;
    left: 0.1rem;
 }
 /* add number in front of the sidenote */
 .sidenote-number~.sidenote::before {
    content: counter(sidenote-counter) ' ';
    font-size: 0.7rem;
    top: -0.5rem;
 }
 label.sidenote-toggle:not(.sidenote-number) {
    display: none;
 }
 /* sidenotes inside blockquotes are indented more */
 blockquote .sidenote {
    margin-right: -24vw;
    width: 18vw;
 }
 label.sidenote-toggle {
    display: inline;
    cursor: pointer;
 }
 input.sidenote-toggle {
    display: none;
 }
@media (max-width: 1050px) {
    label.sidenote-toggle:not(.sidenote-number) {
        display: inline;
    }
    .sidenote {
        display: none;
    }
    .sidenote-toggle:checked+.sidenote {
        display: block;
        margin: 0.5rem 1.25rem 1rem 0.5rem;
        float: left;
        left: 1rem;
        clear: both;
        width: 95%;
    }
    /* tweak indentation of sidenote inside a blockquote */
    blockquote .sidenote {
        margin-right: -25vw;
        width: 16vw;
    }
 }
 /* Make footnote text smaller and left align it (looks bad with long URLs) */
 .footnotes p {
    text-align: left;
    line-height: 1.5;
    font-size: 85%;
    margin-bottom: 0.4rem;
 }
 .footnotes {
    border-top: 1px solid hsl(0, 0%, 39%);
 }
 /* Center title and paragraph */
 .abstract,
 .abstract p {
    text-align: center;
    margin-top: 0;
 }
 .abstract {
    margin: 2.25rem 0;
 }
 .abstract>h2 {
    font-size: 1rem;
    margin-bottom: -0.2rem;
 }
 /* Format the LaTeX symbol correctly (a higher up, e lower) */
 .latex span:nth-child(1) {
    text-transform: uppercase;
    font-size: 0.75em;
    vertical-align: 0.28em;
    margin-left: -0.48em;
    margin-right: -0.15em;
    line-height: 1ex;
 }
 .latex span:nth-child(2) {
    text-transform: uppercase;
    vertical-align: -0.5ex;
    margin-left: -0.1667em;
    margin-right: -0.125em;
    line-height: 1ex;
 }
 /* Heading typography */
 h1 {
    font-size: 2.5rem;
    line-height: 3.25rem;
    margin-bottom: 1.625rem;
 }
 h2 {
    font-size: 1.7rem;
    line-height: 2rem;
    margin-top: 3rem;
 }
 h3 {
    font-size: 1.4rem;
    margin-top: 2.5rem;
 }
 h4 {
    font-size: 1.2rem;
    margin-top: 2rem;
 }
 h5 {
    font-size: 1rem;
    margin-top: 1.8rem;
 }
 h6 {
    font-size: 1rem;
    font-style: italic;
    font-weight: normal;
    margin-top: 2.5rem;
 }
 h3,
 h4,
 h5,
 h6 {
    line-height: 1.625rem;
 }
 h1+h2 {
    margin-top: 1.625rem;
 }
 h2+h3,
 h3+h4,
 h4+h5 {
    margin-top: 0.8rem;
 }
 h5+h6 {
    margin-top: -0.8rem;
 }
 h2,
 h3,
 h4,
 h5,
 h6 {
    margin-bottom: 0.8rem;
 }
--- a/poemOfTheDay.js
+++ b/poemOfTheDay.js
@ -0,0 +1,41 @@
 function getDayOfTheYear() {
    var now = new Date();
    var start = new Date(now.getFullYear(), 0, 0);
    var diff = now - start;
    var oneDay = 1000 * 60 * 60 * 24;
    return Math.floor(diff / oneDay);
 }
 function replaceAll(string, search, replace) {
    return string.split(search).join(replace);
 }
 function getPoemOfTheDayIndex(npoems) {
    return getDayOfTheYear() % npoems;
 }
 function cleanText(text) {
    let te = "";
    let i = 0;
    let t = text.split("\\begin{Verse}").forEach(element => { // there may be multiple pages of verses
        if (i == 0) { i++; return; } // skip title
        te += element.split("\\end")[0];
    });
    te = replaceAll(te, "\\\\", "<br />");
    te = replaceAll(te, "\\", "<br />");
    return te;
 }
 function setPoemOfTheDay() {
    fetch('https://raw.githubusercontent.com/MatMasIt/Alembic/main/Alembic.tex')
        .then((response) => response.text())
        .then((data) => {
            let parts = data.split("\\chapter{");
            let n = getPoemOfTheDayIndex(parts.length - 1); // ignore header, data[0]
            let part = parts[n + 1];
            let title = part.split("}")[0];
            let text = cleanText(part);
            document.getElementById("poemn").innerText = n + 1;
            document.getElementById("poemTitle").innerText = title;
            document.getElementById("poemText").innerHTML = text;
        });
 }
--- a/script.js
+++ b/script.js
@ -0,0 +1,323 @@
 function pad(n, width, z) {
    z = z || '0';
    n = n + '';
    return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
 }
 function toIsoString(date) {
    var tzo = -date.getTimezoneOffset(),
        dif = tzo >= 0 ? '+' : '-',
        pad = function (num) {
            return (num < 10 ? '0' : '') + num;
        };
    return date.getFullYear() +
        '-' + pad(date.getMonth() + 1) +
        '-' + pad(date.getDate()) +
        'T' + pad(date.getHours()) +
        ':' + pad(date.getMinutes()) +
        ':' + pad(date.getSeconds()) +
        dif + pad(Math.floor(Math.abs(tzo) / 60)) +
        ':' + pad(Math.abs(tzo) % 60);
 }
 var living = document.getElementById("living");
 function beat() {
    var dt = new Date();
    var birth = new Date('2002-11-19 22:15:00'); // or if you have milliseconds, use that instead
    var z = new Date(dt - birth);
    var epoch = new Date('1970-01-01 00:00:00');
    var diff_years = z.getYear() - epoch.getYear();
    var diff_month = z.getMonth() - epoch.getMonth();
    var diff_days = z.getDate() - epoch.getDate();
    var diff_hours = z.getHours() - epoch.getHours();
    var diff_minutes = z.getMinutes() - epoch.getMinutes();
    var diff_seconds = z.getSeconds() - epoch.getSeconds();
    living.innerHTML = "2002-11-19T22:15:00+01:00 - " + toIsoString(dt) + " <br /> " + diff_years + " y, " + diff_month + " m, " + diff_days + " d, " + pad(diff_hours, 2) + ":" + pad(diff_minutes, 2) + ":" + pad(diff_seconds, 2);
 }
 beat();
 function specialDates() {
    let portrait = document.getElementById("portrait");
    let portraitLink = document.getElementById("portraitLink");
    let body = document.body;
    let date = new Date();
    // reset all    
    body.classList.remove("bodyEuDay");
    body.classList.remove("bodyRepublicDay");
    body.classList.remove("bodyXMAS");
    body.classList.remove("bodyNATODay");
    body.classList.remove("greyFilter");
    document.querySelectorAll(".happyEuDay").forEach(function (el) {
        el.style.display = "none";
    });
    document.querySelectorAll(".happyRepublicDay").forEach(function (el) {
        el.style.display = "none";
    });
    document.querySelectorAll(".happyNATODay").forEach(function (el) {
        el.style.display = "none";
    });
    document.querySelectorAll(".happyXMAS").forEach(function (el) {
        el.style.display = "none";
    });
    portrait.src = "images/portrait.jpg";
    portraitLink.href = "images/portrait.jpg";
    /*
     getDate is day of month, usual bad library design
     also date.getMonth starts from 0, one of the dumbest zero-indexings
     I have ever seen
     These two things together took me 1 hour to figure out
     */
    document.getElementById("euS").style.display = "none";
    document.getElementById("redS").style.display = "none";
    document.getElementById("xmaS").style.display = "none";
    document.getElementById("natoS").style.display = "none";
    document.getElementById("janS").style.display = "none";
    document.getElementById("regularS").style.display = "none";
    let force = null;
    if (location.hash.indexOf("force:") != -1) {
        let exp = location.hash.split(":");
        if (exp.length == 2) force = location.hash.split(":")[1];
        if (force == "no") force = null;
    }
    if ((force == null && date.getMonth() + 1 == 5 && date.getDate() == 9) || force == "eu") {
        document.getElementById("euS").style.display = "inline";
        body.classList.add("bodyEuDay");
        portrait.src = "images/euportrait.png";
        portraitLink.href = "images/euportrait.png";
        document.querySelectorAll(".happyEuDay").forEach(function (el) {
            el.style.display = "block";
        });
        baseColorClass = "goldColor";
        selectedColorClass = "darkGoldColor";
    }
    else if ((force == null && date.getMonth() + 1 == 6 && date.getDate() == 2) || force == "it") {
        document.getElementById("redS").style.display = "inline";
        body.classList.add("bodyRepublicDay");
        portrait.src = "images/itportrait.png";
        portraitLink.href = "images/itportrait.png";
        document.querySelectorAll(".happyRepublicDay").forEach(function (el) {
            el.style.display = "block";
        });
        baseColorClass = "baseColor";
        selectedColorClass = "greenColor";
    }
    else if ((force == null && date.getMonth() + 1 == 4 && date.getDate() == 4) || force == "nato") {
        document.getElementById("natoS").style.display = "inline";
        body.classList.add("bodyNATODay");
        portrait.src = "images/natoportrait.png";
        portraitLink.href = "images/natoportrait.png";
        document.querySelectorAll(".happyNATODay").forEach(function (el) {
            el.style.display = "block";
        });
        baseColorClass = "baseColor";
        selectedColorClass = "blueColor";
    }
    else if ((force == null && date.getMonth() + 1 == 12 && date.getDate() > 18 && date.getDate() < 27) || force == "xmas") {
        document.getElementById("xmaS").style.display = "inline";
        body.classList.add("bodyXMAS");
        portrait.src = "images/xmasportrait.png";
        portraitLink.href = "images/xmasportrait.png";
        document.querySelectorAll(".happyXMAS").forEach(function (el) {
            el.style.display = "block";
        });
        baseColorClass = "baseColor";
        selectedColorClass = "redColor";
    }
    else if ((force == null && date.getMonth() + 1 == 1) || force == "jan") { // grey january
        document.getElementById("janS").style.display = "inline";
        body.classList.add("greyFilter");
    }
    else {
        document.getElementById("regularS").style.display = "inline";
        baseColorClass = "baseColor";
        selectedColorClass = "redColor";
    }
    playIcons.forEach(function (el) {
        if (!isPlaying(musicPlayer) || playingItem != el.attributes["data-play"].textContent) {
            el.src = playIcon;
            setResting(el);
        }
        else{
            el.src = stopIcon;
            setSelected(el);
        }
    });
    if (playing) {setSelected(pronounceImage); }
    else {setResting(pronounceImage); setResting(mattiaText); setResting(mascarelloText); }
 }
 var mattiaText = document.getElementById("mattia");
 var mascarelloText = document.getElementById("mascarello");
 let mattia = new Audio("audio/mattia.ogg");
 let mascarello = new Audio("audio/mascarello.ogg");
 let pronounceLink = document.getElementById("pronounce");
 let pronounceImage = document.querySelector("#pronounce>img");
 let playing = false;
 try {
    // disable media controls here
    navigator.mediaSession.setActionHandler('play', function () { /* Code excerpted. */ });
    navigator.mediaSession.setActionHandler('pause', function () { /* Code excerpted. */ });
    navigator.mediaSession.setActionHandler('seekbackward', function () { /* Code excerpted. */ });
    navigator.mediaSession.setActionHandler('seekforward', function () { /* Code excerpted. */ });
    navigator.mediaSession.setActionHandler('previoustrack', function () { /* Code excerpted. */ });
    navigator.mediaSession.setActionHandler('nexttrack', function () { /* Code excerpted. */ });
 } catch (e) { }
 pronounceImage.addEventListener("mouseenter", function () {
    if (playing || isPlaying(musicPlayer)) return;
    setSelected(pronounceImage);
 });
 pronounceImage.addEventListener("mouseleave", function () {
    if (playing || isPlaying(musicPlayer)) return;
    setResting(pronounceImage);
 });
 mascarello.onended = function () {
    playing = false;
    setResting(pronounceImage);
    setTimeout(function () {
        setResting(mascarelloText)
    }, 500);
 };
 mattia.onended = function () {
    setTimeout(function () {
        setSelected(mascarelloText)
        setResting(mattiaText);
        mascarello.play();
    }, 1000);
 };
 pronounceLink.addEventListener("click", function () {
    if (playing || isPlaying(musicPlayer)) return;
    setSelected(pronounceImage);
    mattia.currentTime = 0;
    mascarello.currentTime = 0;
    playing = true;
    setSelected(mattiaText);
    mattia.play();
 });
 var musicPlayer = new Audio();
 var playingItem = "";
 let audioMap = {
    nato: "audio/nato.mp3",
    eu: "audio/eu.ogg",
    it: "audio/ita.mp3"
 };
 var playIcon = "icons/play.svg";
 var stopIcon = "icons/stop.svg";
 var baseColorClass = "baseColor";
 var selectedColorClass = "redColor";
 function clearColor(target) {
    target.classList.forEach(function (el) {
        if (el.endsWith("Color")) {
            target.classList.remove(el);
        }
    });
 }
 function setSelected(target) {
    clearColor(target);
    target.classList.add(selectedColorClass);
 }
 function setResting(target) {
    clearColor(target);
    target.classList.add(baseColorClass);
 }
 var playIcons = [];
 document.querySelectorAll(".playIcon").forEach(function (el) {
    el.src = playIcon;
    playIcons.push(el);
    el.addEventListener("mouseenter", function (e) {
        if (isPlaying(musicPlayer) && playingItem == e.target.attributes["data-play"].textContent) {
            e.target.src = stopIcon;
        }
        else {
            e.target.src = playIcon;
        }
        setSelected(e.target);
    });
    el.addEventListener("mouseleave", function (e) {
        if (isPlaying(musicPlayer) && playingItem == e.target.attributes["data-play"].textContent) {
            e.target.src = stopIcon;
        }
        else {
            e.target.src = playIcon;
        }
        setResting(e.target);
    });
    el.parentElement.addEventListener("click", function (e) {
        if (isPlaying(musicPlayer) && playingItem == e.target.attributes["data-play"].textContent) {
            // stop 
            musicPlayer.pause();
            e.target.src = playIcon;
            e.target.alt = "Start Playing";
            musicPlayer.playing = false;
            musicPlayer.currentTime = 0;
        }
        else {
            // set all the other icons to play when we start this one
            playIcons.forEach(function (e) {
                e.src = playIcon;
                e.alt = "Start Playing";
            });
            let tag = e.target.attributes["data-play"].textContent;
            playingItem = tag;
            musicPlayer.src = audioMap[tag];
            e.target.src = stopIcon;
            e.target.alt = "Stop Playing";
            musicPlayer.currentTime = 0;
            musicPlayer.play();
        }
    });
 });
 musicPlayer.onended = function () {
    playIcons.forEach(function (e) {
        e.src = playIcon;
        e.alt = "Start Playing";
    });
 };
 function isPlaying(myAudio) {
    return !myAudio.paused && myAudio.currentTime > 0 && !myAudio.ended;
 }
 specialDates();
 setPoemOfTheDay();
 setInterval(function () {
    beat();
 }, 1000);
 setInterval(function () {
    specialDates();
    setPoemOfTheDay();
 }, 5 * 60 * 1000);
 addEventListener("hashchange", (event) => {
    specialDates();
 });
--- a/style.css
+++ b/style.css
@ -0,0 +1,193 @@
 .row {
    display: -ms-flexbox;
    /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap;
    /* IE10 */
    flex-wrap: wrap;
    padding: 0 4px;
 }
 /* Create four equal columns that sits next to each other */
 .column {
    -ms-flex: 25%;
    /* IE10 */
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
 }
 .column img {
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;
 }
 #clockwise {
    display: none;
 }
 #topbottom {
    display: none;
 }
 #leftright {
    display: inline;
 }
 /* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
    .column {
        -ms-flex: 50%;
        flex: 50%;
        max-width: 50%;
    }
    #clockwise {
        display: inline;
    }
    #topbottom {
        display: none;
    }
    #leftright {
        display: none;
    }
 }
 /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .column {
        -ms-flex: 100%;
        flex: 100%;
        max-width: 100%;
    }
    #clockwise {
        display: none;
    }
    #topbottom {
        display: inline;
    }
    #leftright {
        display: none;
    }
 }
 table {
    font-size: 30px;
 }
 td,
 th {
    word-wrap: break-word;
    word-break: break-all;
 }
 .abstractTitle {
    font-size: 30px !important;
    margin-bottom: 20px !important;
 }
 body {
    font-size: 20px;
 }
 .footnotes {
    margin-top: 50px;
    font-size: 30px;
 }
 .bodyEuDay {
    background-color: #003399;
    color: gold;
 }
 .bodyEuDay a {
    color: #b8860b;
 }
 .bodyNATODay a {
    color: #004990;
 }
 .bodyEuDay table {
    border-color: gold;
 }
 /*
 .bodyRepublicDay table {
    border-image: linear-gradient(166deg, rgba(0, 147, 68, 1) 0%, rgba(0, 147, 68, 1) 33%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 1) 67%, rgba(207, 39, 52, 1) 67%, rgba(207, 39, 52, 1) 100%);
 }*/
 .bodyRepublicDay a {
    color: #008c45;
 }
 .greyFilter {
    filter: grayscale(100);
 }
 #pronounce>img {
    width: 20px;
    display: inline;
 }
@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
 }
 #pronouceBox {
    opacity: 0;
    animation: 3s fadein forwards;
 }
 header {
    max-width: 85vw;
 }
 .blueColor {
    filter: invert(16%) sepia(43%) saturate(5106%) hue-rotate(196deg) brightness(98%) contrast(102%);
 }
 .redColor {
    filter: invert(15%) sepia(50%) saturate(5408%) hue-rotate(352deg) brightness(85%) contrast(122%);
 }
 .greenColor {
    filter: invert(41%) sepia(83%) saturate(6654%) hue-rotate(146deg) brightness(94%) contrast(102%);
 }
 .goldColor {
    color: black;
    filter: invert(69%) sepia(71%) saturate(860%) hue-rotate(2deg) brightness(110%) contrast(105%);
 }
 .darkGoldColor {
    color: black;
    filter: invert(44%) sepia(96%) saturate(655%) hue-rotate(14deg) brightness(96%) contrast(91%);
 }
 .baseColor {
    filter: none;
 }