package-lock.json

@@ -10466,11 +10466,6 @@
       "integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==",
       "dev": true
     },
-    "add-subtract-date": {
-      "version": "1.0.15",
-      "resolved": "https://registry.npmjs.org/add-subtract-date/-/add-subtract-date-1.0.15.tgz",
-      "integrity": "sha512-MiL4wnMyM999meyCrSA3LME9uZ/b5ptSd0ACDVUoTfutFwvkMyIN7nG7gjrU56WEk5RlFLBghabcgdYwY8s+nQ=="
-    },
     "adjust-sourcemap-loader": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/adjust-sourcemap-loader/-/adjust-sourcemap-loader-4.0.0.tgz",
@@ -12081,11 +12076,6 @@
       "integrity": "sha512-39BOQLs9ZjKh0/patS9nrT8wc3ioX3/eA/zgbKNopnF2wCqJEoxywwwElATYvRsXdnOxA/OQeQoFZ3rFjVajhg==",
       "dev": true
     },
-    "days": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/days/-/days-1.1.1.tgz",
-      "integrity": "sha512-vzeIwVsEIyA35GH4+mPd4hjVDNI87wYANyZFs0BHjBr5kIBH5zEl7LfD6Wr4SFZca4D3CU9IH1w4DuZLlXzKRw=="
-    },
     "debounce-promise": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/debounce-promise/-/debounce-promise-3.1.2.tgz",
@@ -12430,15 +12420,6 @@
       "integrity": "sha512-1n7zWYh8eS0L9Uy+GskE0lkBUNK83cXTVJI0pU3mGprFsbfSdAc15VTFbo+A+Bq4pwstmL30AVcEU3Fo463lNg==",
       "dev": true
     },
-    "elly": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/elly/-/elly-1.1.11.tgz",
-      "integrity": "sha512-WFKVcEKEOjdSOhNYFKWQoJDk0Sb0re6v0fIsGkePn97dmPpKM/YoOKRdYIb34T1R13KPRNzDBDmT/Flb/54NXg==",
-      "requires": {
-        "iterate-object": "^1.3.2",
-        "sliced": "^1.0.1"
-      }
-    },
     "emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -12999,11 +12980,6 @@
         "to-regex-range": "^5.0.1"
       }
     },
-    "fillo": {
-      "version": "1.0.14",
-      "resolved": "https://registry.npmjs.org/fillo/-/fillo-1.0.14.tgz",
-      "integrity": "sha512-XLFFqNMeODV7pEH70lDla0SdOOW2T34X+2VmtCLWC1TyhtTEvX5IddIwBqlZhVb1K8bOOB0EuOM00FMZ+Njmtg=="
-    },
     "finalhandler": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
@@ -13093,17 +13069,6 @@
         }
       }
     },
-    "formatoid": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/formatoid/-/formatoid-1.2.4.tgz",
-      "integrity": "sha512-9wWHOPJvbIheSpiHGl0xaBwdszlzPaeh2KqHVexGQnKpO85xrMoKvuf6M3q0B4uC3I9lkXjH6+8ipQC8PQ/7Gw==",
-      "requires": {
-        "days": "^1.0.1",
-        "fillo": "^1.0.0",
-        "months": "^1.0.0",
-        "parse-it": "^1.0.0"
-      }
-    },
     "formdata-polyfill": {
       "version": "4.0.10",
       "resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz",
@@ -13262,30 +13227,6 @@
         "resolve-pkg-maps": "^1.0.0"
       }
     },
-    "github-calendar": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/github-calendar/-/github-calendar-2.3.2.tgz",
-      "integrity": "sha512-PZWDI4kcOG2vFCOUzLhUL5xA1Vu4ZF5qJ653CWyr/Q/8yLiTEDjNenhG7djlHoza9u/unnPtrhnHDiNLY9kTlQ==",
-      "requires": {
-        "add-subtract-date": "^1.0.15",
-        "elly": "^1.1.11",
-        "formatoid": "^1.2.4",
-        "github-calendar-parser": "^1.2.2"
-      }
-    },
-    "github-calendar-legend": {
-      "version": "1.0.11",
-      "resolved": "https://registry.npmjs.org/github-calendar-legend/-/github-calendar-legend-1.0.11.tgz",
-      "integrity": "sha512-V7AkszKw2fMeU+g6W5dQ7vDGzJ3giSaukdOUEdUqhcHhQDVYcQf7c0Q3korbQzJsh+Wh3MqyPtN+ZSAuEnHP2A=="
-    },
-    "github-calendar-parser": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/github-calendar-parser/-/github-calendar-parser-1.2.2.tgz",
-      "integrity": "sha512-lA47NHVu5lTH0kZf71W+NXhqr3hvsHLwMRqUxTNsopLDQNCQTAgyhzHwi5iJegq2cTTn4p1ZeqmHyt8RbbhPOw==",
-      "requires": {
-        "github-calendar-legend": "^1.0.11"
-      }
-    },
     "glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -14276,11 +14217,6 @@
         "istanbul-lib-report": "^3.0.0"
       }
     },
-    "iterate-object": {
-      "version": "1.3.4",
-      "resolved": "https://registry.npmjs.org/iterate-object/-/iterate-object-1.3.4.tgz",
-      "integrity": "sha512-4dG1D1x/7g8PwHS9aK6QV5V94+ZvyP4+d19qDv43EzImmrndysIl4prmJ1hWWIGCqrZHyaHBm6BSEWHOLnpoNw=="
-    },
     "jackspeak": {
       "version": "2.3.6",
       "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-2.3.6.tgz",
@@ -15178,11 +15114,6 @@
       "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
       "dev": true
     },
-    "months": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/months/-/months-1.2.0.tgz",
-      "integrity": "sha512-zFM7hUpziSYGk2DNObYGWgHdRRxAOgjl8CC1Rbl50p/q0rGDsREfk0nbxxmSIquVi/lEAuUY8nwbwkZ8biNCOQ=="
-    },
     "mrmime": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-1.0.1.tgz",
@@ -15266,6 +15197,14 @@
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
       "dev": true
     },
+    "ng2-fittext": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/ng2-fittext/-/ng2-fittext-1.4.0.tgz",
+      "integrity": "sha512-l6Vkq/3dRPXy5yJYmTBmHSWAFd7FCSxTP8iz+Jn+X5xmSaLoX0PTeI9Y4SQTa+K3tB28TrF7mXSdDKGaiutnFw==",
+      "requires": {
+        "tslib": "^2.3.0"
+      }
+    },
     "nice-napi": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/nice-napi/-/nice-napi-1.0.2.tgz",
@@ -15780,14 +15719,6 @@
       "integrity": "sha512-RmVuCHWsfu0QPNW+mraxh/xjQVw/lhUCUru8Zni3Ctq3AoMhpDTq0OVdKS6iesd6Kqb7viCV3isAL43dciOSog==",
       "dev": true
     },
-    "parse-it": {
-      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/parse-it/-/parse-it-1.0.10.tgz",
-      "integrity": "sha512-VAG4EuoNd2TT2wSRUuKyLEkZR3MhdWc+3UPp5CDQzqSt/FiniG+yJ5RXyJYiuzVAMEKL4d97gx6O3LR5jEB3uQ==",
-      "requires": {
-        "regex-escape": "^3.4.0"
-      }
-    },
     "parse-json": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
@@ -16388,11 +16319,6 @@
         "@babel/runtime": "^7.8.4"
       }
     },
-    "regex-escape": {
-      "version": "3.4.10",
-      "resolved": "https://registry.npmjs.org/regex-escape/-/regex-escape-3.4.10.tgz",
-      "integrity": "sha512-qEqf7uzW+iYcKNLMDFnMkghhQBnGdivT6KqVQyKsyjSWnoFyooXVnxrw9dtv3AFLnD6VBGXxtZGAQNFGFTnCqA=="
-    },
     "regex-parser": {
       "version": "2.2.11",
       "resolved": "https://registry.npmjs.org/regex-parser/-/regex-parser-2.2.11.tgz",
@@ -17120,11 +17046,6 @@
       "integrity": "sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==",
       "dev": true
     },
-    "sliced": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/sliced/-/sliced-1.0.1.tgz",
-      "integrity": "sha512-VZBmZP8WU3sMOZm1bdgTadsQbcscK0UM8oKxKVBs4XAhUo2Xxzm/OFMGBkPusxw9xL3Uy8LrzEqGqJhclsr0yA=="
-    },
     "smart-buffer": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz",

package.json

@@ -24,6 +24,7 @@
     "aws-cdk-lib": "^2.117.0",
     "constructs": "^10.3.0",
     "express": "^4.18.2",
+    "ng2-fittext": "^1.4.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.2"

src/app/button-cta/button-cta.component.html

@@ -1,4 +1,4 @@
-<a href="{{url}}" class="mr-2 text-lg px-12 py-4 rounded-full mt-4 font-bold
+<a href="{{url}}" class="mr-2 text-lg px-4 sm:px-12 py-4 rounded-full mt-4 font-bold
                         ring-white text-white bg-secondary ring-2
                         hover:ring-accent hover:text-accent hover:bg-transparent hover:ring-2">
   <ng-content></ng-content>

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

@@ -3,7 +3,7 @@
       <div class="text-2xl font-bold text-center self-center">
         <ng-content select="[left]"></ng-content>
       </div>
-      <div class="text-lg self-center">
+      <div class="self-center">
       <ng-content select="[center]"></ng-content>
       </div>
       <div class="self-center">

src/app/fish/fish.component.scss

@@ -23,8 +23,8 @@ svg.fish{
   width: 235px;
   height: 104px;
   left: -235px;
-  margin-top: 8rem;
   position: absolute;
+  opacity: 0.4;
   animation: swim 20s;
   -webkit-animation: swim 20s;
   animation-iteration-count: infinite;

src/app/footer/footer.component.html

@@ -1,8 +1,8 @@
-<div class="block bottom-0 bg-secondary w-full">
+<div class="bottom-0 min-h-[200px] bg-secondary w-full my-4 h-full grid grid-cols-1 content-end justify-end bg-slate-100 gap-8">
   <iov-fish></iov-fish>
   <iov-card [ctaUrl]="'mailto:thisloke@gmail.com'"
             [borderRounded]="false"
-              class="mr-8 ml-8 relative -top-12">
+              class="mr-8 ml-8 relative -top-12 hidden">
      <span left>
        <span class="text-accent"> Talk is cheap</span>
      </span>
@@ -13,7 +13,7 @@
         Let's Talk!
       </span>
     </iov-card>
-    <div class="text-right text-xs text-white p-4 leading-tight">
+    <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">

src/app/footer/footer.component.scss

@@ -0,0 +1,6 @@
+:host-context {
+  position: relative;
+  width: 100%;
+  display: block;
+  bottom: 0px;
+}

src/app/hero/hero.component.html

@@ -1,33 +1,38 @@
 <div class="bg-secondary">
-  <div class="relative px-6 pt-14 lg:px-8">
+  <div class="relative px-6 pt-0 lg:pt-14 lg:px-8">
-    <div class="mx-auto max-w-4xl py-32 sm:py-48 lg:py-56">
+    <div class="mx-auto max-w-4xl py-16 pb-32 sm:py-48 lg:py-56">
         <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"
+          <iov-ascii-photo [index]="1"
-                           id="asciiPhoto"
+                         id="asciiPhoto"
-                           class="absolute text-[5px] rounded-x-2xl leading-none tracking-tighter overflow-hidden"></iov-ascii-photo>
+                         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"
-               class="h-[279px]"
+               class="h-[279px] hidden sm:block "
                alt="" height="300" width="300">
-          <div class="self-center">
+          <div class="self-center pt-6 sm:pt-0">
-            <h1 class="text-4xl my-2 font-bold tracking-tight text-gray-900 sm:text-4xl">Hey, I'm Lorenzo!</h1>
+            <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>
             <div class="">
-              <h2 class="text-base leading-2 mr-4">
+              <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>.
                 <br>Here, on my personal website, I share my projects and occasional thoughts.
               </h2>
 
-              <div class="mt-4 text-base leading-2 mr-4">
+              <div class="mt-4 mx-4 sm:mx-0 text-sm sm:text-base leading-2 mr-4">
-                Explore more about me and feel free to reach out for any questions or collaborations via email
+                Explore more about me and feel free to reach out for any questions or collaborations via
                 <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/">
+                <div class="flex justify-center sm:justify-end h-[60px] mr-0 sm:mr-4">
-                  <img ngSrc="/assets/linkedin.svg" class="h-6 inline-block" alt="" height="30" width="30">
+                  <a class="mx-2 relative cursor-pointer" href="https://www.linkedin.com/in/lorenzoiovino/">
-                </a>
+                    <img ngSrc="/assets/linkedin.svg" class="h-6 sm:h-8 inline-block" alt="" height="30" width="30">
-                <a class="mx-1 relative cursor-pointer" href="
+                  </a>
-              https://github.com/lokenxo">
+                  <a class="mx-2 relative cursor-pointer" href="
-                  <img ngSrc="/assets/github.svg" class="h-6 inline-block" alt="" height="30" width="30">
+              https://github.com/thisloke">
-                </a>
+                    <img ngSrc="/assets/github.svg" class="h-6 sm:h-8 inline-block" alt="" height="30" width="30">
+                  </a>
+                </div>
               <div>
             </div>
             </div>

src/app/hero/hero.component.ts

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

src/app/menu/menu.component.html

@@ -1,14 +1,16 @@
-<nav class="flex items-center justify-between flex-wrap bg-teal-500 p-6">
+<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'}}">
     <span class="font-semibold text-xl tracking-tight">
       <a href="/">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-4 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 text-teal-200 hover:text-white mr-4 {{router.url == '/biography' ? 'text-white' : 'text-neutral'}}">
       Bio
     </a>
+        </span>
     <!--<a href="portfolio" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">
       Portfolio
     </a>-->

src/app/page/page.component.html

@@ -1,4 +1,4 @@
-<div class="relative">
+<div class="relative bg-white">
   <div class="mx-auto pb-24">
     <router-outlet></router-outlet>
   </div>

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

@@ -1,6 +1,6 @@
 <iov-section [title]="'About me'"
              [titleColor]="'light'"
-             [backgroundImageUrl]="'/assets/cloud.JPG'">
+             [backgroundImageUrl]="'/assets/cat.jpg'">
   <div class="mb-10">
     <h2 class="font-bold text-4xl mt-8 mb-4">Hello world!</h2>
     <p class="text-lg">

src/index.html

@@ -7,7 +7,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
-<body>
+<body class="bg-secondary">
   <iov-root></iov-root>
 </body>
 </html>