Lorenzo Iovino
049c20a4b2
- Configure content collections to use image() helper for type-safe image references - Replace all <img> tags with <Image> component from astro:assets - Migrate images from /public to /src/assets for automatic optimization - Update blog posts to use relative paths in frontmatter (../../assets/photos/) - Remove unused images and duplicates from /public folder - Update Footer component to use optimized SVG icons - Clean up manifest.json to use favicon.ico instead of deleted photos Performance improvements: - remote.jpg: 1.8MB → 128KB (93% reduction) - me.png: 71KB → 12KB (83% reduction) - Automatic WebP conversion - Tree-shaking: only used images are optimized /public folder reduced from 2.3MB to 32KB (only essential files) Build output: 2.2MB with fully optimized images ready for S3 deployment
95 lines
3.3 KiB
Text
95 lines
3.3 KiB
Text
---
|
|
import { Image } from "astro:assets";
|
|
import mePhoto from "../assets/photos/me.png";
|
|
import linkedinIcon from "../assets/linkedin.svg";
|
|
import githubIcon from "../assets/github.svg";
|
|
---
|
|
|
|
<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">
|
|
<Image
|
|
src={mePhoto}
|
|
alt="Photo of Lorenzo Iovino"
|
|
class="w-48 h-auto md:w-full object-cover object-center"
|
|
width={300}
|
|
height={300}
|
|
quality={90}
|
|
format="webp"
|
|
/>
|
|
<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"
|
|
>
|
|
<Image
|
|
src={linkedinIcon}
|
|
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"
|
|
>
|
|
<Image
|
|
src={githubIcon}
|
|
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>
|