Feat WIP responsive layout

This commit is contained in:
Lorenzo Iovino 2024-01-10 05:10:45 +01:00
parent dcfcb09c16
commit 191719918a
13 changed files with 53 additions and 116 deletions

View file

@ -1,33 +1,38 @@
<div class="bg-secondary">
<div class="relative px-6 pt-14 lg:px-8">
<div class="mx-auto max-w-4xl py-32 sm:py-48 lg:py-56">
<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: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"
id="asciiPhoto"
class="absolute text-[5px] rounded-x-2xl leading-none tracking-tighter overflow-hidden"></iov-ascii-photo>
<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>
<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">
<h1 class="text-4xl my-2 font-bold tracking-tight text-gray-900 sm:text-4xl">Hey, I'm Lorenzo!</h1>
<div class="self-center pt-6 sm:pt-0">
<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">
Explore more about me and feel free to reach out for any questions or collaborations via email
<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
<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 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 ngSrc="/assets/github.svg" class="h-6 inline-block" alt="" height="30" width="30">
</a>
<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">
</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">
</a>
</div>
<div>
</div>
</div>