Optimized SEO

src/app/app.component.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { RouterOutlet } from '@angular/router';
+import {RouterOutlet} from '@angular/router';
 import {MenuComponent} from "./menu/menu.component";
 import {HeroComponent} from "./hero/hero.component";
 import {SectionComponent} from "./section/section.component";
@@ -18,6 +18,7 @@ export class AppComponent {
 
   constructor(private metaTagService: Meta) {
     this.metaTagService.addTags([
+      { name: 'description', content: 'Lorenzo Iovino - Software Developer' },
       {
         name: 'keywords',
         content: 'Lorenzo Iovino, lorenzoiovino.com, Software Developer, Software Engineer, Sicily, Computer Science, Blog, Personal Page',

src/app/footer/footer.component.html

@@ -26,16 +26,16 @@
     <div class="text-center sm:text-right text-white p-0 sm:p-4 leading-none sm:leading-tight relative mx-2 text-sm sm:text-sm pb-4 sm:mb-0">
       <div class="">Made with <span class="hidden sm:inline">Angular</span>
         <a href="https://angular.io/">
-          <img class="h-6 w-6 mx-1 inline-grid" ngSrc="/assets/angular.svg" height="16" width="16" loading="lazy">
+          <img class="h-6 w-6 mx-1 inline-grid" ngSrc="/assets/angular.svg" height="16" width="16" loading="lazy" alt="Angular Logo">
         </a>
         and <span class="hidden sm:inline">TailwindCSS</span>
         <a href="https://tailwindcss.com/">
-          <img class="h-6 w-6 mx-1 inline-grid" ngSrc="/assets/tailwind.svg" height="16" width="16" loading="lazy">
+          <img class="h-6 w-6 mx-1 inline-grid" ngSrc="/assets/tailwind.svg" height="16" width="16" loading="lazy" alt="Tailwind Logo">
         </a>
         <br class=""/>
         <a href="https://github.com/thisloke/loreiov.com" class="hover:text-accent">
-          Check the source code <img ngSrc="/assets/github.svg" class="h-6 w-6 mx-1 my-1 inline-block" alt="" height="800"
+          Check the source code <img ngSrc="/assets/github.svg" class="h-6 w-6 mx-1 my-1 inline-block" height="800"
-                                     width="800" loading="lazy"></a>
+                                     width="800" loading="lazy" alt="Github Logo"></a>
       </div>
     </div>
   </div>

src/app/hero/hero.component.html

@@ -7,16 +7,18 @@
                          class="hidden sm:block absolute text-[5px] rounded-x-2xl leading-none tracking-tighter overflow-hidden"></iov-ascii-photo>
           <img ngSrc="/assets/photos/me.png"
                id="originalPhoto"
+               priority="true"
+               rel="preload"
                class="h-[279px] hidden sm:block "
-               alt="" height="300" width="300"
+               alt="Photo of me" height="300" width="300">
-               loading="lazy">
           <div class="self-center pt-6 sm:pt-0 mx-2 sm:mx-0 ">
             <h1 class="text-4xl font-bold text-gray-900 sm:text-5xl sm:py-8 sm:top-8 mt-4 sm:mt-0 mb-2 sm:mb-0 break-words block sm:hidden mx-2">Hey, I'm Lorenzo!</h1>
             <div class="flex justify-center">
               <img ngSrc="/assets/photos/me.png"
+                   priority="true"
+                   rel="preload"
                    class="sm:hidden block clear-both"
-                   alt=""
+                   alt="Photo of me" height="300" width="300">
-                   loading="lazy" height="300" width="300">
             </div>
             <h1 class="text-4xl font-bold text-gray-900 sm:text-5xl sm:py-8 sm:top-8 mt-4 sm:mt-0 mb-2 sm:mb-0 break-words hidden sm:block">Hey, I'm Lorenzo!</h1>
             <div class="mx-auto sm:mr-8">
@@ -35,11 +37,11 @@
             </div>
               <div class="flex justify-center sm:justify-end h-[60px] mt-4">
                 <a class="mx-2 relative cursor-pointer" href="https://www.linkedin.com/in/lorenzoiovino/">
-                  <img ngSrc="/assets/linkedin.svg" class="h-10 sm:h-8 inline-block" alt="" height="30" width="30" loading="lazy">
+                  <img ngSrc="/assets/linkedin.svg" class="h-10 sm:h-8 inline-block" height="30" width="30" loading="lazy" alt="Linkedin Logo">
                 </a>
                 <a class="mx-2 relative cursor-pointer" href="
               https://github.com/thisloke">
-                  <img ngSrc="/assets/github.svg" class="h-10 sm:h-8 inline-block" alt="" height="30" width="30" loading="lazy">
+                  <img ngSrc="/assets/github.svg" class="h-10 sm:h-8 inline-block" height="30" width="30" loading="lazy" alt="Github Logo">
                 </a>
               </div>
             </div>

src/app/menu/menu.component.html

@@ -1,13 +1,13 @@
-<nav class="flex items-center flex-wrap bg-teal-500 p-6">
+<nav class="flex items-center flex-wrap p-6">
-  <div class="flex items-center flex-shrink-0 mr-6 {{router.url == '/' ? 'text-white' : 'text-neutral'}}">
+  <div class="flex items-center flex-shrink-0 mr-6 text-neutral {{router.url == '/' ? 'underline' : 'hover:text-white'}}">
     <span class="font-semibold text-xl tracking-tight">
-      <a href="/">Home</a>
+      <a href="/" class="drop-shadow-2xl shadow-black">Home</a>
     </span>
   </div>
   <div class="text-xl font-bold lg:flex-grow">
         <span class="font-semibold text-xl tracking-tight">
     <a href="biography"
-       class="block mt-0 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4 {{router.url == '/biography' ? 'text-white' : 'text-neutral'}}">
+       class="block mt-0 lg:inline-block lg:mt-0 mr-4 text-neutral {{router.url == '/biography' ? 'underline' : 'hover:text-white'}}">
       Bio
     </a>
         </span>

src/app/pages/biography/biography.page.ts

@@ -1,7 +1,8 @@
-import { Component } from '@angular/core';
+import {Component, Inject, OnDestroy, OnInit} from '@angular/core';
 import {SectionComponent} from "../../section/section.component";
 import {PageComponent} from "../../page/page.component";
-import {NgOptimizedImage} from "@angular/common";
+import {DOCUMENT, NgOptimizedImage} from "@angular/common";
+import {Title} from "@angular/platform-browser";
 
 @Component({
   selector: 'iov-biography-page',
@@ -14,6 +15,22 @@ import {NgOptimizedImage} from "@angular/common";
   templateUrl: './biography.page.html',
   styleUrl: './biography.page.scss'
 })
-export class BiographyPage {
+export class BiographyPage implements OnInit, OnDestroy {
 
+  constructor(private title: Title,
+              @Inject(DOCUMENT) private document: Document) {
+  }
+
+  ngOnInit() {
+    this.title.setTitle('Lorenzo Iovino >> Biography');
+    const link: HTMLLinkElement = this.document.createElement('link');
+    link.setAttribute('rel', 'canonical');
+    link.setAttribute('href', 'https://www.lorenzoiovino.com/biography');
+    this.document.head.appendChild(link);
+  }
+
+  ngOnDestroy() {
+    const link: HTMLLinkElement = this.document.querySelector('link[rel="canonical"]')!;
+    this.document.head.removeChild(link);
+  }
 }

src/app/pages/home/home.page.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import {Component, Inject, OnDestroy, OnInit} from '@angular/core';
 import {HeroComponent} from "../../hero/hero.component";
 import {SectionComponent} from "../../section/section.component";
 import {PageComponent} from "../../page/page.component";
@@ -7,6 +7,8 @@ import {ArrowScrollDownComponent} from "../../arrow-scroll-down/arrow-scroll-dow
 import {FishComponent} from "../../fish/fish.component";
 import {HighlightComponent} from "../../highlight/highlight.component";
 import {CardCtaComponent} from "../../card-cta/card-cta.component";
+import {Title} from "@angular/platform-browser";
+import {DOCUMENT} from "@angular/common";
 
 @Component({
   selector: 'iov-home-page',
@@ -24,6 +26,22 @@ import {CardCtaComponent} from "../../card-cta/card-cta.component";
   templateUrl: './home.page.html',
   styleUrl: './home.page.scss'
 })
-export class HomePage {
+export class HomePage implements OnInit, OnDestroy {
 
+  constructor(private title: Title,
+              @Inject(DOCUMENT) private document: Document) {
+  }
+
+  ngOnInit() {
+    this.title.setTitle('Lorenzo Iovino >> Home');
+    const link: HTMLLinkElement = this.document.createElement('link');
+    link.setAttribute('rel', 'canonical');
+    link.setAttribute('href', 'https://www.lorenzoiovino.com');
+    this.document.head.appendChild(link);
+  }
+
+  ngOnDestroy() {
+    const link: HTMLLinkElement = this.document.querySelector('link[rel="canonical"]')!;
+    this.document.head.removeChild(link);
+  }
 }

tailwind.config.js

@@ -11,6 +11,7 @@ module.exports = {
       accent: "#0028FF",
       neutral: "#2a2009",
       "base-100": "#fffafd",
+      gray: "#f9fafb",
       info: "#00bade",
       success: "#00c448",
       warning: "#ff8b00",