loke/lorenzoiovino.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Optimized SEO

Browse source
This commit is contained in:
Lorenzo Iovino 2024-01-18 10:24:37 +01:00
parent d772bd795e
commit bf18822f6b
7 changed files with 59 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/app/app.component.ts
View file

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

8
src/app/footer/footer.component.html
View file

@ -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"
width="800" loading="lazy"></a>
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" alt="Github Logo"></a>
</div>
</div>
</div>

14
src/app/hero/hero.component.html
View file

@ -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"
loading="lazy">
alt="Photo of me" height="300" width="300">
<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=""
loading="lazy" height="300" width="300">
alt="Photo of me" 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>

8
src/app/menu/menu.component.html
View file

@ -1,13 +1,13 @@
<nav class="flex items-center flex-wrap bg-teal-500 p-6">
<div class="flex items-center flex-shrink-0 mr-6 {{router.url == '/' ? 'text-white' : 'text-neutral'}}">
<nav class="flex items-center flex-wrap p-6">
<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>

23
src/app/pages/biography/biography.page.ts
View file

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

22
src/app/pages/home/home.page.ts
View file

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

1
tailwind.config.js
View file

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