feat: implement dark mode with theme toggle

- 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)

src/pages/bio.astro

@@ -20,33 +20,34 @@ if (!bioEntry) {
 const { Content } = await bioEntry.render();
 ---
 
-<BaseLayout
-	title="Lorenzo Iovino >> Bio"
-	description="Biography and life story of Lorenzo Iovino"
->
+<BaseLayout title="Lorenzo Iovino >> Bio" description="Biography and life story of Lorenzo Iovino">
 	<Navbar />
-	<div class="min-h-screen pt-16 bg-secondary">
+	<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 mb-4">{bioEntry.data.title}</h1>
-				<p class="text-xl text-gray-700 max-w-2xl mx-auto">
+				<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 rounded-full mx-auto mt-6"></div>
+				<div class="h-1 w-20 bg-gray-600 dark:bg-primary rounded-full mx-auto mt-6"></div>
 			</div>
 
-			<div class="bg-white rounded-2xl shadow-soft-lg p-8 md:p-12 lg:p-16">
+			<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 rounded-2xl shadow-soft-lg p-10 md:p-14 lg:p-16 text-center border border-gray-100"
+				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 mb-6">Let's Connect!</h3>
+				<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 text-xl md:text-2xl leading-relaxed mb-10 max-w-3xl mx-auto font-light"
+					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!
@@ -56,7 +57,7 @@ const { Content } = await bioEntry.render();
 						href="https://www.linkedin.com/in/lorenzoiovino/"
 						target="_blank"
 						rel="noopener noreferrer"
-						class="inline-flex items-center px-10 py-5 bg-white hover:bg-gray-50 text-gray-700 font-semibold text-lg rounded-xl transition-all duration-200 shadow-lg hover:shadow-xl border-2 border-gray-200 hover:border-gray-300 transform hover:-translate-y-1 hover:scale-105"
+						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}
@@ -71,15 +72,9 @@ const { Content } = await bioEntry.render();
 						href="https://github.com/thisloke"
 						target="_blank"
 						rel="noopener noreferrer"
-						class="inline-flex items-center px-10 py-5 bg-white hover:bg-gray-50 text-gray-700 font-semibold text-lg rounded-xl transition-all duration-200 shadow-lg hover:shadow-xl border-2 border-gray-200 hover:border-gray-300 transform hover:-translate-y-1 hover:scale-105"
+						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}
-						/>
+						<Image src={githubIcon} alt="" class="h-6 w-6 mr-3 opacity-80" width={24} height={24} />
 						GitHub
 					</a>
 				</div>