BREAKING CHANGE: Complete rewrite from Angular SPA to Astro - Replace Angular 18 with Astro 5.16.7 + Tailwind CSS - Convert all Angular components to Astro components - Add content collections for blog with markdown support - Setup S3 deployment with CloudFront invalidation - Add RSS feed and sitemap generation - Configure Prettier and Biome for code formatting - Switch from npm to pnpm - Remove Amplify backend (now fully static) - Improve SEO and performance with static generation
90 lines
3 KiB
Text
90 lines
3 KiB
Text
---
|
|
|
|
---
|
|
|
|
<div class="w-full">
|
|
<div class="relative px-6 lg:px-8">
|
|
<div class="mx-auto max-w-5xl">
|
|
<div
|
|
class="relative overflow-hidden rounded-3xl bg-white shadow-soft-lg hover:shadow-soft-lg transition-shadow duration-300"
|
|
>
|
|
<div class="relative flex flex-col md:flex-row items-center md:items-end">
|
|
<!-- Photo Section -->
|
|
<div class="w-full md:w-auto flex-shrink-0 order-2 md:order-none">
|
|
<div class="relative overflow-hidden md:rounded-l-3xl flex justify-center md:block">
|
|
<img
|
|
src="/photos/me.png"
|
|
alt="Photo of Lorenzo Iovino"
|
|
class="w-48 h-auto md:w-full object-cover object-center"
|
|
width="300"
|
|
height="300"
|
|
/>
|
|
<div class="absolute inset-0 to-transparent md:bg-gradient-to-r"></div>
|
|
<div class="absolute inset-0 to-transparent md:bg-gradient-to-r"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content Section -->
|
|
<div class="flex-1 p-6 md:p-12 flex flex-col justify-center order-1 md:order-none">
|
|
<div class="space-y-4 md:space-y-6">
|
|
<!-- Greeting -->
|
|
<div class="text-center md:text-left">
|
|
<h1 class="mb-3">
|
|
Hey, I'm <span class="text-gray-900 font-extrabold">Lorenzo</span>!
|
|
</h1>
|
|
<div class="h-1 w-20 bg-secondary rounded-full mx-auto md:mx-0"></div>
|
|
</div>
|
|
|
|
<!-- Description -->
|
|
<div class="space-y-3 md:space-y-4">
|
|
<p class="text-base md:text-lg text-gray-700">
|
|
I'm on a quest to uncover life's meaning while diving deep into my passion for
|
|
Computer Science as a
|
|
<span class="font-semibold text-gray-900 relative inline-block">
|
|
Software Engineer
|
|
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-secondary"></span>
|
|
</span>
|
|
</p>
|
|
<p class="text-sm md:text-lg text-gray-600">
|
|
Here, on my personal website, I share my projects and occasional thoughts.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Social Links -->
|
|
<div class="flex gap-3 md:gap-4 pt-2 justify-center md:justify-end">
|
|
<a
|
|
href="https://www.linkedin.com/in/lorenzoiovino/"
|
|
class="group relative p-3 bg-gray-50 hover:bg-secondary/10 rounded-xl transition-all duration-200 transform hover:-translate-y-1"
|
|
aria-label="LinkedIn"
|
|
>
|
|
<img
|
|
src="/linkedin.svg"
|
|
alt="LinkedIn"
|
|
class="h-6 w-6 opacity-70 group-hover:opacity-100 transition-opacity"
|
|
width="24"
|
|
height="24"
|
|
loading="lazy"
|
|
/>
|
|
</a>
|
|
<a
|
|
href="https://github.com/thisloke"
|
|
class="group relative p-3 bg-gray-50 hover:bg-secondary/10 rounded-xl transition-all duration-200 transform hover:-translate-y-1"
|
|
aria-label="GitHub"
|
|
>
|
|
<img
|
|
src="/github.svg"
|
|
alt="GitHub"
|
|
class="h-6 w-6 opacity-70 group-hover:opacity-100 transition-opacity"
|
|
width="24"
|
|
height="24"
|
|
loading="lazy"
|
|
/>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|