From ae6cb293f47ed891d85ca9bd84b6a57a4300f11a Mon Sep 17 00:00:00 2001
From: Lorenzo Iovino <thisloke@gmail.com>
Date: Fri, 12 Jan 2024 03:18:27 +0100
Subject: [PATCH] Add google analytics

---
 src/app/footer/footer.component.html          |  8 +++---
 src/app/footer/footer.component.scss          |  2 +-
 src/app/hero/hero.component.html              | 14 ++++++----
 src/app/menu/menu.component.html              |  2 +-
 src/app/pages/biography/biography.page.html   | 28 +++++++++----------
 src/app/pages/home/home.page.html             |  4 +--
 .../portfolio-item-card.component.html        |  2 +-
 src/app/post-card/post-card.component.html    |  2 +-
 src/index.html                                |  8 ++++++
 9 files changed, 40 insertions(+), 30 deletions(-)

diff --git a/src/app/footer/footer.component.html b/src/app/footer/footer.component.html
index fb1418b..89142c5 100644
--- a/src/app/footer/footer.component.html
+++ b/src/app/footer/footer.component.html
@@ -16,17 +16,17 @@
     <div class="text-right text-xs text-white p-4 leading-none sm:leading-tight relative">
       <div class="">Made with Angular
         <a href="https://angular.io/">
-          <img class="h-6 w-6 mx-1 inline-grid" ngSrc="/assets/angular.svg" height="16" width="16">
+          <img class="h-6 w-6 mx-1 inline-grid" ngSrc="/assets/angular.svg" height="16" width="16" loading="lazy">
         </a>
       and TailwindCSS
       <a href="https://tailwindcss.com/">
-        <img class="h-6 w-6 mx-1 inline-grid" ngSrc="/assets/tailwind.svg" height="16" width="16">
+        <img class="h-6 w-6 mx-1 inline-grid" ngSrc="/assets/tailwind.svg" height="16" width="16" loading="lazy">
       </a>
       <br/>
       <br/>
-      <a href="https://github.com/lokenxo/loreiov.com">
+      <a href="https://github.com/thisloke/loreiov.com">
         Check the source code <img ngSrc="/assets/github.svg" class="h-6 w-6 mx-1 inline-block" alt="" height="800"
-                                   width="800"></a>
+                                   width="800" loading="lazy"></a>
     </div>
   </div>
 </div>
diff --git a/src/app/footer/footer.component.scss b/src/app/footer/footer.component.scss
index 12f7a5d..f49ea9a 100644
--- a/src/app/footer/footer.component.scss
+++ b/src/app/footer/footer.component.scss
@@ -2,5 +2,5 @@
   position: relative;
   width: 100%;
   display: block;
-  bottom: 0px;
+  bottom: -2rem;
 }
diff --git a/src/app/hero/hero.component.html b/src/app/hero/hero.component.html
index 498c79c..aec9cb5 100644
--- a/src/app/hero/hero.component.html
+++ b/src/app/hero/hero.component.html
@@ -1,6 +1,6 @@
 <div class="bg-secondary">
   <div class="relative px-6 pt-0 lg:pt-14 lg:px-8">
-    <div class="mx-auto max-w-4xl py-16 pb-32 sm:py-48 lg:py-56">
+    <div class="mx-auto max-w-4xl py-16 pb-32 sm:py-48 lg:pt-32 lg:pb-58">
         <div class="flex rounded-2xl text-sm leading-6 text-gray-600 border-l-8 border-primary hover:ring-gray-900/20 overflow-hidden bg-white max-h-[279px]">
           <iov-ascii-photo [index]="1"
                          id="asciiPhoto"
@@ -8,12 +8,14 @@
           <img ngSrc="/assets/photos/me.png"
                id="originalPhoto"
                class="h-[279px] hidden sm:block "
-               alt="" height="300" width="300">
+               alt="" height="300" width="300"
+               loading="lazy">
           <div class="self-center pt-6 sm:pt-0">
             <img ngSrc="/assets/photos/me.png"
                  class="h-[120px] sm:hidden block float-left"
-                 alt="" height="120" width="120">
-            <h1 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-4xl sm:py-8 sm:top-8 mt-4 sm:mt-0 mb-2 sm:mb-0">Hey, I'm Lorenzo!</h1>
+                 alt="" height="120" width="120"
+                 loading="lazy">
+            <h1 class="text-2xl font-bold text-gray-900 sm:text-4xl sm:py-8 sm:top-8 mt-4 sm:mt-0 mb-2 sm:mb-0">Hey, I'm Lorenzo!</h1>
             <div class="">
               <h2 class="text-sm mx-4 sm:mx-0 sm:text-base leading-2 mr-4">
                 I'm on a quest to uncover life's meaning while diving deep into my passion for Computer Science as a <span class="text-primary font-bold">Software Engineer</span>.
@@ -26,11 +28,11 @@
                 or on socials!
                 <div class="flex justify-center sm:justify-end h-[60px] mr-0 sm:mr-4">
                   <a class="mx-2 relative cursor-pointer" href="https://www.linkedin.com/in/lorenzoiovino/">
-                    <img ngSrc="/assets/linkedin.svg" class="h-6 sm:h-8 inline-block" alt="" height="30" width="30">
+                    <img ngSrc="/assets/linkedin.svg" class="h-6 sm:h-8 inline-block" alt="" height="30" width="30" loading="lazy">
                   </a>
                   <a class="mx-2 relative cursor-pointer" href="
               https://github.com/thisloke">
-                    <img ngSrc="/assets/github.svg" class="h-6 sm:h-8 inline-block" alt="" height="30" width="30">
+                    <img ngSrc="/assets/github.svg" class="h-6 sm:h-8 inline-block" alt="" height="30" width="30" loading="lazy">
                   </a>
                 </div>
               <div>
diff --git a/src/app/menu/menu.component.html b/src/app/menu/menu.component.html
index bae1019..ceb24d3 100644
--- a/src/app/menu/menu.component.html
+++ b/src/app/menu/menu.component.html
@@ -1,5 +1,5 @@
 <nav class="flex items-center flex-wrap bg-teal-500 p-6">
-  <div class="flex items-center flex-shrink-0 text-white mr-6 {{router.url == '/' ? 'text-white' : 'text-neutral'}}">
+  <div class="flex items-center flex-shrink-0 mr-6 {{router.url == '/' ? 'text-white' : 'text-neutral'}}">
     <span class="font-semibold text-xl tracking-tight">
       <a href="/">Home</a>
     </span>
diff --git a/src/app/pages/biography/biography.page.html b/src/app/pages/biography/biography.page.html
index 65252c8..1e37222 100644
--- a/src/app/pages/biography/biography.page.html
+++ b/src/app/pages/biography/biography.page.html
@@ -18,7 +18,7 @@
       My love affair with technology sparked at the tender age of four when I delved into the realms of Prince of Persia on the Apple II.
       <div class="float-right mt-4 mb-2 ml-8">
         <img ngSrc="/assets/photos/me-baby.jpg" alt="Super young software developer with an Apple II" class="w-64 rounded-2xl shadow-lg"
-             height="1415" width="1001"/>
+             height="1415" width="1001" loading="lazy"/>
         <em class="text-sm">Super young software developer with an Apple II</em>
       </div>
       Fast forward to the present, and computers have seamlessly woven into the fabric of my professional life, while everything IT-related has become the heartbeat of my passion.<br/>
@@ -26,7 +26,7 @@
       The town of Ispica is located in the south of sicily, and it's a place where time seems to stand still. The unhurried pace of life, the warmth of the people, and the breathtaking landscapes create a serene backdrop for my childhood memories. But it was something that i really hated when i was child, infact i was always dreaming to live in a big city, where i could find more opportunities.<br/><br/><br/><br/>
       <div class="float-left mb-2 mr-8">
         <img ngSrc="/assets/photos/pokemon.jpg" alt="Pokemon Yellow" class="w-64 rounded-2xl shadow-lg"
-             height="1496" width="2256"/>
+             height="339" width="339" loading="lazy"/>
         <em class="text-sm">Pokemon Yellow and Game Boy Advance</em>
       </div>
       The gaming sessions with friends extended to the world of Pokemon and Nintendo consoles, a phase that not only provided joy but also unraveled the mysteries of computer programming.<br/>
@@ -34,7 +34,7 @@
       <br />
       <div class="float-right mb-2 mt-4 ml-8">
         <img ngSrc="/assets/photos/me-guitar-17.jpg" alt="Guitarist" class="w-64 rounded-2xl shadow-lg"
-             height="1944" width="2592"/>
+             height="348" width="512" loading="lazy"/>
         <em class="text-sm">My dream guitar "Fender stratocaster"</em>
       </div>
         The gaming and music universe made me a "nerd," leading to my fascination with understanding the intricacies of computers, programming languages, and the magic beneath the hood.<br/>
@@ -49,7 +49,7 @@
       I've immersed myself in the intricacies of computer science attending the Computer Science course at the University of Pisa, devouring books (not exactly the suggested ones for the class), retry
       <div class="float-right mt-4 mb-2 ml-8">
         <img ngSrc="/assets/photos/me-cc.jpg" alt="Me in Pisa" class="w-64 rounded-2xl shadow-lg"
-             height="1944" width="2592"/>
+             height="1280" width="960" loading="lazy"/>
         <em class="text-sm">Me burning out studying Computability and <br/>Complexity exam</em>
       </div>
       <span class="italic">N-times</span> the same exam and engaging in online courses and workshops in order to understand better what it's exactly computer science
@@ -61,7 +61,7 @@
       Anyway, embarking on the journey that led me to the picturesque city of Pisa was not merely a pursuit of knowledge in computer science (the University of Pisa, with its rich history and academic excellence, provided the perfect backdrop for me to immerse myself in this world of endless possibilities); it was a harmonious convergence of two profound needs: computer science and the curiosity about the world (the non-digital one).
       <div class="float-left mt-4 mb-2 mr-8">
         <img ngSrc="/assets/photos/goliardia.jpg" alt="My goliardo" class="w-64 rounded-2xl shadow-lg"
-             height="1944" width="2592"/>
+             height="384" width="512" loading="lazy"/>
         <em class="text-sm">My student hat (that's not an hat) "goliardo"</em>
       </div>
       <br/><br/>
@@ -74,7 +74,7 @@
     <div class="text-lg">
       <div class="float-right mt-4 mb-2 ml-8">
         <img ngSrc="/assets/photos/me-moverio.jpg" alt="Me with moverio smart glasses" class="w-48 rounded-2xl shadow-lg"
-             height="1280" width="960"/>
+             height="1280" width="960" loading="lazy"/>
         <em class="text-sm">Me wearing moverio smart glasses</em>
       </div>
       My journey into the world of hackathons began with one organized by <a class="underline text-accent" href="https://www.vargroup.it/">Vargroup</a>.<br/>
@@ -85,7 +85,7 @@
       This inaugural hackathon experience ignited my enthusiasm, leading me to participate in various other hackathons, including Hackaton Toscana for mobility and engaging in many other game jams. Each hackathon presented new challenges, fostering collaboration and pushing the boundaries of my skills. <br/>
       <div class="mb-2 w-full mt-4">
         <img ngSrc="/assets/photos/game-jam.jpg" alt="Me at global game jam presenting our game" class="w-full h-80 rounded-2xl shadow-lg object-cover"
-             height="612" width="612"/>
+             height="612" width="612" loading="lazy"/>
         <em class="text-sm">Me and the team presenting the game developed. <br/>Gameplay of our game "Oh No My Husband is coming" developed for GGJ 2015: <a href="https://www.youtube.com/embed/z1Kn6agAujI" class="text-accent underline">Youtube link</a></em>
       </div>
     </div>
@@ -97,7 +97,7 @@
         A pivotal chapter in my journey unfolded during my Erasmus project in the vibrant city of Valencia. I continued study Computer Science in the Universidad Politecnica
       <div class="mb-2 mt-4 ml-8 float-right">
         <img ngSrc="/assets/photos/valencia-turia.jpg" alt="Valencia turia" class="w-96 rounded-2xl shadow-lg"
-        height="450" width="800"/>
+        height="450" width="800" loading="lazy"/>
         <em class="text-sm">Beautiful sunny day in Valencia</em>
       </div>
       where i also meet a lot of people from all over the world, and i had the opportunity to learn a lot of things about different cultures and languages.<br/><br/>
@@ -112,7 +112,7 @@
       Nestled in the heart of Sicily, my decision to return to my hometown wasn't just a homecoming; it was a deliberate choice to create a life where the pace of time mirrors the gentle ebb and flow of the Mediterranean waves. <br/>
       <div class="mb-2 mt-4 mr-8 float-left">
         <img ngSrc="/assets/photos/remote.jpg" alt="Remote working" class="w-64 rounded-2xl shadow-lg"
-             height="2160" width="3840"/>
+             height="2160" width="3840" loading="lazy"/>
         <em class="text-sm">Working remote watching the sea</em>
       </div>
 
@@ -122,14 +122,14 @@
       Sicily has a unique way of making each moment feel like an eternity, a welcome departure from the frenetic pace of urban life. <br/>It's a place where the clock seems to pause, allowing me to savor every nuance of existence.<br/>
       <div class="mb-2 mt-4 w-full">
         <img ngSrc="/assets/photos/dogs.jpg" alt="Dogs watch wineyard" class="w-full h-80 rounded-2xl shadow-lg object-cover"
-             height="2160" width="3840"/>
+             height="2160" width="3840" loading="lazy"/>
         <em class="text-sm">My wineyard</em>
       </div>
       Family plays a central role in my Sicilian life, in the pursuit of passions beyond the realms of technology, I embarked on a delightful side project alongside my sister (she's the agronomist).
       Together, we decided to make our wine, planting and growing up a wineyard in a waste terrain near the sea, so it birth <a href="https://netum.it/" class="text-accent underline">www.netum.it</a>, that's the culmination of our shared love for winemaking, and with only 1 hectar of wineyard, we produce a limited amount of bottles of a unique wine.
       <div class="mb-2 mt-4 ml-8 float-right">
-        <img ngSrc="/assets/photos/wine.jpg" alt="Dogs watch wineyard" class="w-48 rounded-2xl shadow-lg"
-             height="2160" width="3840"/>
+        <img ngSrc="/assets/photos/wine.jpg" alt="Zia Lina wine" class="w-48 rounded-2xl shadow-lg"
+             height="2160" width="3840" loading="lazy"/>
         <em class="text-sm">The wine produced "Zia Lina"</em>
       </div>
       <br/><br/>
@@ -141,7 +141,7 @@
       <br/>It's a daily reminder that success isn't just measured in code lines but also in the quality of life we cultivate. Sicily, with its unhurried pace, has become more than a backdrop for my career; it's a canvas on which I paint the vibrant tapestry of my life. Here, time may move slowly, but the impact is timeless. 🌿🍷🌞<br/>
       <div class="mb-2 mt-4 w-full">
         <img ngSrc="/assets/photos/modica.jpg" alt="Modica view" class="w-full h-80 rounded-2xl shadow-lg"
-             height="2160" width="3840"/>
+             height="2160" width="3840" loading="lazy"/>
         <em class="text-sm">Modica view from my house</em>
       </div>
     </div>
@@ -155,7 +155,7 @@
 
       <div class="mb-2 mt-4 w-full">
         <img ngSrc="/assets/photos/me-amanda.jpg" alt="Me and my wife" class="w-full h-80 rounded-2xl shadow-lg object-cover"
-             height="2160" width="3840"/>
+             height="2160" width="3840" loading="lazy"/>
         <em class="text-sm">Me and my wife Amanda</em>
       </div>
     </div>
diff --git a/src/app/pages/home/home.page.html b/src/app/pages/home/home.page.html
index c69f1bd..ccc943a 100644
--- a/src/app/pages/home/home.page.html
+++ b/src/app/pages/home/home.page.html
@@ -1,5 +1,5 @@
-<div class="bg-secondary mx-auto">
-  <iov-hero></iov-hero>
+<div class="bg-secondary mx-auto my-auto">
+  <iov-hero class="mb-12"></iov-hero>
 </div>
 
 <!--<iov-arrow-scroll-down></iov-arrow-scroll-down>
diff --git a/src/app/pages/portfolio/portfolio-item-card/portfolio-item-card.component.html b/src/app/pages/portfolio/portfolio-item-card/portfolio-item-card.component.html
index 951f4f8..9aad8c3 100644
--- a/src/app/pages/portfolio/portfolio-item-card/portfolio-item-card.component.html
+++ b/src/app/pages/portfolio/portfolio-item-card/portfolio-item-card.component.html
@@ -1,5 +1,5 @@
 <div class="bg-white shadow-md border border-primary rounded-lg mb-4 p-4 max-h-80 min-h-80 overflow-hidden flex flex-col flex-wrap">
-  <img class="rounded-t-lg float-left max-h-32 min-h-32 object-contain {{expanded ? 'object-left max-w-32' : ''}}" ngSrc="{{job?.image}}" alt="" width="300" height="100">
+  <img class="rounded-t-lg float-left max-h-32 min-h-32 object-contain {{expanded ? 'object-left max-w-32' : ''}}" ngSrc="{{job?.image}}" alt="" width="300" height="100" loading="lazy">
   <h5 class="text-gray-900 text-xl tracking-tight mb-2 justify-left" *ngIf="expanded">{{job?.name}} <br/> <em class="text-lg"><i>{{job?.role}}</i></em></h5>
   <div class="flex {{expanded ? 'max-w-96 flex-col -ml-1/5' : 'items-center'}} flex-1">
       <h5 class="text-gray-900 text-xl tracking-tight mb-2 justify-left" *ngIf="!expanded">{{job?.name}} <br/> <em class="text-lg"><i>{{job?.role}}</i></em></h5>
diff --git a/src/app/post-card/post-card.component.html b/src/app/post-card/post-card.component.html
index 2d3961d..c6adf57 100644
--- a/src/app/post-card/post-card.component.html
+++ b/src/app/post-card/post-card.component.html
@@ -1,7 +1,7 @@
 <div class="">
   <div class="bg-white shadow-md border border-gray-200 rounded-lg max-w-sm mb-5">
     <a href="/blog/{{post?.slug}}">
-      <img class="rounded-t-lg" ngSrc="{{post?.image}}" alt="" width="300" height="200">
+      <img class="rounded-t-lg" ngSrc="{{post?.image}}" alt="" width="300" height="200" loading="lazy">
     </a>
     <div class="p-5">
       <a href="#">
diff --git a/src/index.html b/src/index.html
index d20fa85..3a7b507 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,6 +1,14 @@
 <!doctype html>
 <html lang="en">
 <head>
+  <!-- Google tag (gtag.js) -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=G-T8F31C9G43"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+    gtag('config', 'G-T8F31C9G43');
+  </script>
   <meta charset="utf-8">
   <title>Lorenzo Iovino - Personal page</title>
   <base href="/">