Add style home and bio

src/app/footer/footer.component.html

@@ -1,4 +1,4 @@
-<div class="bottom-0 min-h-[200px] bg-secondary w-full h-full grid grid-cols-1 content-end justify-end bg-slate-100 gap-8">
+<div class="bottom-0 bg-secondary pt-12 w-full 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"
@@ -13,28 +13,26 @@
         Let's Talk!
       </span>
     </iov-card>
-  <div class="flex justify-between self-end">
+  <div class="flex justify-between self-end flex-col-reverse sm:flex-row">
-    <div class="text-left text-white p-4 leading-none sm:leading-tight flex flex-col z-10">
+    <div class="text-center sm:text-left text-white p-0 sm:p-4 leading-none sm:leading-tight flex flex-col z-10 text-sm sm:text-sm justify-end items-center sm:items-start">
-      <div class="mx-2 my-1 font-bold">Lorenzo Iovino</div>
+      <div class="flex my-2 flex-wrap w-max">
-      <div class="flex my-2">
         <div class="mx-2">
+          <span class="italic mr-1">Lorenzo Iovino</span> |
+        </div>
         <a href="https://www.iubenda.com/privacy-policy/98687046" class="hover:text-accent iubenda-white iubenda-noiframe iubenda-embed iubenda-noiframe" title="Privacy Policy ">Privacy Policy</a><script type="text/javascript">(function (w,d) {var loader = function () {var s = d.createElement("script"), tag = d.getElementsByTagName("script")[0]; s.src="https://cdn.iubenda.com/iubenda.js"; tag.parentNode.insertBefore(s,tag);}; if(w.addEventListener){w.addEventListener("load", loader, false);}else if(w.attachEvent){w.attachEvent("onload", loader);}else{w.onload = loader;}})(window, document);</script>
-        </div>
+        <a href="https://www.iubenda.com/privacy-policy/98687046/cookie-policy" class="ml-2 hover:text-accent iubenda-white iubenda-noiframe iubenda-embed iubenda-noiframe " title="Cookie Policy ">Cookie Policy</a><script type="text/javascript">(function (w,d) {var loader = function () {var s = d.createElement("script"), tag = d.getElementsByTagName("script")[0]; s.src="https://cdn.iubenda.com/iubenda.js"; tag.parentNode.insertBefore(s,tag);}; if(w.addEventListener){w.addEventListener("load", loader, false);}else if(w.attachEvent){w.attachEvent("onload", loader);}else{w.onload = loader;}})(window, document);</script>
-        <div class="mx-2">
-          <a href="https://www.iubenda.com/privacy-policy/98687046/cookie-policy" class="hover:text-accent iubenda-white iubenda-noiframe iubenda-embed iubenda-noiframe " title="Cookie Policy ">Cookie Policy</a><script type="text/javascript">(function (w,d) {var loader = function () {var s = d.createElement("script"), tag = d.getElementsByTagName("script")[0]; s.src="https://cdn.iubenda.com/iubenda.js"; tag.parentNode.insertBefore(s,tag);}; if(w.addEventListener){w.addEventListener("load", loader, false);}else if(w.attachEvent){w.attachEvent("onload", loader);}else{w.onload = loader;}})(window, document);</script>
-        </div>
       </div>
       </div>
-    <div class="text-right text-sm text-white p-4 leading-none sm:leading-tight relative mx-2">
+    <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 Angular
+      <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">
         </a>
-        and TailwindCSS
+        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">
         </a>
-        <br/>
+        <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>

src/app/hero/hero.component.html

@@ -11,19 +11,22 @@
                alt="" height="300" width="300"
                loading="lazy">
           <div class="self-center pt-6 sm:pt-0 mx-2 sm:mx-0 ">
-            <img ngSrc="/assets/photos/me.png"
+            <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>
-                 class="h-[180px] sm:hidden block float-left"
+            <div class="flex justify-center">
-                 alt="" height="180" width="180"
+              <img ngSrc="/assets/photos/me.png"
-                 loading="lazy">
+                   class="sm:hidden block clear-both"
-            <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">Hey, I'm Lorenzo!</h1>
+                   alt=""
-            <div class="mr-8">
+                   loading="lazy" height="300" width="300">
-              <h2 class="text-lg mr-4 ml-4 sm:ml-0 sm:mx-4 sm:text-xl leading-2 sm:mr-24 mt-4 sm:mt-0 text-center sm:text-left">
+            </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">
+              <h2 class="text-lg mr-4 ml-4 sm:ml-0 sm:mx-4 sm:text-xl leading-2 sm:mr-24 mt-4 sm:mt-0 text-left">
                 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 drop-shadow-sm">Software Engineer</span>.
                 <br>Here, on my personal website, I share my projects and occasional thoughts.
               </h2>
 
-              <div class="text-lg mt-4 ml-4 sm:ml-0 mr-4 sm:mx-4 sm:text-xl leading-2 sm:mr-24 text-center sm:text-left">
+              <div class="text-lg mt-4 ml-4 sm:ml-0 mr-4 sm:mx-4 sm:text-xl leading-2 sm:mr-24 text-left">
                 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 drop-shadow-sm" href="mailto:thisloke@gmail.com">email</a>
                 or on socials!

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

@@ -16,14 +16,14 @@
     <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">
+      <div class="float-right mt-4 mb-2 sm:ml-8 w-60 sm:w-72">
-        <img ngSrc="/assets/photos/me-baby.jpg" alt="Super young software developer with an Apple II" class="w-64 rounded-2xl shadow-lg"
+        <img ngSrc="/assets/photos/me-baby.jpg" alt="Super young software developer with an Apple II" class="w-full sm:w-72 rounded-2xl shadow-lg"
              height="1415" width="1001" loading="lazy"/>
-        <em class="text-sm">Super young software developer with an Apple II</em>
+        <em class="text-sm leading-none">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/>
+      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/>
       <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="339" width="339" loading="lazy"/>
@@ -47,8 +47,8 @@
     <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">
+      <div class="float-right mt-4 mb-2 ml-8 w-60 sm:w-auto">
-        <img ngSrc="/assets/photos/me-cc.jpg" alt="Me in Pisa" class="w-64 rounded-2xl shadow-lg"
+        <img ngSrc="/assets/photos/me-cc.jpg" alt="Me in Pisa" class="w-full sm:w-64 rounded-2xl shadow-lg"
              height="1280" width="960" loading="lazy"/>
         <em class="text-sm">Me burning out studying Computability and <br/>Complexity exam</em>
       </div>
@@ -59,8 +59,8 @@
       <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">
+      <div class="float-left mt-4 mb-2 mr-8 w-full sm:w-auto">
-        <img ngSrc="/assets/photos/goliardia.jpg" alt="My goliardo" class="w-64 rounded-2xl shadow-lg"
+        <img ngSrc="/assets/photos/goliardia.jpg" alt="My goliardo" class="w-full sm:w-64 rounded-2xl shadow-lg"
              height="384" width="512" loading="lazy"/>
         <em class="text-sm">My student hat (that's not an hat) "goliardo"</em>
       </div>
@@ -95,12 +95,12 @@
     <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">
+      <div class="mb-2 mt-4 mx-0 sm: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" 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/>
+      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/>
       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>
@@ -110,8 +110,8 @@
     <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">
+      <div class="mb-2 mt-4 mr-8 float-left w-full sm:w-auto">
-        <img ngSrc="/assets/photos/remote.jpg" alt="Remote working" class="w-64 rounded-2xl shadow-lg"
+        <img ngSrc="/assets/photos/remote.jpg" alt="Remote working" class="w-full sm:w-64 rounded-2xl shadow-lg"
              height="2160" width="3840" loading="lazy"/>
         <em class="text-sm">Working remote watching the sea</em>
       </div>
@@ -120,7 +120,7 @@
       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">
+      <div class="mb-2 mt-4 w-full sm:w-auto">
         <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" loading="lazy"/>
         <em class="text-sm">My wineyard</em>
@@ -139,7 +139,7 @@
       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">
+      <div class="mb-2 mt-4 w-full sm:w-auto">
         <img ngSrc="/assets/photos/modica.jpg" alt="Modica view" class="w-full h-80 rounded-2xl shadow-lg"
              height="2160" width="3840" loading="lazy"/>
         <em class="text-sm">Modica view from my house</em>
@@ -153,7 +153,7 @@
       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">
+      <div class="mb-2 mt-4 w-full sm:w-auto">
         <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" loading="lazy"/>
         <em class="text-sm">Me and my wife Amanda</em>

src/app/pages/home/home.page.html

@@ -1,4 +1,4 @@
-<div class="bg-secondary mx-auto my-auto -mt-12">
+<div class="bg-secondary mx-auto my-auto mt-0 sm:-mt-12">
   <iov-hero class="mb-12"></iov-hero>
 </div>
 

src/index.html

@@ -3,7 +3,7 @@
 <head>
   <script type="text/javascript">
     var _iub = _iub || [];
-    _iub.csConfiguration = {"askConsentAtCookiePolicyUpdate":true,"cookiePolicyInOtherWindow":true,"enableFadp":true,"fadpApplies":true,"floatingPreferencesButtonDisplay":"anchored-center-left","lang":"en","perPurposeConsent":true,"siteId":3452245,"whitelabel":false,"cookiePolicyId":98687046, "banner":{ "acceptButtonCaptionColor":"#FFFFFF","acceptButtonColor":"#0073CE","acceptButtonDisplay":true,"backgroundColor":"#FFFFFF","closeButtonDisplay":false,"customizeButtonCaptionColor":"#4D4D4D","customizeButtonColor":"#DADADA","customizeButtonDisplay":true,"explicitWithdrawal":true,"listPurposes":true,"position":"float-bottom-left","rejectButtonCaptionColor":"#FFFFFF","rejectButtonColor":"#0073CE","rejectButtonDisplay":true,"showPurposesToggles":true,"showTitle":false,"textColor":"#000000" }};
+    _iub.csConfiguration = {"askConsentAtCookiePolicyUpdate":true,"cookiePolicyInOtherWindow":true,"enableFadp":true,"fadpApplies":true,"floatingPreferencesButtonDisplay":"anchored-center-right","lang":"en","perPurposeConsent":true,"siteId":3452245,"whitelabel":false,"cookiePolicyId":98687046, "banner":{ "acceptButtonCaptionColor":"#FFFFFF","acceptButtonColor":"#0073CE","acceptButtonDisplay":true,"backgroundColor":"#FFFFFF","closeButtonDisplay":false,"customizeButtonCaptionColor":"#4D4D4D","customizeButtonColor":"#DADADA","customizeButtonDisplay":true,"explicitWithdrawal":true,"listPurposes":true,"position":"float-center","rejectButtonCaptionColor":"#FFFFFF","rejectButtonColor":"#0073CE","rejectButtonDisplay":true,"showPurposesToggles":true,"showTitle":false,"textColor":"#000000" }};
   </script>
   <script type="text/javascript" src="https://cs.iubenda.com/autoblocking/3452245.js"></script>
   <script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>