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

Add style home

Browse source
This commit is contained in:
Lorenzo Iovino 2024-01-12 12:13:05 +01:00
parent 34f44930cd
commit 3ea3bae29a
5 changed files with 46 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/app/app.component.html
View file

@ -1,6 +1,8 @@
<div class="flex flex-col h-screen justify-between">
<header class="inset-x-0 top-0 z-50 bg-secondary"> <header class="inset-x-0 top-0 z-50 bg-secondary">
<iov-menu></iov-menu> <iov-menu></iov-menu>
</header> </header>
<router-outlet> <router-outlet>
</router-outlet> </router-outlet>
<iov-footer></iov-footer> <iov-footer></iov-footer>
</div>

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

@ -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-fish></iov-fish>
<iov-card [ctaUrl]="'mailto:thisloke@gmail.com'" <iov-card [ctaUrl]="'mailto:thisloke@gmail.com'"
[borderRounded]="false" [borderRounded]="false"
@ -14,12 +14,18 @@
</span> </span>
</iov-card> </iov-card>
<div class="flex justify-between self-end"> <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="text-left text-white p-4 leading-none sm:leading-tight flex flex-col z-10">
<div class="">Lorenzo Iovino</div> <div class="mx-2 my-1 font-bold">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> <div class="flex my-2">
<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 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>
<div class="text-right text-xs text-white p-4 leading-none sm:leading-tight relative self-end"> <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 <div class="">Made with Angular
<a href="https://angular.io/"> <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">
@ -29,9 +35,8 @@
<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">
</a> </a>
<br/> <br/>
<br/> <a href="https://github.com/thisloke/loreiov.com" class="hover:text-accent">
<a href="https://github.com/thisloke/loreiov.com"> Check the source code <img ngSrc="/assets/github.svg" class="h-6 w-6 mx-1 my-1 inline-block" alt="" height="800"
Check the source code <img ngSrc="/assets/github.svg" class="h-6 w-6 mx-1 inline-block" alt="" height="800"
width="800" loading="lazy"></a> width="800" loading="lazy"></a>
</div> </div>
</div> </div>

1
src/app/footer/footer.component.scss
View file

@ -2,5 +2,4 @@
position: relative; position: relative;
width: 100%; width: 100%;
display: block; display: block;
bottom: -2rem;
} }

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

@ -1,7 +1,7 @@
<div class="bg-secondary"> <div class="bg-secondary">
<div class="relative px-6 pt-0 lg:pt-14 lg:px-8"> <div class="relative px-6 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="mx-auto max-w-6xl">
<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="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" <iov-ascii-photo [index]="1"
id="asciiPhoto" id="asciiPhoto"
class="hidden sm:block 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>
@ -10,34 +10,35 @@
class="h-[279px] hidden sm:block " class="h-[279px] hidden sm:block "
alt="" height="300" width="300" alt="" height="300" width="300"
loading="lazy"> 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" <img ngSrc="/assets/photos/me.png"
class="h-[120px] sm:hidden block float-left" class="h-[180px] sm:hidden block float-left"
alt="" height="120" width="120" alt="" height="180" width="180"
loading="lazy"> 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> <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=""> <div class="mr-8">
<h2 class="text-sm mx-4 sm:mx-0 sm:text-base leading-2 mr-4"> <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">Software Engineer</span>. 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. <br>Here, on my personal website, I share my projects and occasional thoughts.
</h2> </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 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! 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>
</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> </div>
</div> </div>

2
src/app/pages/home/home.page.html
View file

@ -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> <iov-hero class="mb-12"></iov-hero>
</div> </div>