featmigrate from Angular to Astro static site

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
2026-01-08 16:46:17 +01:00 · 2026-01-08 16:46:17 +01:00 · 69d5850f5b
commit 69d5850f5b
parent cda19e8624
191 changed files with 7821 additions and 21755 deletions
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@ -0,0 +1,111 @@
+---
+const currentPath = Astro.url.pathname;
+---
+
+<nav class="fixed top-0 left-0 right-0 z-50 bg-secondary shadow-sm">
+	<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+		<div class="flex justify-between items-center h-16">
+			<!-- Logo/Brand -->
+			<a
+				href="/"
+				class="text-xl font-bold text-white hover:text-gray-100 transition-colors duration-200"
+			>
+				Lorenzo Iovino
+			</a>
+
+			<!-- Desktop Navigation -->
+			<div class="hidden md:flex items-center space-x-8">
+				<a
+					href="/"
+					class={`text-sm font-medium transition-colors duration-200 ${
+						currentPath === "/" ? "text-white font-semibold" : "text-white/80 hover:text-white"
+					}`}
+				>
+					Home
+				</a>
+				<a
+					href="/bio"
+					class={`text-sm font-medium transition-colors duration-200 ${
+						currentPath === "/bio" ? "text-white font-semibold" : "text-white/80 hover:text-white"
+					}`}
+				>
+					Bio
+				</a>
+				<a
+					href="/blog"
+					class={`text-sm font-medium transition-colors duration-200 ${
+						currentPath === "/blog" ? "text-white font-semibold" : "text-white/80 hover:text-white"
+					}`}
+				>
+					Blog
+				</a>
+			</div>
+
+			<!-- Mobile menu button -->
+			<button
+				id="mobile-menu-button"
+				class="md:hidden p-2 rounded-lg text-white hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-white/50"
+				aria-label="Toggle menu"
+			>
+				<svg
+					class="h-6 w-6"
+					fill="none"
+					stroke="currentColor"
+					viewBox="0 0 24 24"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M4 6h16M4 12h16M4 18h16"></path>
+				</svg>
+			</button>
+		</div>
+	</div>
+
+	<!-- Mobile Navigation -->
+	<div id="mobile-menu" class="hidden md:hidden bg-secondary">
+		<div class="px-4 py-3 space-y-3">
+			<a
+				href="/"
+				class={`block px-3 py-2 rounded-lg text-base font-medium transition-colors duration-200 ${
+					currentPath === "/"
+						? "bg-white/20 text-white font-semibold"
+						: "text-white/80 hover:bg-white/10 hover:text-white"
+				}`}
+			>
+				Home
+			</a>
+			<a
+				href="/bio"
+				class={`block px-3 py-2 rounded-lg text-base font-medium transition-colors duration-200 ${
+					currentPath === "/bio"
+						? "bg-white/20 text-white font-semibold"
+						: "text-white/80 hover:bg-white/10 hover:text-white"
+				}`}
+			>
+				Bio
+			</a>
+			<a
+				href="/blog"
+				class={`block px-3 py-2 rounded-lg text-base font-medium transition-colors duration-200 ${
+					currentPath === "/blog"
+						? "bg-white/20 text-white font-semibold"
+						: "text-white/80 hover:bg-white/10 hover:text-white"
+				}`}
+			>
+				Blog
+			</a>
+		</div>
+	</div>
+</nav>
+
+<script>
+	const mobileMenuButton = document.getElementById("mobile-menu-button");
+	const mobileMenu = document.getElementById("mobile-menu");
+
+	mobileMenuButton?.addEventListener("click", () => {
+		mobileMenu?.classList.toggle("hidden");
+	});
+</script>