Lorenzo Iovino
df04844ca2
- Add dark mode support across all components and pages - Implement theme toggle button in navbar (desktop and mobile) - Fix desktop theme toggle icon visibility issue - Add dark mode color variants to all text, backgrounds and components - Update Tailwind config to enable class-based dark mode - Add dark mode support to prose styles for blog content - Persist theme preference in localStorage - Update all pages (index, bio, blog) with dark mode colors - Optimize images (me.png and me-baby.jpg)
85 lines
3.4 KiB
Text
85 lines
3.4 KiB
Text
---
|
|
import type { CollectionEntry } from "astro:content";
|
|
import { getEntry } from "astro:content";
|
|
import { Image } from "astro:assets";
|
|
import Footer from "../components/Footer.astro";
|
|
import Navbar from "../components/Navbar.astro";
|
|
import BaseLayout from "../layouts/BaseLayout.astro";
|
|
import "../styles/prose.css";
|
|
import linkedinIcon from "../assets/linkedin.svg";
|
|
import githubIcon from "../assets/github.svg";
|
|
|
|
type BioEntry = CollectionEntry<"bio">;
|
|
|
|
const bioEntry: BioEntry | undefined = await getEntry("bio", "my-story");
|
|
|
|
if (!bioEntry) {
|
|
throw new Error("Bio entry not found");
|
|
}
|
|
|
|
const { Content } = await bioEntry.render();
|
|
---
|
|
|
|
<BaseLayout title="Lorenzo Iovino >> Bio" description="Biography and life story of Lorenzo Iovino">
|
|
<Navbar />
|
|
<div class="min-h-screen pt-16 bg-secondary dark:bg-gray-900 transition-colors duration-200">
|
|
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-20">
|
|
<div class="mb-16 text-center">
|
|
<h1 class="text-gray-800 dark:text-gray-100 mb-4">{bioEntry.data.title}</h1>
|
|
<p class="text-xl text-gray-700 dark:text-gray-300 max-w-2xl mx-auto">
|
|
{bioEntry.data.description}
|
|
</p>
|
|
<div class="h-1 w-20 bg-gray-600 dark:bg-primary rounded-full mx-auto mt-6"></div>
|
|
</div>
|
|
|
|
<div
|
|
class="bg-white dark:bg-gray-800 rounded-2xl shadow-soft-lg p-8 md:p-12 lg:p-16 transition-colors duration-200"
|
|
>
|
|
<div class="prose prose-xl max-w-none">
|
|
<Content />
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="mt-16 bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-700 rounded-2xl shadow-soft-lg p-10 md:p-14 lg:p-16 text-center border border-gray-100 dark:border-gray-600 transition-colors duration-200"
|
|
>
|
|
<h3 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-100 mb-6">
|
|
Let's Connect!
|
|
</h3>
|
|
<p
|
|
class="text-gray-700 dark:text-gray-300 text-xl md:text-2xl leading-relaxed mb-10 max-w-3xl mx-auto font-light"
|
|
>
|
|
I'm always excited to connect with fellow developers, discuss interesting projects, or
|
|
just have a chat about technology and life. Feel free to reach out!
|
|
</p>
|
|
<div class="flex flex-wrap gap-5 justify-center">
|
|
<a
|
|
href="https://www.linkedin.com/in/lorenzoiovino/"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="inline-flex items-center px-10 py-5 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-200 font-semibold text-lg rounded-xl transition-all duration-200 shadow-lg hover:shadow-xl border-2 border-gray-200 dark:border-gray-600 hover:border-gray-300 dark:hover:border-gray-500 transform hover:-translate-y-1 hover:scale-105"
|
|
>
|
|
<Image
|
|
src={linkedinIcon}
|
|
alt=""
|
|
class="h-6 w-6 mr-3 opacity-80"
|
|
width={24}
|
|
height={24}
|
|
/>
|
|
LinkedIn
|
|
</a>
|
|
<a
|
|
href="https://github.com/thisloke"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="inline-flex items-center px-10 py-5 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-200 font-semibold text-lg rounded-xl transition-all duration-200 shadow-lg hover:shadow-xl border-2 border-gray-200 dark:border-gray-600 hover:border-gray-300 dark:hover:border-gray-500 transform hover:-translate-y-1 hover:scale-105"
|
|
>
|
|
<Image src={githubIcon} alt="" class="h-6 w-6 mr-3 opacity-80" width={24} height={24} />
|
|
GitHub
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Footer />
|
|
</BaseLayout>
|