Murray
fba9133d51
- 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
86 lines
3.1 KiB
Plaintext
86 lines
3.1 KiB
Plaintext
---
|
|
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>
|