Added contents

src/app/app.routes.ts

@@ -1,31 +1,46 @@
 import { Routes } from '@angular/router';
-import {AboutPage} from "./pages/about/about.page";
+import {BiographyPage} from "./pages/biography/biography.page";
 import {BlogPage} from "./pages/blog/blog.page";
 import {ProjectsPage} from "./pages/projects/projects.page";
 import {HomePage} from "./pages/home/home.page";
 import {PortfolioPage} from "./pages/portfolio/portfolio.page";
 import {ContactMePage} from "./pages/contact-me/contact-me.page";
+import {PageComponent} from "./page/page.component";
+import {LikeDislikePage} from "./pages/like-dislike/like-dislike.page";
 
 export const routes: Routes = [
-  { path: '', component: HomePage },
   {
-    path: 'about',
+    path: '',
-    component: AboutPage,
+    component: HomePage
+  },
+  {
+    path: '',
+    component: PageComponent,
+    children: [
+      {
+        path: 'biography',
+        component: BiographyPage,
       },
       {
         path : 'portfolio',
         component: PortfolioPage,
       },
-  {
-    path : 'blog',
-    component: BlogPage,
-  },
       {
         path: 'projects',
         component: ProjectsPage,
       },
+      {
+        path: 'like-dislike',
+        component: LikeDislikePage,
+      },
+      {
+        path : 'blog',
+        component: BlogPage,
+      },
       {
         path: 'hello',
         component: ContactMePage,
       }
+    ]
+  }
 ];

src/app/fish/fish.component.html

@@ -1,4 +1,5 @@
-<svg class="fish" id="fish">
+<div class="w-full overflow-hidden block">
+  <svg class="fish" id="fish">
     <path
       id="fish2"
       d="m 172.04828,20.913839 c 0.0489,-0.444179 -0.2178,-0.896934 -1.01784,-1.415715 -0.72801,-0.475049 -1.4826,-0.932948 -2.2149,-1.401138 -1.6035,-1.028129 -3.29018,-1.969653 -4.89798,-3.079244 -4.67074,-3.24131 -10.22127,-4.404923 -15.76322,-5.1509392 -2.27235,-0.286401 -4.81223,-0.168925 -6.72186,-1.574351 -1.48174,-1.081294 -4.04993,-4.828523 -6.86506,-6.456038 -0.4862,-0.290688 -2.77227,-1.44486897 -2.77227,-1.44486897 0,0 1.30939,3.55000597 1.60951,4.26429497 0.69542,1.644664 -0.38158,3.063809 -0.83262,4.642447 -0.29069,1.0418502 2.13772,0.8129002 2.26463,1.7827212 0.18179,1.432007 -4.15197,1.936211 -6.59152,2.417263 -3.65634,0.715146 -7.91635,2.082841 -11.56925,0.884071 -4.3046,-1.38313 -7.37269,-4.129669 -10.46566,-7.2354952 1.43801,6.7252892 5.4382,10.6028562 5.6157,11.4226162 0.18607,0.905509 -0.45961,1.091584 -1.04099,1.682394 -1.28967,1.265655 -6.91566,7.731125 -6.93366,9.781383 1.61379,-0.247815 3.56115,-1.660957 4.9803,-2.485862 1.58035,-0.905509 7.60593,-5.373029 9.29347,-6.065023 0.38587,-0.160351 5.0549,-1.531476 5.09434,-0.932949 0.0695,0.932949 -0.30784,1.137031 -0.18436,1.527189 0.22638,0.746016 1.44144,1.465449 2.02282,1.985088 1.50918,1.292237 3.21044,2.42841 4.27373,4.156252 1.49203,2.401827 1.55805,4.999163 1.98251,7.677102 0.99469,-0.111473 2.0091,-2.17545 2.55961,-2.992638 0.51278,-0.772598 2.38639,-4.07136 3.09725,-4.275442 0.67227,-0.204082 2.75511,0.958673 3.50284,1.180763 2.85973,0.848057 5.644,1.353976 8.56032,1.353976 3.50799,0.0094 12.726,0.258104 19.55505,-4.800226 0.75545,-0.567658 2.55703,-2.731104 2.55703,-2.731104 0,0 -0.37644,-0.577091 -1.04785,-0.790605 0.89779,-0.584808 1.8659,-1.211633 1.94993,-1.925922 z"
@@ -32,4 +33,5 @@
     <path
       d="m 68.19699,20.522295 c 0.0489,-0.44418 -0.2178,-0.896934 -1.01784,-1.415715 -0.72801,-0.47505 -1.4826,-0.932949 -2.2149,-1.401138 -1.6035,-1.02813 -3.29018,-1.969653 -4.89798,-3.079245 C 55.39553,11.384887 49.845,10.221274 44.30305,9.4752582 42.0307,9.1888572 39.49082,9.3063332 37.58119,7.900907 36.09945,6.819613 33.53126,3.072384 30.71613,1.444869 30.22993,1.154181 27.94386,0 27.94386,0 c 0,0 1.30939,3.550006 1.60951,4.264295 0.69542,1.644664 -0.38158,3.063809 -0.83262,4.642447 -0.29069,1.0418502 2.13772,0.8129002 2.26463,1.782721 0.18179,1.432007 -4.15197,1.936211 -6.59152,2.417263 -3.65634,0.715146 -7.91635,2.082842 -11.56925,0.884072 C 8.52001,12.607667 5.45192,9.8611282 2.35895,6.755302 3.79696,13.480591 7.79715,17.358159 7.97465,18.177919 8.16072,19.083427 7.51504,19.269502 6.93366,19.860313 5.64399,21.125967 0.018,27.591438 0,29.641695 1.61379,29.39388 3.56115,27.980738 4.9803,27.155833 c 1.58035,-0.905509 7.60593,-5.373029 9.29347,-6.065023 0.38587,-0.160351 5.0549,-1.531476 5.09434,-0.932948 0.0695,0.932948 -0.30784,1.137031 -0.18436,1.527188 0.22638,0.746016 1.44144,1.46545 2.02282,1.985088 1.50918,1.292237 3.21044,2.42841 4.27373,4.156252 1.49203,2.401827 1.55805,4.999163 1.98251,7.677102 0.99469,-0.111473 2.0091,-2.17545 2.55961,-2.992638 0.51278,-0.772598 2.38639,-4.071359 3.09725,-4.275442 0.67227,-0.204082 2.75511,0.958673 3.50284,1.180763 2.85973,0.848057 5.644,1.353976 8.56032,1.353976 3.50799,0.0094 12.726,0.258104 19.55505,-4.800226 0.75545,-0.567658 2.55703,-2.731104 2.55703,-2.731104 0,0 -0.37644,-0.57709 -1.04785,-0.790605 0.89779,-0.584808 1.8659,-1.211633 1.94993,-1.925921 z"
       id="fish1" />
-</svg>
+  </svg>
+</div>

src/app/fish/fish.component.scss

@@ -7,22 +7,22 @@ svg.fish{
 
 @-webkit-keyframes swim
 {
-  0% {margin-left: -235px}
+  0% {left: -235px}
-  90% {margin-left: 100%;}
+  90% {left: calc(100% - 235px); width: 235px;}
-  100% {margin-left: 100%;}
+  100% {left: calc(100%); width: 0}
 }
 
 @keyframes swim
 {
-  0% {margin-left: -235px}
+  0% {left: -235px}
-  70% {margin-left: 100%;}
+  70% {left: calc(100% - 235px); width: 235px;}
-  100% {margin-left: 100%;}
+  100% {left: calc(100%); width: 0}
 }
 
 .fish{
   width: 235px;
   height: 104px;
-  margin-left: -235px;
+  left: -235px;
   position: absolute;
   animation: swim 20s;
   -webkit-animation: swim 20s;

src/app/footer/footer.component.html

@@ -1,4 +1,4 @@
-<div class="bottom-0 bg-secondary w-full flex flex-col">
+<div class="static bottom-0 bg-secondary w-full flex flex-col">
   <iov-fish></iov-fish>
   <iov-card [ctaUrl]="'hello'"
               class="mr-8 ml-8 relative -top-12">
@@ -12,22 +12,19 @@
         Let's Talk!
       </span>
     </iov-card>
-  <div class="text-right text-sm text-white p-4">
+  <div class="text-right text-xs text-white p-4">
-    <div class="">Website made with Angular
+    <div class="">Made with Angular
       <a href="https://angular.io/">
-        <img class="h-6 w-6 mx-1 inline-grid" src="/assets/angular.svg">
+        <img class="h-6 w-6 mx-1 inline-grid" ngSrc="/assets/angular.svg" height="16" width="16">
       </a>
-    </div>
-    <div>
     and TailwindCSS
     <a href="https://tailwindcss.com/">
-        <img class="h-6 w-6 mx-1 inline-grid" src="/assets/tailwind.svg">
+      <img class="h-6 w-6 mx-1 inline-grid" ngSrc="/assets/tailwind.svg" height="16" width="16">
     </a>
     <br/>
-    </div>
+    <br/>
-    <div class="mt-2 font-bold">
     <a href="https://github.com/lokenxo/loreiov.com">
-        Code <img src="/assets/github.svg" class="h-6 w-6 mx-1 inline-block" alt=""></a>
+      Check the source code <img ngSrc="/assets/github.svg" class="h-6 w-6 mx-1 inline-block" alt="" height="800"
-    </div>
+                                 width="800"></a>
   </div>
 </div>

src/app/footer/footer.component.ts

@@ -1,13 +1,15 @@
 import { Component } from '@angular/core';
 import {FishComponent} from "../fish/fish.component";
 import {CardCtaComponent} from "../card-cta/card-cta.component";
+import {NgOptimizedImage} from "@angular/common";
 
 @Component({
   selector: 'iov-footer',
   standalone: true,
   imports: [
     CardCtaComponent,
-    FishComponent
+    FishComponent,
+    NgOptimizedImage
   ],
   templateUrl: './footer.component.html',
   styleUrl: './footer.component.scss'

src/app/hero/hero.component.html

@@ -5,27 +5,27 @@
             <iov-ascii-photo [index]="1"
                            id="asciiPhoto"
                            class="absolute text-[5px] rounded-x-2xl leading-none tracking-tighter overflow-hidden"></iov-ascii-photo>
-          <img src="/assets/me.png"
+          <img ngSrc="/assets/photos/me.png"
                id="originalPhoto"
                class="h-[279px]"
-              alt="">
+               alt="" height="300" width="300">
           <div>
-            <h1 class="text-4xl my-4 font-bold tracking-tight text-gray-900 sm:text-4xl">Hello, I'm Lorenzo!</h1>
+            <h1 class="text-4xl my-2 font-bold tracking-tight text-gray-900 sm:text-4xl">Hey, I'm Lorenzo!</h1>
             <h2 class="text-base leading-2 mr-4">
-              I'm a <span class="text-primary font-bold">Software Engineer</span> and <span class="text-primary font-bold">Web Developer</span> based in Sicily.
+              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>.
-              <br>This is my personal website, where I share my projects and my thoughts (sometimes 😅).
+              <br>Here, on my personal website, I share my projects and occasional thoughts.
-              <br><br>Feel free to navigate through my website and discover more about me.
             </h2>
 
             <div class="mt-4 text-base leading-2 mr-4">
-              For any question or collaboration, feel free to contact me via <a class="cursor-pointer underline text-primary hover:text-accent" href="mailto:thisloke@gmail.com">email</a>
+              Explore more about me and feel free to reach out for any questions or collaborations via email
-              <br/>or find me on socials
+              <a class="cursor-pointer underline text-primary hover:text-accent" href="mailto:thisloke@gmail.com">email</a>
+              or on socials!
               <a class="mx-2 relative cursor-pointer" href="https://www.linkedin.com/in/lorenzoiovino/">
-                <img src="/assets/linkedin.svg" class="h-8 inline-block" alt="">
+                <img ngSrc="/assets/linkedin.svg" class="h-6 inline-block" alt="" height="30" width="30">
               </a>
               <a class="mx-1 relative cursor-pointer" href="
             https://github.com/lokenxo">
-                <img src="/assets/github.svg" class="h-8 inline-block" alt="">
+                <img ngSrc="/assets/github.svg" class="h-6 inline-block" alt="" height="30" width="30">
               </a>
             <div>
             </div>

src/app/hero/hero.component.ts

@@ -1,6 +1,6 @@
 import {Component} from '@angular/core';
 import {AsciiPhotoComponent} from "../ascii-photo/ascii-photo.component";
-import {AsyncPipe, NgClass, NgIf} from "@angular/common";
+import {AsyncPipe, NgClass, NgIf, NgOptimizedImage} from "@angular/common";
 
 @Component({
   selector: 'iov-hero',
@@ -10,6 +10,7 @@ import {AsyncPipe, NgClass, NgIf} from "@angular/common";
     NgIf,
     NgClass,
     AsyncPipe,
+    NgOptimizedImage,
   ],
   templateUrl: './hero.component.html',
   styleUrl: './hero.component.scss'

src/app/highlight/highlight.component.html

@@ -1,15 +1,14 @@
 <iov-section [noHeight]="true">
-  <p class="text-center text-base">
   <h2 class="text-2xl font-bold my-8" *ngIf="posts.length > 0">Latest blog post</h2>
   <div class="grid grid-cols-3 justify-items-center bg-slate-100 gap-8">
-    <div *ngFor="let post of posts">
+    <div *ngFor="let post of posts.slice(0,3)">
       <iov-post-card [post]="post">
       </iov-post-card>
     </div>
+    <a class="font-bold text-primary ring-secondary border-l-8" routerLink="/blog">View all posts</a>
   </div>
   <div class="text-center" *ngIf="posts.length === 0">
     <p class="text-base">No posts yet.</p>
     <br>
-  <a class="text-base" routerLink="/blog">View all posts</a>
   </div>
 </iov-section>

src/app/highlight/highlight.component.ts

@@ -3,6 +3,7 @@ import {SectionComponent} from "../section/section.component";
 import {Post} from "../models/post";
 import {PostCardComponent} from "../post-card/post-card.component";
 import {NgForOf, NgIf} from "@angular/common";
+import {RouterLink} from "@angular/router";
 
 @Component({
   selector: 'iov-highlight',
@@ -11,7 +12,8 @@ import {NgForOf, NgIf} from "@angular/common";
     SectionComponent,
     PostCardComponent,
     NgForOf,
-    NgIf
+    NgIf,
+    RouterLink
   ],
   templateUrl: './highlight.component.html',
   styleUrl: './highlight.component.scss'

src/app/menu/menu.component.html

@@ -5,8 +5,8 @@
     </span>
   </div>
   <div class="text-xl font-bold lg:flex-grow">
-    <a href="about" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">
+    <a href="biography" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">
-      About
+      Bio
     </a>
     <a href="portfolio" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">
       Portfolio
@@ -14,6 +14,12 @@
     <a href="projects" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">
       Projects
     </a>
+    <a href="like-dislike" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">
+      Like/Dislike
+    </a>
+    <a href="links" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">
+      Links
+    </a>
     <!--<a href="blog" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">
       Blog
     </a>-->

src/app/models/work.ts

@@ -0,0 +1,11 @@
+export interface Work {
+  website: string;
+  image: string;
+  description: string;
+  name: string;
+  content: string;
+  date: {
+    start: Date;
+    end: Date;
+  };
+}

src/app/page/page.component.html

@@ -1,6 +1,5 @@
 <div class="relative">
   <div class="mx-auto pb-24">
-    <ng-content>
+    <router-outlet></router-outlet>
-    </ng-content>
   </div>
 </div>

src/app/page/page.component.ts

@@ -1,11 +1,13 @@
 import { Component } from '@angular/core';
 import {FooterComponent} from "../footer/footer.component";
+import {RouterOutlet} from "@angular/router";
 
 @Component({
   selector: 'iov-page',
   standalone: true,
   imports: [
-    FooterComponent
+    FooterComponent,
+    RouterOutlet
   ],
   templateUrl: './page.component.html',
   styleUrl: './page.component.scss'

src/app/pages/about/about.page.html

@@ -1,8 +0,0 @@
-<iov-page>
-  <iov-section [title]="'Working smart, living hard'"
-               [titleColor]="'light'"
-               [backgroundImageUrl]="'/assets/section-smart.png'"></iov-section>
-  <p>Since beginning my journey as a freelance designer over 11 years ago, I've done remote work for agencies, consulted for startups, and collaborated with talented people to create digital products for both business and consumer use. I'm quietly confident, naturally curious, and perpetually working on improving my chops one design problem at a time.
-    Designer
-    I value simple content structure, clean design patterns, and thoughtful interactions.</p>
-</iov-page>

src/app/pages/biography/biography.page.html

@@ -0,0 +1,166 @@
+<iov-section [title]="'About me'"
+             [titleColor]="'light'"
+             [backgroundImageUrl]="'/assets/cloud.JPG'">
+    <div class="container mx-auto flex flex-col items-center justify-center">
+      <div class="mb-10">
+        <h2 class="font-bold text-4xl mt-8 mb-4">Hello world!</h2>
+        <p class="text-lg">
+          Greetings! I'm Lorenzo Iovino, and i hope that i would be something more that only a "Software Engineer" (that's my job and one of my passions)<br/>
+          I'm embarking on an exhilarating journey that began back in December 1988 and continues to evolve with each passing day.
+          <br />
+          Join me on this riveting expedition where technology meets creativity, thoughts are shared, and passions are pursued. That's my life.
+        </p>
+      </div>
+
+      <div class="mb-10">
+        <h2 class="font-bold text-4xl mt-8 mb-4">Childhood Nostalgia 🧒</h2>
+        <div class="text-lg">
+
+          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"/>
+            <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/>
+          Rewind to my childhood in Ispica, where I initially balanced my time between studying, playing video games, and kicking a football around with friends, it was a simple life, but it was a happy one. <br/>
+          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"/>
+            <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/>
+          At the age of 15, the discovery of rock music sparked a new passion, and I eagerly picked up a guitar to learn its rhythmic language and stunning solos.
+          <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"/>
+            <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/>
+            At 17, I ventured into the realm of Magic: The Gathering, further enriching my interests. To this day, I continue to enjoy occasional matches in my spare time.
+        </div>
+      </div>
+
+      <div class="mb-10">
+        <h2 class="font-bold text-4xl mt-8 mb-4">University and Personal Growth 🏫</h2>
+        <div class="text-lg">
+          Educationally, I've left no stone unturned. <br/>
+          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"/>
+            <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
+          <span class="italic">(and i've still have a lot of doubdts regarding Computability and Complexity topic)</span>
+
+          <br/>
+          <br/>
+          It's this insatiable appetite for knowledge and networking that fuels my perpetual quest for growth and it did it never surrender despite my long journey as a student (i took just 12 years to get my Bachelor of Arts).<br/><br/>
+          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"/>
+            <em class="text-sm">My student hat (that's not an hat) "goliardo"</em>
+          </div>
+          <br/><br/>
+          During my university years, I not only delved into the world of computer science but also embraced the richness of life's experiences; I spent considerable time getting to know people, immersing myself in the Goliardia culture, honing my taste buds through a wine Sommelier course, attending concert and meet all kind of people in music club borderline (that one I really loved to do), unlimited speech with perfect stranger during my "Aperitivo" around the city, sharing experience and learning everyday something new. <br/> This period of exploration ignited a passion for travel, opening my eyes to diverse cultures and expanding my horizons.
+        </div>
+      </div>
+
+      <div class="mb-10">
+        <h2 class="font-bold text-4xl mt-8 mb-4">Embarking on Hackathon Adventures 🚀</h2>
+        <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"/>
+            <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/>
+          The whole team was completly created there, nobody of us will know each other, but we all have shared a passion for technology, and together,
+          we crafted a Proof of Concept software and a business plan (in 24 hours) for a revolutionary retail application focused on furniture sales.<br/>
+          The application, designed for Epson Moverio Smartglass, allowed customers to virtually furnish their homes, creating a unique and immersive shopping experience.
+          <br/><br/>
+          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"/>
+            <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>
+      </div>
+
+      <div class="mb-10">
+        <h2 class="font-bold text-4xl mt-8 mb-4">Erasmus Project in Valencia 🌍</h2>
+        <div class="text-lg">
+            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"/>
+            <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/>
+          The IT environment in Valencia was a stark contrast to the Italian landscape, offering a unique perspective on the world of technology, new startups and innovative companies were emerging in that period, and the city was a hotbed of innovation.<br/>
+          Surrounded by the stunning blend of modern architecture and traditional Spanish charm, this cultural immersion not only enriched my academic pursuits but also offered a canvas for personal growth.
+        </div>
+      </div>
+
+      <div class="mb-10">
+        <h2 class="font-bold text-4xl mt-8 mb-4">Embracing the Tranquility of Sicily 🏡</h2>
+        <div class="text-lg">
+          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"/>
+            <em class="text-sm">Working remote watching the sea</em>
+          </div>
+
+          Transitioning from the bustling tech hubs to the serene landscapes of Sicily has been a profound and intentional shift. Rediscover the beauty of slowness and the joy of doing "nothing special" every day, and i've found a new balance between my professional and personal life.
+          When the "nothing special" turn in "something special" and you can enjoy the beauty of the nature that surround you.<br/><br/>
+          As a remote worker, I've found solace in the unhurried rhythm of life here. The island's charm lies not only in its breathtaking landscapes but also in the unhurried passage of time. <br/>
+          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"/>
+            <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"/>
+            <em class="text-sm">The wine produced "Zia Lina"</em>
+          </div>
+          <br/><br/>
+          And then, of course, there's the food. Sicilian cuisine is a symphony of flavors that dance on the taste buds. Each bite is a celebration of the island's rich culinary heritage. The slow food movement isn't just a trend here; it's a way of life.<br/>Dining is an experience, a time to savor and appreciate the artistry that goes into every dish.<br/>
+          <span class="italic">(i will not post any photo of food, because i'm not a food blogger, but trust me, it's really good).</span><br/><br/>
+
+          In the midst of vineyards and olive groves, my life as a remote worker in Sicily is a testament to the beauty of simplicity.
+
+          <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"/>
+            <em class="text-sm">Modica view from my house</em>
+          </div>
+        </div>
+      </div>
+
+      <div class="mb-10">
+        <h2 class="font-bold text-4xl mt-8 mb-4">Life at 35</h2>
+        <div class="text-lg">
+          Fast forward to the present day, where I've embraced the roles of a husband to my wonderful wife, Amanda, and a proud father of a little joy named Leonardo. <br/>Life's journey has woven a tapestry of experiences, blending the worlds of technology, family, and personal passions.<br/>
+          From here i'm starting sharing my experience and my knowledge with the world using this old-fashioned and anachronistic <a class="text-accent underline" href="blog">blog</a>, and i'm really excited to see what the future will bring to me.
+
+          <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"/>
+            <em class="text-sm">Me and my wife Amanda</em>
+          </div>
+        </div>
+      </div>
+    </div>
+
+</iov-section>

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

@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { AboutPage } from './about.page';
+import { BiographyPage } from './biography.page';
 
-describe('AboutComponent', () => {
+describe('BiographyPage', () => {
-  let component: AboutPage;
+  let component: BiographyPage;
-  let fixture: ComponentFixture<AboutPage>;
+  let fixture: ComponentFixture<BiographyPage>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [AboutPage]
+      imports: [BiographyPage]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(AboutPage);
+    fixture = TestBed.createComponent(BiographyPage);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

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

@@ -1,17 +1,19 @@
 import { Component } from '@angular/core';
 import {SectionComponent} from "../../section/section.component";
 import {PageComponent} from "../../page/page.component";
+import {NgOptimizedImage} from "@angular/common";
 
 @Component({
-  selector: 'iov-about-page',
+  selector: 'iov-biography-page',
   standalone: true,
   imports: [
     SectionComponent,
-    PageComponent
+    PageComponent,
+    NgOptimizedImage
   ],
-  templateUrl: './about.page.html',
+  templateUrl: './biography.page.html',
-  styleUrl: './about.page.scss'
+  styleUrl: './biography.page.scss'
 })
-export class AboutPage {
+export class BiographyPage {
 
 }

src/app/pages/like-dislike/like-dislike.page.html

@@ -0,0 +1,2 @@
+<p>like-dislike works!</p>
+What i like and what i dislike in general, funny section

src/app/pages/like-dislike/like-dislike.page.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LikeDislikePage } from './like-dislike.page';
+
+describe('LikeDislikeComponent', () => {
+  let component: LikeDislikePage;
+  let fixture: ComponentFixture<LikeDislikePage>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [LikeDislikePage]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(LikeDislikePage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/like-dislike/like-dislike.page.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'iov-like-dislike',
+  standalone: true,
+  imports: [],
+  templateUrl: './like-dislike.page.html',
+  styleUrl: './like-dislike.page.scss'
+})
+export class LikeDislikePage {
+
+}

src/app/pages/portfolio/portfolio.page.html

@@ -1,7 +1,120 @@
-<iov-page>
+<iov-section [title]="'Professional Odissey'"
-  <iov-section [title]="'Portfolio'"
+             [backgroundImageUrl]="'/assets/plane.JPG'">
-               [backgroundImageUrl]="'/assets/section-hobby.png'">
+</iov-section>
-  </iov-section>
+
+Ah ah! This is not a real Portfolio page, a fullstack dev like me doesnt have just a list of website to show (even if I have a lot of them). I have a lot of experience in a lot of different fields, and I want to share with you my professional journey.
+
+I started my career as a mobile developer, and I worked on a lot of different projects, from games to museum apps, from 3D printing to AR. I worked on a lot of different platforms, from Android to iOS, from Windows Phone to Windows 8.1, from Unity3D to Xamarin.
+
+After that I started to work on web development, and I worked on a lot of different projects, from a 3D printing cloud service to a GDPR crawler, from a football infotainment platform to a vision portal. I worked on a lot of different technologies, from .NET to NodeJS, from Vue to React, from Nuxt to Next, from MongoDB to SQL Server.
+
+I worked in a lot of different companies, from small startups to big enterprises, from small teams to big teams, from local companies to international companies.
+
+I worked in a lot of different roles, from mobile developer to fullstack developer, from frontend developer to backend developer, from lead developer to CTO.
+
+I worked in a lot of different countries, from Italy to Belgium, from Germany to Switzerland, from Spain to UK.
+
+I worked in a lot of different languages, from Italian to English, from Spanish to French.
+
+I worked in a lot of different fields, from 3D printing to GDPR, from football to vision, from AR to museum.
+
+I worked in a lot of different technologies, from .NET to NodeJS, from Vue to React, from Nuxt to Next, from MongoDB to SQL Server.
+
+I worked in a lot of different frameworks, from Xamarin to Unity3D, from .NET to NodeJS, from Vue to React, from Nuxt to Next.
+
+I worked in a lot of different platforms, from Android to iOS, from Windows Phone to Windows 8.1, from Unity3D to Xamarin.
+
+I worked in a lot of different tools, from Visual Studio to Visual Studio Code, from Git to SVN, from Jira to Trello.
+
+I worked in a lot of different methodologies, from Agile to Scrum, from Kanban to Waterfall.
+
+I worked in a lot of different environments, from local to remote, from office to home.
+
+I worked in a lot of different roles, from mobile developer to fullstack developer, from frontend developer to backend developer, from lead developer to CTO.
+
+I worked in a lot of different projects, from small to big, from simple to complex, from local to international.
+
+I worked in a lot of different teams, from small to big, from local to international.
+
+In the end, I worked in a lot of different ways, from small to big, from local to international.
+
+
+"Tuttifrutti", this is how i explain my professional journey, and this is how I explain my professional skills.
+
+Professional Odyssey:
+
+<b>ChiamarsiBomber | CTO | 2023 - Present</b>
+
+As the CTO of ChiamarsiBomber, I lead the charge in developing a cutting-edge web platform for football infotainment. Navigating the intricacies of real-time data integration and ensuring high availability during peak periods, I orchestrate the IT team to deliver a seamless experience.
+
+<b>Iubenda | Lead Backend Engineer | 2022 - 2023</b>
+
+At Iubenda, I assumed the role of Lead Backend Engineer, steering a small team in the maintenance and evolution of the critical Radar code product. This crawler identifies GDPR non-compliant websites, playing a pivotal role in revenue generation.
+
+<b>Alcon | Frontend Developer | 2021 - 2022</b>
+
+Contributing to a colossal remote team spanning continents, I served as a Frontend Developer for Alcon, shaping the Alcon Vision portal.
+
+<b>Welance | Lead Frontend Developer | 2021 - 2022</b>
+
+As the Lead Frontend Developer at Welance, I spearheaded the development of acker.co, an educational website for a green kids project. Balancing speed and optimization, I made architectural decisions, utilizing Nuxt (a Vue framework), and collaborated on crafting a captivating user experience.
+
+<b>CsProject | Fullstack Developer | 2017 - 2021</b>
+
+My leadership role at CsProject involved creating a new web-based product, rejuvenating a legacy .NET system. Through strategic planning and team collaboration, we successfully bridged the past and future.
+
+<b>Inn3D | Fullstack Developer | 2015 - 2017</b>
+
+Inn3D witnessed my expertise in designing and developing a cloud 3D printing service, revolutionizing how users print 3D models while implementing innovative measures to prevent counterfeiting.
+
+<b>Vargroup and BMS | Fullstack Developer | 2014</b>
+
+I pioneered an Augmented Reality (AR) software for the Brussels Egyptian Museum using Unity3D and C#, running seamlessly on Epson Moverio Smart Glasses.
+
+<b>Geckosoft | Mobile Developer | 2012 - 2014</b>
+
+My journey began at Geckosoft, where I collaborated on developing a Sudoku game using Xamarin, gaining foundational experience and honing best practices.
+
+
+
+
+<h2 class="font-bold text-xl mt-8 mb-4"> 🚀 Crafting Innovation in Code: A Decade of Software Engineering Excellence 🌐<br/></h2>
+
+Greetings! I am a highly skilled and motivated software engineer with over a decade of experience, dedicated to shaping the digital landscape through innovative solutions. My journey began at the University of Pisa, where I earned my BA in Computer Science, setting the stage for a career marked by continuous learning and hands-on expertise.
+
+Educational Pursuits:
+
+University of Pisa | BA Computer Science | 2020
+University of Valencia | BA Computer Science | 2020
+Algebra University of Zagreb | Winter School: Cybersecurity, Artificial Intelligence | 2020
+
+
+<h2 class="font-bold text-xl mt-8 mb-4">🚀 Current Endeavors: Steering the Technological Symphony<br/></h2>
+
+ChiamarsiBomber | CTO | 2023 - Present
+
+In my current role as the Chief Technology Officer at ChiamarsiBomber, I've elevated the IT branch to new heights, overseeing the development of a cutting-edge web platform for football infotainment. This endeavor entails handling the intricacies of embedding real-time data streams alongside static footballer data from diverse sources. My strategic leadership ensures that the service remains in high availability, even during peak periods, creating an immersive and seamless experience for users.
+
+<h2 class="font-bold text-xl mt-8 mb-4">🛠️ Shaping Success: My Approach to Work<br/></h2>
+My work philosophy revolves around injecting fresh energy and strategic organization into existing teams, kickstarting new projects, or assembling teams from the ground up. Here's how I contribute:
+
+<ul>
+  <li>Agile Maestro: Proficient in agile methodologies, I orchestrate projects with a focus on adaptability, collaboration, and timely delivery. Whether it's scrum ceremonies or sprint planning, I bring agility to every aspect of the development process.</li>
+  <li>Innovative Scaling: With a proven track record of scaling products, I've successfully led teams through the challenges of growth. My approach involves balancing scalability with a commitment to delivering high-quality, efficient solutions.</li>
+  <li>Mentorship Maven: Passionate about fostering talent, I believe in creating an environment where team members thrive. I provide mentorship, foster collaboration, and encourage a culture of continuous learning.</li>
+  <li>Architectural Artistry: As a clean coder, I take pride in designing consistent and scalable software architectures. I leverage my expertise to make informed architectural choices, ensuring that the technology foundation is robust and adaptable.</li>
+  <li>Startup Catalyst: Having been a part of startups and initiatives from the ground up, I possess the insight needed to navigate the dynamic challenges of a fledgling project. I'm adept at streamlining processes, fostering creativity, and swiftly moving from ideation to implementation.</li>
+  <li>Team Dynamo: Leading by example, I instill a sense of purpose and dedication in the teams I work with. I believe in the power of collaboration, open communication, and fostering a positive working environment.</li>
+</ul>
+
+
+🌟 Joining Forces: Ready for the Next Chapter
+
+If you're seeking a seasoned professional to join your existing team, breathe new life into ongoing projects, or spearhead the creation of a team from scratch, I bring a wealth of experience, a commitment to excellence, and a passion for building transformative solutions. Let's collaborate and turn your vision into a technological triumph! 🚀
+
+<h2 class="font-bold text-xl mt-8 mb-4">The Sicilian Symphony:<br/></h2>
+
+<p>In the picturesque tranquility of Sicily, where time seems to gently sway with the olive groves, I've found not just a home but a canvas for my professional and personal growth. Balancing a thriving career with the joys of family life, Sicily offers a unique blend of serenity, culinary delights, and a pace of life that allows me to savor each moment.
+
+  Let's continue this journey of innovation, where every line of code echoes the rich tapestry of experience and expertise. 🌟</p>
 
-  <p>My works</p>
-</iov-page>

src/app/pages/projects/projects.page.html

@@ -1,7 +1,5 @@
-<iov-page>
+<iov-section [title]="'Projects'"
-  <iov-section [title]="'Projects, draft and ideas'"
+             [backgroundImageUrl]="'/assets/cat.jpg'">
-               [backgroundImageUrl]="'/assets/section-hobby.png'">
+</iov-section>
-  </iov-section>
 
-  <p>My projects bla bla bla</p>
+<p>My projects bla bla bla</p>
-</iov-page>

src/app/portfolio-card/portfolio-card.component.html

@@ -0,0 +1,13 @@
+<div class="">
+  <div class="bg-white shadow-md border border-gray-200 rounded-lg max-w-sm mb-5">
+    <img class="rounded-t-lg" ngSrc="{{work?.image}}" alt="" width="300" height="200">
+    <div class="p-5">
+      <h5 class="text-gray-900 font-bold text-2xl tracking-tight mb-2">{{work?.name}}</h5>
+      <p class="font-normal text-gray-700 mb-3">{{work?.description}}</p>
+      <a class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-3 py-2 text-center inline-flex items-center"
+         href="/blog/{{work?.website}}">
+        Visit Website
+      </a>
+    </div>
+  </div>
+</div>

src/app/portfolio-card/portfolio-card.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PortfolioCardComponent } from './portfolio-card.component';
+
+describe('PortfolioCardComponent', () => {
+  let component: PortfolioCardComponent;
+  let fixture: ComponentFixture<PortfolioCardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PortfolioCardComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(PortfolioCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/portfolio-card/portfolio-card.component.ts

@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import {Work} from "../models/work";
+import {NgOptimizedImage} from "@angular/common";
+
+@Component({
+  selector: 'iov-portfolio-card',
+  standalone: true,
+  imports: [
+    NgOptimizedImage
+  ],
+  templateUrl: './portfolio-card.component.html',
+  styleUrl: './portfolio-card.component.scss'
+})
+export class PortfolioCardComponent {
+  work: Work | undefined;
+}

src/app/post-card/post-card.component.html

@@ -1,8 +1,7 @@
-<!-- This is an example component -->
 <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" src="{{post?.image}}" alt="">
+      <img class="rounded-t-lg" ngSrc="{{post?.image}}" alt="" width="300" height="200">
     </a>
     <div class="p-5">
       <a href="#">

src/app/post-card/post-card.component.ts

@@ -1,12 +1,13 @@
 import {Component, Input} from '@angular/core';
 import {Post} from "../models/post";
-import {JsonPipe} from "@angular/common";
+import {JsonPipe, NgOptimizedImage} from "@angular/common";
 
 @Component({
   selector: 'iov-post-card',
   standalone: true,
   imports: [
-    JsonPipe
+    JsonPipe,
+    NgOptimizedImage
   ],
   templateUrl: './post-card.component.html',
   styleUrl: './post-card.component.scss'

src/app/section/section.component.html

@@ -1,12 +1,14 @@
-<div class="bg-center h-[150px] bg-no-repeat
+<div class="bg-center bg-no-repeat
-    {{noHeight ? 'h-0' : 'h-[150px]'}}
+    {{noHeight ? 'h-[0px]' : 'h-[150px]'}}
     bg-{{backgroundColor == 'light' ? 'white' : 'secondary'}}
     {{backgroundImageUrl ? 'url(' + backgroundImageUrl +')' : ''}}"
    [style.background-image]="backgroundImageUrl ? 'url(' + backgroundImageUrl +')' : ''">
-  <h2 class="mx-24 pt-4 text-4xl text-gray-600 mr-6 font-extrabold text-{{titleColor == 'light' ? 'white' : 'secondary'}}">{{title}}</h2>
+  <h2 class="mx-24 pt-8 text-6xl drop-shadow-2xl shadow-black text-gray-600 mr-6 font-extrabold text-{{titleColor == 'light' ? 'white' : 'secondary'}}">{{title}}</h2>
 </div>
 <div class="px-6">
-  <div class="mx-auto max-w-4xl py-4">
+  <div class="mx-auto max-w-4xl py-4 min-h-full">
+    <section class="text-gray-700 body-font">
       <ng-content></ng-content>
+    </section>
   </div>
 </div>