Build portfolio site - Astro + Tailwind, trilingual structure

- Astro 5.x + Tailwind CSS 4.x
- Dark theme with warm orange accent (#f97316)
- i18n routing: /en/, /de/, /es/ (English content complete, DE/ES placeholders)
- Components: Navbar, Hero, Services (4 cards), Projects (4 case studies), About, Contact, Footer
- Fade-in scroll animations
- Mobile-responsive with hamburger menu
- All content from content/*.md integrated
- SEO meta tags, Open Graph tags
- Clean build with no errors

src/components/Navbar.astro

@@ -0,0 +1,85 @@
+---
+import LanguageSwitcher from './LanguageSwitcher.astro';
+import type { Locale } from '../i18n/utils';
+import { getTranslations } from '../i18n/utils';
+
+interface Props {
+  locale: Locale;
+}
+
+const { locale } = Astro.props;
+const t = getTranslations(locale);
+---
+
+<nav class="fixed top-0 left-0 right-0 z-50 bg-[#0a0a0a]/90 backdrop-blur-md border-b border-[#222]">
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="flex justify-between items-center h-16">
+      <!-- Logo/Name -->
+      <div class="flex-shrink-0">
+        <a href={`/${locale}/`} class="text-xl font-bold text-white hover:text-[#f97316] transition-colors">
+          Portfolio
+        </a>
+      </div>
+
+      <!-- Desktop Navigation -->
+      <div class="hidden md:flex items-center space-x-8">
+        <a href={`/${locale}/#services`} class="text-[#a1a1a1] hover:text-white transition-colors">
+          {t.nav.services}
+        </a>
+        <a href={`/${locale}/#projects`} class="text-[#a1a1a1] hover:text-white transition-colors">
+          {t.nav.projects}
+        </a>
+        <a href={`/${locale}/#about`} class="text-[#a1a1a1] hover:text-white transition-colors">
+          {t.nav.about}
+        </a>
+        <a href={`/${locale}/#contact`} class="text-[#a1a1a1] hover:text-white transition-colors">
+          {t.nav.contact}
+        </a>
+        <LanguageSwitcher locale={locale} />
+        <a href={`/${locale}/#contact`} class="bg-[#f97316] hover:bg-[#ea580c] text-white px-4 py-2 rounded-lg transition-colors font-medium">
+          {t.nav.cta}
+        </a>
+      </div>
+
+      <!-- Mobile menu button -->
+      <div class="md:hidden flex items-center space-x-4">
+        <LanguageSwitcher locale={locale} />
+        <button id="mobile-menu-button" class="text-[#a1a1a1] hover:text-white">
+          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
+          </svg>
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Mobile menu -->
+  <div id="mobile-menu" class="hidden md:hidden bg-[#111] border-t border-[#222]">
+    <div class="px-4 py-4 space-y-3">
+      <a href={`/${locale}/#services`} class="block text-[#a1a1a1] hover:text-white transition-colors">
+        {t.nav.services}
+      </a>
+      <a href={`/${locale}/#projects`} class="block text-[#a1a1a1] hover:text-white transition-colors">
+        {t.nav.projects}
+      </a>
+      <a href={`/${locale}/#about`} class="block text-[#a1a1a1] hover:text-white transition-colors">
+        {t.nav.about}
+      </a>
+      <a href={`/${locale}/#contact`} class="block text-[#a1a1a1] hover:text-white transition-colors">
+        {t.nav.contact}
+      </a>
+      <a href={`/${locale}/#contact`} class="block bg-[#f97316] hover:bg-[#ea580c] text-white px-4 py-2 rounded-lg transition-colors font-medium text-center">
+        {t.nav.cta}
+      </a>
+    </div>
+  </div>
+</nav>
+
+<script>
+  const button = document.getElementById('mobile-menu-button');
+  const menu = document.getElementById('mobile-menu');
+  
+  button?.addEventListener('click', () => {
+    menu?.classList.toggle('hidden');
+  });
+</script>