normalize fullstack woring, proper favicons

cli/export-pdf-resume.mjs

@@ -48,7 +48,7 @@ async function exportResumeAsPdf(task) {
       footerTemplate: `
         <div style="width: 100%; font-style: italic; font-size: 9px; padding: 0; color: #bbb; font-family: 'Lora', serif; position: relative;">
           <div style="position: absolute; right: 9mm; bottom: 5px;">
-            Vitor Mello - Senior Full Stack Engineer - page <span class="pageNumber"></span> of <span class="totalPages"></span>.
+            Vitor Mello - Senior Full-Stack Engineer - page <span class="pageNumber"></span> of <span class="totalPages"></span>.
           </div>
         </div>
       `,

public/site.webmanifest

@@ -0,0 +1,11 @@
+{
+  "name": "",
+  "short_name": "",
+  "icons": [
+    { "src": "/favicons/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
+    { "src": "/favicons/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

src/components/TrackingEye.astro

@@ -107,8 +107,8 @@ const eyeIrisId = 'eyeIris';
   };
 
   // open/close the eye whenever the cursor hovers over any "<a>" element in the page
-  addMultipleEventListeners('a', 'mouseenter', onLinkMouseEnter);
-  addMultipleEventListeners('a', 'mouseleave', onLinkMouseLeave);
+  addMultipleEventListeners('a', 'mouseover', onLinkMouseEnter);
+  addMultipleEventListeners('a', 'mouseout', onLinkMouseLeave);
 
   // move the eye whenever the cursor moves
   document.addEventListener('mousemove', onMouseMove);

src/content/resume.yml

@@ -1,8 +1,8 @@
 slug: resume
 title: Vitor Mello
-subtitle: Senior Full Stack Engineer
+subtitle: Senior Full-Stack Engineer
 summary: >
-  I have 12+ years of experience as a Full Stack Engineer, with strong skills in typescript,
+  I have 12+ years of experience as a Full-Stack Engineer, with strong skills in typescript,
   React (Redux and Sagas), Node.js (NestJS, Next.js and express) and responsive layouts.
   I've also done a lot of PHP and Symfony3 in the past, and have some knowledge of
   DevOps with Docker, AWS, Google Cloud and CI pipelines.
@@ -68,7 +68,7 @@ work:
     location: Berlin, Germany
     duration: 3 years 9 months
     positions:
-      - position: Senior Full Stack Engineer
+      - position: Senior Full-Stack Engineer
         date: Feb 2016 - October 2019
     summary: >
       Reimplemented the search results page and search form with React, redux and sagas
@@ -82,7 +82,7 @@ work:
     location: Berlin, Germany
     duration: 2 years 7 months
     positions:
-      - position: Senior Full Stack Engineer
+      - position: Senior Full-Stack Engineer
         date: Jun 2013 - Dec 2015
     summary: >
       Development of new features for the frontend and backend with focus on scalability and performance
@@ -98,7 +98,7 @@ work:
     positions:
       - position: Lead Software Engineer
         date: Nov 2012 - May 2013
-      - position: Senior Full Stack Engineer
+      - position: Senior Full-Stack Engineer
         date: Feb 2012 - Oct 2012
     summary: ~
     tags: ~
@@ -107,7 +107,7 @@ work:
     location: Maceió, Brazil
     duration: 3 years 4 months
     positions:
-      - position: Lead Full Stack Engineer
+      - position: Lead Full-Stack Engineer
         date: Jul 2010 - Dec 2011
       - position: Software Engineer
         date: Sep 2008 - Jun 2010

src/functions/multipleEventListenersHelper.ts

@@ -3,8 +3,10 @@ const addMultipleEventListeners = (
   eventName: string,
   callback: EventListener,
 ) => {
-  document.querySelectorAll(selector).forEach((element) => {
-    element.addEventListener(eventName, callback);
+  document.addEventListener(eventName, (event) => {
+    if ((event.target as HTMLElement)?.closest(selector)) {
+      callback.call(event.target, event);
+    }
   });
 };
 

src/layouts/LayoutWeb.astro

@@ -16,10 +16,14 @@ const { title } = Astro.props;
     <meta charset="UTF-8" />
     <meta name="description" content="Astro description" />
     <meta name="viewport" content="width=device-width" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
     <meta name="generator" content={Astro.generator} />
     <title>{title}</title>
 
+    <link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png" />
+    <link rel="manifest" href="/site.webmanifest" />
+
     <slot name="head" />
   </head>
 
@@ -99,7 +103,6 @@ const { title } = Astro.props;
   html {
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
-    /* stylelint-disable-next-line property-no-unknown */
     font-smooth: always;
   }
 

src/pages/resume.astro

@@ -4,6 +4,6 @@ import LayoutPrint from 'src/layouts/LayoutPrint.astro';
 import resume from 'src/content/resume.yml';
 ---
 
-<LayoutPrint title="Vitor Mello | Resume | Senior Full Stack Engineer">
+<LayoutPrint title="Vitor Mello | Resume | Senior Full-Stack Engineer">
   <ResumePageA4 resume={resume} />
 </LayoutPrint>