From 3ea3bae29a4c4be448dcfd1c31a46500c56ef6e1 Mon Sep 17 00:00:00 2001
From: Lorenzo Iovino <thisloke@gmail.com>
Date: Fri, 12 Jan 2024 12:13:05 +0100
Subject: [PATCH] Add style home

---
 src/app/app.component.html           | 14 +++++----
 src/app/footer/footer.component.html | 25 +++++++++-------
 src/app/footer/footer.component.scss |  1 -
 src/app/hero/hero.component.html     | 43 ++++++++++++++--------------
 src/app/pages/home/home.page.html    |  2 +-
 5 files changed, 46 insertions(+), 39 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index c956840..9e6be54 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,6 +1,8 @@
-<header class="inset-x-0 top-0 z-50 bg-secondary">
-  <iov-menu></iov-menu>
-</header>
-<router-outlet>
-</router-outlet>
-<iov-footer></iov-footer>
+<div class="flex flex-col h-screen justify-between">
+  <header class="inset-x-0 top-0 z-50 bg-secondary">
+    <iov-menu></iov-menu>
+  </header>
+  <router-outlet>
+  </router-outlet>
+  <iov-footer></iov-footer>
+</div>
diff --git a/src/app/footer/footer.component.html b/src/app/footer/footer.component.html
index e801e6a..838c7e2 100644
--- a/src/app/footer/footer.component.html
+++ b/src/app/footer/footer.component.html
@@ -1,4 +1,4 @@
-<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">
+<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">
   <iov-fish></iov-fish>
   <iov-card [ctaUrl]="'mailto:thisloke@gmail.com'"
             [borderRounded]="false"
@@ -14,12 +14,18 @@
       </span>
     </iov-card>
   <div class="flex justify-between self-end">
-    <div class="text-left text-xs text-white p-4 leading-none sm:leading-tight self-end">
-      <div class="">Lorenzo Iovino</div>
-      <a href="https://www.iubenda.com/privacy-policy/98687046" class="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>
-      <a href="https://www.iubenda.com/privacy-policy/98687046/cookie-policy" class="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 class="text-right text-xs text-white p-4 leading-none sm:leading-tight relative self-end">
+    <div class="text-left text-white p-4 leading-none sm:leading-tight flex flex-col z-10">
+      <div class="mx-2 my-1 font-bold">Lorenzo Iovino</div>
+      <div class="flex my-2">
+        <div class="mx-2">
+        <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>
+        <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="">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" loading="lazy">
@@ -29,9 +35,8 @@
           <img class="h-6 w-6 mx-1 inline-grid" ngSrc="/assets/tailwind.svg" height="16" width="16" loading="lazy">
         </a>
         <br/>
-        <br/>
-        <a href="https://github.com/thisloke/loreiov.com">
-          Check the source code <img ngSrc="/assets/github.svg" class="h-6 w-6 mx-1 inline-block" alt="" height="800"
+        <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>
       </div>
     </div>
diff --git a/src/app/footer/footer.component.scss b/src/app/footer/footer.component.scss
index f49ea9a..aeae591 100644
--- a/src/app/footer/footer.component.scss
+++ b/src/app/footer/footer.component.scss
@@ -2,5 +2,4 @@
   position: relative;
   width: 100%;
   display: block;
-  bottom: -2rem;
 }
diff --git a/src/app/hero/hero.component.html b/src/app/hero/hero.component.html
index aec9cb5..efb2254 100644
--- a/src/app/hero/hero.component.html
+++ b/src/app/hero/hero.component.html
@@ -1,7 +1,7 @@
 <div class="bg-secondary">
-  <div class="relative px-6 pt-0 lg:pt-14 lg:px-8">
-    <div class="mx-auto max-w-4xl py-16 pb-32 sm:py-48 lg:pt-32 lg:pb-58">
-        <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]">
+  <div class="relative px-6 lg:px-8">
+    <div class="mx-auto max-w-6xl">
+        <div class="flex rounded-2xl text-base leading-6 text-gray-600 border-l-8 border-primary hover:ring-gray-900/20 overflow-hidden bg-white items-end">
           <iov-ascii-photo [index]="1"
                          id="asciiPhoto"
                          class="hidden sm:block absolute text-[5px] rounded-x-2xl leading-none tracking-tighter overflow-hidden"></iov-ascii-photo>
@@ -10,34 +10,35 @@
                class="h-[279px] hidden sm:block "
                alt="" height="300" width="300"
                loading="lazy">
-          <div class="self-center pt-6 sm:pt-0">
+          <div class="self-center pt-6 sm:pt-0 mx-2 sm:mx-0 ">
             <img ngSrc="/assets/photos/me.png"
-                 class="h-[120px] sm:hidden block float-left"
-                 alt="" height="120" width="120"
+                 class="h-[180px] sm:hidden block float-left"
+                 alt="" height="180" width="180"
                  loading="lazy">
-            <h1 class="text-2xl font-bold 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-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>.
+            <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>
+            <div class="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-center sm: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="mt-4 mx-4 sm:mx-0 text-sm sm:text-base leading-2 mr-4">
+              <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">
                 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>
+                <a class="cursor-pointer underline text-primary hover:text-accent drop-shadow-sm" href="mailto:thisloke@gmail.com">email</a>
                 or on socials!
-                <div class="flex justify-center sm:justify-end h-[60px] mr-0 sm:mr-4">
-                  <a class="mx-2 relative cursor-pointer" href="https://www.linkedin.com/in/lorenzoiovino/">
-                    <img ngSrc="/assets/linkedin.svg" class="h-6 sm:h-8 inline-block" alt="" height="30" width="30" loading="lazy">
-                  </a>
-                  <a class="mx-2 relative cursor-pointer" href="
-              https://github.com/thisloke">
-                    <img ngSrc="/assets/github.svg" class="h-6 sm:h-8 inline-block" alt="" height="30" width="30" loading="lazy">
-                  </a>
-                </div>
               <div>
             </div>
             </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">
+                </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">
+                </a>
+              </div>
             </div>
           </div>
       </div>
diff --git a/src/app/pages/home/home.page.html b/src/app/pages/home/home.page.html
index ccc943a..718a5e7 100644
--- a/src/app/pages/home/home.page.html
+++ b/src/app/pages/home/home.page.html
@@ -1,4 +1,4 @@
-<div class="bg-secondary mx-auto my-auto">
+<div class="bg-secondary mx-auto my-auto -mt-12">
   <iov-hero class="mb-12"></iov-hero>
 </div>