Add cash or card, restructure research page, spruce up CV.

pages/cv.vue

@@ -8,10 +8,10 @@
                 <h2 class="sm:col-span-2">Personal information</h2>
                 <div class="body grid sm:grid-cols-2 gap-x-12">
                     <section class="pb-0" itemscope itemtype="http://schema.org/Person">
-                        <p class="hidden print:block"><span itemprop="name">Andrea Franceschini</span>, <span itemprop="honorificPrefix">Ing.</span> <span itemprop="honorificSuffix">PhD</span></p>
+                        <p class="hidden print:block"><span itemprop="name">Andrea Franceschini</span>, <span itemprop="honorificPrefix" class="hidden">Ing.</span> <span itemprop="honorificSuffix">PhD</span></p>
                         <p itemprop="nationality" itemtype="http://schema.org/Country">Nationality: <span itemprop="name">Italian</span></p>
                         <meta itemprop="birthDate" content="1983-05-07">
-                        <meta itemprop="affiliation" content="Department of Computer Science and Technology, University of Cambridge, UK">
+                        <meta itemprop="affiliation" content="Department of Information Engineering, Università di Padova, Italy">
                     </section>
                     <section id="full_cv" class="print:hidden">
                         <!-- <p>Download the <a href="/files/franceschini-andrea-cv.pdf" title="Full CV - PDF, 100 KB">full CV</a> (PDF, 100 KB)</p> -->
@@ -28,6 +28,10 @@
                         <p><strong class="underline decoration-dotted underline-offset-4" title="Research Associate" lang="it">Assegnista di ricerca (tipo b)</strong></p>
                         <p><strong><a href="https://csc.dei.unipd.it">Centro di Sonologia Computazionale</a><br>Università di Padova</strong>, Italy</p>
                         <p>Marie Skłodowska-Curie Postdoctoral Fellowship investigating the development and role of ludic games in education.</p>
+                        <ul>
+                            <li><strong>🌐 <a href="https://edugames.andreafranceschini.org">EduGames project</a></strong>: project website, research journal, and repository of all the material created during the project.</li>
+                            <li><strong>👾 <a href="https://edugames.andreafranceschini.org/cash-or-card">Cash or Card?</a></strong>: and educational puzzle-simulation video games on the costs and opportunities of cash vs electronic payments in everyday life.</li>
+                        </ul>
                     </section>
                     <section>
                         <p>July 2021 — September 2021</p>
@@ -68,16 +72,22 @@
                 <div class="body">
                     <section>
                         <p>April 2012 — February 2016</p>
-                        <p><strong>PhD</strong> in Computing (HCI, Music Computing)</p>
-                        <p><strong><a href="https://www.open.ac.uk">The Open University</a></strong>, UK</p>
-                        <p>Thesis title: <em><a href="/files/phd-thesis.pdf" title="PDF, 8.2 MB">Learning to use melodic similarity and contrast for narrative using a Digital Tabletop Musical Interface</a></em></p>
+                        <div itemscope itemtype="https://schema.org/Thesis">
+                            <p itemprop="inSupportOf"><strong>PhD</strong> in Computing (HCI, Music Computing)</p>
+                            <p itemprop="sourceOrganization"><strong><a href="https://www.open.ac.uk">The Open University</a></strong>, UK</p>
+                            <p>📘 <em itemprop="name"><a href="/files/phd-thesis.pdf" title="PDF, 8.2 MB">Learning to use melodic similarity and contrast for narrative using a Digital Tabletop Musical Interface</a></em></p>
+                            <p itemprop="author" class="hidden">Andrea Franceschini</p>
+                        </div>
                         <p>supervisors: Dr Robin Laney, Mr Chris Dobbyn</p>
                     </section>
                     <section>
                         <p>December 2006 — June 2010</p>
                         <p><strong>Laurea Magistrale</strong> (MSc) in Computer Science and Engineering</p>
-                        <p><strong><a href="http://www.unipd.it/">Università di Padova</a></strong>, IT</p>
-                        <p>Thesis title: <em><a href="/files/master_thesis.pdf" title="PDF, 706 KB">A practical approach to music theory on the Reactable</a></em></p>
+                        <div itemscope itemtype="https://schema.org/Thesis">
+                            <p itemprop="sourceOrganization"><strong><a href="http://www.unipd.it/">Università di Padova</a></strong>, IT</p>
+                            <p>📘 <em itemprop="name"><a href="/files/master_thesis.pdf" title="PDF, 706 KB">A practical approach to music theory on the Reactable</a></em></p>
+                            <p itemprop="author" class="hidden">Andrea Franceschini</p>
+                        </div>
                         <p>advisor: Prof. Giovanni De Poli</p>
                         <section class="indent">
                             <p>October 2008 — March 2009</p>
@@ -90,8 +100,11 @@
                     <section>
                         <p>October 2002 — December 2006</p>
                         <p><strong>Laurea</strong> (BSc) in Computer Science and Engineering</p>
-                        <p><strong><a href="http://www.unipd.it/">Università di Padova</a></strong>, IT</p>
-                        <p>Thesis title: <em>Schematizzazione di uno scheduler ciclico statico per applicazioni embedded in ambiente Windows CE</em></p>
+                        <div itemscope itemtype="https://schema.org/Thesis">
+                            <p itemprop="sourceOrganization"><strong><a href="http://www.unipd.it/">Università di Padova</a></strong>, IT</p>
+                            <p>📘 <em itemprop="name">Schematizzazione di uno scheduler ciclico statico per applicazioni embedded in ambiente Windows CE</em></p>
+                            <p itemprop="author" class="hidden">Andrea Franceschini</p>
+                        </div>
                         <p>advisor: Dr Michele Moro</p>
                     </section>
                 </div>
@@ -104,14 +117,14 @@
                         <p>July 2022</p>
                         <p><strong>MSCA 2021 <a href="https://doi.org/10.3030/101062788">Individual Fellowship (EduGames)</a></strong></p>
                         <p><a href="https://marie-sklodowska-curie-actions.ec.europa.eu/">Marie Skłodowska-Curie Actions</a>, European Commission</p>
-                        <p>An investigation into the role of ludic games in education. I also have a <a href="https://andreafranceschini.org/edugames">project website</a>.</p>
+                        <p>An investigation into the role of entertainment video games in education. I also have a <a href="https://andreafranceschini.org/edugames">project website</a>.</p>
                     </section>
                     <section>
                         <p>May 2022</p>
                         <p><strong>MSCA 2021 <a href="/files/msca-2021-seal-of-excellence.pdf" title="Seal of Excellence certificate">Seal of Excellence</a></strong></p>
                         <p>Marie Skłodowska-Curie Actions, European Commission</p>
-                        <p>The Seal of Excellence is awarded to applications that rank more than 85% and but cannot be funded in the first instance
-                            due to budget constraints. My application ranked <strong>92.8%</strong> with a funding threshold of 93.6%.</p>
+                        <p>The Seal of Excellence is awarded to applications that rank more than 85% and but cannot be funded <em>in the first instance</em>
+                            due to budget constraints. My application ranked <strong>92.8%</strong> with a funding threshold of 93.6% and was subsequently funded from the reserve list.</p>
                     </section>
                     <section>
                         <p>July 2021</p>

pages/development.vue

@@ -8,7 +8,7 @@
                 <p>I have been writing code for as long as I can remember &ndash; yes, that must have been around 1990, with my Amiga 500. It has been a long journey, and I learned a thing or two along the way.</p>
             </section>
             <section class="left col-start-1 col-span-1">
-                <p>One of these is that the “<em>what languages do you know?</em>” question is largely irrelevant. Once you know a bunch of them, learning a new one is easy. The hard part is knowing how to attack a problem and solve it.</p>
+                <p>One of these is that the “<em>what languages do you know?</em> ” question is largely irrelevant. Once you know a bunch of them, learning a new one is easy. The hard part is knowing how to attack a problem and solve it.</p>
             </section>
             <section class="right col-start-1 col-span-1 sm:col-start-2">
                 <p><strong>Languages</strong> I know:</p>
@@ -36,25 +36,42 @@
                 <h2>Things I've done</h2>
                 <p>Enough talk, let's see some of the projects I worked on over the years.</p>
             </section>
+            <section class="project full col-start-1 sm:col-span-2 border-t-2 pb-3" id="project_cashorcard">
+                <section class="_right sm:float-right sm:w-1/2 sm:pl-1">
+                    <h3>Cash or Card?</h3>
+                </section>
+                <section class="_left sm:float-left sm:w-1/2 sm:pr-2">
+                    <figure>
+                        <picture>
+                            <source srcset="/images/cash_or_card-2x.webp" type="image/webp" />
+                            <source srcset="/images/cash_or_card.jpg 1x, /images/cash_or_card-2x.jpg 2x" type="image/jpeg" />
+                            <img class="rounded" srcset="/images/cash_or_card.jpg" alt="Circular Bells" />
+                        </picture>
+                    </figure>
+                </section>
+                <section class="_right sm:float-right sm:w-1/2 sm:pl-1">
+                    <p>“Cash or Card?” is an educational puzzle-simulation video game to explore the theme of cash vs electronic payments. You play as a shopkeeper who has to earn enough money in 5 days and you need to choose how your customers are going to pay you.</p>
+                    <p><strong>Technologies</strong>: Godot 4.</p>
+                    <p><a href="https://edugames.andreafranceschini.org/games/cash_or_card/" title="Play Cash or Card online for free!"><strong>Play online</strong></a> | <a href="https://edugames.andreafranceschini.org/cash-or-card/"><strong>Description</strong></a> | <a href="https://edugames.andreafranceschini.org/wp-content/uploads/cash-or-card-gdd.pdf"><strong>GDD</strong></a> | <a href="https://github.com/Morpheu5/cash-or-card"><strong>Source code</strong></a></p>
+                </section>
+            </section>
             <section class="project full col-start-1 sm:col-span-2 border-t-2 pb-3" id="project_rfk2d">
                 <section class="_left sm:float-left sm:w-1/2 sm:pr-1">
                     <h3>Robot Finds Kitten 2D for Godot Engine</h3>
                 </section>
                 <section class="_right sm:float-right sm:w-1/2 sm:pl-2">
                     <figure>
-                        <a href="#" data-featherlight="/images/rfk2d-2x.jpg">
-                            <picture>
-                                <source srcset="/images/rfk2d-2x.webp" type="image/webp" />
-                                <source srcset="/images/rfk2d.jpg 1x, /images/rfk2d-2x.jpg 2x" type="image/jpeg" />
-                                <img class="rounded" srcset="/images/rfk2d.jpg" alt="Robot Finds Kitten 2D for Godot Engine" />
-                            </picture>
-                        </a>
+                        <picture>
+                            <source srcset="/images/rfk2d-2x.webp" type="image/webp" />
+                            <source srcset="/images/rfk2d.jpg 1x, /images/rfk2d-2x.jpg 2x" type="image/jpeg" />
+                            <img class="rounded" srcset="/images/rfk2d.jpg" alt="Robot Finds Kitten 2D for Godot Engine" />
+                        </picture>
                     </figure>
                 </section>
                 <section class="_left sm:float-left sm:w-1/2 sm:pr-1">
                     <p>I wanted to learn <a href="https://godotengine.org/">Godot</a> so I made a port of the <a href="http://robotfindskitten.org/">famous zen simulation</a> Robot Finds Kitten which you can <a href="https://rfk.morpheu5.net/2d" title="Play Robot Finds Kitten 2D online for free!">play online here</a> for free! No ads! Pure zen!</p>
-                    <p><strong>Technologies</strong>: Godot Engine.</p>
-                    <p><a href="https://www.github.com/Morpheu5/RFK_Godot2D"><strong>Source code</strong></a> | <a href="https://rfk.morpheu5.net/2d" title="Play Robot Finds Kitten 2D online for free!"><strong>Play</strong></a></p>
+                    <p><strong>Technologies</strong>: Godot 3.</p>
+                    <p><a href="https://rfk.morpheu5.net/2d" title="Play Robot Finds Kitten 2D online for free!"><strong>Play online</strong></a> | <a href="https://www.github.com/Morpheu5/RFK_Godot2D"><strong>Source code</strong></a></p>
                 </section>
             </section>
             <section class="project full col-start-1 sm:col-span-2 border-t-2 pb-3" id="project_circularbells">
@@ -63,13 +80,11 @@
                 </section>
                 <section class="_left sm:float-left sm:w-1/2 sm:pr-2">
                     <figure>
-                        <a href="#" data-featherlight="/images/cb_demo-2x.jpg">
-                            <picture>
-                                <source srcset="/images/cb_demo-2x.webp" type="image/webp" />
-                                <source srcset="/images/cb_demo.jpg 1x, /images/cb_demo-2x.jpg 2x" type="image/jpeg" />
-                                <img class="rounded" srcset="/images/cb_demo.jpg" alt="Circular Bells" />
-                            </picture>
-                        </a>
+                        <picture>
+                            <source srcset="/images/cb_demo-2x.webp" type="image/webp" />
+                            <source srcset="/images/cb_demo.jpg 1x, /images/cb_demo-2x.jpg 2x" type="image/jpeg" />
+                            <img class="rounded" srcset="/images/cb_demo.jpg" alt="Circular Bells" />
+                        </picture>
                     </figure>
                 </section>
                 <section class="_right sm:float-right sm:w-1/2 sm:pl-1">
@@ -84,13 +99,11 @@
                 </section>
                 <section class="_right sm:float-right sm:w-1/2 sm:pl-2">
                     <figure>
-                        <a href="#" data-featherlight="/images/phd-app-2x.jpg">
-                            <picture>
-                                <source srcset="/images/phd-app-2x.webp" type="image/webp" />
-                                <source srcset="/images/phd-app.jpg 1x, /images/phd-app-2x.jpg 2x" type="image/jpeg" />
-                                <img class="rounded" srcset="/images/phd-app.jpg" alt="PhD app for iPad" />
-                            </picture>
-                        </a>
+                        <picture>
+                            <source srcset="/images/phd-app-2x.webp" type="image/webp" />
+                            <source srcset="/images/phd-app.jpg 1x, /images/phd-app-2x.jpg 2x" type="image/jpeg" />
+                            <img class="rounded" srcset="/images/phd-app.jpg" alt="PhD app for iPad" />
+                        </picture>
                     </figure>
                 </section>
                 <section class="_left sm:float-left sm:w-1/2 sm:pr-1">
@@ -105,13 +118,11 @@
                 </section>
                 <section class="_left sm:float-left sm:w-1/2 sm:pr-2">
                     <figure>
-                        <a href="#" data-featherlight="/images/table_2-2x.jpg">
-                            <picture>
-                                <source srcset="/images/table_2-2x.webp" type="image/webp" />
-                                <source srcset="/images/table_2.jpg 1x, /images/table_2-2x.jpg 2x" type="image/jpeg" />
-                                <img class="rounded" srcset="/images/table_2.jpg" alt="PhD app for large tabletop" />
-                            </picture>
-                        </a>
+                        <picture>
+                            <source srcset="/images/table_2-2x.webp" type="image/webp" />
+                            <source srcset="/images/table_2.jpg 1x, /images/table_2-2x.jpg 2x" type="image/jpeg" />
+                            <img class="rounded" srcset="/images/table_2.jpg" alt="PhD app for large tabletop" />
+                        </picture>
                     </figure>
                 </section>
                 <section class="_right sm:float-right sm:w-1/2 sm:pl-1">
@@ -126,13 +137,11 @@
                 </section>
                 <section class="_right sm:float-right sm:w-1/2 sm:pl-2">
                     <figure>
-                        <a href="#" data-featherlight="/images/aranaboo-2x.jpg">
-                            <picture>
-                                <source srcset="/images/aranaboo-2x.webp" type="image/webp" />
-                                <source srcset="/images/aranaboo.jpg 1x, /images/aranaboo-2x.jpg 2x" type="image/jpeg" />
-                                <img class="rounded" srcset="/images/aranaboo.jpg" alt="Aranaboo" />
-                            </picture>
-                        </a>
+                        <picture>
+                            <source srcset="/images/aranaboo-2x.webp" type="image/webp" />
+                            <source srcset="/images/aranaboo.jpg 1x, /images/aranaboo-2x.jpg 2x" type="image/jpeg" />
+                            <img class="rounded" srcset="/images/aranaboo.jpg" alt="Aranaboo" />
+                        </picture>
                     </figure>
                 </section>
                 <section class="_left sm:float-left sm:w-1/2 sm:pr-1">
@@ -147,13 +156,11 @@
                 </section>
                 <section class="_left sm:float-left sm:w-1/2 sm:pr-2">
                     <figure>
-                        <a href="#" data-featherlight="/images/astronauta-2x.jpg">
-                            <picture>
-                                <source srcset="/images/astronauta-2x.webp" type="image/webp" />
-                                <source srcset="/images/astronauta.jpg 1x, /images/astronauta-2x.jpg 2x" type="image/jpeg" />
-                                <img class="rounded" srcset="/images/astronauta.jpg" alt="Da grande voglio fare l'astronauta" />
-                            </picture>
-                        </a>
+                        <picture>
+                            <source srcset="/images/astronauta-2x.webp" type="image/webp" />
+                            <source srcset="/images/astronauta.jpg 1x, /images/astronauta-2x.jpg 2x" type="image/jpeg" />
+                            <img class="rounded" srcset="/images/astronauta.jpg" alt="Da grande voglio fare l'astronauta" />
+                        </picture>
                     </figure>
                 </section>
                 <section class="_right sm:float-right sm:w-1/2 sm:pl-1">
@@ -168,13 +175,11 @@
                 </section>
                 <section class="_right sm:float-right sm:w-1/2 sm:pl-2">
                     <figure>
-                        <a href="#" data-featherlight="/images/bsc-2x.jpg">
-                            <picture>
-                                <source srcset="/images/bsc-2x.webp" type="image/webp" />
-                                <source srcset="/images/bsc.jpg 1x, /images/bsc-2x.jpg 2x" type="image/jpeg" />
-                                <img class="rounded" srcset="/images/bsc.jpg" alt="CRUSADE Bleeding Score Calculator" />
-                            </picture>
-                        </a>
+                        <picture>
+                            <source srcset="/images/bsc-2x.webp" type="image/webp" />
+                            <source srcset="/images/bsc.jpg 1x, /images/bsc-2x.jpg 2x" type="image/jpeg" />
+                            <img class="rounded" srcset="/images/bsc.jpg" alt="CRUSADE Bleeding Score Calculator" />
+                        </picture>
                     </figure>
                 </section>
                 <section class="_left sm:float-left sm:w-1/2 sm:pr-1">
@@ -189,13 +194,11 @@
                 </section>
                 <section class="_left sm:float-left sm:w-1/2 sm:pr-2">
                     <figure>
-                        <a href="#" data-featherlight="/images/doodle-2x.png">
-                            <picture>
-                                <source srcset="/images/doodle-2x.webp" type="image/webp" />
-                                <source srcset="/images/doodle.png 1x, /images/doodle-2x.png 2x" type="image/png" />
-                                <img class="rounded" srcset="/images/doodle.png" alt="Doodle" />
-                            </picture>
-                        </a>
+                        <picture>
+                            <source srcset="/images/doodle-2x.webp" type="image/webp" />
+                            <source srcset="/images/doodle.png 1x, /images/doodle-2x.png 2x" type="image/png" />
+                            <img class="rounded" srcset="/images/doodle.png" alt="Doodle" />
+                        </picture>
                     </figure>
                 </section>
                 <section class="_right sm:float-right sm:w-1/2 sm:pl-1">
@@ -210,13 +213,11 @@
                 </section>
                 <section class="_right sm:float-right sm:w-1/2 sm:pl-2">
                     <figure>
-                        <a href="#" data-featherlight="/images/tofus-2x.jpg">
-                            <picture>
-                                <source srcset="/images/tofus-2x.webp" type="image/webp" />
-                                <source srcset="/images/tofus.jpg 1x, /images/tofus-2x.jpg 2x" type="image/jpeg" />
-                                <img class="rounded" srcset="/images/tofus.jpg" alt="tOfuS" />
-                            </picture>
-                        </a>
+                        <picture>
+                            <source srcset="/images/tofus-2x.webp" type="image/webp" />
+                            <source srcset="/images/tofus.jpg 1x, /images/tofus-2x.jpg 2x" type="image/jpeg" />
+                            <img class="rounded" srcset="/images/tofus.jpg" alt="tOfuS" />
+                        </picture>
                     </figure>
                 </section>
                 <section class="_left sm:float-left sm:w-1/2 sm:pr-1">

pages/research.vue

@@ -4,6 +4,28 @@
 
     <div class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose">
         <article class="body grid sm:grid-cols-2 grid-cols-1 gap-x-12 gap-y-0">
+            <h2>Current research</h2>
+            <section class="sm:col-start-1">
+                <p>I'm <a href="https://edugames.andreafranceschini.org">investigating the role of entertainment video games as educational interventions</a> at the University of Padova, Italy.</p>
+                <p>The <strong>main objective</strong> is to figure out methodological guidelines and practices for the development of video games that aim to entertain and intend to educate.</p>
+                <p>To get there, I need to sit <strong>game designers, educators, and game researchers</strong> in the same room and get them working together, because they <strong>each have strengths that the others lack</strong> and would benefit from.</p>
+                <p>I am also happy to talk about museum installations and interactive experiences, if that's what you are into.</p>
+            </section>
+            <section class="sm:col-start-2">
+                <div class="aspect-w-16 aspect-h-9">
+                    <a href="https://edugames.andreafranceschini.org/"><video autoplay loop muted>
+                        <source src="/images/gneg.mp4" type="video/mp4" />
+                        Your browser does not support the video tag.
+                    </video></a>
+                </div>
+            </section>
+            <section class="full col-start-1 sm:col-span-2">
+                <p>The project is funded by the 🇪🇺 European Union under HORIZON-MSCA-2021-PF-01 Project ID 101062788 (EduGames)</p>
+                <p class="calltoaction">Interested? <a href="https://edugames.andreafranceschini.org">Let's make games!</a></p>
+            </section>
+        </article>
+        <article class="body grid sm:grid-cols-2 grid-cols-1 gap-x-12 gap-y-0 pt-6">
+            <h2>Other research interests</h2>
             <section class="sm:col-span-2">
                 <p>I am a trained computer scientist and I have done qualitative research. This means I'm comfortable with analysing numbers and words alike.</p>
             </section>
@@ -19,13 +41,13 @@
                 <p>When I started my doctoral studies, there was an alarming lack of empirical studies in the area of <strong>interactive tabletops</strong> as <strong>music learning tools</strong>. It is not clear what happens when you give people a giant touch screen, and teach them music with it. This means you have to sit down and watch them, record their actions, and analyse their conversations.</p>
             </section>
             <section class="right sm:col-start-2">
-                <h2>Qualitative research</h2>
+                <h3>Qualitative research</h3>
                 <p>Qualitative research is hard and fascinating work: it gives you insight on what people do and think &ndash; like reading minds, if you think about it.</p>
                 <p>QR is at the heart of <strong>user experience research</strong>, among other applications &ndash; that means figuring out what people think about the things you make, and how they use them.</p>
                 <p>You can look at pretty much anything for information. Typical data sources include interviews, journals, videos, and so on. However, it is a common misconception that qualitative findings are less rigorous than quantitative findings: they are simply different, and they can even work together to strengthen each other and produce even more rigorous research.</p>
             </section>
             <section class="full sm:col-span-2 pt-6 border-t-2">
-                <h2>What can I help you with?</h2>
+                <h3>What can I help you with?</h3>
                 <p>Do you have a pressing question that needs answer? Do you want to make your app better and easier to use? Do you have a brilliant new idea and want to know if it's worth developing it?</p>
                 <p>Things I <strong>can</strong> help you with include</p>
                 <ul>