Cleared history (privacy)

This commit is contained in:
Mattia Mascarello 2024-04-08 09:44:54 +02:00
commit 79c870b645
73 changed files with 2123 additions and 0 deletions

8
.gitignore vendored Normal file
View File

@ -0,0 +1,8 @@
docs/*.log
docs/*.gz
docs/europecv
docs/*.aux
docs/*.fdb_latexmk
docs/*.fls
docs/*.sh
docs/*.out

2
README.md Normal file
View File

@ -0,0 +1,2 @@
# mySite
My personal Site

View File

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

BIN
audio/eu.ogg Normal file

Binary file not shown.

BIN
audio/ita.mp3 Normal file

Binary file not shown.

BIN
audio/mascarello.ogg Normal file

Binary file not shown.

BIN
audio/mattia.ogg Normal file

Binary file not shown.

BIN
audio/nato.mp3 Normal file

Binary file not shown.

BIN
docs/dromont.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.0 KiB

BIN
docs/english.pdf Normal file

Binary file not shown.

149
docs/english.tex Normal file
View File

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

BIN
docs/italian.pdf Normal file

Binary file not shown.

162
docs/italian.tex Normal file
View File

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

BIN
docs/logoLiceo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

BIN
docs/logoUnito.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 112 KiB

BIN
docs/portrait.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 113 KiB

BIN
docs/wlp.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 195 KiB

View File

@ -0,0 +1,52 @@
-----BEGIN PGP PUBLIC KEY BLOCK-----
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
0057Iqd8HXfC1uvuGmAVpfs=
=g0gZ
-----END PGP PUBLIC KEY BLOCK-----

View File

@ -0,0 +1,41 @@
-----BEGIN PGP PUBLIC KEY BLOCK-----
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
=xMq+
-----END PGP PUBLIC KEY BLOCK-----

1
emails/personal.js Normal file

File diff suppressed because one or more lines are too long

1
emails/unito.js Normal file

File diff suppressed because one or more lines are too long

Binary file not shown.

After

Width:  |  Height:  |  Size: 47 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 284 KiB

BIN
fav/apple-touch-icon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

BIN
fav/favicon-16x16.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 766 B

BIN
fav/favicon-32x32.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
fav/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

19
fav/site.webmanifest Normal file
View File

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

BIN
fonts/LM-bold-italic.ttf Normal file

Binary file not shown.

BIN
fonts/LM-bold-italic.woff Normal file

Binary file not shown.

BIN
fonts/LM-bold-italic.woff2 Normal file

Binary file not shown.

BIN
fonts/LM-bold.ttf Normal file

Binary file not shown.

BIN
fonts/LM-bold.woff Normal file

Binary file not shown.

BIN
fonts/LM-bold.woff2 Normal file

Binary file not shown.

BIN
fonts/LM-italic.ttf Normal file

Binary file not shown.

BIN
fonts/LM-italic.woff Normal file

Binary file not shown.

BIN
fonts/LM-italic.woff2 Normal file

Binary file not shown.

BIN
fonts/LM-regular.ttf Normal file

Binary file not shown.

BIN
fonts/LM-regular.woff Normal file

Binary file not shown.

BIN
fonts/LM-regular.woff2 Normal file

Binary file not shown.

Binary file not shown.

BIN
fonts/Libertinus-bold.woff2 Normal file

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

7
icons/loudspeaker.svg Normal file
View File

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

After

Width:  |  Height:  |  Size: 508 B

14
icons/play.svg Normal file
View File

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

After

Width:  |  Height:  |  Size: 686 B

9
icons/stop.svg Normal file
View File

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

After

Width:  |  Height:  |  Size: 526 B

134
images/Gadsden_flag.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 167 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 85 KiB

BIN
images/amsterdam.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 234 KiB

BIN
images/christmas.xcf Normal file

Binary file not shown.

BIN
images/enlarged.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 MiB

BIN
images/ep.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 69 KiB

BIN
images/euportrait.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 235 KiB

BIN
images/euportrait.xcf Normal file

Binary file not shown.

BIN
images/gs.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

BIN
images/itportrait.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 220 KiB

BIN
images/itportrait.xcf Normal file

Binary file not shown.

BIN
images/natoportrait.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 233 KiB

BIN
images/natoportrait.xcf Normal file

Binary file not shown.

BIN
images/paris.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 195 KiB

BIN
images/portrait.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 113 KiB

BIN
images/staring.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

BIN
images/turin.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 80 KiB

BIN
images/unito_self.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 174 KiB

BIN
images/xmasportrait.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 395 KiB

281
index.html Normal file
View File

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

601
latex.css Normal file
View File

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

41
poemOfTheDay.js Normal file
View File

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

323
script.js Normal file
View File

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

193
style.css Normal file
View File

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